ウェブデザインことはじめ

日頃デザインを行う際のポイントをまとめてみました。

どれも市販のデザインガイドを開けば載っているような当たり前のことですが、自分の言葉でも文章化しておきたいと思います。

レイアウト

①空間に基準線を意識して、ウィジェットや文字を配置します。
基準線は直線であったり、四角形であったりします。


②同族性のものはまとめます。これを一つのグループと考えます。これらのグループを、基準線に沿って土台(ページ)に配置します。
グリッド構造をイメージすると分かりやすいかもしれません。グループ内でも基準線を意識して見やすさを重視します。


③グループ間の距離をある程度、等間隔でとりながら、それらを反復することで統一感を出します。


④情報の優先度に従って、グループやウィジェットに差異をつけましょう。大きさや濃淡、文字の太さなどで表現可能です。


⑤視線の動きを表した、いわゆるZ線に沿った配置も心掛けなくてはいけませんね。

配色

①用意する色を三種類とした場合、割合は以下のようになります。

ベース: メイン: アクセント = 7: 2.5: 0.5

背景色(ベースカラー)、ボタンや文字などによるメインコンテンツへの誘導(メインカラー)、特売情報、新規情報、特典やサービスなど特に印象を与えたい部分(アクセントカラー)といった具合です。

色の選択は、ベースとメインは概ね彩度で区別したりするのが簡単です。濃い紫をメインカラーにして、透明感のある薄い青紫をベース、といった感じですね。

ちょっと変えたいな、という時は色相を入れ替えてみたりします。


②三種類は少ない！　という時には、色を足します。ベースやメインのカラーを分割してみます。ただし、各コンテンツに対する使用の比率を変更してはいけません。

基本はトーン(色の強弱：彩度と明度で変化。brightness and darknessと書いた方が分かりやすかもしれません)と色相(いわゆる色)のどちらかを入れ替えることで対応します。

両方変えてしまうとたいていは違和感が出てしまいますね。。。なんだかチグハグな配色だなぁと感じる一番の原因かもしれません。


③アクセントはいわゆる補色を使ったりします。強い赤色に対するのは、目に痛いくらいの黄緑といった風に、機械的に決めることが出来ます。

まとめ

どれもデザインの基本ではありますが、独自のデザインを施すうえでも、基本からどこまでずらして良いのか、が一つの基準になると思います。

ただ、一番大切なのは、ウェブデザインはアートではなくて結局プロダクトデザインだよね、と忘れないことなのかもしれません。

jQueryのプラグインの力を借りてギャラリーを回して、インデックスは思いっきりパララックスでインパクト重視。。。なんて最近のブラウザなら派手に動かそうと思えばいくらでもできちゃうんですけれど、結局使う人が使いやすいかというUXの視点を忘れちゃいけないんですよね。

具体的な方法論というよりは心構えみたいなものですが、ふと迷った時にはいつでもここに帰ってこれるようにしておきたいと改めて思いました。