参考サイトのレイアウトをClaude Codeで正確に真似る方法を、ついに発見しました！
Claude Codeに「このサイトみたいにして」と、URLをわたしても、レイアウトが似ず、こまっていました
▼うまく真似できないのは、参考と自分のサイトの要素がちがったからでした！
参考にはあるけど、自社にはないコンテンツがある
セクションごとの文字数がちがう
結果、コンテンツの幅が変わって、レイアウトも再現できない
そのため、要素をどうやってそろえるかも指示したら、みちがえました
プロンプトはこちら
※既存のHTMLファイルを添付します。
参考サイトのURL：
真似したいセクション：例）トップページのファーストビュー（ヘッダーとハンバーガーメニューを含む）
このHTMLのレイアウトを、参考サイトに合わせて書きかえてください。
【1｜数値の調べ方】
・参考サイトのCSSファイルをダウンロードして、中を読む。画面を見た印象で決めない
・メディアクエリを抜き出し、切り替えが何pxで何本あるかを確認する
・remで書いてあるときは、JavaScriptの中の基準幅も探す。
画面幅に全体を比例させる作りなら、こちらも同じ作りにする
・ブラウザを375 / 768 / 1024 / 1440の幅で開き、要素の位置と大きさを実測する
【2｜どこまで真似するか】
・要素の数と並び順を、参考とそろえる
・参考にあって、こちらにない要素はつくらない。
ただし英語の見出しのように、情報として影響の小さいものは真似する
・参考になくて、こちらにある要素は、この範囲から外す
【3｜そろえる数値】
・画面幅の切り替えは、参考と同じpxで、同じ本数にする
・幅ごとに、コンテンツの幅・余白・要素の大きさ・改行の位置・リストの折り返しをそろえる
・参考の見出しが画像になっているときは、箱の高さではなく字面の高さで合わせる
【4｜文字数】
・社名や住所のように変えてはいけない情報は、こちらの文字数のままつかう
・見出しと本文は、参考と同じ文字数に近づけて書きかえる
・キャッチコピーだけは、こちらの文字数を変えない
【5｜真似しないもの】
・配色、装飾、動きは真似しない。レイアウトだけ合わせる
・フォントは、こちらのHTMLでつかっているものをそのままつかう
【6｜画像とアイコン】
・ロゴはこちらのものをつかい、高さだけ参考にそろえる
・参考で文字が画像になっているところは、同じ文字数の文にしてテキストで置く
・アイコンはFont Awesomeの無料版をつかう
・画像が足りないときはStudio.Stockから、内容とデザインの近いものを選ぶ
【7｜出す前に、自分で直す】
・375 / 768 / 1024 / 1440の4つの幅で、参考とこちらの数値を突き合わせる
・ズレている項目は、出す前に直す。「だいたい合っています」で終わらせない
・横スクロールが出ていないことも確認する
参考サイトに寄せたいのに、どうしても似ないときに、ぜひためしてみてください
#ClaudeCode #Web制作
[댓글 @goro_claudecode]
築地さん、URLを渡すだけじゃなく「要素の数や文字数までそろえる」のが大事なんですね
ここまで細かく決めれば、Claude Codeでもかなり再現しやすくなりそうです
[댓글 @uslab1994]
似ないのは要素が違うから、ここは盲点でした
真似させる前に差を埋める順番なんですね！
[댓글 @Ikechan_japan]
要素の差分を先に整理してから渡すなんて盲点でした。URLだけで真似させようとしたけど、ずっとうまくいかなかったので助かります。
どんな指示の形で揃えましたか？
