デザイナーのtstk1371 a.k.a @mittuntun です。
WMS（倉庫管理システム）の設計や、デザイン周りの雑務をゴソっと引き受けています。
本記事はOPENLOGI AdventCalendar 9日目の記事です。
今回の記事ではデザイナーでなくても明日から実践しやすいデザイン周りの小技について紹介していきたいと思います。
マスターをつくろう
プレゼン資料でも紙の資料でも、伝えるストーリーを決めた後にすべきことはマスターの作成です。実際の資料を作り込む前に、頻繁に使用するコンポーネントとカラーのルールを決めておくことで統一感のある資料を作成することができます。
マスターで定義しておくべきことはたくさんありますが、そのうち今回ご紹介するのはフォントの指定とカラーの指定です。
フォントを指定しよう
まずはフォントについて
フォントを設定する上で重要なポイントは以下の3つです
- 資料にメインで使用するフォントサイズは3種類
- ジャンプ率は訴える対象で使い分け
- 「とりあえず」で選ぶならサンセリフ
資料にメインで使用するフォントサイズは3種類
フォントサイズを事前に定義します。1つの目安としては3種類設定しておくと良いでしょう。
それぞれの使い分けとしては、情報設計における重要度の設定として
重要度：高、中、低とするか、もしくは役割の設定として見出し、本文、補足とします。
boldの使い所
また、フォントのウェイト（太さ）についてですが、boldはなるべく使わないことを推奨します。ただし先ほど挙げた重要度、もしくは役割の中でさらに詳細化が必要なケース（例：情報の重要さでは中だが、他の中よりも重要なので強調したい。かと言って高のフォントサイズにするほどではない。など）では有効な手段です。
※逆に重要度を弱めたいときにはフォントのカラーを同一色相の中で、薄くする手段が有効です。
ジャンプ率は訴える対象で使い分け
ジャンプ率とは、ホームページや商品パンフレットのデザインにおける、本文のサイズに対する見出しの大きさの比率のことをさします。
私はこのジャンプ率を、資料の目的として情動に訴えるものか、論理に訴えるものかで使い分けをしています。前者ではジャンプ率を高く（2倍以上）、後者ではジャンプ率を低く設定（2倍以下）していることが多いです。
「とりあえず」で選ぶならサンセリフ
書体には大きくセリフ体とサンセリフ体があります。
セリフとは文字の先端にある小さな飾りのことで、セリフを持つフォントのことをセリフ体といいます。
サンセリフ体は、セリフ体に比べると縦線・横線の太さもほぼ均等で目立った特徴は特にありません。特徴がないためいろんなシーンで馴染みやすいものと言えるでしょう。個人的なおすすめサンセリフ体のフォントは
和文であれば
- 源ノ角ゴシック
- ヒラギノ角ゴシック
英文であれば - Helvetica
- Arial
です。これらはどのシーンであっても標準的なフォントとして重宝できるでしょう。
カラーを指定しよう
想いがなければColor Toolにお任せ
Color Toolはプライマリーカラーを設定すると、material designに合わせてプライマリーカラーのLightパターン、Darkパターンを自動で設定してくれるだけでなく、UIパターンやアクセシビリティの評価までしてくれます。
カラーに対する専門性を持っていなくても、このツールを使うことで複数カラーでの検証や、妥当性を容易に検討することができます。
色を組み合わせるなら近似色か補色
また、複数の色を組み合わせる場合は色相環において隣り合う色、もしくは真反対にある色同士だと相性が良いと言われています。当然のことながら使う色の種類が増えるとそれだけ表現の難易度が上がることになるので、色を増やす場合はその難しさを認識した上で使うようにしましょう。
慣れたら心理学的効果も使おう
色は単独で心理学的なメッセージを持っています。
下のCOLOR EMOTION GUIDEはその一例です。例えば青は信頼というメッセージを持っているので、自分の主張に説得力を持たせる場合に、オレンジはフレンドリーというメッセージを持っているので相手に親しみを持って欲しいときに有効です。
自分が資料を通して伝えたいメッセージと近しいメッセージを選択し、色を有効に活用しましょう。
終わりに
デザインの小技をいくつか紹介してみました。
整列、強弱、近接、反復の4大原則だけでなく、さらにステップアップしてみたい方はぜひお試しください。