Webサイトのコンバージョンを左右する重要な要素のひとつが「ボタンデザイン」です。
シンプルなUIパーツでありながら、機能性はもちろんブランドイメージにも沿ったデザインが求められるため、プロのWebデザイナーにとっても悩ましいポイントです。

UIやWebデザイン専門のデザイナーであれば最新トレンドを追いやすいものの、幅広い業務を担うマルチデザイナーの場合、「気づけば毎回似たようなデザインになってしまう…」ということも少なくありません。

そこで本記事では、筆者が100以上の優良Webサイトを調査し、デザイン性とUIパーツとしての汎用性を兼ね備えたボタンデザインを厳選してご紹介します。
通常時の見た目はもちろん、マウスオン（ホバー）時のデザインや多様なパターンも掲載していますので、ぜひ御社のプロジェクトにお役立てください。

基本形のボタン

まずはオーソドックスなボタンをご紹介します。

シンプルな四角形のボタンにテキストを中央寄せで配置するパターンは、よく使われるデザインです。

上記のように、マウスオン時にボタンとテキストの色を反転させることで、クリックできる状態であることをわかりやすく示すことができます。

このボタンをベースに様々なデザインのボタンをご紹介いたします。

矢印マーク付きボタン

矢印マークがついているボタンもよく見るデザインです。

マウスオン時にテキストや矢印をアニメーションさせることで、高揚感や知りたいというユーザーの感情想起へと繋がります。

角丸＋矢印マーク付きボタン

同じ矢印マーク付きのボタンでも角丸にすることでより「カジュアルさ」や「親しみやすさ」を演出することができます。

また、テキストの配置を中央寄せするケースでは、ビジュアル的にテキストの文字数は少ないほうが適切です。このデザインを採用したい場合は、「無料相談を希望する」よりも「無料相談」のように、ボタン内のテキストは少なくなるように調整しましょう。

角丸＋矢印パーツ付きボタン

矢印マークのボタンで最近流行っているデザインがボタンの中にもう一つの独立したパーツとして矢印マークが入っているボタンです。

このデザインは、矢印のパーツをボタン外のリンクのアイコンとしても再利用できることが特徴です。

角丸＋矢印マークが先頭にあるボタン

事例としては少なかったですが、矢印マークがついているボタンの中でも、少し変わったイメージにしたい場合におすすめです。

ホバー時にテキストと矢印マークの位置を入れ替えると、アニメーションとしても動きが分かりやすくなります。

カッコ矢印付きボタン

普通の矢印付きボタンもいいですが、カッコ(＞)矢印マークもよく使われる形です。特にカッコ矢印自体を丸線で囲むボタンでは、矢印マーク自体を他のリンクのパーツとして汎用性高く使い回せます。

三角形矢印付きボタン

このセクションでは、三角形の矢印マークを使ったおしゃれなボタンデザインをご紹介します。

四角形＋三角形矢印付きボタン

四角形のボタンに三角形矢印マークを組み合わせる形です。

どちらもボタンの中にもう一つパーツがあるようなデザインの組み方になっていることが分かります。このデザインもUIパーツとしての再利用性が高いデザインです。

個人的に１つ目のデザインは、いつか実案件でも使ってみたいな~と思っています。その際は実績記事に掲載して、このブログにもお知らせいたしますね。

角丸＋三角形矢印付きボタン

あまり見かけないボタンですが、だからこそユニークさが出せるデザインでもあります。

丸マーク付きボタン

最後に丸マーク付きボタンをご紹介いたします。

最近のWebサイトでは、この丸マーク＋ホバー時に動くデザインを多く見かけます。トレンドを抑えたデザインを希望されるプロジェクトでは積極的に活用していきましょう。

四角形＋二重丸マーク付きボタン

まずは、丸マークを使うデザインの中でも重厚さや強さが感じられるボタンデザインをご紹介いたします。

マウスオン時に三角形の矢印に変わる点も良かったためピックアップしました。

角丸＋丸マーク付きボタン

角丸ボタンの中に丸マークの形があるボタンは皆さんもよく見かけるのではないでしょうか？

実際にホバーデザインのパターンも多く存在しており、デザインの幅が広いボタンです。

角丸＋二重丸マーク付きボタン

先程の四角形の中に二重丸マークがあるボタンと似ていますが、こちらは角丸ボタンに小さい二重丸マークが入っている点が異なります。

こちらのボタンは重厚感や強さよりも、「繊細さ」や「親しみやすさ」が感じられるデザインになっています。ホバーデザインもそれぞれユニークなデザイン事例です。

小サイズ＋丸マーク付きボタン

角丸ボタンと丸マークがついた、小さいボタンデザイン事例です。

小ぢんまりとした印象を演出したい場合に使えるデザインであります。

いかがでしたでしょうか、本記事では筆者の磯崎が100以上の優良Webサイトの中から、さらにデザイン性に優れたボタンを厳選してご紹介しました。

優秀なデザイナーが採用している共通項として、「ボタンの中に再利用できるパーツをいれる」、「変化が分かりやすいアニメーションを入れる」という2点があるように感じました。

御社のWebデザインプロジェクトで活用できそうなデザインが見つかったのでしたら嬉しく思います。

今後も秀逸なボタンデザインを見かけ次第、随時記事に追加していきますので、参考になった方はブックマークしていただけるとありがたいです。

最後までお読みいただき、ありがとうございました。