脱・素人デザイン　その三

皆さんこんにちは。

特にＷＥＢデザインを始めたばかりの方に多いのですが、

ＷＥＢの素材を作成してもどうしてもチープになってしまう、

素人が作ったみたいになってしまう・・・と悩んでいませんか？

前々回から「脱・素人デザイン」として、三つのポイントを挙げています。

今回は、その三「ボタンデザイン」となります。

ボタンのデザインも、慣れない内はどういう風に作成して良いか迷うポイントです。

オレンジ色のボタンを作りたいので、取りあえずオレンジで四角を作った。

しかし・・・何も装飾しないと、シンプルすぎる。

よくやってしまいがちなのが・・・

「べベルとエンボス」で立体感をつける、という方法です。

確かに、この方法だと平面だったボタンに陰影が付き、

盛り上がったような効果が付いてボタンの様に見えます。

しかし陰影のキツさと盛り上がりが大きい為、チープに見えてしまいます。

今はブログやSNSの影響から個人で作成するホームページが減りましたが、

一昔前の個人ページではこのようなボタンを使用している個人ページが

たくさんありました。

なので特に「素人ぽさ」を感じるのかもしれません。

では、どうすればキレイなボタンを作成できるのでしょうか？

まず、オレンジ色でベタ塗り、というのが重たく見えるので

ボタンの色は白に指定、そして周りに「1px」の枠線をつけます。

この「1px」は非常にウェブデザインに重要な要素で、

素材にソリッドな要素が付随されシャープな印象を与えることが出来ます。

オレンジの塗りをなくした代わりに、下にオレンジの線を加えます。

さらに、グラデーションで質感を付け・・・

文字を入れます。

ベベルエンボスと同じようなお手軽効果を入れましたが、

こちらはシャープな印象がすると思います。

3回にわたって「脱・素人デザイン」について書いてきましたが

どうだったでしょうか？

はじめは誰でも素人です。

しかし、ちょっとした「コツ」をつかめばきれいなデザインは可能です。

--------------------------------------------------------------------------------

パソコンスクール KENスクール渋谷校　Webインストラクター
http://www.kenschool.jp/school/shibuya/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html