最近Web制作の学習を始めた方々の中で「模写コーディング」「サイト模写」というのがあるのを知りました。
コロナ禍の中、Web制作のスクールもオンライン化していると思いますし、そういった中で、教材としては確かに上手い方法だと思います。

ただ、「模写をしたサイトのデータ」について気になることがあり、ブログにまとめました。

見てもらいたい方

• 自分で作った「模写コーディング」の結果をインターネットに掲載している方
• 掲載対象はデザイントレースの「画像データ」も、「HTMLコーディング結果」の両方

仕事である以上「知らなかった」は通じない世界がある怖さを知る

冒頭で書きましたが「サイトの模写」をしている方は、Web制作に関わり始めた方（初学者・初心者）がほとんどだと思います。
そういった方々にとっては「Webサイトのデザインを作る」「WebサイトをHTMLで作る」ことが目標だと思います。

ですが、その方々が、完全に「自分の勉強のため」であっても許されない世界があります。

問題になってくるのはその「模写コーディング」をご自身の実績・ポートフォリオとしてインターネットに公開していることです。
さらに性質（たち）が悪いのは、「模写コーディング」の結果を実績・ポートフォリオにして、Web制作の仕事を請け負うことです。

「自分の勉強のため」だけであったとしても公開している時点で問題になりますし、実際、法律に抵触するので「知らなかった」では許されないケースが出てきます。

「模写コーディング」をしている皆さまが、自らが行っていることがどれぐらい危険なのか？を、この世界で26年仕事してきた立場からお伝えさせていただきます。

「模写コーディング」をした時に気をつけるべきこと：著作権編

「模写コーディング」を、HTMLやJavaScriptなどの手習いとしておこなうことは良いと思います。
ただ私が問題視しているのは「著作権」の部分です。

完全に架空の企業サイトなどであればいいかもしれません。
ですが、実在している企業や団体の場合には、そのサイトデザインは「著作物」に該当します。
著作物に該当する以上、最低限でも「著作権への侵害」になります。

そのため、下記の場合には「実在しているサイトの企業・団体から訴えられる」可能性あります……

• 「模写したサイト」が実在の企業の名称やロゴ、ラベルテキストやコンテンツテキストなどをコピペし、色味やレイアウトなどを流用をしている
• 上記の「模写したサイト」がインターネットに公開されている場合
• 上記の「模写したサイト」を見るためにアクセス制限をかけているが、閲覧のためのIDとパスワードが公開されている場合

といった場合は、全てアウトか、ギリギリでも「極めて黒いグレー」です。
アウトな場合がどうなるのか？といえば当該企業から「訴えられる」ことになります。

中には「模写したサイト」の上部などに「これは模写をしたサイトです。本来のサイトではありません」という記述をしている方もいるかもしれません。

仮にそういった情報を入れていたとしても、一般の方が「本物と誤認」をし、さらにその方が「模写元の企業」に連絡をした場合には、「営業妨害」となり、最悪は「威力業務妨害」に該当しかねません。

このブログをご覧いただけていて、もし貴方が「模写コーディング」をしているならば、ご自身が「ネットに公開＝誰でもみられる状態にする」というのがどういう影響があるのか？を真剣に考えていただきたいと思っています。

これを記載している2022年3月2日時点で、極めて危険だと思っている例が、Googleの検索で「慶應義塾大学病院 模写」と入れた時に出てくる「模写コーディング」のサイト群です。

見ていただければ分かりますが、どれも「慶應義塾大学病院」が知ったら、ほぼ間違いないくアウトだと思います。
それらを作っている方がこれをご覧いただけていれば、即刻この下に記載している対応を実施していただきたいと思います。

これ以外も「Apple 模写 ポートフォリオ」みたいな、情報統制にメチャクチャ厳しいグローバル企業まで対象になっているようです。（サイトがかっこいいから、ってことなのは分かるのですが……）

「模写コーディング」をした時に気をつけるべきこと：発注側への心象編

発注者側がその「模写コーディング」のサイトを見た時にどう思うか？を逆算する

「模写コーディング」をしている方で、それを自身の「実績」「ポートフォリオ」として掲載し、「こういった実績があるので、私に発注してください」という方がいます。
リアルな案件としての実績がない以上、手習いしか見せるものがないので、それを「実績」「ポートフォリオ」として見せたい気持ちは十分に分かります。

ですが、これを発注者側の気持ちで考えてみてください。

• 著作権のことを分かっていない人に発注したら、納品物が「著作権侵害」のものの可能性がある
• 依頼をしたものが「著作権侵害」だった場合、「発注主」側が訴えられる
• としたら、著作権のことも分かっていない人に、怖くて発注なんかできない

となるのは想像ができないでしょうか……？

つまり「模写コーディング」を堂々と掲載している人、ましてやそれがリアルに存在しているサイトを模写元にしている場合、見識ある発注主は、ほぼ100％発注しません。
即ブラックリスト行きです。

下手をするとSNSや、発注側の人々の酒席などの話題で「この人には発注しない方がいい」というレッテルすら知らないうちにはられているかもしれません……

このブログを書くことになったのは、2022年3月1日ごろからある程度経験があるWeb制作に関わる方のTweetが発端でした。
その頃からの「サイト模写」をキーにしたTwitterのタイムライン（一旦2022年3月5日までで絞ってます）はこちらですが、色々な方のご意見をぜひ見てみていただきたいと思います。

またこのブログをTwitterで引用いただけている方のコメント付きのTweetはこちらですが、やはり経験者の方は「模写を事例というのは違うと思う」的なご意見が多いように思われます。

ましてや「ポートフォリオ」とは本来「作品集」「実績集」を意味します。
「サイトの模写」はあくまで「課題」であり「事例」でも「ポートフォリオ」にもなりえません。 いくら「実装の練習結果の作品」といっても、著作権的には言い訳はできないのです。

リアルな仕事ではないものを「実績」「ポートフォリオ」として見せている人は、やはり発注者側としては、

となってしまいます。

実在しているサイトじゃなければいいんじゃないの？

著作権的な部分を論点にするならば「では、実在していないサイトであればいいんじゃないの？」と考えるかもしれません。

ですがここでも発注者側の視点で考えてみてください。

• 発注者側としては「実績」「ポートフォリオ」と言われれば、それは「実際の仕事」の結果と思っている
• 「実在していないサイトを作った」のはどこまでいっても個人的な勉強結果

でしかありません。
そして、これもまた少し考えれば分かるのですが、「スクールで複数の人を相手に出された課題」の場合、「見た目が同じ」になるものが生徒の人数分だけ複製され、それがインターネットに公開されている訳です。

ではそれを検索してみてくだい。

• Googleで「蒼乃建設」を検索した結果
  • なお上記の「蒼乃建設」は実在していない「サイト制作の練習用」のサイトのようです。
  • ただ、知らずに上記の検索結果をみると「模写サイト」「デモサイト」等の記述もあまりないので、極めて違和感があると思います。

これをもし発注者が見たら、どう思うでしょうか？

となること請け合いです。

自分視点でしか見えていない場合、スクールの隣の人が自分と同じ課題に取り組んでいて、それを公開しているケースのことが見えなくなり、結果インターネットの世界では、むしろマイナスのブランディングになってしまいます。

「見つかってないから自分は大丈夫」とはならず、潜在リスクを抱えている

このように書きましたが、このブログをご覧の方の中には「模写コーディング」の結果を事例・ポートフォリオとして出していながらも、それでも案件を受注をしている方もいるでしょう。

ですが、それは単純に「ラッキー」なだけです。
貴方が「著作権侵害」をしていることに発注主が「気が付いていない」だけです。

もし「模写コーディング」の結果を「実績」「ポートフォリオ」として出している方が、

といったことを掲げているならば、それは「大ウソを付いている」と言われても仕方ないことだと思います。

となると、未経験の方は「じゃぁ、どうやって仕事を取ればいいんだよ！？」となるかもしれません。
それはご自身で考えてください。

リアルな仕事を全くしたことがないまま「フリーランスや起業をして独立をする」ことができるのは、「実績として出すものがないけど、仕事を取る」方法を考えられる人だけです。

リアルな商売としての実績でもない上に、著作権を侵害をしているものを自分の実績として出している方は、どこかでそれがバレた時に、甚大なしっぺ返しを食らうことになると思います。

どこまでいっても貴方に依頼をしたいと思う「発注者」側の感情や判断基準を元にして営業をおこなうべきだと思います。

「模写コーディング」をする場合でも、最低限やっておくべき対策

「模写コーディング」を、純粋なスキルアップのためにすること自体は問題ではありません。 それを「誰でも見られる状態」にしていたり「自分の実績にする」ことが問題なのです。

であれば、最低限考えておくべき対応がありますので、それをご紹介いたします。

1.Web制作者として「公開する」ことの意味とリスクを理解する

まずWebサイトを作るということは、デザインであったり、意匠、またHTML的な部分も含め、「著作権」に関わることをしているのだ、というのを理解してください。 そして、そのことを「知らなかった」では通じない世界だというのも理解してください。

ここをご覧頂いている方は「Web制作でお金をいただく」ことをしているか目指しているのだと思います。
となるとそれは「商売」です。

商売の世界に踏み込んでいる以上、法律の範囲で仕事をしなければなりません。
再三いいますが「知らなかった」では通じませんし、訴えられた場合、最悪貴方が「支払うことができない」額の費用請求を受けたり、それ以外にも法的な処罰をうけます。

「フリーランス」になるのはいいと思います。
ですが、

• フリーランス＝個人事業主は、責任の範囲が「無限責任」の事業体である（事業を通して発生した債務全てを負う）
• 商売に関する法律やルール、商習慣を「知らなかった」では通じない
• 知らなかったとしても抵触すれば、報いを受けなければならない立場

です。
数年〜十数年前には「フリーランス」「独立」は、企業に勤め、制作に関するスキルはもちろん、商習慣的な部分も企業の中にいることで「無意識でも学んだ」経験を元にして行う方がほとんどでした。

しかし最近は「自学学習をしたあと、実務経験もないまま直接フリーランスになる」という方が増えています。
そういった方は「お金を稼がないといけない」ばかりになり、強制的に背負っているリスクを全く知らないし、気にもかけないままの方も多いように見受けられます。

今回の事を元として「背負うリスク」の部分について視野を広げていただきたいと思います。

2.基本的にはそもそも公開されているWebサーバにはアップしない

（2022年3月3日 13:56記述変更）
本論でいえば、模写サイトを「公開するしない」ではなく、公開されているWebサーバにアップするべきではありません。

というのは、利用しているのがレンタルサーバ会社が提供しているサーバの場合には、利用契約時の「契約約款」でそれがうたわれているためです。

明示的に「著作権」という文言ではありませんが、さくらインターネット社の「基本約款」には下記の記述があります。

さくらインターネット社「基本約款」の「第１５条（禁止事項）」より引用

またこの話題がTwitterで盛り上がっている2022年3月3日時点で、ある方がエックスサーバ社にもお問い合わせをいただいたようです。
エックスサーバ側の回答は「BASIC認証にかかわらず（他人が閲覧できる状態かどうかにかかわらず）アップロードするなら著作者の許諾を得てくださいとのことでした。」だったそうです。

つまり、エックスサーバをご契約しているならば、実在のサイトの模写サイトをアップしているだけでNGになります。

レンタルサーバを利用している場合、そのサーバにアップロードするデータは、レンタルサーバ会社の約款に従う必要あります。

約款の詳細はレンタルサーバ会社ごとに異なりますので、ご自身が契約のサーバの約款を改めて確認するべきです。

そしてさくらインターネットさんの約款を例にするならば「知的財産権」が記述されています。
この「知的財産権」には「著作権」が包含されています。

特許庁「知的財産権について」のサイトより引用

ですので、ご利用のレンタルサーバの約款で「知的財産権」についてNGをうたわれている場合には、サーバにアップすることすらしてはいけないことになります。

ですので、模写元がリアルの企業の場合には、

• 実在する企業への著作権侵害
• レンタルサーバの約款への違反

の両方に該当してしまう可能性あります。
以上より、実在しているサイトの模写データは、基本的には「Webサーバにすらアップしてはいけない」と考えるべきです。

模写元「企業」への対策だけでいえば、後述する「BASIC認証」をかければいいのでは？と思うかもしれません。

ですが、閲覧するための情報が流通すれば、それは事実上意味がなくなります。
また、やはり後述するGoogleにINDEXされないようにmeta要素で「noindex、nofollow、noarchive」を入れてる対策をしても、URLを直接叩かれれば見えてしまえば意味がありません。

その意味では、やはり公開されているWebサーバに上げるべきではありません。

自学学習としての「模写コーディング」であれば、自分のパソコン内にWebサーバを立ち上げて、そこで動作確認をしましょう。
複雑な設定などは不要な「MAMP」といった自分のマシン内だけで動いているWebサーバを立ち上げるツールもあります。

「MAMP」が何か？はGoogleで検索してみてください。
これもWeb制作を仕事とするつもりならば、ほぼ間違いなく知っておかなければならない情報の一つです。

また仮にどうしても公開されているWebサーバにアップしておかなければならないとしても、必要がなくなったら即刻削除するべきです。それほどリスクがあるものを扱っている、ということを理解していただければと思います。

3.BASIC認証をかける

（2022年3月3日 13:56記述変更）
前述の通り、ここで説明するBASIC認証対策をしたとしても「レンタルサーバ」の約款への違反対策にはなりません。

厳密な意味で許容される場合をあえて考えるならば、「どこの企業のサーバも利用せず（レンタルサーバ・VPSなど含む）、自らのマシンで公開Webサーバを立ち上げている」、もしくは「約款上は問題がないサーバ使っている」といったケースに限定されると思います。

何度もいいますが「実在している模写サイト」をWebサーバに掲載するべきではありません。
ですが、スクール側の要求などでどうしても公開しなければならないケースにおいて「一時的に」対応する手段として下記を記載します。

（そもそも、実在するサイトの模写を課題にしてくるスクールは即刻辞めるべきです）

HTML的な部分での制御の話しです。
「模写コーディング」の結果を「公開している」ことが問題な訳です。

であれば、「非公開」にしてしまえば、まずは問題は回避できます。
その施策として簡単なのは、その「模写コーディング」の結果ページに対して「BASIC認証」をかけることです。

この記事は「Web制作をこれからやっていく、やり始めた方」向けに書いていますので「BASIC認証とは何か？」「どうやって実装するのか？」は各自確認していただきたいと思います。
もしそれすら調べることができない、もしくは実装対応ができないなら、Web制作には関わらない方がいいと思います。 （「BASIC認証」はそれぐらい初歩中の初歩の話しです）

また前述したとおりで、BASIC認証をクリアするための情報を誰でも閲覧可能な状態にしているのは、事実上公開しているのと変わりません。
BASIC認証を施した上で、閲覧するための情報の提供は「問い合わせをしてきた方」だけにする、といった運用にするべきです。

2022/03/03 12:58補記

「BASIC認証をかけるではなく、ネット上から消すべき」というご意見もいただきました。
初稿を記述時点ではレンタルサーバ側の約款への違反という観点が抜けておりましたのでBASIC認証のことを記述しましたが、再三記述する通り、基本的にはネット上に掲載するべきではありません。

あえて「BASIC認証」の手法を書いたのは、今後リアルな案件の時のテストアップ方法になりえると考えたからです。

リアルな案件でテストアップする際、クライアント側が「デザインでも実寸状態をブラウザでみたい」場合や、ましてや実際のHTML版を動作確認をしたい場合があります。

その際にこのBASIC認証で一時的に非公開にする方法は比較的一般的です。
その意味では「BASIC認証が正しく設置され、閲覧用の情報が非公開」であれば、ネット上では不特定多数の人に見られる事はありません。

真面目なスクールなどでは「模写サイト」をネット上にあげて課題として提出する場合もあるかと思います。
（そういった場合、現状でも真面目なスクールであれば、何かしら認証をかける指示があるとは思っていますが…）

その観点でこの方法を書きました。
ですが、模写サイトとしては、後述する「一般の方が検索してもでてこないし、直接URLを叩いても見られない」状態にすることであることには変わらないことにはくれぐれもご留意ください。

4.HTMLのmeta要素に「noindex、nofollow、noarchive」を入れる

同じくHTML側の話しです。
「公開している」ことは問題ですので、前述のBASIC認証で非公開にするのは必須です。
その上で、公開している別の観点の問題は「GoogleにINDEXされてしまう」ことです。

これも絶対に避けなければなりません。
ですので「模写したサイトのHTML」にmeta要素で「noindex、nofollow、noarchive」をいれ、Googleを始めとした検索エンジンが「検索にも来ないし、INDEXもされないし、フォローもされない」状態にしておくべきです。

これで「ネットで検索しても出てこない」状態になります。

5.HTMLのtitle要素、description要素、ページの表示内容に「模写」や「デモサイト」であることを明記する

前述までの対策は行った上での対応ですが、下記も行うべきです。

• title要素、description要素には、出来るだけ前方に「これは模写です」「これはデモサイトです」的なコメントを入れる
• サイトのコンテンツ部分の上端等に「これは制作の練習用に作った『模写サイト』『デモサイト」です、といった表示を目立つレイアウトで入れる（できればサイトをスクロールさせても、上にその表示が常に出続けているようにする、とかの方がいいです）

これらを行うことで、貴方がBASIC認証のIDとパスワードをお渡しした人も、好意的な方であれば「あぁ、これは練習用に作ったものなのね。ではソースをみて、HTML的にどう作っているか？の部分だけでも見ようか」となってくれるかもしれません。
（一般にはそれでも「うん、でも模写を見せられてもなぁ……」と思われると考えている方がいいと思います）

重要なのは「一般の方が検索してもでてこないし、直接URLを叩いても見られない」状態にすること

「模写コーディング」の結果を実績、ポートフォリオにしたい気持ちは分かります。
ですが、前述の通りで、それは著作権に抵触します。
最悪「威力業務妨害」にまで触れます。

これをご覧いただいた良識ある方は、兎にも角にも「検索しても出てこないし、直接URLを立ていても出てこない」状態をゴールにしてもらいたいと思っています。
そうすると「実績がないので出せるものがない、そうすると見込み客に対してネット上でプロモーションができないじゃないか！」と思うかもしれません。

しかしそのために背負うリスクがどれぐらい大きいか？ということを考えてもらいたいのです。

またフリーランス独立でも起業でもすることになるのは「商売」です。
商売を始めた以上「初学者」「初心者」「未経験者」は全く関係ありません。
全ての企業と並列で評価されます。

また実際に仕事を得る方法は、同じWeb制作でも、その人・企業ごとに全部違います。
「自分に発注をしてもらえる人を見つける」ことができるのは「どこかで学んだ方法を行う」ではなく、「自分でどうすれば仕事を受注できるか？」というのを考え、成功させられた人だけです。
なぜなら「どこかで学んだ方法」が未来永劫続く訳もなく、その方法論が通じなくなる時が必ずきます。
その時延々とノウハウ・Tipsを探しているようでは、恐らく安定した仕事をしていくのは難しいと思います。

まして今回の手法は「著作権侵害」ですので、犯罪めいたものであり「最初の一歩なのだから仕方ない」で許されるものでは到底ありません。

今回のことを例として、ご自身の商売の仕方を含めて考えるきっかけにしていただければと思っております。

謝辞

このブログの初稿は「2022年03月03日 0時0分」に公開をいたしました。
その後、ブログの主題である「模写コーディングの結果をネットに掲載している」方々へ向けて、Twitter上のWeb制作を生業にしている多くの諸先輩方から記述をブラッシュアップする多数の建設的なご意見をいただきました。
私一人では到底書ききれなかった、知り得なかった情報も提供をいただけたこと、インターネットの本当に良いところであると改めて感じております。

文面については適宜、追記編集をさせていただいております。
多数の方々のご意見を参考にさせていただいており、すべての皆様のお名前を書きあげることが難しく、この場をもって謝辞に返させていただければと思います。

• 当ブログのURLを掲載していただいているTweetの一覧
• Twitterで「サイト模写」等での検索結果Tweet一覧
• 上記ではおいきれないけども、私のTwitterアカウントにメンションやリツイートでコメントをいただいた方（リンクなしです）

本当にありがとうございます。 年齢関係なく、これからWeb制作の従事しようとされる方々が、この情報で最終的に少しでも守られることを切に願っています。

Web制作・Webディレクションでの疑問・質問がある方へ

このブログを記載している名村は、2020年より「Webディレクションやってますラジオ」というポッドキャストをさせていただいています。

このブログのナビゲーションの「ラジオ」覧をご覧いただければみていただくことができます。

一回30分、毎週金曜日の23時〜0時ごろに配信をしており、Spotify、Apple Podcast、amazon musicを始めとして様々なプラットフォームで配信をしています。

ポッドキャストではリスナーの方々からいただいた「Webディレクション・Web制作に関する疑問・質問」に私がこれまでの経験を元として基本的には全てお答えしています。

またポッドキャストで取り上げたご質問は全てブログにも転載しております。
もし、このブログの件のみならず、疑問・質問があれば、下記のフォームからラジオネームを添えてぜひポッドキャストへご質問をお送りください。

少しでもWeb制作に関わる方々が、今後自分の仕事として続けていけるように私が分かる範囲にはなりますが、情報はだしていきたいと思っています。