表のデザイン、どっちが正解？情報の整理に役立つデザインセンスを磨いておこう

3問目の答え：B

以上が、私なりの解答です。

3つの作例の違いは、それぞれ表のデザインにおける基本を意識できているかどうかでした。

ちょっとした工夫で、情報の伝わりやすさが変わります。

ここからは、それぞれの作例でAとBがどう違っていたのかを確認しながら、表のデザインをワンランクアップさせるデザインのコツを解説していきます。

Illustratorでの表を作る方法

Illustratorには表組み専用の機能がないため、目的に応じて複数の機能を組み合わせて作成します。

作りたい表の内容や構造によって、最適な作成方法は異なります。

ここでは、以下の2つのケースに合った表の作り方を解説します。

• ケース1：テキストとテキスト以外を別途作成
• ケース2：各セルを「エリア内文字」で作成

なお、表組みを構成するそれぞれの区画は「セル」と呼びます。

Illustratorの「グローバルカラー」を使ってカラーを管理しよう

Illustratorを使ってデザインをする際、通常はスウォッチを使って複数のオブジェクトに同じ色を割り当てますが、同じ色のオブジェクトが多いときは色の変更が大変だと感じますよね。

そんなときは「グローバルカラー」機能を使ってみましょう。

グローバルカラーとは、色の適用先とのリンク情報を保持でき、一度にまとめて色を調整できるとても便利な機能です。

グローバルカラーを設定するには、スウォッチをダブルクリックすると開く「スウォッチオプション」ダイアログボックスで「グローバル」オプションをONにするだけです。

「グローバルスウォッチ」になると、スウォッチパネルでは右下が欠けたアイコンになります。

まとめて管理がカンタンに：スウォッチグループ作成時にグローバル化

グローバルスウォッチの便利さを理解しても、ひとつずつ設定していくのは面倒です。

そんなときにオススメなのは、アートワークを選択した状態で「新規スウォッチグループ」を作成する方法です。

1. アートワークを選択した状態で「スウォッチ」パネル下部のフォルダーアイコンをクリック
2. ダイアログボックスが開いたら「プロセスをグローバルに変換」オプションをONにしてOKボタンをクリック

これで、選択したアートワークに使われている色が、すべてグローバルカラーとしてスウォッチパネルに登録されます。

この方法を使えば、色の設定がさらにスムーズになるので、ぜひお試しください。

コントラストの確認は「Adobe Color」が便利

色を扱う難しさやリスクはわかったけど、どうしても背景や文字に色を付けたい……。

そんなときは、コントラスト比を確認できるツール「Adobe Color」を活用しましょう。

コントラスト比とは、文字と背景の色など、隣接する色同士の「明るさの差」を比率で示したものです。

この比率の数字が大きいほど文字がハッキリ見え、小さいほど文字は見えづらくなります。

色の見え方には個人差があったり、利用するデバイスや環境によって見え方が変わったりすることがあるため、誰でも見やすいデザインにするには、この比率がとても重要になります。

Adobe Colorを使えば、ウェブサイトやコンテンツが、障害の有無や利用環境に関わらず、できるだけ多くの人が利用できるようにするためのガイドライン「Web Content Accessibility Guidelines（WCAG）」の標準規格を満たしているかどうかを手軽に評価できます。

使い方はとてもカンタンです。

Adobe Colorにアクセスし、テキストカラーと背景色を入力します。

すると、コントラスト比だけでなく、以下の要素の「合格／不合格」も確認できます。

• 通常のテキスト
• 大きなテキスト
• グラフィックコンポーネント（図形）

本作例で使用している文字色（黒）と背景色（白）を入力してみると、コントラスト比はWCAGの基準を満たす「合格」レベルであることがわかります。

続いて、作例Aで使用した◎・◯の色（ピンク）と背景色（薄い青）を入力してみます。

結果はすべて「不合格」。

つまり、多くの人にとって読みづらい表であることがわかりました。

カラーコードの入力が面倒な場合は、「カラーの読み込み」を選択し、表の画像をアップロードしてください。

すると、カラーコードが自動で入力されます。

文字色（テキストカラー）と背景色は自動的に入力されますが、確認したい部分が他にある場合は、画面上で指定することもできます。

また、コントラスト比が合格レベルに達していないときは、右サイドバーの「おすすめ」機能を使って調整すると便利です。

候補の中から好みの配色を選び「適用」をクリックすると、合格レベルのカラーコードを提案してくれます。

コントラストチェッカーは、デザインの現場でも使用されるツールです。

背景や文字の色を選ぶ際には、ぜひ活用してみてください。

1．罫線はできるだけ薄く、細くする

罫線の色や太さを控えめにすると、表の見た目がスッキリして洗練された印象になります。視線の流れや情報の理解もスムーズになり、表の効果を高めることができるでしょう。

2．色の数は最小限にする

文字の色数は、最小限にとどめましょう。

表の構造がひと目でわかり、内容が伝わりやすくなります。

白背景であれば、文字は基本的に黒で統一するのがオススメです。

3．文字の読みやすさを意識する

表の中の一部を強調したい場合は、安易に背景色を変えるのではなく、見出しや罫線、文字などの調整によって目立たせましょう。

どうしても背景や文字の色を変えたい場合は、コントラスト比に注意し、文字の読みやすさを確保しましょう。

表のデザインを少し見直すだけで、情報の伝わり方は大きく変わります。

見やすく整った表は、説得力を高め、成果につながる武器になるでしょう。

ここで学んだノウハウを活かして、ぜひ伝わる表づくりにお役立てください。

お相手は、デザイン会社でディレクターをしている田口 冬菜でした。

本コーナーでは、あなたのデザイン力アップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。


※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。クイズの答えはひとつの参考としてください。