好きなWebサイトを Claude Code で組み直してデザインを学ぶ方法

「このサイト、なぜか気持ちいい」と感じるページに出会ったことはあると思います。デザインを学ぶ一番の近道は、その理由を自分の手で分解することです。Claude Code を使うと、好きなサイトを「学習用に」組み直す作業が数時間でできます。目的はあくまで学ぶことで、作ったものをそのまま公開することではありません。

ここでは、好きなサイトを教材にしてデザインの原則を抜き出し、自分のサイトに生かすまでの手順を紹介します。

まず線引きをはっきりさせる

「大きな見出しと広い余白」「三列のカード」「スクロールでゆっくり現れる写真」といったレイアウトの考え方は、誰のものでもありません。

一方で、そのサイトのコード、写真、イラスト、文章、ロゴ、アイコン、有料フォント、そしてブランドそのものには権利者がいます。学習用の再現では構造を借りて理解し、公開するものは自分の言葉、自分の画像、自分のブランド、ライセンスを持っているフォントで作ります。著作権の基本は文化庁の著作権ページで確認できます。迷ったら、もっと変える。これが私の基準です。

「好き」を言葉にする

キャプチャを撮る前に、好きな理由を三つから五つ、具体的に書き出します。

• 見出しは大きいのに本文は小さく、そのコントラストに自信が感じられる
• どのセクションも上に同じ量の余白がある
• 色は二色とグレーだけで、片方はボタンにしか使われていない

このメモが本当の成果物です。再現作業は、この観察が正しいかどうかを確かめるためにあります。

参考画面をキャプチャする

Chrome でサイトをデスクトップ幅で開き、DevTools を開いて Cmd+Shift+P（Windows は Ctrl+Shift+P）でコマンドメニューを出します。「screenshot」と入力して Capture full size screenshot を選ぶと、ページ全体が一枚の画像になります。

次に Elements パネルで、フォント名、主な文字サイズ、行間、主要な色、コンテンツの最大幅を調べてメモします。欲しいのは数値であって、相手のスタイルシートではありません。画像やロゴ、フォントファイルを自分のプロジェクトにダウンロードしないでください。

学習用に組み直す

study というフォルダで claude を起動し、スクリーンショットをドラッグするか貼り付けて、次のように頼みます。

このスクリーンショットは、個人的なデザイン学習用の参考資料です。
レイアウトをゼロから、レスポンシブな HTML と CSS の1ページとして再現してください。

ルール：
・元サイトのコードを取得したりコピーしたりしないこと
・画像やロゴはグレーの箱、文章はダミーの日本語にすること
・フォントは雰囲気の近い無料フォントを使うこと
・サイズ、色、幅は notes.txt の実測値を使うこと

完成したら、使った余白の段階、文字サイズの段階、グリッドを一覧にし、
それが参考画面の印象をどう作っているか説明してください。

海外のサイトを参考にする場合、日本語にすると同じ数値では印象が変わります。日本語は字面が大きく詰まって見えるので、行間を少し広げ、見出しの字間を調整する必要があることが多いです。ここを Claude と一緒に試すと、日本語タイポグラフィの勉強にもなります。

見比べて直してもらう

claude --chrome で起動すると、Claude がブラウザで自分の作ったページを開いてスクリーンショットを撮れます。設定はChrome 連携のドキュメントにあります。

study/index.html を幅 1440px で開いてスクリーンショットを撮り、参考画面と比べてください。
余白、文字サイズ、揃え、色の違いを重要な順に挙げ、上位五つを直してください。
これを三回まで繰り返してください。

回数を決めておくのは、学びにならない細部の磨き込みに時間を使わないためです。Anthropic のベストプラクティスでも、画面の変更はスクリーンショットを撮って比較させる方法が紹介されています。この比べ方は、自分のデザインを実装するときにもそのまま使えます。

スマートフォン幅でも同じように比べてみてください。日本のユーザーはスマートフォンで見ることが多いので、デスクトップで美しいレイアウトが狭い画面でどう崩れるか、元のサイトがそれをどう処理しているかを見るのは良い勉強になります。

原則をメモに残す

最後にページから離れ、学んだことだけを残します。

この学習から DESIGN-NOTES.md を書いてください。
余白の段階、文字サイズと行間の段階、グリッドと最大幅、色の使い方、
印象を決めている重要な判断を五つ。コードは含めず、別のブランドにも使えるルールだけにしてください。

最初に書いた観察と比べてみてください。外れていたところが、今回一番学べたところです。

自分のサイトは空のフォルダから作る

自分のサイトは新しいプロジェクトで作ります。study フォルダはコピーしません。自分の文章、写真、ブランドカラー、そしてライセンスのあるフォントを渡し、DESIGN-NOTES.md の原則をもとに作ってもらいます。日本語サイトなら Noto Sans JP のような商用利用できるフォントから始めると安心です。元のサイトを知っている人が見て似ていると感じたら、まだ変え足りないということです。

今週、好きなサイトを一つ選んで、観察、キャプチャ、学習用の再現、メモまでをやってみてください。メモが三つ、四つたまる頃には、参考画面がなくても自分のデザインの型から始められるようになっています。