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

コーディングも終わりいざ形になったウェブサイトを見て、「なにかが違うなー。」と思ってしまうという経験をされたウェブ制作者の方も、多いのではないでしょうか。
いまいちデザインがキマらない時って、誰しもがあると思います。

そんな時には、ちょっとしたアイデアで雰囲気を変える方法にトライしてみてはいかがでしょうか。
「コーディングが終わった時が完璧な完成」となるのはもちろん理想ですが、追加の修正でさらりと印象を変えられるスキルがあると便利ですよ

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

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

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


普通は大きくて当たり前の文字サイズをあえて小さくしてみたり
あるいは小さい文字を極小サイズにしてみたり
そんなアイデアで、新鮮さが演出できます。

逆もあってもいいでしょうが、大きすぎる文字を使うのは難しいので、まずは縮小にを考えた方がいいかもしれません。

極小サイズにチャレンジする場合は、見にくくてもあまり影響がない箇所に限定しましょう
例えば、日本語見出しに対する補足英語やコピーライト等。

時には、font-sizeは8pxくらいでもいいかもしれませんよ。

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

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

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


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

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

marginの数値を揃える


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

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

ちなみにこの考え方は、Sassと相性が良いです。
僕の場合、Sassを利用する際(いつも)は、あらかじめ「$space:24px;」と設定しておき、何かとmarginやpaddingの数値を設定をするときは「$space」を使うようにしています
こうすることで、自然と統一感のある配置となり、またメンテナンス性も高まります。

ちなみに、上記例で言う「$space:24px;」ですが、なるべく8の倍数で設定するようにしています。
理由は、8の倍数だから(2でも4でも割れるから)で、「$space * 0.5」のようにしても整数の結果(12px)が返ってくるから便利です。

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


超一流のデザイナーは、サイト内のすべての要素を1px単位で緻密に計算するらしいです。
正直、そこまでのレベルにはまださっぱり達していません。

しかし、1pxを活かしたアイデアは、覚えておいて損はないでしょう。

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

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

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


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

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

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


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

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


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

colorは#333等の固定観念を捨て、ちょっと冒険する


経験を積むに従い、colorは#333、border-colorは#ddd等、自分流の常識ができてくるものです。
それをちょっと崩すだけで、印象が変わります。

「真っ黒」を「青みがかった黒」に変えてみるアイデアは、たまに利用します。

色彩を3色までにする。それでもイマイチなら白だけにシロ


多数の色を1つのページに盛り込みすぎると、統一感が無くなり安っぽい印象になってしまいます
使用する色は3~4種類までが限度というのが、通例となっています。
(例外ももちろんあっていいですが)

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

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

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

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

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

僕もまだまだ成長を続けていかなければ…

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

Facebookページで為になる情報をチェック

コメント