参考サイトのデザインをAIで再現する手順｜真似してよい所と差し替える所

結論: 参考サイトから借りるのは「構造と手法」だけです。文言・画像・ロゴ・コードは全部自分のものにします。

• これから作り始めるなら → 参考URLを見ながら、構成メモを自分の言葉で書く
• AIに頼む段階なら → スクショではなく、構成メモと自分の文言・素材を渡す
• 公開直前なら → 文言・画像・ロゴ・OGPの差し替え漏れを確認する

クライアントから「このサイトみたいな感じで」とURLが届く。AIに貼れば、一発で似たものが出そうです。

でも、どこまで似せていいのか分からなくて手が止まる。ここ、迷いますよね。

線を引く場所は、思ったよりシンプルでした。著作権の公的な解説とAIツールの公式ドキュメントをもとに、手順にまとめます。

この記事の目次

1. 参考サイトのデザイン、どこまで真似していいの？
2. 参考URLから構成メモはどう書き出す？
3. スクショをAIに貼るのはダメ？構成メモとの違い
4. Claude Designとv0、どっちで組む？手順とプロンプト例
5. 公開前の差し替え漏れ、どこを確認すればいい？
6. よくある質問
7. この記事のまとめ

参考サイトのデザイン、どこまで真似していいの？

段組み・情報の並び・動きの手法は参考にしてよい。文章・写真・ロゴ・コードは差し替えます。

根拠は著作権の基本です。著作権情報センターによると、アイデアや技法は著作物ではありません。具体的に表現されて初めて、著作物になり得ます。

「誰が表現しても同じようになってしまうような《ありふれた表現》」も、創作的な表現ではないとされています。

← 表は横にスクロールできます →

ただ、「レイアウトなら何でも自由」ではありません。特徴の強い構成をまるごと写して手直ししただけだと、翻案権の問題が残ります（著作権法27条。元の作品を変形して使う権利です）。

個人的な目安は、「参考サイトを3本混ぜても、まだ1本に見えるか」。1本に見えるなら寄せすぎです。

参考URLから構成メモはどう書き出す？

URLを上から順に見て、セクションごとに「役割・型・要素・余白・動き」を自分の言葉で1行ずつ書きます。

架空の焼き菓子店のLPで書くと、こうなります。参考サイトの文言は1文字も写しません。

← 表は横にスクロールできます →

• 参考サイトは1〜3本で十分
• 探す場所は、SANKOU!やMUUUUU.ORGのようなギャラリーサイトで足りる

このメモ作りが、手順の中で一番時間を食います。

それでも、「なぜこの順番なのか」をここで言葉にしておくと、クライアントへの説明にそのまま使えます。地味ですが、一番もとが取れる工程だと思います。

スクショをAIに貼るのはダメ？構成メモとの違い

スクショは見た目が寄りすぎやすく、責任も入力した側に残ります。メモなら「型」だけが伝わります。

← 表は横にスクロールできます →

Anthropicの利用規約（2025年10月8日発効版）には、「You are responsible for all Inputs you submit to our Services」とあります。入力した物の責任は使う側にある、という意味です。

文化庁も、生成AIと著作権については判例・裁判例の蓄積がないとしています。

Claude Designのヘルプでは、競合製品のスクショも参考資料としてアップロードできると案内されています。一方、Webキャプチャ機能の説明は「your website」（自分のサイト）の要素を取り込む、です。

なので、使い分けはこう考えるのが一番すっきりします。

• 他社の参考サイト → 構成メモにして渡す
• 自分やクライアントのサイト → 取り込み機能を使う

Claude Designとv0、どっちで組む？手順とプロンプト例

構成メモ＋ブランド情報＋自分の文言を渡し、ヘッダーから1セクションずつ組ませます。

← 表は横にスクロールできます →

選び方の基準：無料で始められるか、何を渡せるか、どこに書き出せるかの3点で比べました。資料も一緒に作るならClaude Design、すぐコードにしたいならv0が合います。

Claude Designは2026年4月17日に発表されました。始め方は2通りです。

• 会話の入力欄で「Output」→「Design」を選ぶ
• Claude Codeなら /design と打つ

単体版の claude.ai/design は、2026年12月14日に終了する予定です。今のうちに会話側の入口に慣れておくと安心です。

v0のPlusなど有料プランの金額は変わることがあるので、契約前に公式の料金ページで最新をご確認ください。

試すだけなら、Freeの1日7メッセージで足ります。1日1セクションずつ組めば十分進みます。

渡すプロンプトのひな形を置いておきます。v0の公式ガイドも「The more specific your prompt, the better the results.」としていて、大きなものは少しずつ組むよう勧めています。

次の構成メモに沿って、ヘッダーとセクション1だけを作ってください。
・ブランド：焼き菓子店「（店名）」。色 #2F3A2E / #F4EFE6、見出しは明朝体
・トーン：落ち着いた、手書きの温かさ
・セクション1：全幅写真＋左下に見出し、ボタン1つ。余白は広め
・見出し文：「（自分で書いた文）」 ボタン文：「（自分で書いた文）」
・写真：添付の自店舗の写真を使う
特定の既存サイトに似せる必要はありません。

コツは、全セクションを1回で頼まないこと。ヘッダー→セクション1→セクション2と分けます。

v0はプロンプトを10個まで順番待ちにできます。メモの行をそのまま並べて投げても進みます。

公開前の差し替え漏れ、どこを確認すればいい？

漏れるのは画面より、metaタグ・alt・ファビコンのような「見えない所」です。

• 見出し・本文・ボタンの文言が、全部自分（またはクライアント）の文になっているか
• 仮置きの写真・アイコンが残っていないか
• ロゴ・ファビコン・サービス名が自社のものか
• OGP（SNSで共有したときに出る画像と文）と meta description を書き換えたか
• 画像の alt（読み上げ用の説明文）が入っているか。仮置きの埋め草の文が残っていないか
• 使ったフォントのライセンスを、フォントごとのファイルで確認したか

仮置きのつもりの写真でも、業務で使った時点で「私的使用」には当たりません。著作権情報センターも、個人で使う場合でも業務目的のコピーは私的使用の複製にならない、と説明しています。

地味に見落としがちなのがOGP画像です。開発中の仮画像のまま公開されやすく、SNSで共有されて初めて気づくパターンになりがち。公開前に、シェア確認ツールで一度見ておきます。

よくある質問

文章を少し言い換えれば使えますか？ 言い換えても、元の文を変形して使う「翻案」の問題が残ります。短いキャッチコピーは通常保護されないとされますが、一概には言えません。最初から自分で書くのが早くて確実です。

参考サイトのHTML/CSSを持ってきて手直しするのは？ コードも著作物になり得るので、丸ごとのコピーは避けます。構成メモをもとにAIに一から書かせれば、同じ見た目の型は作れます。

AIが作ったデザインは自分のものになりますか？ Anthropicの規約は、出力の権利を「if any」（もしあれば）という条件付きで利用者に譲るとしています。あわせて、出力の正確さは自分で確かめるよう求めています。納品前の確認は、人の手で行う前提にしておきます。

この記事のまとめ

• 真似してよいのは、構造（並び・段組み・余白）と手法（配色の傾向・動き）
• 文言・写真・ロゴ・コードは、全部自分のものに差し替える
• AIにはスクショより、自分の言葉で書いた構成メモを渡す
• 1セクションずつ組ませると、狙いどおりになりやすい
• 公開前は OGP・alt・ファビコンまで確認する

次にやることは1つです。 手元の参考URLを1本開いて、構成メモの表を4行だけ埋めてみてください。

個別の案件で判断に迷う構成や表現があれば、弁護士などの専門家に相談してください。

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。