以前の記事で「なんか案件降ってこないかなー」と書いてみたのを知って知らずか、WEBサービスの企画およびシステムの設計を裏表どっちもやるトンデモ案件が降ってきてしまってちょっと更新が止まってしまってました・・・。楽しいから良いのですが、フォトショを起動してる時間よりパワポを起動してる時間の方が圧倒的に長いので、そろそろ自分がWEBデザイナーである事を忘れつつあります・・・。しかし、そんなある日、システム部の方々と共同で企画書作りをしてふと気付いた事があります。ノンデザイナーの方々ってわざとやっているのかというくらい企画書の体裁や見た目には全く頓着しないのだという事です。文字サイズは全部一緒、改行位置も要素の配置もめちゃくちゃ・・・。これは勿体ない。とても勿体ないです。
いくら優れた企画力や専門知識を有していたとしても、それを相手に上手く伝えられなければこんなに勿体ない事はありません。今回はちょっと本職を思い出し、企画書づくりに使える7つのデザインテクニックをご紹介したいと思います。どうぞお付き合いください。
目次
「書けば伝わる」訳が無い
こういう企画書、作っていませんか？まさに冒頭でご紹介した「システム屋さんが作る企画書」の典型例です。今回は体裁やレイアウトなど、ビジュアルデザイン面でのテクニックにとどめようと思っているので内容の善し悪しには触れません。
これは本当によく勘違いされるのですが、「必要な事は全て書いたから読めば分かるだろう」と言う人が未だに居ます。読み手は企画書の内容の2割も読みません。これはWEBサイトにおけるユーザーに対する考え方と同じで、上から下まで舐めるように全部読む人なんて存在しないのです。なんならこの記事だって上から下まで一語一句洩らさず全部読む人は居ないでしょう。居るとしたら世界で私だけです。ここにうんことか書いておいても気付く人は居ないでしょう。
では、どうすれば伝わるのか？かんたんです。部分的に読んでも伝わるように工夫すればいいのです。例えばこの記事、基本的には「見出し」と「強調タグで囲った文言（太字）」だけ追えばざっくり内容が伝わるように作っています。残りは装飾品、繋ぎ、オマケにすぎないのです。
『通る企画書』づくりの為の7つのデザインテクニック
はいここから本題です。恐らくこの時点でもう殆どの人がここから読み始めるだろうというくらいの諦めた気持ちでいる事が肝心です。頭から順番に読むのを期待してはいけません。そんな人間は居ないのです。全部読んでる？ご愁傷様です。誠に残念ながら、どうやらあなたは人間ではなかったようですね・・・。
1.メリハリを付ける
じゃあ先程のイケてない企画書を、イカした企画書へと変身させていきます。まず気になる点と言えば、情報にメリハリが無いことですね。どこが重要なのか、見た目ですぐ分かるようにしてあげましょう。
こんな感じです。強調の意味合いは主に
- 大きさ
- 太さ
- 色
などで表現します。デザイン業界ではこのメリハリの事をジャンプ率と呼びます。課長にドヤ顔で説明する為に是非覚えておいてください。
2.グルーピングする
関連する情報や要素はまとめましょう。まとめ方は色々ありますが、
- 枠で囲う（背景色を敷く）
- 共通の色にする
- その他の要素との距離を離す
などで表現します。カッコよく横文字を使うとグルーピングですが、要するにまとめましょうという事です。部長にドヤ顔で説明する為に是非覚えておいてください。
3.整列する
現状の企画書をよーく見てください。微妙に文章や図の頭とお尻がそろってないですね。ノンデザイナーの皆様が最も気にしないけど、我々が最も気にする部分がこれです。例えば、テキスト段組みの両端揃え・均等割り付けを使ってみたり、図の大きさを本文の横幅と揃えてみたりして、グルーピングした要素の塊が一つの箱に見えるようにする事で、視覚的にさらに認識がしやすくなります。
これをグリッドレイアウトと言います。久々に会った地元の友人にドヤ顔で説明する為にも覚えておいて損は無いです。
4.余白をつくる
本当に重要な項目であればあるほど要素の周りの余白を多くとり、視線を集中させる方が効果的に相手に伝わる企画書になります。ノンデザイナーは勿論、新人デザイナーでも「余白があるからまだ入れられる」をやってしまう事が多いですが、余白は余白それ自体に意味があります。埋めないでください。
この余白の事をマージンもしくはホワイトスペースと言います。最近よく聞くフラットデザインは、のっぺりとしたシンプルなデザインというよりも余白をゆったりと使う事で視線を集中させるデザインといった方が正しいと思っています。
5.視線の動きを理解する
人間の視線の動き方には、ある一定の規則性があります。代表的なものを挙げますと、
などです。あまり意識してないかもしれませんが、世界中の殆どの広告やWEBサイトはこの法則に則って要素が配置されています（例えば企業ロゴが常に左上である事など）。企画書を書く上では、左上にページタイトルや結論など、右下に次のページへの「引き」の要素を配置するなどで応用できます。
この２つの法則、凄く似てるけどどっちを意識すればいいの？という質問には、私であればZの法則を意識せよと答えます。何故ならば、企画書のフォーマットは常に一定サイズの紙・スライドが連続する形式であるためです。Fの法則はWEBサイトのように縦の長さが不定で、かつある程度長い読み物にしか適用できないと考えた方が、使い分けに困らないと思います。
Zの法則とFの法則。知っていればちょっとだけインテリぶれるので、是非覚えておいてください。
6.統一感をつくる
形や色に持たせる意味を企画書内で統一する事はとても大切なはずなのに、つい忘れがちな事の一つです。さっきのページでは赤はマイナスイメージのテーマカラーだったのに、このページでは成功例の強調部分で使われている。さっきは人間のクリップアートでユーザーを表していたのに、いつの間にか同じクリップアートがサービス管理者の説明に使われていた。などなど。
ルールの統一は、ビジュアルデザイン・UI設計・情報アーキテクチャ共通の基本理念です。これをやらないと読む人（ユーザー）に対して「意味の考察」という大きなストレスが発生してしまいます。この記事を読んだあなたは、そんな有象無象のビジネスマンから一歩リード出来ます。やったね！
7.リズムをつける
上記の事を全て実践して行っても、10枚20枚とページが増えるに従って読み手の読む気力はどんどん削がれて行きます。読み手（ユーザー）の基本行動は流し読みです。パラパラと企画書をめくって見られても大体どこに何があるか分かるように、しかもそのリズムに規則性を持たせるようにすることで、ちゃんと内容を読んでもらえる可能性がグーンと上がります。つるぎのまい くらいグーンです。
ちなみに当ブログで毎回かならず目次とまとめを挟んでいるのも、見出しでエリア分けを明確にしているのも、流し読みに対応するリズムを付ける為です。単純に並べただけだとお経と同じですからね。朝礼の校長の話で眠くなる原因はリズムが無いせいだと確信しています。
まとめ
ここでデザイナーの基本中の基本理念をおさらいします。常に相手（受け取り手）の事を考えてデザインをする。これは古今東西どのジャンルのデザイナーでも共通の理念であり、デザインとアートを明確に分かつ最大の要因でもあります。
では、あなたが企画書を受け取る側だとして、文字や図が無秩序に散らばったページを読みたいと思いますか？多分面倒臭くなって読み飛ばしてしまうと思います。しかし、ノンデザイナーの方々は重要な項目ほど文字や図をギチギチに詰めこむような傾向があるように感じます。実際、「書いてあるんだから読めば伝わるだろ」のような方は、システム屋さんだけではなくて、営業でも広報でも、どこでもいらっしゃいます。私も長文癖があるので人の事はあまり言えませんが、文字が多いならせめて読みやすくしてあげる工夫はしてあげるべきだと思います。
相手の気持ちになってデザインをする。デザインだけじゃないですね、もう人として当然のことです。この記事を読破した皆様であれば、明日からは更に素晴らしい企画書が書けるものと期待しております！頑張ってくださいね！！！（人の書いた企画書の体裁を整えるのに疲れた顔）
■ ノンデザイナーの方々に特にオススメの本。
