表のデザイン、どっちが正解？情報の整理に役立つデザインセンスを磨いておこう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
デザイン会社でディレクターをしている田口 冬菜です。
資料を作成する際、「表を使いたいけど、なんだか情報がごちゃごちゃして見づらくなってしまう……」と悩んだことはありませんか？
表は、情報を整理して伝えるのにとても便利ですが、デザイン次第で見やすさや印象が大きく変わってしまいます。
そこで今回、表のデザインに関するクイズを3問ご用意しました。
以下の3つの作例を見て、AとB、あなたはどちらの「表のデザイン」が見やすいと感じますか？
1問目「表の罫線」（難易度★）
表に使っている罫線の違い、表の内容が見やすいのはどっち？
2問目「料金表」（難易度★）
料金表の文字の色の違い、表の内容が見やすいのはどっち？
3問目「比較表」（難易度★★）
比較表の背景色の違い、表の内容が見やすいのはどっち？
いかがでしたか？
私が考える答えは……
1問目の答え：B
2問目の答え：A
3問目の答え：B
以上が、私なりの解答です。
3つの作例の違いは、それぞれ表のデザインにおける基本を意識できているかどうかでした。
ちょっとした工夫で、情報の伝わりやすさが変わります。
ここからは、それぞれの作例でAとBがどう違っていたのかを確認しながら、表のデザインをワンランクアップさせるデザインのコツを解説していきます。
1. 罫線はできるだけ薄く、細くする
まず、1問目から振り返っていきます。
私が選んだ答えは「B」でした。
AとBの違いは、「罫線の太さと色」です。
Aの表は、罫線が太く、色が黒なので、線がとても目立っている印象です。
一方でBの表は、罫線が細く、薄いグレーになっているので、線よりも表の内容が目に入りやすいですよね。
表の罫線は「できるだけ細く、薄くする」のがデザインの基本です。
なぜなら、太い線や濃い線は「区切り」を強調しすぎるため、伝えたい内容よりも「線」の存在が強くなってしまうからです。
罫線の印象を軽くすることで、読み手の視線がスムーズに流れ、情報の理解がしやすくなります。
見た目もスッキリと洗練されるので、資料全体のクオリティも高く感じられるでしょう。
ほんの少し罫線を工夫するだけで、表の仕上がりはグッと上品になります。
伝えたい情報をよりスムーズに、効果的に伝えるためにも、ぜひ罫線の扱いを意識してみてください。
Illustratorでの表を作る方法
Illustratorには表組み専用の機能がないため、目的に応じて複数の機能を組み合わせて作成します。
作りたい表の内容や構造によって、最適な作成方法は異なります。
ここでは、以下の2つのケースに合った表の作り方を解説します。
- ケース1：テキストとテキスト以外を別途作成
- ケース2：各セルを「エリア内文字」で作成
なお、表組みを構成するそれぞれの区画は「セル」と呼びます。
ケース1：テキストとテキスト以外を別途作成
Microsoft ExcelやGoogle スプレッドシートに既に表のデータがある場合、これを「タブ区切りテキスト」形式で書き出します。
Excelの場合
- 「ファイル」＞「名前を付けて保存」をクリックし、保存先を指定
- 「ファイルの種類」を「テキスト（タブ区切り）」に指定し、保存
Googleスプレッドシートの場合
- 「ファイル」＞「ダウンロード」をクリック
- 「タブ区切り形式」を選び、ダウンロード
次に、書き出した「タブ区切りテキスト」ファイル（.txtや.tsvなど）をテキストエディタで開き、文字列をそのままコピーしてIllustratorに配置します。
配置した文字列は、まだ表の形になっていません。
ここで「タブ」パネルを使って、それぞれの列の位置を調整し、表のように見やすくレイアウトしましょう。
なお、タブパネルは、「ウィンドウ」＞「書式」＞「タブ」で表示できます。
また、罫線やセルのカラーなどは別途図形として作成しておく必要があります。
二度手間のように感じるかもしれませんが、罫線やセルのカラーなどの処理の自由度が高いので、プロの現場でも一般的に行われている手法です。
テキストと表のデザインが完成したら、テキストが上になるように重ね合わせれば、表の完成です。
ケース2：各セルを「エリア内文字」で作成
セルに複数行のテキストが入る場合は、各セルを「エリア内文字」として表を作成する方法もあります。
やり方はカンタンです。
同じ大きさのエリア内文字のテキストボックスに文字を入力し、各テキストボックスを並べ、背景色や枠線に色を付ければ表が完成します。
ただし、この方法の場合、セルの四辺に同じ太さの罫線が設定されてしまうため、細かなデザイン調整は難しくなることを覚えておきましょう。
2．色の数は最小限にする
続いて、2問目を振り返ります。
私が選んだ答えは「A」でした。
AとBの表の違いは、文字の色です。
Aの表は、上部の見出しだけ背景色を変えていますが、料金やプラン内容の文字はすべて同じ「黒」で統一し、シンプルにまとめています。
これに対してBの表は、プランごとの色（青・緑）を料金やプラン内容の文字にも反映し、カラフルな見た目になっています。
一見すると、Bの表も整っているように感じますが、Aの表のほうが文字が読みやすいと思いませんか？
表の文字色を決めるときのポイントは、「比較のしやすさ」と「文字の見やすさ」です。
まず、「比較のしやすさ」について解説します。
情報を比較しやすい表を作成するには、文字色は「見出し」と「本文」の2色程度に抑えるのがオススメです。
色を絞ることで、表の構造がひと目で理解でき、さらに視線が横方向に動くことで、それぞれのプランの料金や内容を比べやすくなります。
次に、「文字の見やすさ」について解説します。
文字に色を付けると、文字と背景との色の差（コントラスト）が弱くなってしまい、どうしても読みにくくなってしまいます。
そのため、文字色は「黒」に統一するのが、一番見やすくてオススメです。
情報を正確に伝えるうえで、文字の読みやすさは欠かせません。
どんなに有用な情報や整ったレイアウトでも、文字が読みにくいと、伝えたいことが伝わらなかったり、誤って読まれてしまったりする原因になりかねません。
表の中で「目立たせたい」箇所がある場合も、むやみに文字の色を変えることは避け、文字や罫線を太くする、大きさを変えるといった方法で強調してみてください。
そうすることで、文字と背景のコントラストを保ったまま、目立たせることができます。
コントラストが十分あるかどうかを確認する方法は、3問目の解説にてご紹介します。
Illustratorの「グローバルカラー」を使ってカラーを管理しよう
Illustratorを使ってデザインをする際、通常はスウォッチを使って複数のオブジェクトに同じ色を割り当てますが、同じ色のオブジェクトが多いときは色の変更が大変だと感じますよね。
そんなときは「グローバルカラー」機能を使ってみましょう。
グローバルカラーとは、色の適用先とのリンク情報を保持でき、一度にまとめて色を調整できるとても便利な機能です。
グローバルカラーを設定するには、スウォッチをダブルクリックすると開く「スウォッチオプション」ダイアログボックスで「グローバル」オプションをONにするだけです。
「グローバルスウォッチ」になると、スウォッチパネルでは右下が欠けたアイコンになります。
まとめて管理がカンタンに：スウォッチグループ作成時にグローバル化
グローバルスウォッチの便利さを理解しても、ひとつずつ設定していくのは面倒です。
そんなときにオススメなのは、アートワークを選択した状態で「新規スウォッチグループ」を作成する方法です。
- アートワークを選択した状態で「スウォッチ」パネル下部のフォルダーアイコンをクリック
- ダイアログボックスが開いたら「プロセスをグローバルに変換」オプションをONにしてOKボタンをクリック
これで、選択したアートワークに使われている色が、すべてグローバルカラーとしてスウォッチパネルに登録されます。
この方法を使えば、色の設定がさらにスムーズになるので、ぜひお試しください。
3. 文字の読みやすさを意識する
それでは最後の3問目です。
私が選んだ答えは「B」でした。
AとBの表の違いは、「弊社」の列の強調方法です。
Bの表は、見出しと罫線の強調によって「弊社」の内容を目立たせていて、優位性を伝えるための文字や記号がハッキリとしています。
一方でAの表は、背景色を付けたことで、文字や記号が見えづらいと感じませんか？
これは、2問目でも解説した「コントラスト」の低さによるものです。
文字の色を変えるリスクは既にお伝えしましたが、背景色を変える際にも注意が必要です。
今回の作例のように表の一部を目立たせたいときは、Bのように罫線や見出しの調整を行うのがオススメです。
コントラストの確認は「Adobe Color」が便利
色を扱う難しさやリスクはわかったけど、どうしても背景や文字に色を付けたい……。
そんなときは、コントラスト比を確認できるツール「Adobe Color」を活用しましょう。
コントラスト比とは、文字と背景の色など、隣接する色同士の「明るさの差」を比率で示したものです。
この比率の数字が大きいほど文字がハッキリ見え、小さいほど文字は見えづらくなります。
色の見え方には個人差があったり、利用するデバイスや環境によって見え方が変わったりすることがあるため、誰でも見やすいデザインにするには、この比率がとても重要になります。
Adobe Colorを使えば、ウェブサイトやコンテンツが、障害の有無や利用環境に関わらず、できるだけ多くの人が利用できるようにするためのガイドライン「Web Content Accessibility Guidelines（WCAG）」の標準規格を満たしているかどうかを手軽に評価できます。
使い方はとてもカンタンです。
Adobe Colorにアクセスし、テキストカラーと背景色を入力します。
すると、コントラスト比だけでなく、以下の要素の「合格／不合格」も確認できます。
- 通常のテキスト
- 大きなテキスト
- グラフィックコンポーネント（図形）
本作例で使用している文字色（黒）と背景色（白）を入力してみると、コントラスト比はWCAGの基準を満たす「合格」レベルであることがわかります。
続いて、作例Aで使用した◎・◯の色（ピンク）と背景色（薄い青）を入力してみます。
結果はすべて「不合格」。
つまり、多くの人にとって読みづらい表であることがわかりました。
カラーコードの入力が面倒な場合は、「カラーの読み込み」を選択し、表の画像をアップロードしてください。
すると、カラーコードが自動で入力されます。
文字色（テキストカラー）と背景色は自動的に入力されますが、確認したい部分が他にある場合は、画面上で指定することもできます。
また、コントラスト比が合格レベルに達していないときは、右サイドバーの「おすすめ」機能を使って調整すると便利です。
候補の中から好みの配色を選び「適用」をクリックすると、合格レベルのカラーコードを提案してくれます。
コントラストチェッカーは、デザインの現場でも使用されるツールです。
背景や文字の色を選ぶ際には、ぜひ活用してみてください。
まとめ：見やすい表をデザインするポイント
今回は表のデザインに関するクイズと、デザインのコツを紹介しました。
最後にノウハウをまとめます。
1．罫線はできるだけ薄く、細くする
罫線の色や太さを控えめにすると、表の見た目がスッキリして洗練された印象になります。視線の流れや情報の理解もスムーズになり、表の効果を高めることができるでしょう。
2．色の数は最小限にする
文字の色数は、最小限にとどめましょう。
表の構造がひと目でわかり、内容が伝わりやすくなります。
白背景であれば、文字は基本的に黒で統一するのがオススメです。
3．文字の読みやすさを意識する
表の中の一部を強調したい場合は、安易に背景色を変えるのではなく、見出しや罫線、文字などの調整によって目立たせましょう。
どうしても背景や文字の色を変えたい場合は、コントラスト比に注意し、文字の読みやすさを確保しましょう。
表のデザインを少し見直すだけで、情報の伝わり方は大きく変わります。
見やすく整った表は、説得力を高め、成果につながる武器になるでしょう。
ここで学んだノウハウを活かして、ぜひ伝わる表づくりにお役立てください。
お相手は、デザイン会社でディレクターをしている田口 冬菜でした。
本コーナーでは、あなたのデザイン力アップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。クイズの答えはひとつの参考としてください。
執筆：田口 冬菜
株式会社necco所属、ディレクター・エディター。元デザイナー。著書に『これからはじめるFigma Web・UIデザイン入門』があります。前職は理学療法士。趣味は朝カフェ（モーニング）、読書、ブログ、インテリア。