レイアウトの分析・模写とは?Webサイトの構造を分解して真似る練習方法

レイアウトの分析・模写の基本

まずは、レイアウトの分析・模写とはどんな練習なのか、なぜレイアウトの上達に効くのか、そして何を見ればよいのかを押さえましょう。

レイアウトの分析・模写とは

レイアウトの分析・模写とは、公開されている優れたWebサイトやバナーを見て「なぜこの配置になっているのか」を分解して考え、同じレイアウトを自分の手で再現してみる練習方法です。

レイアウトとは、文字・画像・ボタンなどの要素を、画面のどこに、どんな大きさで、どんな順番で置くかを決めることです(レイアウトの役割はWebレイアウトとは?で解説しています)。

「分析」は、ページがいくつのまとまりでできているか、画面を縦に何列に分けているか、要素がどの線にそろっているかなどを観察し、配置の決まりを推測することです。

「模写」は、分析した内容をもとに、FigmaやPhotoshopなどのデザインツール、あるいは紙とペンで、同じ配置を作ってみることです。

つまりこの練習は、お手本を「見る」だけで終わらせず、「分解する」「作る」「比べる」までをセットで行うものです。

なぜ分析・模写でレイアウトが上達するのか

分析・模写でレイアウトが上達するのは、本で学んだ配置の原則が、実際のデザインの中でどう使われているかを自分の目と手で確かめられるからです。

「要素をそろえる」「関係のあるものは近くに置く」といった原則は、知識として覚えただけでは、自分のデザインでどう使えばよいのかまでは分かりません。

優れたデザインを分解すると、「見出しもボタンも画像の端も、同じ線にそろっている」のように、原則が使われている場面を具体的に見つけられます。

さらに自分で再現してみると、見ているだけでは気づかなかった「カードの幅がすべて同じだった」「画像の上端と見出しの上端がそろっていた」といった細かな決まりに気づけます。

ゼロから配置を考えるより、正解のある形を分解して真似るほうが、初心者のうちは学べることが多いのです。

分析で見る4つの観点

レイアウトを分析するときは、ページ全体をなんとなく眺めるのではなく、見る観点を決めておくと分解しやすくなります。

この記事では、次の4つの観点で見ていきます。

観点	見るところ	自分への問いの例
セクション	ページがどこで話題ごとに区切られているか	このページはいくつのまとまりでできている?
カラムとグリッド	画面を縦に何列に分けて要素を並べているか	カードは横に何枚並び、幅はそろっている?
揃え	要素の端や中心が、どの線にそろっているか	見出し・本文・ボタンの左端は同じ線上にある?
優先順位	一番大きい・目立つ要素と、その位置	最初に目に入るのはどこで、それはなぜ?

セクションとは、「サービスの特徴」「料金」「よくある質問」のように、ページの中で話題ごとに区切られたひとまとまりのことです。

カラムは画面を縦に区切った列のことで、カラムを等間隔に並べた見えない枠組みをグリッドと呼びます(カラムやグリッドの基本はグリッドと余白の関係とは?で解説しています)。

たとえば、よくある企業サイトのトップページを単純化し、カラムのガイドを重ねてみましょう。

見本の中の「メインビジュアル」は、Webサイトを開いたときに最初に大きく表示される、サイトの顔になる画像や動画のことです(役割はメインビジュアルとは?で解説しています)。

見本Aだけを見ると、「ヘッダーの下に大きな画像があり、特徴が3つ並んでいる」くらいしか分かりません。

見本Bのようにカラムのガイドを重ねると、特徴のカードがちょうど2カラムずつを使っていること、ロゴやメインビジュアルの左端が1列目の左端にそろっていることが見えてきます。

見本では分かりやすく6等分にしていますが、実際のWebサイトでは、2・3・4・6のどれでも割り切れる12等分(12カラム)のグリッドもよく使われます。

12は、2等分(半分)・3等分・4等分・6等分のどれにもきれいに分けられる数です。

そのため、画面を半分に分けたいときも、カードを3枚や4枚並べたいときも、同じ12列の枠組みのまま配置できます(12カラムの仕組みは12カラムグリッドとは?で解説しています)。

このように、目に見えない線を見つけ出すことが、レイアウトの分析の中心になります。

レイアウトの分析・模写のやり方

ここからは、実際にレイアウトの分析・模写を進める手順を見ていきます。

「お手本を選ぶ→セクションに分ける→カラムを推測する→揃えの線を探す→意図を言葉にする→模写して比べる」の6ステップです。

道具は、Figmaなどのデザインツールでも、紙とペン・定規でもかまいません。

手順の中ではFigmaを使う方法も紹介しますが、パソコンの操作に慣れていなければ、スクリーンショットを印刷して定規で線を引き、紙に箱を描いて模写するやり方で、すべてのステップを進められます。

ステップ1:構造が読み取りやすいお手本を選ぶ

最初のお手本には、要素が整理されていて、構造が読み取りやすいWebサイトやバナーを1つ選びましょう。

動きの多い演出や、要素がわざと重なり合うような複雑なデザインは、最初は配置の決まりを読み取りにくいためです。

サービス紹介のページや企業サイトのトップページのように、「見出し→説明→画像→ボタン」がセクションごとに並んでいるものが練習に向いています。

選んだら、ページ全体のスクリーンショット(画面をそのまま画像として保存したもの)を撮っておくと、あとで線を引いたり重ねたりしやすくなります。

ページの一部だけで練習する場合は、ファーストビュー(ページを開いたとき、スクロールせずに最初に見える範囲)から始めると取り組みやすいです。

ファーストビューは訪れた人が最初に目にする場所なので、そのページで一番伝えたいことが集められていることが多く、短い範囲で配置の意図を読み取る練習に向いています。

ステップ2:セクションに区切って役割を書き出す

次に、ページがどこで区切られているかを探し、セクションごとに「何のためのまとまりか」を書き出します。

細かい配置を見る前に全体の構成をつかんでおくと、「このセクションはなぜここにあるのか」という順番の意図まで考えられるからです。

背景色が変わる場所、大きな見出しが出てくる場所、広い空きがある場所が、セクションの切れ目の目印になります。

順番	セクション	役割の例
1	ヘッダー	ロゴとメニューで、どこのサイトか・どこへ行けるかを示す
2	メインビジュアル	一番伝えたいことを、大きな画像とキャッチコピーで伝える
3	特徴	サービスの良さを3つに分けて並べる
4	料金・申し込み	次の行動(申し込み・問い合わせ)へ誘う
5	フッター	会社情報やほかのページへのリンクをまとめる

このように書き出すと、ページが「興味を持たせる→理解させる→行動してもらう」という順番で組み立てられていることに気づけます(ヘッダーやフッターなど各部の役割はWebページの基本構造とは?で解説しています)。

ステップ3:カラム数とグリッドを推測する

セクションが分かったら、各セクションで画面を縦に何列に分けて要素を並べているかを推測します。

カードや画像が横に何枚並んでいるか、その幅がそろっているかを見ると、カラムの数の見当がつきます。

Figmaを使う場合は、スクリーンショットを貼ったフレーム(画面の枠)に「レイアウトガイド」を追加すると、列のガイドを重ねて表示できます(レイアウトガイドを作成 – Figma Learn ヘルプセンター)。

レイアウトガイドでは、列の数のほか、列と列の間の「ガター」(カードとカードの間などにできるすき間のこと)や、フレームの端との「余白」も設定でき、Shift+Gキーで表示・非表示を切り替えられます。

列の数を変えながら、カードや画像の端がガイドにぴったり合う数を探していくのがコツです。

以前は「レイアウトグリッド」と呼ばれていた機能なので、古い解説記事ではその名前で紹介されていることがあります。

ここからは、HTMLやCSSを少し知っている人向けの補足です。

Google Chromeの検証ツール(デベロッパーツール。ページを右クリックして「検証」で開ける、ページの仕組みを調べる機能)では、CSSのグリッドやフレックスボックス(要素を横や縦に並べるCSSの仕組み)で並べられた要素に「grid」「flex」という小さな印が表示されます。

この印をクリックすると、列の線や要素の区切りがページの上に重ねて表示されるので、実際のサイトがどう組まれているかを確かめられます(CSS グリッド レイアウトを検査する – Chrome DevTools、CSS Flexbox レイアウトを検査してデバッグする – Chrome DevTools)。

コードを書かない人は、この手順は飛ばして、スクリーンショットにガイドを重ねる方法だけで十分です。

ステップ4:揃えの基準線を探す

次に、要素の端や中心がどの線にそろっているかを探し、その線をスクリーンショットの上に引いてみましょう。

整って見えるレイアウトの多くは、見出し・本文・ボタン・画像などの端が、目に見えない同じ線の上にそろっているからです。

見本Cを見るだけでは「なんとなく整っている」としか感じませんが、見本Dのように線を引くと理由が分かります。

見出し・説明文・ボタンの左端は1本の縦の線にそろい、見出しの上端と画像の上端は1本の横の線にそろっています。

線を引いてみると、そろえている線の数が意外と少ないことにも気づくはずです。

そろえる線を少なく保つことで、画面全体がすっきり見えるのです(要素をそろえる考え方は整列の原則とは?で解説しています)。

文章の左揃え・中央揃えの使い分けについては、文字の揃え方の記事で解説しています。

ステップ5:優先順位と配置の意図を言葉にする

ここまで分解できたら、「なぜこの配置なのか」という意図を、自分の言葉で書き出してみましょう。

見た目の配置だけを写しても、理由が分かっていなければ、次に自分でレイアウトするときに応用できないからです。

たとえば、次のような問いに答える形でメモすると、意図を言葉にしやすくなります。

• 一番大きく、一番上にある要素は何か。
  それは、このページで一番伝えたいことと一致しているか。
• ボタンはどこに、何回出てくるか。
  読み終わった人が迷わず押せる位置にあるか。
• 近くにまとめて置かれているのは、どの要素とどの要素か。
  それらは内容の上でもセットになっているか。
• 視線はどんな順番で動くか。
  見る順番と、伝えたい順番は合っているか。

一番目立たせる要素の決め方は主役と脇役とは?、置く位置による優先順位は重要な情報はどこに置く?、人の視線が画面の上をどう動くかは視線誘導とは?、近くにあるものがひとまとまりに見える性質はゲシュタルトの法則の記事で詳しく解説しています。

答えが分からない問いがあっても大丈夫です。

「ここは理由が分からなかった」と残しておくと、あとで知識が増えたときに読み解けるようになります。

ステップ6:模写して、お手本と重ねて比べる

最後に、分析した内容をもとに同じレイアウトを作り、お手本と比べます。

作ったものをお手本と比べてはじめて、自分の目の甘さや、読み取れていなかった決まりに気づけるからです。

模写は、写真や文章を灰色の箱やダミーの文字に置き換えたワイヤーフレーム(色や飾りを決める前に、どこに何を置くかだけを描いた下書き・骨組み)の形で十分です。

見た目の装飾は省いて、配置だけに集中しましょう。

見本Eと見本Fを並べると、カードの幅とロゴの位置が違うことが分かります。

ただし、横に並べただけでは小さなずれを見落としやすいので、お手本と模写を重ねて見比べるのが確実です。

Figmaなどのデザインツールなら、自分の模写の上にお手本のスクリーンショットを同じ大きさでぴったり重ね、スクリーンショットのレイヤーの不透明度(透け具合)を50%くらいまで下げて、半透明にします。

すると下の模写が透けて見えるので、間違い探しのように「カードが少し右にずれている」「ロゴの位置が低い」といった違いがひと目で分かります。

紙で模写した場合は、お手本を同じ大きさで印刷して模写の紙と重ね、窓ガラスなど明るい場所にかざすと、同じように比べられます。

ずれていた箇所は「カードの幅はそろえる」「左端は1本の線にそろえる」のように、気づいた決まりとしてメモしておきましょう(自分で作ったレイアウトを見直して直す方法はレイアウトの改善とフィードバックとは?で解説しています)。

要素同士の間隔を数値で測って真似る方法は余白の分析・模写とは?で解説しているので、この記事では配置と揃えに絞っています。

実践のポイント

レイアウトの分析・模写で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見た目の配置だけを写して、なぜその配置なのかを考えないまま終えてしまうことがあります。
  ステップ5の問いに答える形で、意図を必ず言葉にしておきましょう。
• 1回模写して満足し、続かないことがあります。
  分析・模写は、観察→分解→模写→比較を何度も繰り返すことで、レイアウトを見る目が育つ練習です。
  週に1つなど、無理のないペースで続けましょう。
• 最初から細かい数値まで正確に写そうとして、時間がかかりすぎることがあります。
  まずはセクション・カラム・揃えの線という大きな構造がつかめれば十分です。
• 模写したデザインを、自分の作品としてSNSやポートフォリオで公開してしまうことがあります。
  模写はあくまで自分の練習のためのものです。
  お手本のデザインや写真・文章を、自分の作品や仕事に流用しないようにしましょう。

よくある質問

• Q. どんなWebサイトをお手本にすればいい?
  A. 最初は、自分が作りたいものに近いジャンルで、構造が読み取りやすいものを選びましょう。
  サービス紹介や企業サイトなど、セクションごとに「見出し・説明・画像・ボタン」が並んでいるページが練習に向いています。
  慣れてきたら、レイアウトが大きく違うサイトを選んで、違いを比べてみるのもおすすめです。
• Q. Figmaなどのデザインツールを持っていなくてもできる?
  A. できます。
  紙とペンで、ヘッダーやカードを四角い箱として描き写すだけでも、セクションやカラムの構造を読み取る練習になります。
  スクリーンショットを印刷して、定規で揃えの線を引いてみるのも効果的です。
• Q. バナーでも同じやり方で分析できる?
  A. できます。
  バナーはセクションに分かれていないことが多いので、代わりに「キャッチコピー・商品の画像・ボタンなどが、どの順番で、どの線にそろえて置かれているか」を中心に分解しましょう。
  バナーの定番の配置の型はバナーデザインの基本レイアウトとは?で紹介しています。

まとめ

レイアウトの分析・模写とは、優れたWebサイトやバナーの配置を分解して理由を考え、同じレイアウトを自分の手で再現してみる練習方法です。

セクション・カラムとグリッド・揃え・優先順位の4つの観点で分解し、意図を言葉にしてから模写し、お手本と重ねて比べることがポイントです。

まずは好きなWebサイトを1つ選んでスクリーンショットを撮り、セクションの切れ目と、要素がそろっている線を探してみてください。
カラーの観点からデザインを分解する方法は実際のデザイン分析とは?、文字の観点からは文字の分析・模写とは?で紹介しています。