デザイン

作成日時：2024-08-01以前
更新日時：2024-08-01

伝わる資料の作成に関して。

テクニカルライティングに基づいて書くのは当たり前。
内容をさらに理解してもらうためのデザインルールを列挙する。

「それ」は本当に見やすいか。パッと見、ク◯コードと同じ匂いがしないか。
PIE原則に基づき、可読性に優れた見た目とすること。

伝わらなければ価値は無い。

目的重視

• 目的は何か
• ターゲットは誰か

原則

• 近接
  • 関連項目はまとめる
  • 近くに置く
• 整列
  • コンテンツは並べる
  • 視線誘導を考慮する(Z方向、F方向、I方向(シングルカラム))
• 反復
  • 同一の情報は同一のレイアウトで繰り返す
  • パターンを覚えさせることで認知負荷を下げる
  • 驚き最小の原則
• 強弱

色

• 原色は使うな
  • 目にきつい
  • 色覚異常がある場合は見分けにくい
• 基本は3色
  • 6:ベース(背景)
  • 3:メイン(文字色)
  • 1:アクセント(強調文字)⇒メインの補色
  • 上記以外にも、区別したい時には色を分ける

フォント

• 基本ゴシックでいい
• フォントサイズで強弱をつける
• 単位は小さく
• 記号、ワード、数値の途中で改行しない
• 余白の美。漢字をひらく。

画像

文章より情報量があるから、積極的に使っていけ。
その文書が何を伝えようとしているかを、認知させることができる。
⇒認知負荷の低減。

パワーポイント

• KISS原則
  • 1シート1メッセージ
  • 短い見出し
• 適切なフォント(もうゴシックでいいよ)
  • 長文には明朝体だが、長文自体発生させていいのか。
  • 文字サイズにメリハリを
• 適切な余白・行間
• 適度にイラスト
• 適度に装飾
• 適度に図・表・グラフ
• 端を揃える
• 背景色に埋もれない文字色
• 主題を大きく
• 視線の流れ
• 線は使わず余白で区切れ
• PREP/SPReaD
  • Sが見出し
  • PRが概要で第2見出し
  • Dで詳細
• パラグラフライティング
• 具体的な数字
• 見た目は統一
  • クラスファイルごとにコーディングスタイルが異なってはいけないのと同じ

アナロジー思考

BOSCARの概念(背景と目的)やプロトの作成による合意形成とか、
システム開発と似通る。

コーディング原則適用思想

全ては構造。

リンク

Design patterns