「レイアウト」それはいろんな場所で聞く言葉で、ごく自然に私たちの暮らしの中で使われています。
デジタル大辞泉では配置、配列、印刷で、紙面の仕上がりの形を考えて、文字・図・写真などを所定の範囲内に効果的に配置すること。割り付け。「ページ―」、洋裁で、布地の上に型紙を配列して裁断を見積もること。建築で、建物の配置、あるいは内部の部屋などの配置を決めることと書かれています。
ごく一般的にはバランスをとる方法と解釈されています。
バランスのとれたものは美しく、ときには人を魅了する力さえ持つことがあります。
だからレイアウトなくして良いデザインはありえません。
このレイアウト編では全ての基本になる部分といっても過言ではないと私は思ってます。
そんなデザインをする上で一番大事な忘れてはいけないレイアウトの基本となる、とても大事な事をここで解説していきたいと思います。
レイアウトを理論的に組む方法
まずデザインをするにあたり、文字の配置が一番悩むところだと思います。
どの文字をどのくらいの大きさでどこに配置するか。
この決まり方によってデザインが良くも悪くも見えてしまいます。
ですが正解はありません。
100人いれば100通りのデザインができるように、 このレイアウトも100人いれば100通りのレイアウトができあがります。
しかし基本的なレイアウトの理論を知らなければ、その先にある良いデザインはできません。
これは私の持論なのですが、「人が作り出したものは全て理論づける事ができる」と私は思っています。
だからこのレイアウトも理論づけて解説していきたいと思います。
①文字情報の確認
解説するにあたり、 よくありがちな案件を例にとって進めて行きたいと思います。
案件の内容は「DESIGN ACTIVE」という化粧品会社から「DESIGN WHITE」という化粧水が新発売されるという事で、広告を作る設定で進めていきたいと思います。 以下がテキスト情報になります。
- 商品名：DESIGN WHITE
- キャッチコピー：目覚める スッピン以上の私
- テキスト：
肌への優しさにこだわりつつ、
本来あるべき美しいハリのある状態に導く。
それがデザインホワイトの秘密。
年齢を重ねたからこそ内側から光る本当の美しさへ。 - 会社名：DESIGN ACTIVE 〒123-4567 東京都目黒区青葉台5-10-1
- お問い合わせ：0123-45-6789
- 補足1：無香料、無着色、無鉱物油
- 補足2：新発売
- 写真：商品写真
最低限これくらいの情報は入ってくる場合が多いです。
あとは新発売に伴いキャンペーンを打ち出したり、補足1にある無香料、無着色、無鉱物油の情報をもっと詳しくのせる場合もありますが、今回広告という事で限られたスペースの中にこれだけの情報を入れるので省きます。
②情報の優先度を決める
ここからが重要になってくるのですが、これらの情報に簡単に言いうと順番付けをします。
上記のテキスト情報の様に全て同じ大きさのフォントだと 何が一番言いたいのかが明確になってきません。
それでは見ている人が一目でなんの広告なのか理解するのに時間がかかってしまいますから、これらの情報をなるべく早く見ている人に理解させるために順番付けをしたいと思います。
それが下記の順番になります。
ここで注目して欲しい所が会社名です。
よく広告やチラシ様々な媒体において、この会社名というのは全体のスペースの一番下に配置する事が多いのですが、それはこの中の情報で一番重要ではないから一番下に配置するのです。
消費者は会社の情報を知りたいのではなく、その商品の情報を知りたがっているからです。
❷の補足と特徴に関しては、こういう単語で表示できる項目はアイキャッチになり、消費者に比較的高い確立で理解される要素なので2番目に位置づけました。
キャッチコピーと商品名はクライアントとの打合せの中でもしかしたらキャッチコピーの重要性が高くなる場合もありますが、ここではこの順番で進めていきたいと思いますし、だいたいこの順番付けで考えていればまず問題ないでしょう。
③まわりの余白を決める
続きまして、この情報を今度は実際の広告枠に当てはめていきたいと思います。
と、その前に全体のまわりの余白を決めないと他のスペースが決まりません。
このスペースの事をマージンとも呼びますが、 ここでは分かりやすく余白と呼んでいきます。
下記の図2ごご覧下さい。
まわりの余白というのはその広告の中に入れる情報の量によって決まります。
このくらいの情報量だと3の情報量小くらいでいいと思います。
目安としてここにキャンペーン告知が入ると2の情報量、 もっと詳しい成分分析などの細かい情報が入ってくると 1の情報量が多い余白になります。
それ以上の情報が入ってくるようであれば再度クライアントとの 打合せや相談が必要になってきます。
もし打合せの段取りが組めなかったり、連絡がつかなかった場合は、 全ての情報を入れ込んだ案と自分なりに必要でない情報を削除し、バランス良く作った案の2案を提出すると、 その後の校正がスムーズに進むかと思います。
④文字をレイアウトしていく
先ほど図2で選んだ3の情報量が少ないパターンに、 まわりの余白を基準に順番付けをした順番で配置していき、 文字の大きさも変えていきますと図3の様になります。
この時、DESIGN WHITEの文字の大きさは Bの余白の天地に合わせた大きさの文字が丁度良い大きさになります。
次にこの余白Aを基準にA>B>C>Dとだんだんスペーズを小さくして行くのがコツです。
このバランスが崩れてしまうと 見づらいものになってしまいますので頭に入れておいて下さい。
あくまでもAの余白を基準に考えていくという事です。
⑤写真と補足を入れて完成
図4に最後に写真と補足を配置します。
写真は多少Aの余白より大きくても構いません。
補足に関しては、他との差別化を図ると同時に少し強調してあげるといいのですが、ここでは簡単に囲むだけにしておきます。
大きさに関してはタイトルDESIGN WHITEと同じくらいか、やや小さいくらいがいいと思います。
まとめ
以上でレイアウト編は終了となります。このレイアウトはあくまでも例です。
全てのレイアウトをこの通りにしなくてはいけない事ではありません。
100人いれば100通りのデザインができるように、レイアウトもまたしかりです。
上記でバランスという言葉が多数出てきますが、レイアウトとは視覚的にバランスを取る事です。
バランスが命です。
このバランスが崩れると、最終的に良いものができあがっても何か変だなぁとか。
？？？が頭に沢山浮かんでしまう事態になってしまいますので、そういう意味ではデザインをする上で一番大事な部分だと思います。
Adobeでもレイアウトデザインの基礎も学べるので合わせてご覧ください。
最後に私の書いたIllustratorでミスに繋がる操作トップ5も読んでみてください。
