デザインセンスが上がった！レイアウトに詳しくなるまとめ

TwitterFacebookHatena
  • 公開： 2014-10-27
  • 更新：2023-10-26
  • 文章量：3680
  • Design

TL;DR

どうすれば初心者でも「分かりやすく見栄えのするレイアウト」を作ることが出来るのか。余白の使い方や知識、さまざまなレイアウトの例をご紹介させていただきます。闇雲な配置にならないように、レイアウトを組む前に読んでおきたいこと。今回は Web デザインのセンスを上げるために、イラストや構図から学べる知識をまとめました。

レイアウトの基本知識

１．分割、対称、軸

何もない空間に要素を配置・構成していくのがレイアウト。こちらは四等分割や軸を使ったレイアウトのパターンをまとめてあるサイトです。美しく配置するために見ておきたいレイアウトパターン。

Photoshop の機能拡張はこちら。

２．イラストから学ぶ構図

紙面や画面、絵画などにおけるページ全体の構成の型、パーツの配置を構図（コンポジション：composition）といいます。構図パターンを知ることで「理解されやすい」自然なレイアウトを作ることができます。

こちらはイラストについて書かれていますが、配色バランス・構図など広義でのデザインが分かります。空想上のものにリアリティを出す方法、小さく描いた主役を目立たせるにはどうすればよいのかなど「誰にでも見やすい構図」を生み出すための知識。

こちらは漫画から学ぶ構図や視線の動き。Web コンテンツに漫画を取り入れたい場合や、バナー作成時、読みやすい導線の配置をしたいとき。時間軸、視線の流れの作り方など読みやすさを上げるためのテクニックです。

３．ダイナミックシンメトリ―

安定感を感じさせる三角形、緊張感を出す逆三角形。三角形の構図は収まりのよいレイアウトを配置するための手法です。

こちらも構図に関するテクニック。三角形や黄金分割の他に面白かったのが、三分割法と呼ばれるダイナミックシンメトリーを使った配置方法。

シンメトリーについてはこちら。なぜ対称性や規則性が必要なのか、サイトに左右対称・回転を取り入れる場合どうすれば良いのか具体的に解説してあります。

４．ホワイトスペース

タイポグラフィやレイアウトでは余白の使い方が重要になります。高級感や清潔感を出したいときなど、余白は何もないようでいて、意図的に配置されています。

例えば、小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。上品さを演出することもできますよね。

空白により読者のコンテンツの読み進めを制御することができます。このような視線誘導を目的とした余白のことを「アクティブ・ホワイトスペース」と呼びます。

余白を calc で自動算出する方法はこちら。

５．造形性

新たなものを創造しても上手くいかないことが多いですが、形をつくり整えることで完成度が上がります。筆者が名刺やコンテンツを作るときに、まず意識する部分がここです。

写真や文字をバランスよく配置し、読み手から信頼を得るためのテクニック。どうやって要素を整理整頓していくのか、グルーピングのコツ、アクセントの付け方を学びます。

６．プロポーション

お次は、ロゴや見出し、グリッドを作る時に使いたいツール。フィボナッチ数列や黄金比を取り入れるとバランスよく見えます。名刺用のテンプレートとグリッドレイアウトテンプレはこちら。

見出しのサイズで使う場合は、本文の黄金比の(×1.61)倍で設定すると美しく見えます。Web では 16px の本文なら、見出しは 25px くらい。

タイポグラフィ（基礎）

７．行間・行送り・行長・行送り

文章が伝わっていないと感じたときに見直したいこと。文字を読みやすくするには行間（行の間隔）と行長（行の長さ）の設定も必要です。行間はフォントサイズの 2/3 ～全角くらいが読みやすい。どの文字の字間を詰めるか、空けるかを決定する際に参考になる記事です。

イラレと Photoshop の文字を調節するショートカットキーはこちら。

８．カーニング・字送り・文字ツメの違い

以前書きましたが、カーニングは隣り合う２つの文字間を調整すること、トラッキングは複数文字間（テキストブロック全体）を調整することでしたね。Photoshop／Illustrator ならalt(Opt)+矢印キーで出来ます。

９．禁則処理

禁則処理とは句読点・括弧・拗促音（小さなひらがな）・音引き（ー）などの約物を行頭や行末にこないように調整することです。読みやすい文章を作るために必要な処理なので覚えておきます。

jQuery で均等割り付けを表示する方法はこちら。

タイポグラフィ（応用）

１０．フライヤーデザインから文字の配置方法を学ぶ

写真に文字を重ねる場合どうすればよいのか、文字の上に文字を重ねるには、文字の改変例など文字の配置問題を解決するためにポスターから学べる応用テクニック。

少し気になったので。Web のタイポグラフィのトレンドが今後どういった流れになっていくのか予想してある記事。フォントサイズ・見出し書体の割合など、次にデザイン時に参考にしたい情報です。

１１．和欧混植（書体を組み合わせる）

複数の書体を組み合わせて使う混植。構造が異なるフォントの組み合わせ方、和文と欧文を美しく調和させるためのテクニック。

１２．アンチゴチ（書体を組み合わせる）

漫画の吹き出しにも混植があるということで。漫画吹き出しで使われるゴシックとアンチック体（かな専用書体、太い明朝体）の組み合わせ。（参考：フリーフォントやさしさアンチック）

こちらによると文字の可読性を考えた結果、漢字にゴシック、かなにアンチック体を採用したそうです。

１３．スイススタイルを参考にする

1950 年頃スイスに多く見られた、整理整頓（グリッドや黄金比に基づく）されたタイポグラフィを中心としたデザイン。フラットデザインの参考に。

Jamstack での制作を依頼する

デザインセンスが上がった！レイアウトに詳しくなるまとめ