これまで多くの新人デザイナーを見てきた中で、「レイアウトがうまくできない」「何を伝えたいかわからない」と悩んでいる人が多いと感じています。

デザインは限られたスペース（紙面）でいかに効果的にメッセージを伝えるかが勝負になります。

そこで今回は、情報の優先順位づけと情報整理という観点から、デザイン・レイアウトを改善する方法を解説します。

デザインで圧倒的に大切なのは、情報の優先順位づけ

デザインを考えるときの基本中の基本。それは「どこを注目させたいか？」を考えること。つまりユーザーに「ここでは何を伝えたいのか」、「何を最初に知ってほしいのか」を常に意識する必要があります。

というのもデザインの目的は、情報を「伝える」ことにあるからです。決してカッコよくておしゃれなビジュアルをつくるのが目的になっては駄目です。

だからこそデザイナーは常にユーザーの視点に立ち、優先順位（何を伝えたいのか）を決め、デザイン要素の強弱（コントラスト）をコントロールする必要があります。

情報の優先順位づけに悩むデザイナー

情報の優先順位づけは、デザインの根幹を成す重要な要素です。しかし、多くのデザイナーにとって、何を伝えたいのか、何を目立たせるべきなのかを明確にすることは容易ではありません。

情報の優先順位づけに悩むデザイナーは、以下のような悩みを抱えている可能性があります。

1. メッセージが明確に伝わらない

情報の優先順位が明確でないと、デザインが散漫になり、ユーザーに最も伝えたいメッセージが見落とされてしまう危険性があります。デザイナーは、コンテンツの核となるメッセージを特定し、視覚的に強調することで、ユーザーの注意を引き付ける必要があります。

2. ユーザーが必要な情報を見つけられない

重要な情報が目立たない場所に配置されていると、ユーザーは必要な情報を見つけるのに多大な時間と労力を費やすことになります。デザイナーは、ユーザーが求める情報を素早く見つけられるように、情報の階層構造を最適化しなければなりません。

3. デザインの一貫性が保てない

情報の優先順位が明確でないと、デザイン全体の一貫性を保つことが極めて困難になります。一貫性のないデザインは、まるでバラバラのパーツを無秩序に組み合わせて作ったように、ユーザーに混乱を与え、情報の信頼性を大きく損なう可能性があります。

4. デザインの改善プロセスが非効率になる

情報の優先順位が不明瞭だと、デザインのどの部分を改善すべきかを特定するのが非常に難しくなります。優先順位が明確であれば、重要な情報から順に改善していくことができ、効率的にデザインを磨き上げることができます。

5. クライアントへ説得力のあるデザインを提案できない

クライアントとのコミュニケーションにおいて、情報の優先順位を明確に伝えられないと、クライアントの要望に適切に応えることが非常に困難になります。つまりデザインを説明できないため、説得力のあるデザインを作れなくなります。

デザインの良し悪しは最初から決まっている？

僕が提唱したいのは、デザインの成否は「デザインをする前から」ある程度決まっているということ。つまり、デザインを始める前に「情報の優先順位づけ」を行い、何を目立たせるかの下準備を戦略的に立てることが重要だ、ということです。

具体的にいうと、伝えるべき情報を優先順位に基づいて整理し、最も重要な情報から順に配置していくことが求められます。

バナーひとつ、あるいはWebデザインの1セクションであっても、デザインに使えるスペースは限られています。

限られたスペースで効果的に「伝える」を実践するには、伝えるべき情報量を適切に管理する必要があります。これは情報の密度に直結する問題です。

例えば、重要なメッセージを大きく太字で表示し、補足情報を小さな細字で表示するだけで、情報の優先順位が明確になります。また、色を戦略的に使い分けることで、重要度の高い情報を効果的に目立たせることができます。

情報の優先順位づけとデザイン要素の使い方を事前に綿密に計画することが、良いデザインを生み出すための鍵となるのです。

【注意！】あなたはちゃんと文章を読んでデザインをしていますか？

デザイナーの中には、言葉を読まずにデザインする人がいます。（嘘！と思われるかもしれませんが、以外に多いです・・・）

つまり、デザインを単なる色付けや配置だけの作業だと捉えているのです。

しかしながら、デザインの本質は「伝える」・「読ませる」ことにあります。したがって、デザインを始める前に、必ず文章を読み込み、情報を的確に理解することが不可欠です。

デザイナーは、テキストの内容を十分に吟味し、伝えるべきメッセージを明確に把握する必要があります。その上で、情報の優先順位を整理し、デザインに反映させなければなりません。

言葉を軽視し、視覚的な要素だけにこだわるデザインは、情報を正しく伝えることができません。デザインのプロセスにおいて、文章の理解と情報の整理は欠かせない作業なのです。

優れたデザイナーは、言葉の力を引き出すために、視覚的な表現と融合させる、という視点に立ちます。そうすることでデザインは単なる装飾ではなく、情報を伝えるためのツールになるわけです。

【実践編】情報の優先順位づけの3ステップ

具体的には、以下の3つのステップで情報の優先順位づけを行います。

もしいまあなたがレイアウトを迷っているようでしたら改めて以下のステップでデザインをしてみてください。

01.まずは目的設定

デザインを始める前に、何を伝えたいのか、誰に伝えたいのか、どのような行動を起こしてほしいのかを明確にしましょう。これは、まるで料理を作る前にレシピを決めるようなものです。

02.伝えたいことをすべて書き出す

どんなデザインであっても、そもそも情報量が多すぎると結局何も伝わりません。そのため、今からつくるデザインで伝えたいことを、すべて書き出してみます。

商品バナーであれば、その商品の特徴や機能、セールスポイントをすべてリストアップしてみます。あるいはTOPページの1セクション分のレイアウトで迷っているのであれば、その領域のなかで何を伝えるか書き出してみます。

03.情報を仕分けする

次に、リストアップした情報を整理します。関連する情報をグループ化したり、不要な言葉を削ぎ落としたり（二次的な情報は省略や簡略化を検討する）、つまり精査の作業です。

あるいは書き出した情報の中から、最も重要なもの、次に重要なもの、それほど重要ではないものと分類してもOKです。

このタイミングで情報の優先度を管理しておくことで、配置するときにスムーズにいきます。

各グループの情報量を揃えます。情報量が多すぎるとユーザーは混乱してしまうので、簡潔で的確な表現を心がけましょう。

を揃えることで、ユーザーは情報間の関係性を把握しやすくなります。これは当たり前かもしれませんが、

出てきた情報は粒度がバラバラ。情報の粒度を揃えることで、情報の一貫性が保たれ、ユーザーは情報を理解しやすくなります。 同じレベルの詳細さで情報が提供されることで、ユーザーは情報間の関係性を把握しやすくなります。

04.配置してみる

伝えるべき情報をグループ化と優先順位付けによって優先順位したので、次は配置します。

配置のテクニックとしては、最も重要な情報を「メイン」とし、関連性の高い情報を「サブ」として、メインから順に配置していくことです。

• メインとは、デザインの中で一番伝えたいこと、一番アピールしたいことを指します。
• サブとは、メインを補完し、引き立てる役割を担う要素。メインを引き立てつつ、全体の調和を保ちます。

その理由は、人はメインの情報をまず理解し、次にサブの情報へと理解を深めていくからです。つまりメインの情報から順に情報を配置していくと、ユーザーは段階的に情報を追っていくことができ、ユーザーは無理なく自然に情報を理解できるわけです。

また情報の粒度が揃ったものを近くに配置するということも意識したほうがいいです。同じ粒度の情報を近くに配置することで、それらの情報が密接に関連していることを視覚的に示せます。そうするとユーザーは、情報間の関係性を直感的に理解することができ、情報をスムーズに処理できます。

なおこのタイミングではデザインをしなくてOKです。一度ラフ・ワイヤーフレームを作っておくといいと思います。

05.コントラストをつける

優先順位が明確になり、ある程度ラフで配置が決まったら、デザインを進めましょう。

ここでいうデザインとは、強弱（コントラスト）をつけること。具体的にはコントラストは、サイズ、色、タイポグラフィなどの要素を使ってつけていきます。

メインであれば大きなモチーフや、目を引く配色、強いコントラストなどで表現します。サブは派手なデザインや、主張の強い色は避け、調和を意識することが大切です。

またコントラストを付ける際には余白も大事です。余白をコントロールすることでメインと脇役を区別でき、デザインを見やすく、洗練された印象にすることができます。

『視覚的な階層化』こそ、大切

さて実は、ここまで紹介したことはすべて「視覚的な階層化」に関わってくる内容です。視覚的な階層とは、デザイン要素を視覚的な重要度に基づいて配置し、構成することを指しています。

これは僕が冒頭で説明した「情報の優先順位を視覚的に表現する」ための方法論です。視覚的な階層を効果的に使用することで、以下のような利点があります。

1. ユーザーは情報の重要度を一目で判断できる。
2. 重要な情報ほど目立つように配置することで、ユーザーは必要な情報に素早くアクセスできる。
3. 関連する情報を近くに配置したり、同じデザイン要素を使用したりすることで、情報の関連性を視覚的に示せる。

極論、デザインとは、この視覚的階層を戦略的に組み立てていくことだと言えます。つまりデザインができない人は、この視覚的な階層化が苦手であるわけです。

視覚的な階層🟰情報に差をつける基本方法

サイズ、色、配置、コントラスト、余白などの要素を組み合わせることで実現できます。情報の優先順位づけは、練習すれば誰でも上達することができます。

1.サイズの違い

重要な情報は大きく、補足情報は小さく表現します。メインとなる要素は、他の要素よりも2倍以上の大きさにするなど、圧倒的な差をつけることで効果的です。

2. 色の違い

重要な情報は目立つ色、補足情報は落ち着いた色を使います。一般的に、赤、黄色、オレンジなどの暖色は強い印象を与え、青、緑、紫などの寒色は落ち着いた印象を与えます。

3.配置の違い

例えば重要な情報は視線の流れの中央、補足情報は左右や上下に配置します。人は自然と視線を中央に持っていくため、中央に重要な情報を配置することで、ユーザーの注意を喚起することができます。

4.タイポグラフィの違い

重要な情報に太字やより大きなフォントを使用し、そうでない情報には細字や小さなフォントを使用することで、視覚的な階層を作ることができます。

5.下線・枠線・ハイライトというあしらいを利用する

キーワードや重要な語句に下線を引いたり、重要な情報を囲んだり、重要な情報を強調するためにハイライトを使ったり。その情報が重要であることを示すことができます。