伝わるデザインの基本を読みました! ドキュメントを書くすべての人に読んでほしい[書評]


伝わるデザインの基本
よい資料を作るためのレイアウトのルール
』を『Kindle Voyage』で読みました。
たまにパワーポイントですごくきれいな資料を作る人がいましたが、ああこういうルールを守れば読み手に優しく、
読みやすくなるんだな。と納得できる実践的な情報が満載の一冊です。多分これから、何度も読んで仕事やプライベート
で活用していくことになると思います!


🍮 目立つ書体と読みやすい書体

知らないと気付かないことですが、知ってしまうとなるほどと思います。
この使い分けは一番初めに書かれていますが、かなり大切です!

  - 日本語
    - 明朝体: 長文などにマッチしていて読みやすい。疲れにくい。
    - ゴシック体: 短文など目立つところに置くといい。パワポのタイトルとか。
  - 英語
    - セリフ体: 長文などにマッチしていて読みやすい。疲れにくい。
    - サンセリフ体: 短文など目立つところに置くといい。

長文では、基本は明朝体とセリフ体を使い、タイトルなどの目立つところにはゴシック体とサンセリフ体を使うと良さそう。
パワポは逆で、基本はゴシック体とサンセリフ体を使い、長文で読みにくそうな部分があれば明朝体とセリフ体を使うことを検討するくらい。

🗽 美しいフォントを選ぶ

WindowsとMacでお勧めのフォントは次のとおり。

  - Windows
    - 明朝体
      - 游明朝
    - ゴシック体
      - メイリオ
      - 游ゴシック
  - Mac
    - 明朝体
      - ヒラギノ明朝
      - 游明朝
    - ゴシック体
      - ヒラギノ角ゴ
      - 游ゴシック

🐠 フォントで気を付けること

- 英数字には、必ず英文フォントを使う
- 日本語フォントと英数字フォントの組み合わせ
  - 日本語がゴシックなら、英数字には基本はサンセリフ体を組み合わせる
  - 日本語が明朝体なら、英数字には基本はセリフ体をつかうこと

🚌 数字は強調し、単位は小さくする

これは目からうろこでしたが、特にパワーポイントなどでは「数字は強調し、単位は小さくする」
を徹底するだけでも格段に見やすくなります。

👽 背景がわかりにくい時には袋文字(黒字で枠が白)

背景に写真などを使う場合には、袋文字(黒字に枠が白)というのを
使うだけでもかなり見栄えが変わります。

🎃 文字の強弱には気を付ける

有用度に応じて優先順位をつけて、それに応じた文字サイズを適用します。
すると、目線を正しく誘導できる、受け手にやさしい資料になります。

😎 文字に関するTips

  - 地面の大きな文字(メイリオやヒラギノ角ゴ)などは、少しだけ字間を広げると読みやすくなります
  - 行間は「行の長さ」に合わせて、読みやすさを意識して調整するといいです
  - 和文と欧文の字間は少し調整をしたほうが読みやすくなります
  - 1行の文字数は増やしすぎない方が読みやすい資料になります

🚜 図形に関するTips

  - 矢印の図形を使う場合は、変形させずに、矢じりの大きさと柄の太さを統一する
  - 必ず余白で囲う。文字数(行数や横幅)などが増えるほど、余白を多めに取る
  - フローチャートは位置と大きさを揃える
  - 影やグラデーションをなくして、不要な補助線は載せない。フォントはゴシックにする
  - 囲みや塗りの色は最低限に。囲みのサイズは統一させる

🐝 表に間するTips

  - フォントや線、行間、揃えを調節する
  - 1行ごとに背景をつけると罫線が不要になったり、読みやすくなる

🐰 レイアウトにおける5つの法則

  - 余白を取る: 資料やスライドの上下左右に余白をしっかりと取る
  - 揃える: グリットを意識して、レイアウトを揃えて配置する
  - グループ化する: グループ化により、直感的に構造を把握できるようにする
  - 強弱をつける: 有用度に応じて、文字の太さやサイズ、色を調節する
  - 繰り返す: ルールを作り繰り返すことで、読み手の読みやすさに配慮する

😀 Kindle Voyageいいよ!


この本ですが、『Kindle Voyage』で読みました。kindleは6インチでちっちゃいから読みにくい
とか、白黒残念とか脳内で妄想していました。でも買ってみると自分の読書体験を塗り替えるほどのプロダクトでした。
何より読みやすい、読書が楽しいです。voyageなら、画面もめっちゃきれいです。

ちなみに、いつまでかはわかりませんが「30日間全額返金キャンペーン」もやっているので、まずは一度買ってためしてみるのもありだと思います!

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)