前置き

近頃、WEBデザインに関するノウハウの多くをインターネットで学び、実践することができる環境が整っています。私もたくさんの本や記事を読んでWEBデザインを学んできました。今回はその中でも私が自分で考えて実践している他の記事などから持ってきていない方法を紹介します。

白は何色かあるほうがいい

200色とは言いませんが、何色か白っぽい色を用意し使い分けることをおすすめします。白はユーザーにとって非常にダメージ（物理）を与える色です。少しクリームっぽい白や少しだけグレーによった白を背景や文字に使うことによってユーザーへのダメージを抑え、デザインによって与える印象をコントロールすることができます。

上記の画像では2色の「白っぽい色」を使うことでユーザーに柔らかい印象を与えています。

基本的にCSSで直線は書かない

イラストレーターなどのソフトでは線は少なくとも2つ、図形によっては3つのパターンが用意されています。線の違いは主に切れ目が丸くなっているか直角になっているかという点です。

私は可愛いWEBデザインを志しているのでメニューなどで切れ目が直角の線は使いたくないです。私が直線のパーツを作る場合はイラストレーターで形を作り、それをSVGで書き出して実装しています。

センタリングだけが正義ではない

とりあえず、写真をヘッダーの背景に貼ってマスクをかけて文字を入れるというコーディングが楽な割にはよく見える定番のデザインです。

画像にもありますが、完璧に画面の中央にセンタリングするのではなく少し中央よりもタイトルを上に配置します。

人間がパソコンやスマホを見るときその姿勢は画面と目線が垂直に交わるようになっているわけではありません。そのため、完璧に中央にセンタリングしてしまうと場合によっては少しタイトルが下にあるように見えてしまうのです。タイトルが中央より下にあって違和感を持つ人は多いですが、中央より上にあっても違和感を持つ人は少ないでしょう。フルスクリーンのWEBサイトをデザインする際は意識すると良いかもしれません。

デザインとレスポンスの確認をしたければ家電量販店へ行け

WEBデザインの大敵は自身の環境とAppleの新製品です。自宅の環境ではきれいになるが、他のサイズのデバイスで動かないなどはザラにあることです。3:4のモニターやスマートフォン程度なら自宅にありますが、ワイドモニターで見たときの挙動やiPadの挙動は確認することができません。そんなときは家電量販店に足を運び、こっそり自宅のドメインを叩いて検証作業をしましょう。

まとめ

繰り返しになりますが、WEBデザインとCSSの大敵は自身の環境です。モニターの発色やブラウザ、更にはユーザーの姿勢（物理）によってWEBサイトの印象は大きく変動します。友人や家電量販店に頼り多くのユーザーによりよい体験を届けるWEBデザインを心がけて行きたいです。

引用&参考
イラレ屋