何を間違ったか、Webデザイナーをやることになっちゃったフロントエンドエンジニアの、のりこです。

大体エンジニアといえば、デザインは苦手としている人が多いのではないでしょうか(・ω・)ﾅﾆｶ?
しかし、ロジカルなことは得意なはず！！

デザインは感性！と思っている方は多いかもしれません。
表面をきれいに装飾することこそがデザインと勘違いされる向きもありますが、本来デザインは情報を理解しやすいように伝えること。実はとってもロジカルな行為なのです。

今回はエンジニアの腑に落ちる、ロジカルなWebデザインについて書いていきたいと思います。

情報を整理する

すでにフレームが用意されている場合はそちらに従いますが、まだデザインを施されていない原稿が手元にある場合、このコピーは一番最初に目に入ってほしいな、この文章は訴求したい一文を見出しとしてつけて興味を持ってもらって、この文章は補足だからより詳しい情報が知りたい人は読むだろうけれど最低限の可読性があれば目立つ必要はないな…
このような感じで伝えたい情報に優先順位をつけていきます。

普段コーディングをされる方は、デザインされたデータを見て、ここはh1タグだな、ここはpタグで、ここはstrongで強調…のようにマークアップしていく作業と似ていると思います。

断崖絶壁に立ち向かう

ここから先は

「デザインが苦手」を自負しているエンジニア諸氏には、突然、断崖絶壁が目の前に現れた！

くらいに敷居が上がると思います。

実際わたしも、デザインはそれほど得意ではありません。
が、できるだけロジカルに、理論的に、恥ずかしくないレベルのデザインに仕上げるテキストの基礎知識を伝授したいと思います。

目立つ情報の扱い方5箇条

とにかく文字をデカくする！

とにかく何でも数値にしたいエンジニアからしてみれば、デカいって何％よ！！と思うかもしれませんが、300％も大きくすればめっちゃ目立つでしょう。さらにboldもかけましょう。

空間を広くとる

いくら文字が大きくても他の文字の中に埋まるように配置されているのと、周囲が広く開いているのとでは、もちろん空間を広くとってあるほうが目立ちます。
溶け込ませる感じで処理した背景画像の上に載せるなど、定番の処理ですね。

立体感を付ける

ドロップシャドウ・グラデーションをピンポイントに使用して立体的に浮き立たせ、目立たせる。
Photoshopのデフォルトのドロップシャドウだとちょっと、影が濃いので若干薄目を心がけるのがオサレです。

エンジニアがセンスがない！と言われる理由が『1か0しかない』なので、思ったより微妙なラインを狙う控えめ表現で行くのが◎です。

あ、最近流行りのフラットデザインはまた別ですからね。

色で目立たせる

背景が白であれば赤・青・黒など濃い色、ベースに色が敷かれている場合は補色かつ明度差の高い色が目立ちます。
ただし、原色を使いすぎる・原色の多色使いはダサさが加速するので、原色を使用するのは『ここぞ』という部分にピンポイントにしておくとよいでしょう。

ふちどる

イマイチ目立ちにくいなと思ったらふちどってみましょう。
さらにドロップシャドウなどと組み合わせると立体感の付け方にバリエーションが出ます。

h1の要素は、空間を広くとり文字をboldで大きくし目立つ色合いでふちどって影も付ける
h2の要素は、空間をそこそこ広めに文字をboldでやや大きく影を付ける
h3の要素は、本文より一段階大きい文字で目立つ色にする
strongは、boldで目立つ色にする
…と、うまく組み合わせればあっという間に目線の誘導が可能です。

引き出しを増やそう

仕事柄、普段からいろんなページを見ることが多いと思うので、それをただふ～んと見流すのではなく、普段からいいなと思ったページのURLを分類整理してストックしておくことは引き出しを増やすのに有効です。

イメージを広げるためにいろんなページを観察しましょう。
また、イマイチだなと思うページがあれば、どこがイマイチなのかを考えると自分のセンスをアップするのに役立つでしょう。

最後に、自分はデザインに興味もないしできないから…と目を背けるのではなく、デザインにも関心を持つことで世界が広がります。

まずは、関心を持って観ることから始めてみてください！