あなたのボタンデザインは、どうなってますか? 違和感を感じさせないデザインを!

eye-catch

こんにちは。先週は風邪をひいてしまい、社会と完全に切り離されていました。休むのも大切ですが、あまり長く休むと復帰するのが恐くなりますよ…。

さて、Webデザインをしていてなんとなーくマンネリしてきてしまうのがボタンのデザインです。ちょっと忙しくなったりすると、ボタンのあしらいが似てきたりしますよね。「このデザイン、キミの中で最近流行ってるの?」なんて言われちゃったり…。

そんなボタンですが、求められる役割として『押したくなる』がそこそこ重要となってくるのではないでしょうか。どんなデザインだったら押したくなるかなあ…と考えつつ…デザイン…。してますか?
色ひとつで押したくなる度が変わってきたりもします。最近ではグリーンが訴求力が高いと言われていますよね!

しかし色以前に、「え?なんかこのボタンおかしくね?w」と突っ込まれてしまったら
もうそれが気になってしまって訴求力どころではありません。

ということで、今回は「おかしくね?ww」と思われないボタンデザインについてちょっと考えてみました。

まずはこちら ①
01
いたって普通のボタンではありますが、違和感を感じませんね。

次にこちら ②
02
レイヤー数、レイヤースタイルともにかなり凝っていますが、少し違和感を感じますよね。なんだか不思議な空間を作り出しているボタンになっています。

どんな状態になっているのか、調べてみましょう。 04

かなり無理矢理辻褄をあわせていますが、ざっとこんな感じでしょうか…。
明らかにおかしいです。ドーム状にも見えないのでいろいろと失敗しています。

もう一方はこうなります。

03

無難ですが、わりと理に適ったデザインになっています。

………ちょっとあっさりすぎるので、ボタンとしての役割を期待するのであれば最低限これくらいはやったほうが良いと思います。↓
05

さて、上記①②のボタンには共通点があります。それは、両方ともモノとしては『非現実的』なデザインということです。

②はともかく、①もなの?と思いますが、そうなのです。現実でこの通り再現しようとしてもなかなかうまくいきません。(すごく頑張れば出来ないわけではないと思いますが…。)要するに『モノとしては有り得ないけれど、それっぽく見える』ということ。

06
これらは実際にアクトゼロのデザイナーが制作したボタンです。細部までこだわった質感や効果、表現がより本物っぽさを表現しています。思わず押したくなりますよね!
これらも上記同様、非現実的な物体になります。このボタン現実世界ではどうなってるのよ!とはなりますが、そんな違和感はありませんよね。

違和感を感じない程度に嘘の表現の誇張をしていくことが大事ということです。もちろん他のデザインの世界観を崩さずに。

ボタンをデザインするときは、夢と妄想を膨らませてデザインしてみましょう!
アナタが押したくなるボタンはどんなボタンですか?