この情報の強弱の付け方、どっちが正解？情報整理のセンスを磨こう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
デザイナーのでざいん姉さんこと佐野五月です。
今回、私は「情報整理」についてのクイズを出題します。
早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの「情報の強弱の付け方」がよいと感じますか？
1問目「目立たせたい文字が際立っているのはどっち？」（難易度★）
2問目「色の使い分けが適切なのはどっち？」（難易度★★）
3問目「情報のグルーピングと余白のとり方が適切なのはどっち？」（難易度★★★）
いかがでしたか？
私が考える答えは……
1問目の答え：B
2問目の答え：A
3問目の答え：B
以上が私なりの解答です。
あなたが良いと感じた「情報の強弱の付け方」は、AとBどちらでしたか？
ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
1．文字のサイズと太さで情報の優先順位をつける
まず、1問目から振り返っていきましょう。
この問題は「目立たせたい文字が際立っているのはどっち？」というものでした。
私が選んだ答えは「B」でした。
なぜなら、Bは主役がはっきりしているからです。
Bでは、このバナーで最も伝えたい「FINAL SALE」と「80% OFF」を大きく、太く配置することで、最初に主役が目に入り、そのあとに補足情報へと自然に目が移ります。
一方でAは、情報の強弱が逆になっています。
「FINAL SALE」と「80% OFF」は一定のサイズがありますが、補足情報である「メンズ・レディース全品対象」が太く強調されています。
そのため、このバナーを見たときに視線が補足にいってしまい、主役の情報が伝わらないデザインになっています。
何を主役にするかは「お客さんの視点」で考える
このクイズのテーマは「文字の強弱（サイズや太さ）のつけ方」ですが、デザインを始める前に重要なステップがあります。
それは、「何が一番重要な情報か」を整理することです。
まずは、自分がそのデザインを受け取る「お客さんの立場」になって想像してみましょう。
このデザインはセールのお知らせです。
あなたがお店の前を通りかかったり、SNSで流れてくる画像をパッと見たとき、最初に知りたい情報は何でしょうか？
おそらく、「セールが開催されていること」と「どれくらい安くなるのか」という2点ではないでしょうか。
つまり、このデザインの主役は「FINAL SALE」と「80% OFF」なのです。
ただし、「どのセール告知でも主役は同じ」という意味ではありません。
今回のように、デザインの目的が「割引の強さを伝えること」だった場合は、「FINAL SALE」と「80% OFF」という情報が最も大切になる、ということです。
主役は大きく太く、補足情報は小さく細く
「どの情報が一番大切か」を決めたら、その順番で強弱をつけることが基本です。
例えば、以下のように文字の目立ち方を変えてみましょう。
- 主役となる情報：フォントの大きさやウェイトで強調
- 補足となる情報：サイズを小さく、線を細くして存在感を抑える
このように情報の役割に合わせて差をつけることで、見た人に伝えたい情報を的確に届けられるデザインになります。
Illustratorで文字を太くする方法と注意点
ここでは、Illustratorで文字を太くする方法と、読みやすさを保つための注意点をご紹介します。
IllustratorにはWordのような太字ボタン（Bボタン）はありません。
そのため、文字を太くする場合はフォントの「ウェイト（太さの種類）」を変更します。
文字を選択した後、「文字パネル」にある「フォントスタイル」で太さを選べば変更できます。
この方法で変更すれば、フォントデザイナーが美しく見えるように設計した太さなので、文字の形が崩れる心配がありません。
【注意点】ただ「線」をつけるだけだと文字がつぶれる
文字に対して単に「線」を追加して太らせる方法もありますが、内側の空間がつぶれやすく、小さいサイズでは読みにくくなりがちです。
特に画数の多い漢字や、8・あ・eのように「ふところ」（内側の空間）のある文字は注意が必要です。
どうしても「線」を使う場合は、実際に使うサイズで表示し、文字がつぶれていないか、文字同士がくっついていないかを必ず目視で確認しましょう。
2．色の使い分けで情報の優先順位をつける
続いて、2問目を振り返っていきましょう。
この問題は「色の使い分けが適切なのはどっち？」というものでした。
私が選んだ答えは「A」でした。
Aは「情報デザイン入門セミナー」というタイトルに赤色を使い、さらにコントラスト（背景との明暗差）を強くしています。
そのため、パッと見た瞬間にタイトルが目に入り、その後に日付や詳細へと自然に視線が移ります。
一方でBは、タイトルが水色でコントラストが弱いため、下部の赤い日付やフレームが目立っています。
これでは、タイトルよりも日付やフレームに目が引き寄せられるため、情報の優先順位が逆転してしまっている状態です。
さらに、AとBをよく比較してみると、実はBのデザインは全体的にコントラストが弱くなっています。
例えば、Bの水色はAよりも薄く、背景との明暗差が小さいため、タイトルがはっきりと見えません。
本来いちばん最初に目に入ってほしい情報が、視覚的に強く見えない状態です。
さらに、イラストの黒色や枠の赤色なども、Aに比べるとコントラストが弱くなっています。
小さな違いですが、「適切な配色ではない」ことが積み重なると、デザイン全体が「ぼんやり」とした印象になり、伝えたいメッセージが届きにくくなってしまうのです。
どの情報が一番大切か「役割」を決めよう
情報整理の観点では、まずは情報の役割を考えます。
今回の作例の情報を整理すると、以下のように分けられます。
- 内容（何のセミナーか）
- 日時（いつ開催か）
- 対象・形式（誰向け・どこで）
- 行動（申し込み）
ここでも、「お客さんの立場」で考えてみましょう。
何のセミナーかわからないのに、クリックしようとは思わないですよね。
つまり、このデザインの主役は、1番の「内容（何のセミナーか）」です。
ここで、あらためてAとBを比較してみましょう。
Aは、色の強さと情報の役割が一致しており、見せたい情報が最も目立つようになっています。
Bは、色の強さが「日付」に偏っているため、優先順位のバランスが崩れています。
色は単なる飾りではなく、「視線をどこに向けるか」をコントロールする力をもっています。
どの色が目立つかを理解し、情報の重要度に合わせて配置することが、デザインにおいてとても大切なのです。
なお、実際のセミナー告知では「無料／有料」や「参加費」などの情報も、参加判断に大きく関わる重要な要素です。
今回の作例では省略していますが、本来は入っているのが理想です。
なぜ「赤」は目立つのか？
今回の作例では、赤色と水色を比較して「赤色のほうが目立つ」という結果になりました。
では、なぜ赤色が目立つのか、色の特徴とともに解説します。
赤は「進出色」と呼ばれ、視覚的に手前に迫って見える性質があります。
暖色系で彩度の高い色は、寒色系よりも前に出て見えやすい傾向があります。
逆に、水色のような寒色系は「後退色」とされ、奥に引いて見えやすい色です。
さらに、赤は「注意・警告・緊急」といった意味を連想させる色でもあります。
信号やセール表示など、「重要」や「今すぐ」を伝える場面でよく使われているため、私たちは無意識に赤に注意を向けます。
そのため、日付や申込ボタンなど行動につながる情報によく使われます。
しかし、進出色の強い印象はリスクにもなります。
例えば、Bのように主役（セミナータイトル）でない情報に進出色を使ってしまうと、視線がそちらに奪われてしまいます。
色のもつ物理的・心理的な効果を考えずに使うと、情報の階層が崩れてしまうので注意が必要です。
Illustratorの「生成AI」であしらいやイラストを入れてみよう
Illustratorの生成AIを使えば、イラストやパターンなどを作ることができます。
ここでは、「ベクターを生成」を使ってイラストを作成する方法を解説します。
【手順1】イラストを追加したい場所に枠を作る
まずは、イラストを入れたい場所に「長方形ツール」などで枠（オブジェクト）を作ります。
【手順2】「ベクターを生成」でイラストを作成する
次に、「コンテキストタスクバー」の「ベクターを生成」をクリックし、作りたいもののイメージをテキストで入力します。
「コンテキストタスクバー」が表示されていない場合は、「ウィンドウ」メニューから「コンテキストタスクバー」をクリックしましょう。
今回は「パソコン シンプル」という簡単なプロンプトにしていますが、「やわらかい表現 水彩 花束」「シンプル 幾何学模様 暖色系」など、具体的に書くほどイメージに近づきます。
生成すると「プロパティ」ウィンドウに生成結果が表示されます。
【手順3】イメージに合うイラストを選び、バランスを調整する
生成結果から、イメージに合うイラストをクリックすると、枠の中に配置されます。
ただし、生成されたものはそのまま使うのではなく、サイズや色などのバランスを必ず調整しましょう。
デザインに合っているか、主役を邪魔していないかを確認することが大切です。
3．情報のグルーピングで関係性を明確にする
最後に、3問目を振り返っていきましょう。
この問題は「情報のグルーピングと余白のとり方が適切なのはどっち？」というものでした。
私が選んだ答えは「B」でした。
なぜならBは、左右のブロックが同じ幅で分けられており、見出し・本文・補足の位置もしっかり揃っているからです。
そのため、文章を細かく読む前に一瞬で「左が課題、右が改善案」と情報の構造を直感的に把握できます。
つまり、内容に入る前に全体像が見える設計です。
一方でAは、致命的にデザインが崩れているわけではありません。
しかし、余白の広さがバラバラだったり、ブロックの位置が微妙にズレていたりします。
その小さなズレによって「どこまでがひとまとまりか」があいまいになり、内容を読み込まないと構造が理解しにくいデザインになっています。
資料では「読み手の負担」に考慮しよう
ポスターやバナーと異なり、資料は説明や提案を「理解してもらう」ことが目的です。
資料はどうしても情報量が多くなりがちですよね。
だからこそ重要なのは、「読む前に構造がわかること」です。
- 何と何がセットなのか
- どこからどこまでがひとつの話なのか
- 左右は比較なのか、上下は補足なのか
Bは、レイアウトの揃え方や余白の使い方によって、これらの関係を視覚的に示しています。
読み手は無意識のうちに全体構造をつかめるため、中身の理解に集中できるのです。
「見た目のルール」で情報の関係性がわかるようにしよう
情報整理とは、単に情報の優先順位をつけるだけではありません。
情報の関係性を見た目でもわかるようにすることも含まれます。
今回の例でいえば、以下の関係性をデザインで表現しています。
- 「現状の課題」はひとまとまりのグループ
- 「改善案」は別のまとまりのグループ
- 両者は対等な「並列」の関係
この「どれとどれが仲間か」という関係性を、余白の取り方と揃え方で自然に伝えられているのがBのデザインです。
資料作成では、派手な装飾よりも 「情報を整理し、見る人が迷わないように配置する」ことが最も大切です。
小さなズレをなくし、読み手への負担に配慮することが、資料のわかりやすさにも直結するのです。
Illustratorで同じ幅・余白を作るコツ
Illustratorで資料を作るとき、最もやってはいけないのが「なんとなく目で見て並べる」ことです。
正確な幅や余白を再現するためには、ガイドを引いて設計する方法もありますが、私がよく使うのは「グリッドに分割」です。
「グリッドに分割」を使えば、オブジェクトの幅や高さ、余白も一発で設定できます。
【手順1】基準となる「長方形」を作る
まず、レイアウトしたい範囲（例えば資料のメインコンテンツ部分など）に合わせて、大きな長方形を1つ描きます。
【手順2】「グリッドに分割」の設定パネルを開く
次に、作成した長方形を選択した状態で、「オブジェクト」メニューの「パス」＞「グリッドに分割」をクリックし、設定パネルを開きます。
【手順3】「数」と「間隔」を入力する
そして、必要な行・列の数を設定します。
また、「間隔」に任意の数値を入力すると、自動で幅や高さを算出してくれます。
レイアウトでは余白の幅や高さを決めていることが多いので、とても便利です。
これだけで、入力した間隔（余白）を差し引いた正確な幅のオブジェクトが、自動で算出・作成されます。
オブジェクトとしてそのまま使ったり、表にしたり、ガイドにしてレイアウトの補助として使ったりもできます。
毎回、目分量で並べるよりも、ずっと早くて正確です。
読み手の理解を助ける情報のグルーピングを、「グリッドに分割」機能を使って素早く実現しましょう。
まとめ：情報整理のセンスを磨くポイント
今回は情報整理に関するクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。
1．文字のサイズと太さで情報の優先順位をつける
文字の大きさや太さで、情報の優先順位をつけることができます。
もし強弱が逆になってしまうと、本当に伝えたい内容よりも、補足のほうに目が向いてしまいます。
まずは、何を一番伝えたいのかをはっきりさせること。
そして、その順番通りに文字の強さを決めることが大切です。
2．色の使い分けで情報の優先順位をつける
色には、それぞれ目立ちやすさの違いがあります。
どの色をどこに使うかで、視線の流れは大きく変わります。
主役よりも目立つ色を別の情報に使ってしまうと、情報の順番が崩れてしまいます。
色は情報の優先順位を伝えるための、大切な表現のひとつです。
3．情報のグルーピングで関係性を明確にする
余白や配置は、情報同士の関係を伝える役割があります。
関係のある情報がまとまっていないと、読み手は自分で整理しながら読まなければなりません。これが重なると読み手に負担をかけてしまいます。
適切なグルーピングは、読み手の理解を助けるための配慮であり、情報を確実に伝えるためのものでもあります。
お相手は、デザイナーのでざいん姉さんこと佐野五月でした。
このコーナーでは、あなたのデザイン力アップに役立つ様々なクイズをお届けしています。よかったら、ほかのクイズにもぜひ挑戦してみてください。
※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。