余白の分析・模写とは?余白の測り方と真似る練習方法を初心者向けに解説

余白の分析・模写の基本

まずは、余白の分析・模写とはどんな練習なのか、そしてなぜ余白の上達に効くのかを押さえましょう。

余白の分析・模写とは

余白の分析・模写とは、公開されている優れたWebサイトやバナーを見て「どこに、どれくらいの余白があるか」を測り、その理由を考えたうえで、同じレイアウトを自分の手で再現してみる練習方法です。

余白とは、文字・画像・ボタンなどの要素の周りや、要素と要素の間にある空きのことです。

「分析」は、要素どうしの距離や、ブロックの内側の空き、ページの横幅などを測って、どんな決まりで空けているのかを推測することです。

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

文字の書体やサイズに注目する練習は文字の分析・模写とはで紹介しているので、この記事では「空き」だけに絞って見ていきます。

なぜ余白は分析・模写で上達するのか

余白が分析・模写で上達しやすいのは、余白には「何pxなら正解」という決まった答えがなく、実際の優れたデザインから感覚をつかむ部分が大きいからです。

たとえば「関係のあるものは近くに置く」というルールを知っていても、実際に「どのくらい近づけて、どのくらい離せばいいか」は、知識だけではなかなか判断できません。

優れたデザインを測ってみると、「見出しと説明文はぐっと近い」「別の話題との間はその何倍も空いている」といった具体的な数値の差が見えてきます。

さらに「なぜここは近くて、ここは離れているのか」を考えながら模写すると、余白を感覚ではなく、意図を持った設計として捉えられるようになります。

余白の学び方の全体像は、デザイン初心者のための余白学習ロードマップにまとめています。

余白の分析・模写のやり方

余白の分析・模写は、「お手本を選ぶ→余白を測る→決まりとまとまりを読み解く→模写して比べる」の4ステップで進めます。

それぞれのステップでやることを見ていきましょう。

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

最初は、要素の数が少なく、余白の取り方が読み取りやすいシンプルなデザインをお手本に選びましょう。

要素が多いと測る場所も多くなり、初心者のうちはどこから手をつければよいか分からなくなりやすいからです。

たとえば、Webサイトの最初の画面(見出し・説明文・ボタンだけの部分)や、サービスの特徴を3つ並べたブロック、文字の少ないバナーなどが練習に向いています。

「すっきりして見やすい」「なんだか上品」と感じたデザインを選ぶと、その理由を余白から探る楽しさもあり、続けやすくなります。

ステップ2:余白を測る

お手本を選んだら、余白を実際に測ってみます。

「広い」「狭い」と目で見るだけでは、自分の感覚がどのくらい正確かが分からず、あとで自分のデザインに置き換えることもできないからです。

測る場所は、次の5つを押さえておけば十分です。

測る場所	どこからどこまでか	見えてくること
要素どうしの距離	見出しと説明文、説明文とボタンなどの間	どの要素を同じまとまりとして見せているか
まとまりどうしの距離	特徴1と特徴2のように、まとまりとまとまりの間	まとまりの中の距離との差の付け方
セクション間の距離	話題が切り替わるブロックとブロックの間	ページの中で一番大きな区切り
内側の余白	カードやボタンの枠の端から、中身までの空き	枠の中で中身が窮屈に見えないための空き
コンテンツ幅と左右の余白	文章や画像が並ぶ範囲の横幅と、画面の端までの空き	ページ全体のゆとりの量

Figmaで測る場合は、お手本のスクリーンショット(画面を撮影した画像)をキャンバスに貼り付け、その上に四角形を重ねて大きさを確かめる方法が手軽です。

模写した自分のデザインでは、1つめの要素を選んだ状態で、Macはoptionキー、WindowsはAltキーを押しながら2つめの要素にマウスを合わせると、2つの要素の間の距離が赤い線と数値で表示されます(Figmaヘルプ「レイヤー間の距離の測定」)。

ただし、高解像度の画面で撮ったスクリーンショットは、実際の表示サイズの2倍などの大きさで保存されることがあります。
測った値が大きすぎると感じたら、画像の幅をお手本の表示幅に合わせて縮小してから測りましょう。

お手本がWebサイトなら、ブラウザの機能で実際の数値を確かめることもできます。

Google Chromeの場合、次の手順で確認できます。

1. ページの上で右クリックし、「検証」を選んで開発者ツールを開く。
2. Macは⌘+option+C、WindowsはCtrl+Shift+Cを押して、「検査モード」に切り替える。
3. 調べたい要素にマウスを合わせると、吹き出しに要素の大きさや、内側の余白(パディング)・外側の余白(マージン)の値がピクセル単位で表示される。

開発者ツールとは、Webページの裏側の仕組み(HTMLやCSS)を確認するための、ブラウザに最初から入っている機能です(Chrome for Developers「検査モード」)。
コードが表示されて驚くかもしれませんが、ここでは吹き出しの数値を見るだけなので、ほかの部分は読めなくても大丈夫です。

パディングは枠の内側の余白、マージンは枠の外側の余白を指すCSSの言葉で、デザインツールでいう「内側の余白」「要素どうしの距離」にあたります。

バナーのように全体が1枚の画像になっているものは数値を調べられないので、スクリーンショットを使ってFigmaで測りましょう。

お手本がWebサイトなら、ブラウザの幅を狭めてスマートフォンに近い幅で表示したときに、どの余白が縮み、どの余白がそのまま保たれているかも見比べてみましょう。

画面の幅に合わせて余白を変えている場所が分かり、自分でPCとスマホの余白を決めるときのヒントになります(PCとスマホで余白を変える考え方はPCとスマホの余白の違いとは?で解説しています)。

ステップ3:数値の決まりとまとまりを読み解く

測った数値が集まったら、並べて眺め、「どんな決まりで空けているのか」「どこからどこまでを1つのまとまりに見せているのか」を読み解きます。

数値を測るだけで終わると、「このサイトは24pxだった」という記録にしかならず、自分のデザインに応用できないからです。

たとえば、次の見本の余白を測ったとします。

測った数値を小さい順に並べると、次のようになります。

間隔	場所	読み解けること
4px	特徴の名前と説明	一番強く結びついた組み合わせなので、一番近い
8px	見出しと説明文	見出しと、その説明はセットで読ませたい
16px	特徴どうし	3つの特徴は仲間だが、それぞれ別の話
24px	説明文と特徴の並び/枠の内側	導入部分と特徴の一覧を、別のまとまりとして区切っている。 枠の内側も同じ24pxにそろえている
32px	特徴の並びとボタン	ボタンの周りを広く空けて、目立たせている

この表から、2つのことが読み取れます。

1つめは、関係が強いものほど近く、関係が弱いものほど遠くに置かれていることです。
このように、関係のあるものを近くに置いてまとまりに見せる考え方を「近接」と呼びます。

2つめは、使われている数値が4・8・16・24・32と、4の倍数の決まった段階にそろっていることです。
実際のWebサイトでも、4や8の倍数のように決まった単位で余白をそろえていることがあり、測った数値を並べると、その決まり(余白のルール)が見えてくることがあります。
決まった段階から選ぶようにすると、余白を決めるときに迷いにくく、デザインとコーディングで数値をそろえやすくなるためです(4や8の倍数で余白をそろえる考え方は8pxグリッドとは?で解説しています)。

なお、Figmaなどで文字の要素を測ると、文字の箱には行間の分のゆとりが上下に含まれるため、測った値が数pxずれることがあります。
多少のずれは気にせず、「どの間隔が、どの間隔の何倍くらいか」という比率に注目しましょう。

数値のほかに、次のような観点もメモしておくと分析が深まります。

観点	見るポイント	メモの例
まとまり	どこからどこまでが1つのグループに見えるか	見出し+説明文で1つ、特徴3つで1つ
揃え方	要素の端がどこでそろっているか	すべて左端が一直線にそろっている
グリッド	画面がいくつの列に分かれていそうか	特徴が3列に並び、列の間が同じ幅で空いている
余白の多い場所	一番広く空いているのはどこか、それはなぜか	ボタンの周りが一番広い。押してほしいから

グリッドとは、画面を縦の列(カラム)に区切って、要素を置く位置の目安にする補助線のようなものです。
要素の端がどこでそろっているかに注目すると、背後にある列の区切りを推測しやすくなります(揃え方の考え方は文字の揃え方とはで解説しています)。

「余白の多い場所」は、視線がどこに集まるかとも関係しています(余白と視線の関係は視線誘導とはで解説しています)。

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

読み解いた内容をもとに、デザインツールでお手本と同じレイアウトを作り、できあがったらお手本と並べて比べます。

自分で余白を決めてみると、測ったはずの数値をどこかで「なんとなく」に置き換えてしまっていることに気づけるからです。

お手本の画像を横に置き、同じ大きさのフレーム(作業用の枠)をその隣に作って模写すると、比べやすくなります。
お手本と自分の作業画面の両方に同じ間隔の補助線(ガイド)を引いておくと、位置を写し取りやすくなります。

Figmaで模写するなら、オートレイアウト(並べた要素どうしの「間隔」や、枠の内側の「パディング」を数値で指定できる機能)を使うと、読み解いた数値をそのまま当てはめられ、あとから間隔を変えて比べるのも簡単です(Figma Learn「オートレイアウトのガイド」)。

たとえば、次の2つを比べてみましょう。

文字の大きさや色は同じなのに、模写1回目は、どこからどこまでが1つのまとまりなのかが分かりにくくなっています。

すべての間隔が同じなので、特徴の名前が上の説明文の続きにも、下の説明の見出しにも見えてしまい、ボタンも最後の一行のように埋もれています。

違いを見つけたら、次のように「どこが」「どう違い」「なぜお手本はそうしているのか」まで書き出しましょう。

• 特徴の名前と説明の間を、ほかと同じだけ空けていた。
  お手本は4pxまで近づけて、名前と説明を1つのセットに見せている。
• 説明文と特徴の並びの間が狭かった。
  お手本は24px空けて、導入部分と特徴の一覧を別のまとまりとして区切っている。
• ボタンの上の余白が足りなかった。
  お手本は一番広い32pxを空けて、ボタンを独立させて目立たせている。

「なぜ」は、正解が分からなくても構いません。
「〜だからかもしれない」という推測を書いておき、ほかのお手本でも同じ傾向があるかを確かめていくと、少しずつ自分の判断基準になっていきます。

気づいた点を直して2回目の模写をし、また比べる、というサイクルを繰り返すと、余白の差に気づける目が育っていきます。

配色を同じ要領で分析する方法は実際のデザイン分析とは?で紹介しているので、あわせて参考にしてください。

実践のポイント

余白の分析・模写で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 「余白が広い」「余白が狭い」という感想で観察を終えてしまうことがあります。
  理由まで考えないと次に自分で応用できないので、「なぜここは近く、ここは離れているのか」まで言葉にしましょう。
• 見た目をそっくりに再現することだけに集中して、なぜその位置にそろえているのかという設計の意図を考えないことがあります。
  お手本を下に敷いてなぞるだけでは数値の意味を考える機会が減るので、測った数値を見ながら自分で配置してみましょう。
• 1px単位の誤差を気にしすぎて、手が止まってしまうことがあります。
  大切なのは、間隔どうしの大小関係と比率を再現することです。
• 模写した作品を、自分のオリジナル作品としてSNSやポートフォリオに載せてしまうことがあります。
  模写はあくまで練習なので、手元で学ぶためだけに使いましょう。

よくある質問

• Q. デザインツールがなくても練習できる?
  A. できます。
  お手本がWebサイトなら、この記事で紹介したChromeの検査モードで余白の数値を確かめられます。
  測った数値を紙に書き出し、「近い・遠い」の関係を線で囲んでまとまりを図にするだけでも、十分な分析の練習になります。
• Q. 測った数値がばらばらで、決まりが見つからない。
  A. すべてのデザインが決まった数値の段階で作られているわけではありません。
  そのときは数値の決まりにこだわらず、「まとまりの中の距離」と「まとまりの間の距離」の差だけを比べてみましょう。
  それだけでも、そのデザインが何と何を同じグループに見せたいのかが読み取れます。
• Q. どんなデザインをお手本にすればいい?
  A. 最初は、自分が「見やすい」「すっきりしている」と感じたシンプルなものを選びましょう。
  慣れてきたら、情報量の多いページや、高級感のあるブランドのサイトなど、余白の量が違うデザインを比べてみると、印象と余白の関係も見えてきます。

まとめ

余白の分析・模写とは、優れたデザインの余白を測り、その理由を考えながら自分の手で再現することで、余白の感覚を身につける練習方法です。

余白を測ったら数値を小さい順に並べ、「関係の強いものほど近い」「決まった段階でそろっている」といった決まりを読み解き、模写したらお手本と比べて「どこが・どう違い・なぜか」を言葉にすることがポイントです。

まずは気に入ったWebサイトを1つ開き、Chromeの検査モードで、見出しと本文の間と、セクションとセクションの間の余白を測って比べてみてください。