▶ 3日で初案件PR
この記事でわかること
Webデザインの模写が著作権侵害になる3つの条件と、非公開学習なら問題が起きにくい理由がわかります。ポートフォリオ・SNS公開で使える「模写であることの明示」「出典記載」「権利者確認」の具体的な運用方法を習得できます。クライアント案件で契約前に確認すべき4項目と、出典テンプレートをそのまま使えます。
Webデザインの模写は、学習目的で非公開の範囲なら著作権侵害になりにくいです。SNSやポートフォリオへの公開方法を誤ると侵害リスクが生じます。この記事では、公開・掲載・クライアント案件ごとに安全な運用基準を解説します。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Webデザインの模写は、非公開で学習目的に限れば著作権上の問題は起きにくいです。SNS投稿やポートフォリオ掲載では「模写である旨の明示」「出典の記載」「権利者への確認」の3点が最低限の基準になります。クライアント案件では、納品前に著作権の帰属先・譲渡条件・ポートフォリオ掲載可否を契約で明文化することが実務上の出発点です。
最初に確認すること
模写したデザインをどこかに公開したいと考えている場合、まず「学習用として手元に置いておくのか、外部に見せるのか」を区別してください。非公開なら著作権の問題は起きにくく、公開するなら後述の3基準を適用します（確認時間：約3分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 模写が著作権侵害になる条件を知りたい | Webデザイン模写と著作権が問題になる3つの条件 | 4分 |
| ポートフォリオへの掲載可否を判断したい | ポートフォリオ掲載は公開方法で侵害リスクが変わる | 4分 |
| SNS公開のリスクと対処法を知りたい | SNS公開は自作表示と無断転載の2点で侵害になる | 3分 |
| 安全な模写の運用方法を実践したい | 侵害しない模写学習のハック5選 | 8分 |
| クライアント案件の権利確認をしたい | クライアント案件での著作権確認は契約時が唯一の機会 | 5分 |
Webデザイン模写と著作権が問題になる3つの条件
Webデザインに著作権が発生するという事実は、多くのデザイナーが感覚では理解しています。実際にどこから問題になるかの線引きは、思いのほか見えにくいものです。
著作権は制作した時点で自動発生する
著作権は、作品を創作した瞬間に自動的に発生します。登録や申請は不要です（著作権法第17条・第51条。文化庁：著作権制度の概要）。Webデザインのレイアウト・配色・タイポグラフィの組み合わせは、創作性があると判断されれば著作物として扱われます。したがって、既存のWebサイトを模写する行為は、その対象が著作物であれば「複製」にあたります（日本ユニ著作権センター：模写の複製性）。
「デザインは誰でも似たものになる」という認識は実務上よく聞きますが、配色やレイアウトがほぼ一致する場合は複製と判断されるリスクがあります。なお、著作権侵害の損害賠償は画像1点でも数万～数十万円に及ぶケースがあるため、リスクを正確に把握しておくことが重要です。
私的使用の範囲内なら複製が認められる
著作権法第30条は、私的使用（個人または家庭内で使用することを目的とする場合）のための複製を認めています（文化庁：著作権制度の概要）。手元のPC上で非公開のまま模写の練習をする行為は、この私的使用に該当します。問題が生じるのは、その複製物を外部に公開・配布する段階です。
学習目的であることは、公開しない限りは著作権上の免責根拠として機能しやすいです。学習目的の意図があっても、公開した時点で私的使用の範囲を外れ、複製公表として扱われるリスクが生じます。
公開・公表の形態が侵害リスクを決める
模写において問題が起きる条件は、大きく3点に整理できます。第1に、他者が著作権を持つ著作物を無断で複製し外部に公開すること。第2に、複製物を「自作」または「オリジナル」として表示し、第三者に誤認させること。第3に、公開した複製物が商業目的で使われること、または権利者の利益を害する形で拡散することです（日本ユニ著作権センター：模写の複製性）。
この3点のうち1つでも該当すると著作権上の問題になりうるため、公開を検討する際はこの条件に照らして判断することが実務的な出発点です。著作権とはわかりやすく解説した記事では、侵害を避ける実務ルールを5点にまとめているので、あわせて参照してください。
CHECK
▶ 今すぐやること: 過去に公開した模写が「自作表示」になっていないか確認し、なっている場合は「模写：〇〇（出典）」と訂正する（5分）
Q: WebデザインのレイアウトはWebデザインに著作権が発生しますか？
A： はい、創作性の有無によって個別に判断されます。単純な格子状の配置は保護されにくい一方、独創的な要素の組み合わせは保護対象になりうるとされています（日本ユニ著作権センター）。
Q： 模写と著作権侵害の違いを一言で説明すると？
A： 非公開で練習目的に行う模写は私的複製として許容されやすいです。公開・販売・自作表示をした時点で著作権侵害になりうるという違いがあります。
ポートフォリオ掲載は公開方法で侵害リスクが変わる
ポートフォリオに模写デザインを載せたいと考えている人は多く、実際にどう扱えばよいか迷う場面は共通して起きています。
模写であることを明示しないと誤認リスクが生じる
ポートフォリオに模写作品を掲載する場合、最も危険なのは「自作・オリジナル」として見せることです。閲覧者がオリジナル作品と誤認する状態は、著作者の氏名表示権や同一性保持権などの著作者人格権を侵害します（Webデザイン著作権の基礎｜magazine.unionnet.jp）。
「参考に見せるだけだから大丈夫」という感覚はよく聞きますが、誰が見ても自作に見える状態は実際にはリスクがあります。
出典明示と模写表記を組み合わせるのが現実的な対処
模写をポートフォリオに掲載する場合、実務上とられている対処は2つの形が一般的です（ポートフォリオに載せる模写デザインの作り方と注意点｜webdeza.com）。掲載する作品に「模写：〇〇社Webサイト（参考元URL）」と明記する形、または「制作プロセス記録」として技術習得の証拠として示す形です。これらの明示により、第三者の誤認を避けつつ、学習の記録として掲載できます。
出典を記載しても権利者が掲載を問題視する可能性はゼロではありません。不安がある場合は権利者に掲載確認を取ることが確実です。なお、フリーランスのポートフォリオ作成では、作品不足を仮想案件・模写・オリジナル作品で解決する方法を詳しく解説しています。
権利者への事前確認がリスクをゼロに近づける唯一の手段
掲載許可を権利者から直接取ることが、著作権リスクをゼロに近づける唯一の現実的な手段です。フリーランスのデザイナーの中には、模写対象のサイトを運営する企業に「学習目的で模写したデザインをポートフォリオに掲載したいのですが、出典を明記した上で可能でしょうか」と問い合わせを行うケースもあります。断られることも珍しくありませんが、確認を取った実績はリスク管理の記録として機能します。
「学習目的の模写はOKでも、公開方法に注意が必要で、模写であることを明示すべきだとされています」——これは実際のポートフォリオ運用者から多く聞かれる声です（ポートフォリオに載せる模写デザインの作り方と注意点｜webdeza.com）。
Q： ポートフォリオに模写を載せる際、出典を書けば著作権侵害を回避できますか？
A： いいえ、出典を明記することで誤認リスクは下がりますが、それだけで著作権侵害を完全に回避できるとは言い切れません。権利者への確認が取れている場合に、より安全に掲載できます。
Q： 模写作品をポートフォリオに載せる際に一番気をつけることは？
A： 「自作・オリジナル」と誤認される表示を避けることです。作品名・キャプション・説明文に「模写」「参考元：〇〇」を明記してください。
SNS公開は自作表示と無断転載の2点で侵害になる
SNSに模写デザインをアップしたいと考えたとき、「出典を書けば大丈夫だろう」と判断してしまうことは珍しくありません。SNS公開のリスクは出典の有無だけでは解決しない面があります。
SNSへの投稿は公衆送信にあたる
SNSへの投稿は、不特定多数が閲覧できる状態に置く「公衆送信」にあたります（著作権法第23条）。これは私的使用の範囲を大きく超えるため、他者の著作物の複製をSNSに投稿することは、原則として著作権者の許諾なしには問題が生じうる行為です（Webデザイン著作権の基礎｜magazine.unionnet.jp）。
画像として保存・投稿する行為は複製と公衆送信の両方に該当
デザインを模写してスクリーンショットや静止画として保存し、それをSNSに投稿する流れは、「複製（保存）＋公衆送信（投稿）」の2段階で著作権に関わります（日本ユニ著作権センター）。模写で作ったデザインファイルをSNSに上げる場合も同様です。
模写であることを明示しても、権利者が許諾していない状態での公開は、権利者側から見ると無断公表に変わりありません。出典の記載は「誠意の表示」ではありますが、法的な許諾とは別の話です。出典を記載したにもかかわらず削除依頼が来たケースの相談が報告されることは珍しくありません。
SNS公開で比較的安全な運用は「制作プロセス動画」形式
模写の経過を動画で記録し、最終完成物の画像をそのまま投稿するのではなく「どう作ったか」の制作プロセスをテキストや動画で共有する形は、完成物の複製公表とは異なる文脈で扱われます（模写コーディング公開時の注意｜web-directions.com）。ただしこれも、制作プロセスの中に対象デザインをそのまま映像として含める場合は同様のリスクが生じます。
Q： X（旧Twitter）に模写デザインを投稿する際の注意点は？
A： 模写であることの明記と出典記載は最低限の対処です。権利者が掲載を問題視した場合には削除依頼が来る可能性があります。権利者への事前確認が取れていない投稿は、常にそのリスクを伴います。
Q： Instagramで「練習記録」として模写を投稿するのは問題ありますか？
A： 「練習記録」という目的があっても、SNSへの投稿は公衆送信にあたるため、著作権上の問題が生じます。模写であることの明記と出典記載を行いつつ、権利者への確認が取れている場合に安全に投稿できます。
PR提供: 日本デザインスクール（デザスク）
模写か著作権侵害かを3分で判定する診断フロー
「この模写、公開していいのか？」と迷う状況は、フリーランスのデザイナーが実際に直面するケースとして多く見られます。以下の診断フローで、自分の状況に応じた判断の目安が得られます。
Q1: 模写したデザインを外部（SNS・ポートフォリオ・クライアントへの提示等）に公開する予定がありますか？
Yesの場合はQ2へ進んでください。Noの場合はResult A（非公開であれば私的複製として問題になりにくい）です。
Q2: 公開する際に「模写であること」と「参考元の出典」を明記しますか？
Yesの場合はQ3へ進んでください。Noの場合はResult B（自作・オリジナルとして誤認される状態であり、著作者人格権侵害のリスクがあります）です。
Q3: 権利者（元デザインの制作者・権利保有者）に掲載・公開の許可を確認しましたか？
Yesの場合はResult C（確認が取れており、明示もある。現時点でのリスクは低い状態）です。Noの場合はResult D（出典明示はあるが許諾は未確認。削除依頼などのリスクが残る状態）です。
Result A: 非公開の学習用として使う場合、著作権上の問題は起きにくいです。手元で練習を続けて問題ありません。
Result B: 自作表示の状態での公開はリスクが高いです。今すぐ「模写：〇〇（出典）」と表示を修正するか、一時的に非公開にしてください。
Result C: 現時点での基本的なリスク対策が取れています。権利者から今後方針変更があった場合に備え、許可を取った記録（メール等）を保管してください。
Result D: 出典明示があっても、法的な許諾を取っていない状態です。権利者にメールで掲載確認を取るか、万が一の削除依頼に備えた運用を意識してください。
Q： 権利者への確認はどのような方法で行えばよいですか？
A： 対象サイトの「お問い合わせ」フォームやメールで、「学習目的で模写したデザインをポートフォリオに掲載したい」旨を具体的に伝える方法が現実的です。返答内容はメールで保管しておくと記録として機能します。
Q： フリー素材を使った模写は著作権の問題が起きませんか？
A： いいえ、フリー素材でも、ライセンス条件（商用利用可否・再配布可否・クレジット表記の要否）が各素材ごとに異なります。「フリー＝何でも使える」ではないため、利用前に各素材サイトの利用規約を確認してください（PIXTAガイド：著作権入門）。画像フリーアイコンを商用利用する際の3条件も同様の考え方で判断できます。
侵害しない模写学習のハック5選
【対象】: SNSやポートフォリオ公開を前提にせず、まず学習用途に限定して模写を行いたい人
【手順】:
模写した成果物を保存するフォルダを「学習用・非公開」と命名し、公開フォルダと分けて管理します（約5分）。GitHubに上げる場合はリポジトリをPrivateに設定し、公開になっていないことを毎回確認します（約3分）。BASIC認証やIPアドレス制限を活用して、制作サーバーへのアクセスを自分だけに限定します（初回設定約15分）（模写コーディング公開時の注意｜web-directions.com）。
【コツと理由】: 非公開での学習に留める運用にすることで、著作権上の問題が起きにくい状態を維持できます。公開と学習を最初から分離して設計することで、誤って公開ステータスになるミスを防ぐ効果もあります。
【注意点】: BASIC認証をかけていても、URLを誰かに共有した時点で「公開」とみなされます。学習用の模写は「誰にも見せない」ことを基本ルールにしてください。GitHubのPublicリポジトリに誤って上げてしまった場合、削除してもキャッシュや外部クローラーがすでに取得している可能性があるため、最初からPrivate設定で管理することが出発点です。
ハック2: 配色・構成・素材を変えた別作品として制作する
【対象】: 模写で得たスキルをポートフォリオに掲載可能な形で残したい人
【手順】:
参考にしたサイトのレイアウト構造を分析し、「なぜこの配置なのか」を言語化するメモを作ります（約10分）。色・フォント・素材を別のものに差し替え、テキストや画像も架空のコンテンツに変えます（約30分〜）。元のデザインと並べて見比べ、「見た目がほぼ同じ」になっていないかを確認し、異なるデザインとして成立しているか判定します。
【コツと理由】: 参考にした要素を取り込みながら自分の作品として制作し直すアプローチをとると、ポートフォリオへの掲載がしやすくなります。同時に、デザインの意図を読み解く力も育ちます。Webデザインの配色を3色で設計する方法を参考にすると、差し替えた配色の根拠を言語化しやすくなります。
【注意点】: 配色だけ変えてレイアウトや全体の印象が元サイトとほぼ同じ場合は、依然として複製に近いと判断されるリスクが残ります。「色を変えれば別作品」ではなく、全体の構成が実質的に異なる状態を目指してください。
ハック3: 素材の利用規約を権利別に一覧化して管理する
【対象】: フリー素材・フォント・アイコンを複数使っており、利用条件の管理が曖昧になっている人
【手順】:
使用した素材ごとに「素材名・提供元URL・商用利用可否・クレジット要否・再配布可否」の5列スプレッドシートを作ります（初回約20分）。新しい素材を使うたびに、使用前にスプレッドシートに追記する習慣をつけます（1素材あたり約3分）。クライアントへの納品前に、スプレッドシートをチェックし、ライセンス条件を満たしているかを確認します。
【コツと理由】: 実務では商用利用不可・クレジット表記必須・改変禁止など様々な条件が素材ごとに設定されています。一覧化して管理することで、納品後に「実はライセンス違反だった」と発覚するリスクを減らせます（PIXTAガイド：著作権入門）。
【注意点】: 有料素材を購入した場合でも、素材データをそのまま納品物に含めて渡してはならないケースがあります。購入ライセンスの範囲を確認せずに納品すると、クライアントが素材を二次利用した際に問題が生じます。「有料素材を購入しても、素材データをそのまま納品に含めてはいけない」——これは実務上の注意点として広く共有されています（web制作でのあるある著作権｜note）。
ハック4: 模写コーディングの公開に認証制限を使う
【対象】: コーディング練習の成果を面接や学習コミュニティで共有したいが、一般公開はしたくない人
【手順】:
学習成果のURLを発行するホスティングサービスの設定で、BASIC認証または閲覧パスワードを設定します（約10〜15分）。URLを共有する際は、「練習目的の模写コーディングです」という説明文とともに渡します。共有先が特定できる状態（採用担当者・メンター等）にのみ渡し、SNSや掲示板等の不特定多数が閲覧できる場所への投稿は避けてください。
【コツと理由】: 公開リポジトリに模写コードを上げると、意図せず著作物を公衆送信した状態になります。認証制限で閲覧者を限定する運用にすることで、学習の記録を必要な相手にだけ見せられます（模写コーディング公開時の注意｜web-directions.com）。
【注意点】: 認証パスワードを勉強会やSNSで共有した時点で、実質的な公開と変わりない状態になります。「限定公開」の運用は、共有先を厳密に管理する前提で成立します。面接のポートフォリオとして見せる場合も、「模写である」ことを口頭でも説明する習慣をつけてください。
ハック5: 模写でつまずく「出典の書き方」を定型化する
【対象】: 模写を公開する際に出典の書き方を毎回迷い、結局なんとなく書いてしまっている人
【手順】:
ポートフォリオ掲載用の出典テンプレートを1つ作り、毎回使い回せる形にします（後述のテンプレートを参照）。出典テンプレートに元サイトの情報を当てはめ、作品キャプションまたは説明文に必ず添付します。権利者に確認を取った場合はその記録（返信メール等）を保管し、ポートフォリオの管理メモに紐付けておきます。
【コツと理由】: 定型を先に作ることで、書き忘れと表記の揺れを同時に防げます。
【注意点】: 出典テンプレートを使っても、権利者への確認が取れていない状態では削除依頼のリスクはゼロになりません。出典記載は「誠意の表示」として機能しますが、法的な許諾ではありません。「出典を書いたから安心」と判断するのではなく、可能な範囲で確認を取ることをあわせて行ってください。
出典テンプレート:
【模写作品】
参考元：〇〇株式会社 [Webサイト](https://example.com)
制作目的：Webデザイン学習のための模写練習
この作品はオリジナルではなく、上記サイトを参考に制作したものです。
権利は参考元サイトの制作者に帰属します。
なぜこの表現か:「模写である事実」「元サイトの特定」「オリジナルでないことの明示」「権利の帰属先」を一括で表明できます。
アレンジ例: 模写コーディングの場合は「デザインおよびHTMLの構造を参考に制作しました」と追記すると、コーディング練習であることも明確になります。
クライアント案件での著作権確認は契約時が唯一の機会
納品後に「あのデザイン、自分の実績に使えるかな」と思ってから確認しようとすると、すでに手遅れになっているケースは実務上よくあります。
著作権の帰属先は契約で決まる
フリーランスがクライアントのWebサイトをデザインした場合、著作権は原則として制作者（フリーランス）に帰属します。職務著作（著作権法第15条）に該当する場合や、契約書に「納品時に著作権を譲渡する」条項がある場合、権利はクライアントに移転します（Webサイト制作における著作権の基礎｜tane-creative.co.jp）。
「契約書を交わさないまま仕事が始まってしまった」という経験を持つフリーランスは少なくありませんが、その状態では後から著作権の帰属をめぐって認識のズレが生じやすくなります。著作権譲渡契約書テンプレートを事前に準備しておくと、契約段階でのトラブルを防ぎやすくなります。
契約前に確認すべき4点
実務上、契約締結前に確認しておくべき項目は4点あります（フリーランス・デザイナーの権利・契約・プラットフォーム｜note）。
第1に、著作権の帰属先です。「納品後も著作権は制作者側に留まるか、譲渡するか」を明文化します。第2に、ポートフォリオへの掲載可否です。「完成後に自分の実績サイトや提案資料に使えるか」を確認します。第3に、著作者人格権不行使の範囲です。「クライアントが納品後にデザインを修正・改変する際、制作者の同意なしに変更できるか」を取り決めます。第4に、修正条件の範囲です。「どこまでの変更を無償で対応するか」を事前に決めておきます。
「契約締結前に、著作権譲渡・ポートフォリオ掲載・人格権不行使・NDA・修正条件を必ず書面で確認すべきだ」——これは実際に案件を経験したフリーランスデザイナーから広く共有されている認識です（フリーランス・デザイナーの権利・契約・プラットフォーム｜note）。
権利が移転した後の制作物の再利用範囲
著作権を譲渡した後でも、制作者には著作者人格権が残ります。多くの契約書には「著作者人格権を行使しない」という条項が含まれているため、実質的に制作物への関与が制限されます（Webサイト制作における著作権の基礎｜tane-creative.co.jp）。
制作実績として使いたい場合は、「ポートフォリオへの掲載許可」を契約書に個別条項として追加することが確実です。口約束での確認は後から証明が難しいため、書面または記録が残るメールでの合意を残してください。外注契約書テンプレートを参考にすると、著作権帰属を含む必須項目の漏れを防ぎやすくなります。
CHECK
▶ 今すぐやること: 現在進行中のクライアント案件の契約書に「ポートフォリオ掲載可否」の条項があるか確認する（3分）
Q: 著作権を譲渡した後でも制作実績として公開できますか？
A： 契約書に「ポートフォリオ掲載許可」の条項がある場合に限って行えます。条項がない場合は、クライアントに個別に確認を取ってください。
Q： 口頭でポートフォリオ掲載を許可してもらった場合、有効ですか？
A： 口頭での合意は後から証明が難しいため、メールや書面で記録を残してください。「〇〇日に〇〇様より掲載許可をいただきました」という内容のメールを送り、返信で確認を取る方法が現実的です。
Webデザイン模写は公開方法と契約で著作権リスクが決まる
Webデザインの模写は、非公開の学習目的であれば著作権上の問題は起きにくいですが、公開した瞬間にリスクが変わります。模写の公開・ポートフォリオ掲載・SNS投稿では「模写であることの明示」「出典記載」「権利者への確認」の3点が基準になります。クライアント案件では契約書に著作権の帰属・ポートフォリオ掲載可否・人格権不行使の条項を明文化することが出発点です。フリー素材でも利用規約の確認を省略せず、素材ごとに利用条件を管理することで、納品後のトラブルを減らせます。
「公開する前に1点確認する」という習慣があるだけで、大半のリスクは前もって対処できます。まず手元にある模写作品を確認し、「自作表示になっていないか」だけを今日チェックしてみてください。
| 状況 | 次の一歩 | 所要時間 |
| 学習中の模写を非公開にしたい | GitHubリポジトリをPrivate設定に変更する | 3分 |
| ポートフォリオに模写を掲載したい | 「模写：〇〇（出典URL）」の表記を追加する | 5分 |
| 権利者に確認を取りたい | 元サイトの問い合わせフォームからメールを送る | 10分 |
| クライアント案件の権利を整理したい | 現在の契約書でポートフォリオ条項を確認する | 3分 |
| 素材の利用規約を確認したい | 使用素材ごとに利用条件を5列スプレッドシートで一覧化する | 20分 |
CHECK
▶ 今すぐやること: 公開済みの模写作品に「模写：〇〇（出典）」の表記があるかを確認し、なければ今日中に追記する（5分）
Webデザイン模写と著作権に関するよくある質問
Q: 模写は著作権侵害ですか？
A： 非公開で学習目的に行う模写は、著作権法第30条の私的使用の範囲に該当するため、問題になりにくいです。公開・商用利用・自作表示の状態になると侵害リスクが生じます（日本ユニ著作権センター）。
Q： 模写コーディングをGitHubで公開するのは問題ありますか？
A： はい、Publicリポジトリへの公開は、不特定多数が閲覧できる公衆送信にあたるため、著作権上のリスクがあります。学習目的の模写コーディングはPrivateリポジトリで管理するか、認証制限を設けた上で限定的に共有する運用が安全です（模写コーディング公開時の注意｜web-directions.com）。
Q： フリーランスが制作したWebサイトの著作権はどちらに帰属しますか？
A： 原則として制作者（フリーランス）に帰属します。契約書に著作権譲渡の条項がある場合はクライアントに移転します。契約前に帰属先を明文化することが重要です（Webサイト制作における著作権の基礎｜tane-creative.co.jp）。
【出典・参照元】
Webサイト制作における著作権の基礎｜tane-creative.co.jp
Webデザイン著作権の基礎｜magazine.unionnet.jp
模写コーディング公開時の注意｜web-directions.com
フリーランス・デザイナーの権利・契約・プラットフォーム｜note
ポートフォリオに載せる模写デザインの作り方と注意点｜webdeza.com
記事内容は2026年09月時点の法令に基づいています。