1. 環境準備
👉 印刷しない資料の背景色は濃い色がおすすめ
資料の背景色は白か黒か、どちらがいいでしょうか?
脳死で白背景で作り続けずに、受け手のことを考えて最適なカラーを模索しましょう。
私なりの答えとしては、印刷する資料なら白、モニターに表示する資料なら黒など濃色がおすすめです。
印刷はCMYKという方式で4色のインクを混ぜ合わせて、白い紙にプリントします(例外あり)。なので、背景は白ベース(要は無色)とか淡い色で考えるのがいいでしょう。
デジタルデバイスはRGBという方式で3種類の光を混ぜ合わせて色を表現しています。CMYKと違いベースは黒です。(電源切れてるとき画面は黒ですよね)RGBの白はすべての光を混ぜる最大出力的なやつなので、眩しく感じる場合があります。(RGBの白は贅沢品)
特にプロジェクターに投影する際には背景が白だと光が眩しすぎて、文字がチラチラと読みにくいことが多いです。
あとよくあるのは、ちょっと大手さん向けの硬めのtoB資料だと(なんかあったら嫌なので)無難に背景白になりがち。ユーザーフレンドリーを考えたいけど慣習に勝てないパターン。
* * *
2. レイアウト
👉 シンプルで強固なルールをつくる
シンプルなデザインシステムはとても強いです。そして、シンプルであればあるほど失敗しにくいです。ですが、ルールにある程度のボリュームが無いと対応できないパターンが発生することはよくあり、コンテンツ側との調節が必要です。
私は最低限以下のルールだけ設定することが多いです。
👉 とにかく何でもそろえる
デザインの基本原則である「整列」です。
基準のガイドラインを設定し、整然と揃えることで見やすく美しいレイアウトを作成する手助けになります。
要素同士の位置、画像の大きさ、色、フォントサイズ、文字数、行数、余白、など揃えられるものは可能な限りなんでも揃えることを心がけましょう。
👉 まとまりを作る
デザインの基本原則である「近接」です。
人間の脳には近くにあり、まとまったものを、ひとつのグループと認識する機能があります。適切にグループを作り情報を整理してあげることで、直感的に理解する手助けのできるレイアウトを作成できます。
👉 メリハリでリズムをつける
デザインの基本原則である「コントラスト」です。
視覚的に要素にメリハリをつけることで、優先度や重要度の情報を読み手に伝えます。また、単調なレイアウトよりもコントラストがあることで、リズミカルなレイアウトになり読みやすくなります。
👉 文章はシンプルなレイアウトにする
基本的に視線は左上からスタートします。
視線を上から下のF型のレイアウトや、左から右のZ型など、シンプルにすることで文章が読みやすいレイアウトを作成できます。
👉 文章はある程度の幅(600px以内推奨)にする
文章はある程度の幅でまとまりを作ると読みやすくなります。A4横や幅1280pxの画面などで横幅いっぱいに文章が並んでいると、行を見失いやすくなります。
* * *
3. フォント
👉 太さは2種類に抑える
太さはレギュラー、ボールドの2種類のみ使用します。
3種類上のウェイトを使用することは、読み手にとっても不要な情報が増えるだけとなりオススメできません。
また、細すぎるウェイトは視認性が落ちるので、ヒラギノであればW3以上から選択しましょう。
👉 単位は小さくする
資料には数値を使用するケースが多いですが、数値に対しての単位についてこんなケースがあります。
そんな時は、単位のサイズを少し落とすとのがオススメです。
👉 見出しの中で強調するのは1箇所にする
見出しで特に強調したい部分を太くしたり、色を変えたりするケースがありますが、2箇所以上強調するとせっかくの強調するという効果が薄まってしまいます。
* * *
4. 情報の表現
👉 省略してもいい情報は省略する
👉 フローは左上からスタート、サイクルは時計回りにする
👉 グラフは基本的に棒グラフから考える
グラフは読み手にデータを伝えるのに便利なツールですが、使い方によっては読みにくいしわかりにくい印象を与えてしまいます。
データの大きさ、構成比、連続性、分布のどこを伝えたいのか意識して適切なグラフを選択しましょう。
大体の要素は棒グラフで表すことができます。棒グラフ以外を選択する場合は、棒グラフと比較して見やすいか?わかりやすいか?を一度検討してみてください。
* * *
5. アンチパターン
🚨 無意味な影やグラデーションは使わない
資料作成時になんか物足りなくて影やグラデーションを使ってしまった経験はあるかと思います。
無意味な(機能的では無い)あしらいは、読み手にとって不要な情報、ノイズになる場合があるので、なんとなくであしらいをつけるのは止めましょう。
🚨 “と”は正しく使う
世の中でとても多く見るのが「2022年版”買ってよかったもの”20選」みたいに“と”を正しく使えていないケース。気をつけましょう。ちなみに読み方はダブルクォーテーション、ダブルクォートです。
* * *
6. おすすめの作成ツールとフォントの紹介
Figma
個人的に今一番おすすめのツール。普段はデジタルプロダクトのUIをFigmaで作ってますが、資料作成のために作られたんじゃ?って勘違いするレベル。デザイナーも非デザイナーもみんなにおすすめ。無料プラン有り。
もちろんKeynote、Googleスライドでも全然ok。組織体制や目的によってベストなツールを使用しましょう。
LINE Seed
LINEが作ったフォント。少しかわいい印象になりますが、英語日本語のバランスがデフォルトでバランス取れているので、いろいろ楽です。
もちろん無料でダウンロード可能で商用利用も可能。
* * *
最後に宣伝の時間です
上記ROXXの説明に関して、ChatGPTさんの回答は正しく無い&古い感じがあったので、同じ質問をCreativeStudioのマネージャーである竹下さんにも聞いて見ました。
株式会社ROXXでは複数のポジションで人材を募集しています。まずはカジュアル面談からって方もよろしくお願いします。