雑誌やWebサイト、広告などについて話していると、「デザイン」と「レイアウト」という言葉がほとんど同じ意味で使われることがあります。
たとえば、
「この雑誌のデザインがいい」
という場合もあれば、
「この雑誌のレイアウトがいい」
という場合もあります。
日常会話では大きな問題はありません。
しかし、制作や著作権について考える場合、この2つを分けて理解しておいた方が整理しやすくなります。
結論からいうと、一般的には、
レイアウトは、デザインを構成する要素の一つ
と考えるのが分かりやすいでしょう。
つまり、レイアウトはデザインの部分集合と考えることができます。
ただし、「デザイン」という言葉には非常に広い意味があるため、使われる文脈によって少し意味が変わります。
雑誌を一冊「デザインする」とは何をすることか
雑誌を例に考えてみましょう。
雑誌を制作するとき、デザイナーが決めることは、単に「どこに写真を置くか」だけではありません。
たとえば、
- どのような雰囲気の雑誌にするか
- どの書体を使うか
- どのような色を使うか
- 写真を大きく見せるか、小さく並べるか
- 余白を広く取るか、情報を密に配置するか
- 見出しをどの程度目立たせるか
- 本文を何段組にするか
- ページをめくったときのリズムをどう作るか
- 読者にどの情報から読んでもらうか
といった、さまざまな判断があります。
これらを総合したものが、雑誌の「デザイン」です。
一方、レイアウトは、その中でも特に、
ページ上に各要素をどのように配置するか
という部分を指します。
レイアウトとは「配置」の設計
たとえば、雑誌の見開きページがあるとします。
左ページには大きな人物写真。
右ページ上部にはタイトル。
その下にはリード文。
さらにその下には2段組のインタビュー本文。
ページ右下にはプロフィール。
この場合、
「写真を左に置く」
「タイトルを右上に置く」
「本文を2段組にする」
「プロフィールを右下に置く」
といった判断がレイアウトです。
つまり、レイアウトは、
何を、どこに、どのくらいの大きさで配置するか
を決める作業だと考えると分かりやすいでしょう。
英語の「layout」も、もともとは「配置」「配列」といった意味を持っています。
デザインはレイアウトより広い
では、「デザイン」は何を指すのでしょうか。
同じ雑誌のページを考えてみます。
人物写真を左側に置くことはレイアウトです。
しかし、
その写真をモノクロにする。
見出しを赤色にする。
タイトルには明朝体を使う。
本文にはゴシック体を使う。
背景を薄いグレーにする。
余白を広く取って高級感を出す。
こうした判断も、すべてデザインに含まれます。
つまり、
レイアウトは主に「配置」を扱い、デザインは「見た目や機能を成立させるための設計全体」を扱う
と整理できます。
同じレイアウトでもデザインは大きく変わる
この違いは、同じレイアウトを使って異なる雑誌を作るとよく分かります。
たとえば、次のようなレイアウトがあるとします。
左側50％に写真。
右上にタイトル。
右下に本文。
非常に単純な構成です。
このレイアウトを、ファッション雑誌で使うこともできます。
ビジネス雑誌で使うこともできます。
旅行雑誌でも使えます。
料理雑誌でも使えます。
配置は同じです。
しかし、使用する写真、書体、色、余白、装飾などを変えるだけで、出来上がるデザインはまったく異なります。
たとえばファッション雑誌なら、
細い欧文フォントを使い、余白を大きく取り、写真を大胆に見せる。
ビジネス雑誌なら、
太いゴシック体を使い、見出しを強調し、情報量を多くする。
旅行雑誌なら、
明るい写真と大きな見出しを組み合わせる。
同じレイアウトでも、デザインの印象は大きく変わります。
この例からも、レイアウトとデザインが同じものではないことが分かります。
逆に、同じデザイン方針でもレイアウトは変えられる
反対のケースもあります。
ある雑誌について、
「落ち着いた高級感を出す」
というデザイン方針を決めたとします。
そこで、
黒、白、グレーを中心に使う。
明朝体を中心にする。
余白を広く取る。
装飾を減らす。
写真の色調を統一する。
といったルールを設定します。
このデザイン方針を維持したまま、
あるページでは写真を全面に配置する。
別のページでは写真を左右に配置する。
別のページでは文章だけにする。
といった異なるレイアウトを使うこともできます。
つまり、
デザインの方向性を保ちながら、複数のレイアウトを使い分ける
ことができるわけです。
雑誌のデザインを分解してみる
雑誌のデザインは、いくつかの要素に分解して考えることができます。
たとえば次のような要素です。
レイアウト
写真、文章、見出しなどをどこに配置するか。
タイポグラフィ
どのフォントを使うか。
文字サイズをどうするか。
行間や字間をどう設定するか。
カラー
どの色を使うか。
どの色をアクセントカラーにするか。
写真・ビジュアル
どのような写真を使うか。
どのようなトリミングをするか。
グラフィック
罫線、図形、アイコン、背景などをどのように使うか。
余白
要素同士の距離をどの程度取るか。
情報設計
どの情報を目立たせ、どの順序で読ませるか。
これらを総合的に設計した結果として、雑誌全体のデザインが生まれます。
そのため、概念的には、
デザイン ＞ レイアウト
という関係になります。
レイアウトはデザインの部分集合なのか
ここで最初の疑問に戻ります。
「レイアウトはデザインの部分集合なのか？」
実務的には、
はい、と考えてよい
でしょう。
雑誌デザインを大きな箱だとすると、その中に、
レイアウト
タイポグラフィ
カラー
写真
グラフィック
余白
情報設計
などが入っています。
レイアウトはその一要素です。
ただし、「デザイン」という言葉は非常に広く使われています。
たとえば、
プロダクトデザイン
サービスデザイン
UXデザイン
組織デザイン
ビジネスデザイン
といった言葉もあります。
この場合のデザインは、単なる見た目ではなく、
目的を実現するために構造を設計すること
という非常に広い意味で使われています。
その意味では、レイアウトはデザインの中でもかなり限定された領域です。
「デザイン＝装飾」ではない
もう一つ重要なのが、
「デザイン＝見た目をきれいにすること」
と考えると、デザインとレイアウトの関係が分かりにくくなるという点です。
本来、デザインは装飾だけを意味するものではありません。
雑誌であれば、
読者にどの情報から読ませるか。
記事の重要度をどう表現するか。
大量の情報をどのように整理するか。
ページをどのような順序で見せるか。
といった機能的な設計もデザインに含まれます。
レイアウトも同じです。
単に「きれいに並べる」だけではありません。
タイトルを大きくすることで、最初にタイトルを読ませる。
写真を大きくすることで、視線を写真に誘導する。
関連記事をページ下部にまとめることで、本文との役割を分ける。
こうした情報の優先順位を視覚的に表現することも、レイアウトの役割です。
「デザインを参考にする」と「レイアウトを参考にする」は違う
この区別は、他社の雑誌やWebサイトを参考にするときにも重要です。
「レイアウトを参考にする」
という場合、
写真と文章の位置関係。
段組。
余白。
情報の配置。
などを参考にしていることが多いでしょう。
一方、
「デザインを参考にする」
という場合は、より広い意味になります。
レイアウトだけでなく、
書体。
色。
写真のテイスト。
装飾。
余白。
全体の雰囲気。
などまで含めて参考にしている可能性があります。
そのため、
「この雑誌のデザインを参考にした」
という表現は、
「この雑誌のレイアウトを参考にした」
よりも広い意味を持ちます。
Webサイトでも同じ構造になる
この関係はWebサイトでも同じです。
たとえば、
画面上部に大きな写真。
その上にキャッチコピー。
その下に3つのサービス紹介。
最後に問い合わせボタン。
これはレイアウトです。
しかし、Webデザインにはそれ以外にも、
フォント。
色。
ボタンの形。
写真。
アイコン。
余白。
アニメーション。
スクロール時の動き。
操作性。
情報の優先順位。
など、多くの要素があります。
したがってWebサイトでも、
レイアウトはWebデザインの一要素
と考えることができます。
まとめ
デザインとレイアウトは密接に関係していますが、同じものではありません。
レイアウトとは、
写真、文章、見出しなどを、どこに、どの大きさで配置するかという設計
です。
一方、デザインとは、
レイアウト、色、書体、写真、グラフィック、余白、情報設計などを組み合わせ、目的に合った全体を作ること
です。
そのため、雑誌制作の文脈では、
レイアウトはデザインの部分集合
と考えるのが最も分かりやすいでしょう。
式のように表現すれば、
デザイン ＝ レイアウト ＋ タイポグラフィ ＋ カラー ＋ ビジュアル ＋ グラフィック ＋ 情報設計 ＋ その他の設計
となります。
もちろん、実際の制作ではこれらは互いに影響し合っています。
それでも、
「配置を決めるのがレイアウト」
「それを含めて全体を設計するのがデザイン」
と整理しておけば、雑誌、広告、Webサイトなどについて議論するときにも、言葉の混同をかなり減らすことができます。
