書籍情報

ノンデザイナーズ・デザインブック

メモ

伝わるデザインの基本に続いて、この手の資料作りとかで読んどくといいとお勧めされた1冊。

伝わる〜は資料作りに特価した本だけど、こちらはもっと基礎的な文章の見せ方に対するルールを定義付けた本。

大前提として翻訳本で英語に対するデザインを説明した本なので、後半のフォントの話が完全に英文向けの説明。
とはいえ、デザイン原則とか、フォントの組み合わせルールとか、日本語に対しても転じて適応できる部分はある。

デザインの原則

本の前半（10-162P）がデザインの原則→文章の見せ方の話で、この本で読んでおくべきことの大部分。

以下の話に終始している。

• コントラスト
  要素の違う内容はくっきり違いを感じ取れるようにする

• 反復
  類似するデザインは繰り返す

• 整列
  データの位置は合わせる
  無闇に中央揃えしない（先頭がずれる）

• 近接
  類似する要素は近づけてグループ化する
  関係ない要素は離す

上の文章はこの4つの要素を意識的に取り入れて書いた。
説明すると、

• コントラスト：表題が太字になっている
• 反復：４つの項目を同じフォーマットで提示した
• 整列：表題の下の文字列の開始位置が全て同一である
• 近接：要素の間に１行分の改行があり、グループが見て取れる

…みたいな。

まぁブログの描き散らかし用には面倒なのでこれ以上はやらないけれども…。

あとは色の選び方の話が少々。
でもこの辺は趣味なら自分の直感で選ぶか、配色パターン本なんてのもあるし、こういうところから選んだ方が良さそう。

この本は次に色についてしっかり考えたくなったら買おうかなって思ってる。本屋でパラ見して良さそうだったシリーズ。

FighTimer(ios/android)が緑・オレンジベースなのは趣味。オレンジって活動的でいいよねってところから一番のテーマカラーが決定。
そこから、

• 何もしてない時間→緑
• アクティビティのある（タイマー記録中）時間→オレンジ
• アクティビティ期間限定の要素（リマインダー）→水色

というチョイスで、
緑×オレンジはトライアド、オレンジ×水色は補色。
考えて選んだ記憶はあるので、そう間違ってはいないはず。
　（最も、カテゴリーとかユーザーが好き放題に色を選べるのであまり意味はない。

活字

後半(163-236P)がフォントに対する話。
セリフありなしとか、大文字小文字の話とか、完全に英文の話なので結構駆け足で読んでしまった。

フォントのカテゴリー（線の強弱・セリフ・筆記体…）を覚えて、同一ページで２種類以上のフォントを利用したい場合はカテゴリーが異なるものから選ぶとコントラストが出るので良い、というルールはわかりやすい。

「英文が全部大文字だと読みにくい」は感覚的には理解してたけど、「大文字だとシルエットが全て同じだから読みにくい」の説明がとても腑に落ちた。
「FighTimer」は「g」とか「i」とか上下の形に凹凸ができるけど、
「FIGHTIMER」は上下が一直線になるから遠目に読みにくいって話。