ATELIER KANAE - for Beginner - Webサイトリフォーム入門 ch.03デザインCheck 6/25

	Chk: I 1 2 3 II 4 5 まとめ
			page6/25

優先順位がないデザインは、混沌としてとても分かりにくいものです。優先順位をつけることでリフォームもやりやすく、見る側も分かりやすくなります。

まずは、先ほど触れた3つの要素の中でどれが最も優先順位が高いのかですが、これはきわめて単純です。

トップページでは、目次の役割がまず重要になるのでナビゲーションが最も優先順位が高くなります。テンプレートでは当然コンテンツが主役です。

同じ要素内での優先順位は、コンセプトやコンテンツとしての優先順位に従うだけです。事前にしっかりと決まっていれば、ここで迷うことはありません。

実際にデザインに反映させる方法は、「対比」という手法を用いて行います。配置や大きさ・色などさまざまな方法で

配置の例解説図
配置の例

もっとも注目される場所に、優先順位の高いものを配置する。これが基本です。それ以外のものは優先順位を崩さないように配置していきます。

同一の要素内でも、優先順位があれば序列を崩さないように、配置の位置や間隔を調整すると、すっきりと分かりやすくなります。

場合によっては、順位の低いものを表示させないという手もあります。載せないというのではなく、スクロールさせないと見えない、想定した画面外に配置するということです。ほかにも画面中びっちりと配置するのではなく、配置にリズムを持たせたり、ちょっと崩したり、空白を持たせたりするほうがいい場合もあります。

大きさの例解説図
大きさの例

もっとも注目される大きさで、優先順位の高いものを配置する。これが基本です。それ以外のものは優先順位を崩さないようにサイズを調整します。

同一の要素内でも、優先順位があれば序列を崩さないように、たとえば文章と見出しの文字の大きさが違うように、要素の大きさを変更するとすっきりと分かりやすくなります。

ただ大きければいいというものではありません。全体のバランスが崩れないような大きさを考えましょう。逆に空白をうまく使えば小さいほうが注目される場合もあります。

色の例解説図
色の例

もっとも注目される色で、優先順位の高いものを装飾する。これが基本です。それ以外のものは優先順位を崩さないように色を調整します。調整に用いるパラメーターは「色相」・「明度」・「彩度」などです。

同一の要素内でも、優先順位があれば序列を崩さないように、たとえばリンクと文章の文字色が違うように、要素の色を変更するとすっきりと分かりやすくなります。

注意すべき点としては、目立てばいいのでは無いということです。もっとも目立つ配色としては「黄色と黒色」や「赤と緑」つまり完全な対比になってるような組み合わせがありますが、使い方を誤ると内容よりも色の印象しか残らないことになって目的をはたせません。

よくある失敗の原因は「原色」を「画面中」に使いすぎていて、注目点があいまいになり落ち着きの無い混沌とした画面になってしまうことにあります。注目させたい要素以外のものの色は「明度」・「彩度」・「面積」などを抑えるなどして、主役を引き立てるようにすると効果的です。

優先順位を表現する方法は音・動き・絵・文字等など、まだまだたくさんあります。Webはまだ進化途中なのでこれからも表現方法はどんどん増えていくことでしょう。

page6/25