サイトデザインがいまいちキマらない時にトライしてみたい9つのワンポイントアイデア

僕はウェブサイトを制作するにあたり、デザインカンプを作成していません。
レスポンシブデザインでの業務が多いですので、ワークフローはインブラウザ・デザインと呼ばれる方針を採用しております。
インブラウザ・デザインとは、ワイヤーフレームと配置コンテンツをもとに、コーディングしながらブラウザー上で直接デザインする手法です。
ブラウザでバランスを見ながらデザインしています。
(悪く行けばいきあたりばったりですが、個人的にこちらの方が制作スピードが早いのです。)

こうした制作フローで作る場合、ウェブサイトを見て「なんか違うなー」「うまくハマらないないなー」と違和感を覚えることが多々あります。
いまいちデザインがキマらない時って、誰しもがあると思います。

そんな時には、わずかに雰囲気を変えるアイデアをパターンとしていくつか持っておくといいです。
引き出しがあるとでもいいましょうか。
追加修正でさらりと印象を変えられるスキルがあると便利です。

今回は、自分なりに実践して手応えを得た経験のある、サイトの印象を変えるワンポイントアイデアを幾つか紹介してみます。

サイトデザインがいまいちキマらない時にトライしてみたいワンポイントアイデア

文字サイズや字間を大胆に変える

普通は大きくて当たり前の文字サイズをあえて小さくしてみたり。
あるいは小さい文字を極小サイズにしてみたり。
letter-spacingで字間を調整したり。
そんなアイデアで、新鮮さが演出できます。
文字サイズを極小にする場合は、見にくくてユーザーが困らないかどうかも意識しましょう

ちなみに、文字サイズについては、ジャンプ率の概念を理解しておくとよいでしょう。
ジャンプ率とは大小の差(サイズ感)のことです。

文字のジャンプ率については、一般的には下記のように理解されています。
ジャンプ率が高い(文字サイズが大きい)ほど、印象的で訴求効果が高い。
ジャンプ率が低い(文字サイズが小さい)ほど、落ち着いた高級感をもたせられる。

font-weight:bold;の常識を捨てる

例えばブログ記事のタイトル部分やHタグの箇所は、太字にしたくなるのが普通です。
そこをあえて「font-weight:normal;」にしてみるというアイデアはどうでしょう。

以前すべてのfont-weightをnormalにしてみた事がありましたが、文字の太さを変えるだけで印象は結構変わります。

marginの数値を均一に揃える

サイト内の各所に隙間はできます。
その隙間のサイズ感がバラバラだと、どうしても散らかった印象になります。

なるべく、marginやpaddingの大きさは揃えたほうがよいでしょう
そのほうが統一感がとれて、印象がぐっと高まります。

1pxを活かすアイデアを取り入れる

超一流のデザイナーはサイト内のすべての要素を1px単位で緻密に計算するらしいです。
正直僕はそこまでのレベルには到底およびませんが、1pxを活かしたアイデアはいくつか使い勝手のいいアイデアがあります。
覚えておいて損はないでしょう。

例えば下記コードの例だと、borderの内側にもう一つ白色の枠が入ります。

こんなちょっとしたワンポイントで大丈夫。
ちらっと入れればそれでOKです。

わかるかわからないか微妙なレベルのグラデーションを取り入れる

よく聞く考え方ですが、ベタ塗りよりも微かなグラデーションが掛かっていた方が上品さが増す場合が多いです。
試してみる価値はあるかもしれません。

ただしフラットデザインの場合などは適しません
まずはコンセプトありきでデザインを考え、グラデーションの有無はその時点で決められているのが理想でしょう。

ちょっとした要素に画像を利用する

例えば横の罫線一本でも、border styleで考えるのではなく画像を使ってみることで、良いアクセントになる場合があります。
こういったワンポイントの引き出しを多く持っていると、いざというとき助けになりますよ。

CSS3で表現できても、画像を使ってみる

ボタンに関しては、やはり画像を使う方が良いと感じています。
画像には画像の良さがあるので、CSSで表現できるかどうかを第一に考えるのはやめましょう。

文字色は黒の固定観念を捨て、ほんの少し色を加える(青みがかった黒など)

経験を積むに従い、「colorは#333」「border-colorは#ddd」みたいな自分流の常識ができてくるものです。
それをちょっと崩すだけで印象が変わります。
「真っ黒」を「青みがかった黒」に変えてみるアイデアは、たまに利用します。

色の数を抑える。多くても3色くらいまでにする!

多数の色を1つのページに盛り込みすぎると、統一感が無くなり安っぽいごちゃごちゃした印象になります
使用する色は3~4種類までが限度というのが通例となっています(例外ももちろんあっていい)。
「メインカラー」「サブカラー」「アクセントカラー」の3色くらいを柱とし、その色をベースにデザインを組みましょう。

メインカラー1色だけを柱とし、プラス白と黒とだけで構成するのも、引き締まっていいと思います。

どうしても色彩のセンスがなくて悩むという方は、もうすべての色を取っ払って白を選んでおけば、それっぽくはなります
さずがにやや暴論で若干不親切なアドバイスですが、それだけ白はキングオブ無難なのです。

自分なりのワンポイントアイデアを見つけ出す方法

今回紹介したアイデア以外にも、様々なアイデアを持っておけばいざというときに便利です。
では、どうやってその引き出しを増やしていけばいいのでしょう。

それは、やはり良いサイトをたくさん見ること以外にないでしょう。
サイトをただ眺めるだけではなく、細かなところに目を配り、発見したポイントをメモしておくことです。

良いデザインには理由が隠れています。
その理由を見つけ出すのがうまくなれば、おおきく成長できるはずです。
僕もまだまだ成長を続けていかなければ…。

杉直樹
杉直樹 著者の杉直樹です。
"ライフクエスト"は、基本的にはジャンル多岐にわたる総合ブログです。
"人生をより豊かにする"と"社会をよりよいものにする"にマッチした記事をたくさん書いていけたらと思います。
お役に立てる記事があれば幸いです。