kandeza.com

誰かに見てもらうための、簡単なデザイン

情報を見やすく分かりやすく整理して表現するためのフロー(自己流)

レイアウト

最近受けた仕事で、イベントのチラシのデザイン制作があったのですが、載せる文章などの情報量が多く、整理するのに苦戦しました…。
なんとか形にして第1稿をあげたものの、ごちゃごちゃして分かりづらい紙面となり、ほぼやり直し…。
チラシ制作とか何度もやってるはずなのですが、情報を整理して分かりやすくまとめるのってホント大変だな…と改めて感じ、見返す機会になったので、情報を分かりやすく整理する方法、視覚的に分かりやすくするポイントなど、基本的なことで思い当たったものをまとめて、実際の情報整理の流れを書いてみました。
分かってるつもりでも、なかなか実践できてなくて困ってしまうま。
個人の経験と考え方でまとめたものなので、何か間違っていたらすみません…。

67_infomation_arrangement_03

まずは情報を分類する

まず、伝えたいことをそれぞれパートに分けます。
今回はイベントのチラシを想定します。こんな感じでしょうか。

  • ・タイトル(大見出し)
  • ・キャッチコピー(伝えたいことの内容・ウリを一言でまとめる)
  • ・セミナー概要
  • ・あれば懇親会概要
  • ・講師紹介
  • ・日時
  • ・会場の情報
  • ・参加費
  • ・申し込みの方法
  • ・参加に関する注意事項
  • ・主催者の情報、連絡先

ずらっと書き出すと多いと思いますが、これら全て必要な情報なので省くことはできません…。
作るものによって変わってきますが、イベントのチラシであれば概要はもちろんのこと「日時」「場所」「主催者の情報」などは絶対欠かせませんし、分かりやすく表記する必要があります。
まずはこれらの要素…何を入れたいかを細かく分けて、はっきりさせておくことが重要です。
なるべく細かく分けて、書き出しておくと後が楽です。

情報を書き出す

脳内で整理できれば問題ないんですが、いざチラシなどを作った時の記載漏れがないように、紙などに書き出しておくと安心です。
今回は仮のイベントを想定して、それに基づいて書き出してみました。

67_infomation_arrangement_07

もうこの時点でごちゃっとしてきた。
これをどうやってスッキリさせて、整えて見せるかということですが…。

優先順位をつける

何を一番目立たせたいか、目立たせたい順番に番号をつけます。
目立たせたい順=伝えたい順、になります。目立つ項目ほど、見ている人の心に刺さりやすいです。
上の項目だと、大体こんな感じでしょうか。

67_infomation_arrangement_11

順位付けは、自分の希望だけでなく「見ている人がどのように感じるか」も考えて決めなければいけません。
というか、見ている人の感じ方の大まかなフローというのがあります。

67_infomation_arrangement_12

イベントに興味をもってもらえると、人はだいたいこんな風に考えます。
会場や料金よりも先に、イベント内容に興味を持ってもらわないとチラシをしっかり読んでもらえないので、まずはイベントの魅力を伝えないといけません。
会場や料金は大事な項目ですが、興味をもってもらえればそれらの情報を探しだして読もうとしてくれるので、それよりもイベントの魅力を伝える項目…キャッチコピーやイベント内容に重点を置きます。
しかし、「安い!」とか「今有名なホテルでやるよ!」みたいな、料金や会場にウリ(魅力)がある時は、その項目を大きく載せる必要があります。
この思考フローに沿った情報配置をしないといけませんし、この順に視線を誘導させてあげると読み手の頭に入りやすく、内容も理解してもらいやすいです。

情報をグループに分ける

順位をつけて、情報の優先度が分かったら、今度はそれらの項目をグループに分けます。
グループというのは「関連している情報をひとまとめにする」ということです。

今回の例だと

  • ・イベント内容(イベントの内容やキャッチコピー)
  • ・開催概要(日時や会場、申し込み方法)
  • ・主催者情報(問い合わせ先)

ですかね…。
おおまかに、関連する情報をグループに分ける感じです。

このグループ分けは若干曖昧でも構いません。関連している…と思う項目を、大体で構わないのでくっつけていきます。
このグループ分けには、先ほどつけた順位はあまり考えずに分けます。考えずに分けても、関連している情報は似たような優先順位なので、順位はそんなにバラけないと思います。バラけたとしても、あまり気にせず…。

67_infomation_arrangement_16

まとめてみました。

次は配置(レイアウト)を考えますが、その時にこのグループをもとに配置します。

情報を配置する

順位とグループが決まったら、どの項目をどこに置くか、大きさはどうするか、大まかに決めていきます。
ざっくりでいいです。細かい調整は後でします。
配置ですが、オーソドックスな形として、視線の流れを考慮した配置の方法があります。
これは基本中の基本でとてもよく使われていて、この形の配置は多く見られます。

視線を考えて配置する

視線の流れに合わせて情報がスッと頭に入ってくるので、効果が高い方法です。

人の視線は、横書きの場合は左上から始まり、右下に流れます。縦書きの場合は、右上から始まって左下に流れるのですが、チラシなど1枚もののデザインでは縦書きはあまりなく、横書きが多いです。よって、初見では左上から読み始めようとする方も多いです。なので、迷ったら、一番最初に見てもらえるであろう左上に、一番伝えたいことを置くのが効果的です。
67_infomation_arrangement_20

これに沿って考えると、一番見てほしい部分である「タイトル」は、左上に置くのが大定番だといえます。
左上じゃなくても、タイトルは一番上に配置することがほどんどですね。
この「視線の流れ」を意識し、それに沿った配置をしていくと、まぁ間違いがないわけです。
それに沿って、内容を並べていきます。

並べるついでに、順位の高いものは文字を大きめにしてみます。
これによって、順位の高いものが配置の関係で下に配置されてしまっても、目立つようにします。

67_infomation_arrangement_23

ただの文書…!
左上から…と思ったけど、結局はただ上から順番に並べただけになってしまいました。
この、なんの変哲もないただの文書…これでいいのか?と思われがちですが、これぞ基本形。
これでいいのです。

この配置や文字の大きさを基本として、装飾していきます。

情報を装飾する

これらにデザインを施して、それっぽく仕上げていきます。
デザインといってもやることは単純で、大きく分けると

  • ・色をつける
  • ・フォントを変えたり、文字サイズに強弱をつける
  • ・図形などで囲む
  • ・グループとグループの間には境界をつくる
  • ・写真やイラスト等をいれる

この4つの作業をします。

結構重要なのが「グループとグループの間には境界をつくる」こと。
余白を入れたり、文字の大きさを変えたり、線を引いたり、段落を変えたり、枠で囲ったりして、明確な境界線を作ります。
線を引いたり囲ったりするときでも、線ギリギリまで文字を入れるのではなく、余白をつけて余裕のある配置にすることが見やすくするポイントです。
余白は結構大事です。ただ項目と項目の間に隙間をつけるだけですが、これだけで見やすくなるので、情報整理には欠かせないものだと思います。

この4つをやりながら、再びレイアウトをしていきます。

67_infomation_arrangement_26

ざっとこんな感じに。
だいぶ変わった!ただの文書じゃなくなった!
と思いがちですが、基本的にはあんまり変わってません…。
色をつけて、丸や四角、リボンで文字を囲っただけなのです。あっ、あと写真も入れましたね。
難しい装飾は施していません。Wordやパワポでもできそうな、簡単な図形を使って囲っただけです。
文字の大きさは、注意事項系の注釈などは少し小さくしましたが、他はそんなに変えていません。
並び順も、日時と場所は右下にまとめましたが、あとは文書の時と同じ、上から順番です。
グループ分けも変えず、あくまで上で決めたグループから外れずに並べています。

ただの文書の状態より、こちらの方がより見やすく華やかで、情報も頭に入ってきやすくなったと思います。
この結果だけ見ると、装飾するとだいぶ違って見えるので、装飾による効果が大きいんじゃないかと思ってしまうのですが、確かに色や図形を入れることで華やかになりますが、構成上は先に決めた順位やグループ分け、配置をそのまんま踏襲しています。
つまり、どちらかというと装飾よりは、上で決めた順位やグループ分けなど骨組みの方が大事で、これさえしっかりできて並べることができれば、色を変えるだけ、軽微な装飾だけでもぐっと見やすくなる紙面づくりができます。

この装飾例でちょっと気を遣ったところを挙げていきます。

端っこを揃える

67_infomation_arrangement_28

こういう記事を書く度に何度も言っちゃうことなのですが、要素を揃えるということはとても大事でございます。
きっちり揃えると、綺麗です。統率のあるもの、ルールに決まって揃えられているのもは綺麗に見えます。
全ての要素をきっちり揃える必要はありませんが、「揃えよう」という心がけをもって作っていけば、意外に整ったものが作れます。

写真と文章を交互にする

67_infomation_arrangement_31

こういうチラシでもそうですが、雑誌の誌面などでもよく見られる手法。
文字と写真の場所を入れ替えることで、2つが違う話題だということを視覚的に感じさせたり、同じ話題でも一段落ついたということを感じさせる手法です。
また、写真が複数ある場合は、その写真同士が関連があるかどうかを感じさせるにも役立ちます。

67_infomation_arrangement_33

この2つの写真は、厳密には無関係な写真でもないのですが、1つは「試食会のチョコの例」であり、1つは「ゲストの写真」です。違う話題で使われているものです。
なので、2つの写真が関連がないように見せるために、あえて離しました。

67_infomation_arrangement_36

もしこの写真を近い位置に置くと、チョコの写真とゲストの写真が関連しているように見えます。
文章を読み進めればそうでもないことが分かりますが、ぱっと見た時の誤解をなるべくなくすために、関連がないのであれば離して配置するのがベターです。
関連があるのなら、近づけて配置するのが良しです。

必要な情報は近い位置にまとめる

67_infomation_arrangement_39

開催内容とかキャッチコピーは離して配置することもあるのですが、申し込みに必要な情報など「目的を成し遂げるためにしなければならない手順」「開催場所や時間など、参加するために必要な情報」は、近くに固めて配置するのが良いです。
これは先にやったグループ分けですでに分けてあるので、そのまま配置すると分かれて配置することはないと思いますが、スペースの都合やデザイン上の問題などがあっても、なるべくなら離さないようにするのが良いかと思います。
チラシを手にとった人が興味を持ってくれ「申し込みたい!」と思っても、申し込み方法などがバラバラのところにあると、分かりづらくてイラッとします。クレームの元にもなります。
また、同じ理由で、開催場所や時間など、参加するために必要な情報も、まとめて配置したほうが良いです。
まぁ、これは常識で考えるとその通りなんですけど…実際配置していくと、スペースの都合とかでうっかり離しちゃったりすることもなきにしもあらず…。

テーマカラーを決めて色を分ける

67_infomation_arrangement_42

情報整理をする時に、色分けというのはほんとに効果を発揮します。
テーマカラーを決めて、例えば見出しはこの色を使う、写真はこの色の線で囲う、この項目はこの色でまとめる…など、同じ色を使って統一性を持たせたり、違う色を使って情報の違いを感じさせたりすることはとても有用です。
今回だと、見出しや重要な部分には濃ピンクを使い、補足説明的な部分(コラム?)の背景にはクリーム色を使ったりして、色分けしています。
カラフルなのがいいからと、特に意味もなく色を多用するのではなく、項目ごとや関連する情報ごとに色を決めて着色していくと、かなり見やすく、情報も整理されて見えます。

白黒の場合はどうするの?ってとこですが…これは白抜き文字や線、点線、枠で囲う、文字の大きさを変える…などで表現するしかありません…。最近はグレーも使える白黒印刷が多いので、グレーや網掛け模様を使うというのも手ですが…。

情報を整理するということについては大体ここまでです。
あとは、簡単に仕上げをしちゃいます。

雰囲気を出すための装飾する

仕上げのお話です。ここのお話は情報整理はあんまり関係ありません…。

上でやってきたことで、だいたい情報整理ができたと思うので、次は雰囲気出しです。
細かく言えば、雰囲気作りも情報整理なのですが…雰囲気を作ることも情報を伝えることなので…。
バレンタインのチラシなので、バレンタインっぽい感じに飾ります。

valentine_pop_kansei

ざっと簡単ですかこんな感じに。
主にチョコのイラストで飾った感じですが、グラデーションを入れたり、文字の大きさやフォントを変えたりしています。

まだまだ手を入れたり、写真加工したり特殊な効果を使ったりもできるのですが、それをやっちゃうと今回のテーマとは外れてしまいそうなので…あまり大げさなことはしないでおきました…。

ぜんっぜん大したことしてないのに長くなってしまった。
情報整理って私もまだまだできていないことなのですが、こういった基本的なことを忘れずにやっていきたい所存です。
デザイナーさんじゃない人でもできると思うので、チラシとか何かを作る時に役立てば幸いです。

それでは!Have a nice design!!