レスポンシブWebデザインの基本 デザイン編
前回に引き続き、こちらの本
あとレスポンシブWebとは直接関係はありませんが、ちょっとしたアイコンがほしいときの探し場所としてメモ。
では、続き。
ヘッダーのデザイン＆制作
ポイントは以下。
- ヘッダーエリアは各デバイスの画面サイズを常に念頭において考えることが重要。
- 最も良いと考えられるのはシンプルなヘッダー。
- 「一瞬でサイトの雰囲気を伝える」ようなデザインにする。
- ヘッダーエリアの大きさに応じて、要素の掲載有無を検討する。
グローバルナビゲーションのデザイン＆制作
ポイントは以下。
- 項目数を増やし過ぎない。増えるとスクロールを必要としてしまうし、ナビゲーション同士が近過ぎるとタッチしづらい。
- デバイスのサイズに合わせて文字サイズを変更するだけでなく、表示する項目自体を切り換えることを考える。
- ナビゲーションの種類は色々ある。どれが最適か、デバイスごとに考えること。
- 横型ナビゲーション
- 縦型ナビゲーション
- 階層型ナビゲーション
- アコーディオン
- ドロップダウン
- etc
コンテンツエリアのデザイン＆制作
ポイントは以下。
- 最初に各デバイスで掲載するコンテンツを決定する。
- そのコンテンツをより良く見せることができる段組み数を決定する。
- 段組み数が変わってもコンテンツの優先順位が変わらないようにする（例えば、三段組では左上→右下に向かって優先順位が下がるので、一段組ではこれに対応させて上から下に並べる）。
うーん、あとは実際に自分で手を動かしてみる方が良さそうです。
ということで、WordPressのテーマを、一旦レスポンシブWebデザインに対応した『Twenty Fourteen』に変えてみました。これをベースにちょっと手を入れていくかもしれないし、そのまま使うかもしれないし、元（Piano Black）に戻すかもしれません。