ヨミコのデザイン工房

デザイナー&ブロガーのヨミコが、 WEB制作の事を書いたり書かなかったり。

WEBで見かけるボタンについて本気出して考えてみた

こんばんは。Web&グラフィックデザイナーのヨミコです。

今日はボタンについて考えます

並んだボタンの画像

何px四方のその空間に、押して貰う為の工夫が色々あって、最近気になるアイツ…。

という訳で色々なボタンを考えてみました。

ちなみに本文中のボタンを押すと何かが起こる…なんて事はなく、押しても何も起こらないよ。ごめんね。

スタンダードなボタン

フラットボタン

最近流行のぺったりしたマットなボタン。

ちょっと立体的になったボタン

シャドー付ボタン

上のボタンに影をつけたもの。
都会に出てちょっとメイクが濃くなった。そういうイメージ(?)

枠で囲まれたボタン

枠付きボタン

枠で囲っています。
影もそうだけど枠もさり気なさが腕の見せどころです。

枠で囲んでハイライトを入れたボタン

枠付きハイライト入りボタン

こういうのもよく見かけますね。フラットだけど少し主張したい時用。

コントラスト高めのグラデボタン

グラデボタン

これはもうなんかちょっと古くさく感じてしまいますね。数年前まではこういうデザインをよく見かけました。

ボタンを画像に載せてみよう

う埋もれちゃうボタン

↑なんか埋もれちゃう…!!

境界線入りボタン

↑おっ…

ボタンを載せる画像を暗くしてみた画像

↑これだとフラットボタンも見易くなります。

オシャンティーボタン画像

↑オシャンティーになりました。

オーバレイ風ボタン

↑オーバレイ風。これだと背景画像をそこまで暗くしなくても見易いのでいいとこ取りなかんじ。

まとめ

ボタンだけでも、押し易さ、見易さ等色々あるなあ、と思いました。
奥が深いですね。
また、何年か前には主流だったグラデーション入りのボタンがちょっともう古く見えてしまって、慣れってあるんだなあ、と改めて思ったりしました。

フラットデザインが流行り始めの頃はiPhoneのアイコンだっさくない!?と先輩デザイナーと批判していたりしましたが、今ではフラットじゃないと古い、と感じる様になってしまった…。

何年か後にはここのボタンも古いなあ…と思うんでしょうか。

今後もクリエイティブ業界の片隅にいたいので、流行には敏感でいたいものです。

ちょっと内容被ってた…。
こちらはcssボタンのお話↓

weboook.blog22.fc2.com

余談ですが、FC2ブログにはたまに物凄い魔改造してる方がいて、なんだか刺激的です。(笑)

ではまた。


お仕事etcお問い合わせ先(制作実績お送りします):yomikodesign@gmail.com

Facebook友人申請お気軽にどうぞ。スパムでなければ基本承認します。

Twitterお気軽にフォローどうぞ!基本リフォローします。