【デザイン】レイアウトの基本をわかりやすく解説|情報整理と優先順位

【デザイン】レイアウトの基本をわかりやすく解説:情報整理と優先順位のイラスト1

こんにちはフリーでデザイナーをしているひつじです

ロゴデザイン、パッケージデザイン、ポスターデザイン、冊子デザイン、webデザインなどなど、デザインには様々な種類がありますが、全てに共通で大切なものがあります。

それがレイアウトです

レイアウトは直訳すると配列や配置です。その意味の通り、届けたいメッセージを伝えるために文字や写真などのバランスや配置を考えることです。

そしてレイアウトはデザイナーだけに必要なものではなく、一般職でも役立つスキルです。

例えば仕事のプレゼンの資料を作ったり、ちょっとしたイベントやサークルのチラシを作ったり、はたまたSNSのバナーやサムネなどの画像を作ったり、など身近にデザインが必要なシチュエーションは意外に多いです。

そこで今回は

  • これからデザインを勉強しようと思っているデザイン初心者の方
  • 趣味程度でもデザインに興味がある方
  • 仕事に使える知識として知っておきたい人

などに向けて、なるべくわかりやすくレイアウトの基本を紹介していこうと思います。

デザインレイアウトの基本のその1【情報整理と優先順位】

【デザイン】レイアウトの基本をわかりやすく解説:情報整理と優先順位のイラスト2

レイアウトには基本がいくつかあるのですが、今回はその中でも最も大切なことの一つである「情報整理と優先順位」について解説していこうと思います。

レイアウトをする前の準備

実はレイアウトを始める際、いきなりパソコンに向かってカチカチと作業する、ってことはあまりしません

なぜなら闇雲にパソコンを触っても作業効率が悪いからです。

レイアウトをするには準備というか、実際に作業する前に考えて、決めておく事柄があります。その一つが今回紹介する「情報整理と優先順位」なのです。

わかりやすく具体例で説明したいと思います。

レイアウトは様々なデザインで必要と書きましたが、その中でも情報量が少ない、名刺デザインを例に解説していきます。

名刺でもポスターでもパンフレットでもWEBサイトでも基本的なレイアウトの考えは一緒です。

名刺デザインでレイアウトの基本を解説

【デザイン】レイアウトの基本をわかりやすく解説:情報整理と優先順位のイラスト4

レイアウトする前の準備として、まずはレイアウトする「情報」を整理します。

名刺の場合は、ある程度必要な情報が決まっていますが、ポスターやパンフレットなどは写真やイラストがあるなど要素が複雑になります。

なので混乱しないため、また全体像を掴むためにも、それらの情報を一覧化します。

名刺の情報を一覧

今回は仮に「このブログの名刺を作る」ことを想定して考えてみます。

オーソドックスな名刺の場合は次のような必要項目が考えられます。

  • 会社名
  • ロゴ
  • 肩書き
  • 名前
  • 住所
  • 電話
  • メール
  • Webアドレス

これらの項目をこのサイトの情報に置き換えるとこんな感じです。

【デザイン】レイアウトの基本をわかりやすく解説:情報整理と優先順位のイラスト5

情報を分ける

情報を一覧にしたら、今度は似ている情報など大まかなブロックで分けていきます

↓例えばこんな感じ、今回は情報の種類で3つのブロックに分けてみました。

【デザイン】レイアウトの基本をわかりやすく解説:情報整理と優先順位のイラスト6

特にデザイン初心者の方はこのブロック分けをすることで次の作業(優先順位)がやりやすくなるのでおすすめです。

優先順位をつける

情報を一覧にしたら、次はそこに優先順位をつけます。

優先順位の決め方は「どの情報を一番に伝えたいか」です。

そして基本的にはこの順位通り、1位は大→2位は中→3位は小、といった感じで情報の大小や強弱をつけ、レイアウトをしていきます。

では先ほど分けた3ブロックに優先順位順をつけて実際に名刺にレイアウトしてみたものをお見せします。

企業名を優先するパターン

【デザイン】レイアウトの基本をわかりやすく解説:情報整理と優先順位の名刺デザイン2
【デザイン】レイアウトの基本をわかりやすく解説:情報整理と優先順位の名刺デザイン4

会社名・ロゴを一番優先順位を高くしたパターンです。

ロゴが一番に目に入ってくるように、面積の半分を使いロゴを配置し、その次に名前、最後にその他の情報という形にレイアウトしています。

個人名を優先するパターン

【デザイン】レイアウトの基本をわかりやすく解説:情報整理と優先順位の名刺デザイン1
【デザイン】レイアウトの基本をわかりやすく解説:情報整理と優先順位の名刺デザイン5

一番優先順位を名前にしたパターンです。名前を一番大きく配置し、ビジュアルとして目を引きやすいロゴは少し控えめに入れています。その他の情報は先ほどと同じボリュームです。

これら2つのパターンはよく見るオーソドックスな名刺のレイアウトです。

詳細情報を優先するパターン

【デザイン】レイアウトの基本をわかりやすく解説:情報整理と優先順位の名刺デザイン3
【デザイン】レイアウトの基本をわかりやすく解説:情報整理と優先順位の名刺デザイン6

あまりないパターンですが、詳細情報を最優先にしたレイアウトです。住所などの情報がそれぞれ大きく、また間隔も広げて配置しています。

詳細情報で多くの面積を使った分、名前とロゴは同じくらいの順位としました。そのため大きさやバランスも大体同じくらいの見え方になるようにレイアウトしています。

何を一番伝えたいかで変わるレイアウト

【デザイン】レイアウトの基本をわかりやすく解説:情報整理と優先順位のイラスト3

いかがだったでしょうか?

紹介した名刺例は、わかりやすさを意識し、単純にしてみましたが、例に挙げたようにレイアウトは1番に何をどう伝えるかによってその形は大きく変化します。

なので今回のレイアウト基本のポイントを一言でいうと

パソコンを触る前(レイアウトする前)の準備として、情報を整理し優先順位を考えよう

です!

レイアウトがうまくいかない、何から手をけたらかわからない、という方は、まずはこれをするだけで、グッとデザインしやすくなるかと思います!

ぜひ試してみてください