【CV達成27％⤴ 】月間80万人に読まれるオウンドメディア「データのじかん」サイト改善の裏側
Webサイトにおいて、ボタンはユーザーの行動を促す最重要パーツです。
配色ひとつで「押したくなる」「ついスルーしてしまう」といった心理的影響が大きく変わります。今回は、配色の効果や心理を踏まえつつ、20のパターンをまとめて紹介します。
是非デザインの参考や、A/Bテストのヒントに活用していただけたらと思います
コンバージョンエリアも広く取られているため、視覚的にとても目立ちユーザーが見逃しません。
ダークトーンとの背景色との明暗差を強調したボタンで、自然に視線を誘導しています。
ネイビー×薄いピンクの両者が混ざり合うことなく自然に馴染みつつも、はっきりとしたコントラストが生まれています。この配色は、洗練された印象を与え、清潔感と知的さが両立する鉄板の組み合わせになっています。
存在感のあるサイズ感のリンクボタンを設置。ホバー時コントラスト比を意識したオレンジにカラーが変わります。
フローティングボタンに設置された４つのボタンは、それぞれ異なるカラーで配置され、それぞれが景色との明暗差で視線を自然に誘導しています。
ベースカラーのホワイトにブラック&イエローのボタンを配置し、背景色との明暗差を強調しています。
基本はベースカラーのホワイトとポイントカラーのグリーンで構成しつつ、CTAボタンをオレンジで強調し視線を誘導しています。
赤い「寄付する」ボタンが、寄付の意思決定をサポートします。メインカラーが緑なので、補色の赤が際立ちます。
赤色の「今すぐ始める」ボタンが、サービス開始への誘導を強化しています。
赤色の「今すぐ始める」ボタンが、サービス開始への誘導を強化しています。
緑色の「一覧」ボタンが、創造性と安心感を促進します。
緑色のCTAボタンを採用し、“安心感・信頼感”といった色の心理効果を活かして、ユーザーに自然な行動を促しています。
青い「WEB予約」ボタンが、プロフェッショナルな信頼感を与えます。
独特な形状と癖になる控えめな動きが特徴的なボタンデザイン。サイトの世界観と調和しながらも、可愛らしさを感じさせる動きがボタンにユニークな印象を加えています。
大きな正円の形状が特徴的なコンバージョンボタンです。形そのものが目立ちながらも、その他のボタンとも調和しており、サイト全体の世界観を壊すことなく存在感を放っています。
イエローで強調したCOMPANYボタンのエリアは、その他のボタンやサイト全体と調和しつつも存在感があります。
サイト全体にイラストが使われており、ボタン上にもイラストと吹き出しを配置する事でまとまりある印象になっています。
メインカラーのネイビーとレッドをボタンを用いることで、サイトの世界観を崩さず一貫性を保ちつつ重要なアクションを強調しています。
メインカラーのパープルを、塗りと線でフローティングボタンに用いることでサイトの世界観を崩さず一貫性を保っています。
ロゴに使われている色をベースにしたグラデーションボタンを使用することで、ボタンとブランドのビジュアルを自然に結びつけ、サイト全体に統一感を持たせています。
ボタンは「ユーザーが最終的にアクションを起こすための起点」となる要素です。
どんなにデザイン全体が美しくても、ボタンが目立たなければクリックされません。
逆に、色やコントラスト、心理効果を上手く利用することで、自然とクリック率（CTR）を高めることができます。
ここからは、実際に公開されているWebサイトのボタンデザインを見ていきましょう。
ボタンの配色は、見た目の美しさ以上に「心理的効果」がカギを握ります。
赤やオレンジのような行動喚起色、緑や青のような安心感色など、目的に応じた色を選ぶことで、より効果的にユーザーを誘導できます。
デザインの最終的な答えはA/Bテストでしか分かりませんが、今回紹介した20パターンを試すことで、自サイトに最適な配色を見つけやすくなるはずです。
より効果的に「ユーザーを誘導できるボタンデザインを取り入れたい」「社内リソースが不足している」といったお悩みがございましたら、KOHIMOTOまでお気軽にご相談ください😊
編集者：Chiho Ishigaki
文化女子大学で服飾を学び企業デザイナーとして経験を積む中で、ツールを使った細かいをデザインする楽しみを知りWebデザイン業界に転身。2児の母。日々学びを忘れず、人としても良いアップデートをしていく事が目標です🌷
監修者：Yuka Fujimoto
Webディレクター / デザイナー。美大在学中に、画面ひとつで世界中の人と繋がれるWebの可能性やデザインへ興味を持つ。インターンを経て就職したIT企業で実務経験を積む。肉より魚派🐟
PICK UP