素人っぽいデザインから脱却するための12のデザインチップス

クオリティを上げるためにはちょっとした「こだわり」がとても大事です。
定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。

追記：
同じような記事がひと月前にWebクリエイターボックスさんにあった…抜けてたなあ…

少しの手間で大きく変わる、細部にこだわったWebデザインを
こちらのほうが解りやすいので、オススメです。

この記事は初心者さん向けです。
上のものほど、簡単で多くのデザインに使える小技になります。

1pxのボーダーを使う

1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。
ある意味Webデザインでは一番重要な要素かもしれません。

定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。

ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。

正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。

1pxのドロップシャドウをかける

CSS3の登場でより一層使いやすくなりました。しかしインターネットエクスなんとかは未対応という…絶対に許さない。

テキストに1pxのドロップシャドウを入れることで、視認性や可読性を向上させます。シャープな印象も与えます。

ドロップシャドウを軽くかける

これも定番ですが、調子にのって使い過ぎるとゴテゴテとした昔のWebサイトのような感じになってしまいます。ポイントとしてはさりげなく使うことです。

少しめくれたような感じに。若干グラデーションをかけてよりリアルに仕上げてみました。

全体にぼやっとかけるのも立体感が出て良いんですが、このように途中で消えていくドロップシャドウも面白いです。中々使う機会はないですが…

グラデーションを薄くかける

ベタ塗りでかっこいいデザインは意外と難しいものです。
まずはグラデーションを効果的に使ってみましょう。
極端なグラデーションは素人っぽさを強調してしまいがちなので、これもドロップシャドウと同じように、さりげなく近似値のグラデーションを使いましょう。

よく見ると、うっすらとグレーからホワイトへグラデーションをかけています。
ホワイト塗りつぶしよりも立体感と高級感（？）を演出できます。

1pxのボーダーやドロップシャドウと組み合わせることでより効果的に演出できます。

テクスチャを薄くいれる

テクスチャを入れることで、のっぺりとした印象の軽減効果や、違った印象を演出することができます。
フリー素材としてそこら中に転がってるので、是非使いましょう！

すっごいよく見ないとわからないんですが、うっすらとノイズの入ったグラデーションになっています。
ただのグラデーションに比べ、少し暖かみというか柔らかさというか、そういった印象を持たせることができます。
※ ディスプレイや設定次第ではどう頑張っても見えないかもしれません＾＾；

ストライプを薄くかける

Web2.0で流行りましたね。Web2.0って一体何だったのかよくわからないんですが。
最近はもうほとんど使われなくなりましたが、まだ使えるシーンはあります。
※使い過ぎると懐かしいデザインになってしまいますので注意。

左がストライプなし、右にいくにつれてボーダーサイズを大きくしていったものになります。
細いストライプはシャープな印象になりますが、太くするにつれてポップな感じになっていきます。
サイトやパーツのイメージにあわせて使い分けましょう。

ハイライトを入れる

これもWeb2.0で流行りました。ただ半透明の白帯を入れただけでは安っぽさが出てしまいます。
コツとしては近似値のグラデーションに光彩（内側）をうすくかけてあげてから作るとキレイに作れます。
直線でなくカーブや波のようにしても良いです。
これもストライプと同じく使用する機会は減りました。しかしまだまだ見かけるデザインです。

透明感が出ます。

アイコンを使う

ナビゲーションやボタンにはテキストだけでなく内容にあったアイコンをつけましょう。
見た目・わかりやすさの向上などが図れます。

アイコンがないと質素な印象のボタンも華やかに（？）

目立つしわかりやすいしかわいいね！デザイン引用元 → 沖縄・中部修繕センター

リスト画像を使う

標準のリスト記号は環境にによって若干表示が変わってしまったり、微妙に使いにくかったりします。
せっかくなのでアイコンなど独自のものを使いましょう！

「アイコンを使う」でご紹介したところと同じサイトですが、デザインにマッチしていますね。デフォルトの記号ではこうはいきません。
デザイン引用元 → 沖縄・中部修繕センター

透かす

透過pngやCSS3のrgbaなどを使って簡単に半透明が表現できます。
サイトのデザインによっては、ガラっと印象が変わって見える場合もあるので、問題がなければ使ってみても良いかもしれません。

このデザインでは大した違いはありませんので、IE8以下の対策は行ってません。

途中で切り落とす

個人的に好きなデザインです。使い方によって様々な印象効果があります。

WPアイコンぶった斬りです。少し強い印象になりました。

ボックスからはみ出す

コーディングが多少メンドくさくなってしまう欠点がありますが、デザイン感抜群です。
コーディングの仕方はここでは解説しませんが、調べればすぐ出てくるかと思います。

当ブログでも使ってます。遊び心。

最後に

眠れなくて（寝過ぎ）暇つぶしにズババババババァー！！と書いたので解りづらい部分があると思います。
基本的なことばかりで既にWebデザイナーとして活躍されてる方には今更感があると思いますが、これからWebデザインを学んでいく方などの参考になれば幸いです。
今回は「デザイン」に絞ってまとめましたので、レイアウトでのクオリティアップは除外しています。機会があればまとめようと思います。
ちなみに参考サイトはこのブログとテスト的に動かしてるサービスです。

Web制作初心者にすすめる、これは絶対チェックしとけっていうまとめ

そういえばこんなのもまとめてたので、よろしければどうぞ。