全体構成
考え方
- シンプルが良い。色々詰め込みすぎない。
- シンプルにした分ページ数が増えるので、自分が今いる場所をわかるようにしておく。(目次、Webサイトの場合：ぱんくず等)
- 重要な情報以外は削ったり、見たい人だけ見れるようにするのも手。(参考ページ、Webサイトの場合：ハンバーガーボタン)
- 優先すべき重要なものが目立つようになっていること。
- デザインに一貫性を持たせること。
レイアウト・配置
- 反復(同じ並びを繰り返す)を利用する。
- 整列させる。見えない線を意識する。
- 近接を利用する。類似情報はブロックを作り、まとめる。
- 見る側の視線の動きを誘導する。左から右下へ。Zの法則、Fの法則と呼ばれる。
- 左に図を置き、右に文章で説明すると良い。(右脳・左脳の関係から)
- シンメトリー・ライン(左右対称や回転対称)を意識する
- 黄金比、白銀比、整数比にする
- スペース(余白・空白)を十分持たせる
色・コントラスト
- 色相(テーマ色を決め、多色を使わない。色が与える印象や色弱者の対応を意識する等。)
- パステルカラーは印刷した時とかに見づらいケースがあるため、控えめに。
- カラーパレットでバランスを取るのも一つの手。
- 色の濃淡で数値の違いを表現する等もテクニックの一つ。
文字
- 文字フォントは見た目が分かりやすいもので統一すること。
- ジャンプ率を調整すること。
ジャンプ率が大きいと目立って明るい印象、小さめだとクールな印象になる。
- 強調については下記を参考にする。
|
強調させる、活発さを表現 |
強調させない、落ち着きを表現 |
| サイズ |
大きくする |
小さくする |
| 色 |
暖色や膨張色を使用 |
寒色や収縮色を使用 |
| 太さ |
太くする |
補足する |
| 下線 |
下線を引く |
下線を引かない |
| 枠 |
囲う |
囲わない |
| トリミング |
使用して、局所を目立たせる |
使用せず、全体像を表示 |
| 絵やアイコン、顔画像 |
使う |
使わない |
| 配置 |
最初に目がいく左上に置く |
右下に置く |
図
- 図のタイトルはその図を用いて何を主張したいか書く。
- 図の使い分け(シチュエーションに応じた適切な図の使い方)を意識する。
| シチュエーション |
適切な図 |
| 割合を示す |
円グラフ(※1) |
| 割合で分割したものについて、さらに細分割合を示す |
円グラフを複数使う。ドーナツ円グラフ |
| 時系列の推移を示す |
折れ線グラフ、棒グラフへの区分線追加(※2) |
| 項目の関連性を示す |
散布図(レーダチャートの比較項目が2項目の時は良いかも) |
| 2つの項目を色々な視点で、総合的に比較する |
レーダーチャート |
| 2つの項目を2つの視点で比較する |
マトリックス |
| 2つの項目を多数の視点で比較する |
マトリックスを3Dっぽく立てて並べてみる |
| 複数項目の量を比較したい |
棒グラフ(※2) |
| 量の合計と内訳を比較したい |
積み上げ棒グラフ |
| 項目ごとの分布状況を示す |
ヒストグラム、箱ひげ図 |
(※1)円グラフにおいて、下の方に主張したいデータ(割合を多く見せたいデータ)を置くと、錯覚で多く見えるので良い場合も。
(※2)図に複数の線等の情報が入っている場合は、相関関係を見いだそうとする。
似たデータだからと言って、相関関係が無いものを安易に融合するのには注意。
その他
- 何を説明しているか分かるアイコン類を選ぶ。アイコンに頼りすぎず、必要な細く説明を書く。
最終更新：2025年02月11日 14:03
