ボタンひとつで、ユーザーの動きはまだまだ大きく変わります。
Webサイトにおける1つの小さなボタンが、サイトを訪れる人の行動や経験を大きく左右することがあります。 最新のトレンドを取り入れたボタンデザインは、時に訪問者を引きつけ、サイト内の行動を促進する重要なツールです。
この記事では、最新版のROI最大のUI要素であるボタンデザインを集めて解説しています。ぜひ参考にしてみてください。

クリック率を上げる5つの鉄則

①背景と強くコントラストする配色

背景と強くコントラストする鮮明な配色を選び、視線を集めたい要素に「ページ内でいちばん目立つ色」を割り当てる。文字・図形と背景の輝度差をWCAG2.2 AAA（7:1）以上に保つことで、視覚障害や屋外閲覧でもウェブアクセシビリティが担保された判読性が向上します。

NYLE

黄緑のサイトカラーを利用したアプリ等でも使われるベーシックな形のボタンに、小さい矢印の組み合わせ

akimiru | ITOKI

エメラルドグリーンのサイトカラーを利用したサービスを彷彿させる長方形。

イオンのランドセル

ダークカラーの角丸長方形のボタンに白色の文字、アクセントとなる白丸がついている。

アイグッズ株式会社 | 新卒採用サイト

人物写真を活用した視線誘導型のデザイン。オレンジの背景と白文字の高コントラストで視認性も高く、英語と日本語の併記や、矢印やアイコンも加わり、自然とクリックを促す構成になっている。

スパークリング日本酒 サマーフォール

サイトのメインカラーとベースカラーをボタンにも使用し統一感を出しつつ、右上にスクエアでキャッチフレーズを添える事で視認性を上げている。

LAKOLE | コレ、ラコレ？プレゼントキャンペーン

ネオンカラーで目を引くデザイン。さらに、差別化されたスクエアと人差し指のアイコンで特徴的になっている。

②行動直結コピー文言

ユーザーの指先を即座に動かすコピーは、具体的ベネフィットと無料などの訴求を掛け合わせるのが鉄板です。ボタンやフォーム脇のマイクロコピーでUXライティングを磨けば、心理的コストが下がり登録・購入・資料請求へ背中を強力に後押しに。

米肌

２色カラーで立体的に見せる角丸長方形の美しいボタンデザイン。

ヨガステ

オレンジ色のサイトカラーを利用した長方八角形のボタンとアクセントとなる四角星。

早朝フェス

背景色と同じピンク色の長方形に白色の枠線で囲まれたボタンとテキスト。

アーモンド効果

角丸長方形のボタンにSNSアイコンとインパクトのあるアーモンド写真の組み合わせがかわいい。

丸千千代田水産

上下の２本の線で挟まれたボタンにテキストと赤の大きく目立つ矢印が目を引く。

キレイの為の腸健康セミナー｜グリコ

ショッキングピンクのサイトカラーを利用した角丸長方形のボタンにテキスト、ユニークな吹き出しアイコンが目立つ。

びっくりドンキー

コーヒーカップにお豆とメッセージ入れた視線誘導型のデザイン。店舗検索の下の矢印でクリックを促す構成になっている。

ボタンのマイクロコピーについては、考え方や成果のでるものを以下の記事で詳しくまとめています。

③簡易的なホバー（タップ）アニメーション

軽いホバー（タップ）アニメーションは、色や影を150 ms以内でふわりと変化させ「ここを押せる」というアフォーダンスを直感的に強化します。視覚フィードバックが即時に返ることでクリック迷いをなくし、操作の楽しさとCTRを同時に高める。モーションはミニマルにとどめ、他要素を邪魔しない設計で体験を洗練しましょう。

BODY ARCHI

ショップ、サイトに合わせたグレー×サーモンピンクの2色のカラーを利用した長方形ボタンと大き目矢印が目立ちます。

シナモンAI

白を基調とした大きめの丸型ボタンで、シャドウによる光彩効果が目を引くデザイン。大きな文字とアイコンで視認性が高く、同一デザインのボタンを横並びに配置して強調している。

株式会社to

イエローの大きな丸型ボタンに、中央には黒の「MORE」文字と斜め下を指す矢印が配置され、注目を自然に誘導している。

長野都市ガス

スクエア型のボタンで、左に丸型のイラストアイコン、中央にテキスト、右端に矢印が配置された、視線の流れを意識したバランスの良いデザイン。

④角丸をつかう

角丸のUIは視覚的な柔らかさで親しみと安心感を与え、クリックの心理抵抗を軽減します。Ciedenの調査によればroundedボタンはCTRを17〜55％押し上げたといいます。

株式会社ライフデザイン求人サイト

スリムな横長ボタンが3つ横並びに配置され、オレンジ・緑・白の配色で、それぞれの役割や機能を色で直感的に伝えるデザインです。

Haagen Dazs

白地に黒文字のシンプルなボタンで、右側には丸で囲まれた矢印アイコンが配置され、視線を自然に誘導する洗練されたデザインです。

株式会社壱番屋

黄色のサイトカラーをアクセントにした丸のあしらいを背景にテキストと矢印。

七色高等学院

シンプルな形状のボタンが縦に3つ並び、最後のボタンは緑色のLINE誘導用で、段階的に行動を促す構成に。

⑤スクロール追従させる

モバイル画面でCTAをスクロール追従させ、常時視界に置くと迷わずタップできCVRが8〜25％向上した事例があります。ファネル最終段でも離脱を防ぎ、広告費の回収効率を底上げする施策ですが、画面によっては、視界にちらつきUXを損なうことも。良い塩梅が必要です。

はばたき農場 | デイリーファーム

やや大きめのイエローボタン。アイコンと矢印の色バランスはサイト全体に馴染み、シンプルで伝わり易い

東海国立大学機構

ブラウンのスクエア型ボタンで、リンク先の内容がひと目で伝わるメッセージが記載されており、落ち着いた印象と分かりやすさを兼ね備えている。

anicecompany

赤地に黒文字を載せたスクエア型ボタンで、右端には右斜め上を指す矢印アイコンを配置し、力強く行動を促す印象的なデザイン。

現場から…2025年の新トレンド

WCAG2.2準拠

WCAG 2.2に完全準拠するために、:focus-visibleリングでフォーカスを明示し、prefers-reduced-motionで動きに配慮する。
キーボード操作を快適にするだけで視覚・運動制限ユーザーの負荷を軽減し、アクセシビリティスコアを90→100へ押し上げ、法的リスクも最小化できます。

ダークモード最適化

color-scheme: light dark; がOSテーマに連動して白黒を瞬時に自動切替することで、眩しさを抑え深夜閲覧の離脱を減らしCVR＋9％を実現した例も。
CSS変数で色管理を一元化でき開発運用も軽快にし、端末によｔってはバッテリー節約にも貢献しエコ訴求にもつながりUX全体を底上げできます。

ユーザーの期待とウェブの進化に適応したデザインを

ボタンのデザイン1つとっても、様々な形がありました。
ボタンデザインはUIやサイトの成果に影響を及ぼします。訪れたユーザーの期待とウェブの進化に適応したデザインを採用してWebサイトを制作していきましょう。

こちらの記事ではPCのWebサイトのをメインにボタンデザインについてをまとめました。
以下のでは、モバイルのアプリやスマホサイトのボタンの大きさの検証を行っていますので参考にしてみてください。

---

KOHIMOTOではウェブサイトのボタンなどの細部からの改善も積極的に行っています。「ボタンからのCV率を上げたい」などWebサイトの運営・改善にお悩みの方は、ぜひお気軽にお問い合わせください。