伝わるデザイン のバックアップ(No.1)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 伝わるデザイン へ行く。
  • 1 (2017-04-06 (木) 23:34:28)
  • 2 (2017-04-07 (金) 02:37:01)

デザイン

概要 †

• 「伝わるデザイン」のまとめ。

目次 †

用語 †

• ウェイト
  • 文字の太さ
• フォントファミリー
  • 複数のウェイトの集まり、英文なら斜体も

読みやすさの3要素 †

• 可読性
• 視認性
• 判読性

フォント †

• フォントには2軸ある
  • 「読みやすい＝個性がない」v.s. 「読みにくい＝個性的」
  • 「格調高い」 v.s. 「親しみやすい」

• 明朝体とゴシック体の違い
  • 明朝体・セリフ体は可読性が高い＝疲れない・目立ちにくい→長い文に最適：縦の線が太い。ウロコ（英語ではセリフ）止払いがある。
  • ゴシック体・サンセリフ体は視認性が高い＝疲れやすい・目立つ→短文・見出しに最適：線の長さが同じ。止払いがない。

• ウェイトが太いと、視認性が上がり、可読性が下がる
  • ウェイトがあるフォントであれば、細さで調整が効く
  • 要するに太いと疲れる

• 字面が大きいと、視認性が下がり、可読性が上がる
  • メイリオ＞ヒラギノ角＞MSゴシック＞游明朝＝游ゴシック

• 字面が大きく、フトコロが広いと、判読性が上がる
  • Segoe UI > Century Gothic
  • メイリオ > MSゴシック = ヒラギノ角ゴ
  • ヒラギノ角ゴは、濁点半濁点の区別がつきにくい。
  • UDフォントというのは、そのように設計されている（濁点半濁点、OとC、3と8の区別が付きやすい、ウロコの徹底的排除）
• クリアフォントを選ぶべき
  • 輪郭にアンチエイリアス処理がかかる
  • メイリオはOK、MSゴシックは違う。

• ウェイトでない太字は使わない

• おすすめ
  • 34pを参照（綺麗な比較がある）
    • とりあえずメイリオかヒラギノ角ゴ（明朝は游明朝かヒラギノ明朝）
    • Segoe UIかCalibriがいい。Helvetica NeueとMyriadPro?はウェイトが豊富（明朝はTimes New RomanかMinion Pro（Centuryはだめ））
  • フリーのフォントのおすすめ：Noto Sans CJK JP（源ノ角ゴシック）