オシャレなボタンデザイン

クリック率やコンバージョン率が重要なサイトのボタンは、「購入する」「資料請求」「参加する」など、企業の収益や集客に直結することから、つい目立たせたくなってしまうかもしれません。しかし、いかにも「押してください」とアピールされたボタンデザインでは、逆にユーザーは引いてしまう傾向があります。ここでは、オシャレでかっこいい上にユーザーのアクションを促せるボタンのデザイン例を紹介します。

見慣れた記号で生み出すオシャレなボタン

見慣れた記号のデザイン

デザイン by JohanP

インターネットが普及して年月が経った今では、ネットショッピングや情報収集をする際に、ボタンを瞬時に見つけたり、どう操作すればどうなるかすぐに理解できたりというような、「条件反射」でアクションをするようになってきました。

そのため、ユーザーが一目見て「このボタンを押せばこうなる」と理解できるようなボタンデザインである方が、ストレスなく利用できるでしょう。ボタンデザインの中でも、見慣れた記号やモチーフをベースにデザインされたボタンは、アレンジしても「このボタンを押せばこうなる」と伝わりやすくなります。

例えば、カートのマークをクリックすれば「購入する・カートに入れる」、三角を丸で囲んだマークは「動画が再生される」などが挙げられます。こうした一般的に使われている記号をオシャレにデザインすることで、ユーザーのアクション促進とビジュアルの良さを両立させたボタンになります。

見慣れた記号のデザイン

デザイン by Secret99

次アクションが一目でわかるデザインを

一目でわかるデザイン

デザイン by DiegoIsCo

ボタンであることがわかりやすい立体的なデザインは、高齢者に向けたサイトや親しみやすさを狙ったサイトには合っても、オシャレでクールな雰囲気のサイトにはあまり馴染まないかもしれません。

そんなときは、別の方法で「ボタンであること」がわかるようなデザインにするのがオススメです。代表的なデザインとして挙げられるのは、カーソルを乗せると色が反転するデザインや、ボタン内の写真が変化するロールオーバーです。

また、ユーザーがボタンを押した次のアクションを予測できるようなデザインにすることも大切です。ボタンをクリックしたら申込みフォームになるのか、購入画面になるのか、別のサイトへリンクしているのかなど、わかりやすいデザインにしましょう。

次の予測ができないサイトはユーザーにストレスを与えやすく離脱されやすいので、ボタンだけである程度次ページが予測できるナビゲーションにしたいものです。世界中で共通して広く使われているマークを利用する他、文字で表現する方法などもあります。その場合は、日本語よりも簡単な英語でのデザインの方が見やすいため、よく使われる傾向があります。

一目でわかるデザイン

デザイン by thydesigns

一目でわかるデザイン

デザイン by TJCD

フラットなデザインの中にでも映えるボタンのデザイン

フラットなデザイン

デザイン by IuliaG

オシャレでかっこいいサイトで比較的使われているのがフラットなデザインのボタンです。フラットなボタンはシンプルなデザインのものが多く、ボタンとして目立たせるには難易度が高いかもしれませんが、そんなときには同系色を活用するテクニックがオススメです。

例えば、サイトのイメージカラーと同じフラットな単色ボタンを、ロールオーバーで彩度を変えた同系色に変化させることで、クールな印象をキープしながらも、ボタンとして認識させることが可能です。アイキャッチとなる写真をボタンとして使い、マウスポインタを乗せるとモノクロや反転になるデザインもオススメです。

フラットなデザイン

デザイン by schabo

ユーザーの目を奪うオシャレなボタン作りを

オシャレでボタンデザイン

デザイン by JhEign

つい好奇心が湧いて押してしまうような、閲覧する人々の目を奪うオシャレなボタンを作るためには、オリジナリティのあるユニークなモチーフの追求と日々のデザイントレーニングが必要です。

イラストに自信があるなら、ボタンに使うモチーフを自分流のタッチで描くのもオススメですし、手軽にかっこいいボタンを作るなら、布や紙、マテリアルのテクスチャーを活用するのも良いでしょう。例えばジーンズショップのサイトなら、デニムのテクスチャーにステッチを施すだけでもオシャレなボタンになります。

このように、サイトが紹介しているものがイメージできるようなモチーフの研究は、ユーザーの購買意欲を刺激しやすく、本来の目的である「コンバージョン率」のアップにもつながるかもしれません。

オシャレでボタンデザイン

デザイン by Grace Coote

 

イメージできるモチーフ

デザイン by harsh.spy4

オシャレでかっこいいデザインは「引き算」が鉄則ですが、そこに「ボタン」とわかってもらうための工夫も取り入れる必要があるため、難易度が高いと感じるかもしれません。しかし、「サイトの商品やサービスに興味を持っているユーザーのアクションを促す」という目的を常に意識していれば、アイデアが浮かびやすくなります。ぜひかっこいいサイトの中でキラリと光るボタン作りを研究してみてください。