| |
THINKING
04 |
|
効果的なグリッドデザインを行う |
| |
REASON
→ |
|
グリッドで領域を設けることにより、
インターフェイスデザインの視覚的効果を
向上させることができる。j |
インターフェイス部分をデザインする際、グリッド（デザイン上には表示されない設計ライン）を敷いて領域のルールを決めることはよくあるが、実際にグリッドが見える状態でデザインしてみよう。
領域のルールがわかりづらかったり、使い勝手が低下してしまうことへの対策として視覚的な効果を得られるメリットがある。縦あるいは横にグリッドを敷き、領域内にロゴやタイトル、コンテンツメニューなど各種デザイン要素をまとめていく。このとき、デザインする表示サイズに合わせてグリッドをどのくらいの間隔で敷き、どこに何の要素を入れるかを事前に考えてラフ書きなどするとよい。
汎用例として写真を背景全面に敷いたインターフェイスや無機質なイメージ、あるいは何もない背景にグリッドを敷くと、デザインそのものの精度感、信頼感、安定感などが高まり、ユーザーは視覚的に迷わずにWebサイトを使うことができるはずだ。
まず無地の背景にラインを敷く。今回は縦にグリッドを敷いてレイアウトを進めていく。この際、どの領域にどの要素を配置するかを想定して領域の幅を調整しよう
グリッドを敷いたそれぞれの領域内にロゴやタイトル、コンテンツメニューなどを配置。このとき、縦のラインに合わせてそれぞれの要素を左寄せで整列させることで、視覚的にバランスのよいデザインとなる
写真を用意し、先ほどと同様のポジションでグリッドラインを敷く。写真の色調とグリッドラインのラインカラーを合わせている
前述のふたつを合体させて調整を行う。グリッドのライン領域でそれぞれの要素をバランスよく見せることができる
文＝池田智道（ungraffi）
web creators
この記事をチェックした人はこんな記事も読んでいます。
