サイトをデザインするときに気をつけるべき基本的なこと

サイトをデザインするときに気をつけるべき基本的なこと

練習で作っていたサイトのカラーリングについて、「チンドン屋みたい」というダメ出しを受けました; 
それから「見た目」部分のデザインをするときに注意することを教えて頂いて、なるほどなー、と思ったのでメモしておきます。


この記事は、Webデザイナーを目指して勉強を始めてから実際にWebデザイナーとして働き出すまでの間に書いたものです。記事の内容は、2015年5月25日に書かれています。

一年近く経った今でも、「シャドウの入れ方が甘い」とか「これとこれはどっちが手前なの?」と指摘されることがあります。
基本的なこととは言え、基本的なことをマスターするのも簡単なことではないです。常に意識して忘れないようにしないと;


Webデザインは、基本的にはモニタに映る平面上で行いますよね。
でも、きれいなデザインにするためには、立体的に考えながらデザインしていく必要があるんです。つまり、各要素が画面の手前側にあるのか、奥側にあるのか、きちんと考えながら進めていくということです。

たとえば、ナビゲーションバーと背景だったら、背景のほうが奥。じゃあ、ナビゲーションバーとサイトのメインピクチャーはどっちが手前にあるの? フッターは背景より手前?
というようなことをちゃんと頭の中で設定して、それに合わせて色を選んでいけば、「チンドン屋」にならずに済むワケです(笑
奥へ行くほど暗くなるようにとか、奥へ行くほど(遠くなるほど)色が薄くなるように、とか。

私はダメ出しを受けたサイトは、なんとなく「こことここの色を同じにしよう」みたいに考えて、手前にあるはずのものにも奥にあるはずのものにも同じように濃い色を選んでしまっていました。
しかも、その間の位置にあるはずのものが薄い色だったりして、ちぐはぐなダサい配色になってしまっていたんですね;

ドロップシャドウについても同じことが言えます。
どの角度から光が当たっている状態なのかをちゃんと決めて、それに合わせてシャドウを入れるようにすれば、右に影が出来たり左に影が出来たり……なんてことにはなりません。
大切なのは「自然」を意識すること。自然な影のつき方を意識するようにすれば、影の強さがめちゃくちゃ……なんてことにも、なりませんよね。

配色ツールで色を決めても、どこに薄い色を置いてどこに濃い色を置けばいいのかが分からなければ、結局「なんかダサい;」サイトになってしまいます。
そうならないためにも、なんとなーく色を置くんじゃなくて、しっかりと意味を持たせて意識的に色を選んでいかなければいけませんね!
脱「チンドン屋」目指して精進したいと思います!

この記事を書いた人

ひしもち

京都の某Web制作会社で4年弱勤務したのち、退職して個人事業主となりました。
現在の主なお仕事は、WordPressを利用したWebサイトの制作です。
業務システムのUIデザインをしていた経験もあり。

専業主夫+3人の子どもたちと暮らしています。ゲーム好きなインドア派ですが、ゆるゆる楽しむプレイスタイルです。