概要
- 「伝わるデザイン」のまとめ。
メモ
- 今回はどうしようなあ
- p201上のタイトルの入れ方はかっこいいしコンパクトで良さそう
目次
用語
- ウェイト
- 文字の太さ
- フォントファミリー
- 複数のウェイトの集まり、英文なら斜体も
読みやすさの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（源ノ角ゴシック）
- 34pを参照（綺麗な比較がある）
-
等幅ではなく、プロポーショナルフォントを使う。
-
和文英文混交
- 相性がある
- メイリオにはSegoe UI
- 游明朝にはTimes New Roman
- MSゴシックにはArial
- （パワポにはフォントの一括置換がある）
-
単位は小さくする
-
約物（()[]|!?など）を避ける
- 日本語には全角約物を使う
- 例
- x 会場：東京国際ガーデン
- o 会場｜東京国際ガーデン
- o 会場 東京国際ガーデン（会場を太文字・あるいは反転文字で、約物を使わない）
- 行頭と少ない文字の「」だけは、半角の括弧を使う！
- ！？は!?と半角にしても不自然ではない
-
明朝体での強調には、ゴシック体の太文字を使う
テキストなど要素
-
重要度を高中低とした時、1.5倍ずつのフォントサイズにする
-
行間
- 行間は0.5-1文字のマージンを入れる
- 行長が狭いならば、マージンが狭くてもよい
- 文字数が少ない（タイトルなど）ならば、マージンは狭くてもよい
-
字間
- デフォルトよりちょっと広げるといい（PowerPointの文字幅と間隔）
-
カーニング
- パワポでは1文字ずつ文字幅を調整することが出来る
-
何がなんでも左揃え
-
日本語と英語の間の間隔だけ大きくする（p.67）
-
箇条書き
- ぶら下げインデントをして、
- グループ化して、
- 行頭を強調する
-
インデントは、箇条書きでも何でも、なるべくしない！
- 箇条書きであっても、小見だしであっても！
- でも個人的には小見だしがBoldはわかりづらい
-
段落間隔の調整は必要
-
文章をどこで改行するか
- 強調箇所では改行しない
- 単語は分割しない
- 微妙な長さの行を作らない
- 改行前で文を完結させない
-
全角1つやタブによるインデントはいらない
- 段落間隔を使う
- 英語の場合、始めのパラグラフのみインデントしない
-
1行の長さが短いほうがわかりやすい
-
スライドは、図解でわかりやすく
- 箇条書きの要約を使って（p86）
-
囲みは便利
- 一つの資料では同じ形の囲みを使う
- 楕円は使わない
- 真四角か、ほんの少し角を丸くした四角
- 余白は1文字分必ず入れること（15文字のタイトルなら0.5文字、文字数が多い場合は2文字など）
- 輪郭のはっきりしない図を囲むとかっこいい
-
塗りか枠はどちらかだけ使う
- 塗りだけが無難
- 枠は、細いと洗練、太いと親しみやすい印象になる
-
やじるし
- 太いやじるしではなく、細い→や、⊿や、＞を使う
-
左から右へと
- 文字を書く
- 色の吸引力に逆らわない（赤は左に配置）
-
図への説明
- 図の中にタイトルを袋文字で入れて、ほかは平行な引き出し線を使う
- 引き出し線は細くあるいは点字で。直角の点字が良さそう。
-
グラフ
- エラーバーは線を一本上に上げるだけでよい（p117）
- 折れ線グラフの点は、線と同じ色（白抜きにするとかっこいい）
- 判例は同じ色にして、線の上に載せる（p121）
-
表
- 余計な線は消す
- パワポ用なら、背景を入れるべき
- 行が多い場合は背景色を縞々にする
レイアウト
-
5大法則
- 余白を取る
- 囲みの余白と同じで、基本1文字、文字が多ければ2文字、少なければ0.5文字。
- 揃える
- 全てを右揃え
- グループ化
- 関連のあるものと無いものを分けて、階層的に
- 近くのものを近くに置く努力をすること（p144）
- 強弱をつける
- 重要なものを上に大きく、他を小さく（p148の食堂の例）
- 方法には、サイズ、太さ、色（黒のところを深緑にするなど）、いろいろパターンがある
- ジャンプ率は、低いと洗練されたイメージになり、高いと親しみやすい雰囲気になる（p150）
- 強調方法は階層的に、同じ階層構造は同じ強調方法をする(p151)
- 繰り返す
- レイアウトの規則を作って、それを守る
- 余白の量、文字サイズなど。
- 余白を取る
-
視線の流れ
- 2x2のマスだと、縦に読むのか横に読むのかわからない→背景をつける、やじるしをつける、番号をつける
-
ノイズ・余計な情報の制御
- スライドにいつまでもロゴを張らない、貼るとしても非常に小さくまとめる。
- 背景付き写真＞白背景の写真（トリミングもふくめて）＞概念図
-
アイ・キャッチャー
- 第一のアイ・キャッチャー：画面の2/3を覆う、非常に大きな画像を貼ると効果的
- 第二のアイ・キャッチャー：○で囲う（p167）
色
-
ポスターやスライドには、あまり高い彩度のものを使わない
-
色が多くなる時は、灰色で囲うのが便利
-
相性の良い色を使う
- 深緑、薄緑、赤
- 灰色、ピンク
-
テーマ色を決めると良い
- 背景色、メインの色、文字の基本色、強調の色
- p177にいろいろなパターンが乗っていてい面白い
-
真っ黒の文字色だと、コントラストが激しすぎて疲れる
- ほんの少しだけ灰色をいれるといい
-
色盲
- 基本的には、寒色暖色で組み合わせれば問題ない
- P型色覚では、オレンジ緑、青紫、緑ピンクが区別できない
-
色に頼り過ぎない
- 文章中の強調色として、赤と緑を入れるのは筋が悪い（黒と赤、黒と緑の区別がつかない）
- さらに、ごちゃごちゃしてかっこ悪い
- 代替案：文字に背景色を入れて強調する、文字に太字を使う、グラフをベタ塗りと斜線塗りで区別（要するに白黒印刷してもOKということと同値）
パワポ力
- 袋文字
- テキストボックスの大きさが自動調整されないようにする（自動調整なしがよい）
- ガイド線を使うと、レイアウトが統一できて嬉しい