執筆日：2025年5月19日 提供元：株式会社Engineerforce
デザインにおいて、ボタンはユーザーの行動を促す重要な要素です。
特にウェブデザインにおいては、クリック率（CTR）を向上させたり、
システムデザイン上でユーザーが行うべき行動を視覚的にわかりやすく指示するために、ボタンのデザインや配置に工夫が必要です。
本記事では、ボタンの種類を
「塗りつぶしボタン」「アウトラインボタン」「テキストリンクボタン」
の3つに分け、それぞれの特性や効果的な使い方、デザインする際のポイントについて詳しく解説します。
また、実務に使えるFigma形式のテンプレート（※無料、個人情報登録不要）を用いて、ボタンの活用事例を紹介していますのでぜひご活用ください。
＼ Figmaテンプレで作業を効率化しよう！ ／
※ 無料・個人情報入力不要。クリックするとFigmaファイルに遷移します。
ボタンデザインの基礎を理解し、アクセシビリティに配慮したデザインを実践することで、UX（ユーザー体験）を向上させましょう！
目次
1. ボタンの重要性と基本概念
1-1. ボタンの役割
「ボタン」は、ユーザーがウェブサイトやアプリケーションでアクションを起こすためのインターフェースです。
ユーザーにとってわかりやすいデザインを行うためには、ボタンの基本ルールの理解が非常に重要です。
1-2. ボタンの基本概念
ボタンの構成は以下のとおりです。
・ボタン：アクション実行またはページ遷移のためのトリガー。
・ラベル：ボタンの中にある文言。
・パディング：ラベルとボタンの間の余白。
・ボーダー：ボタンと他要素の境目。
・ターゲット領域：ユーザーがタップやクリックで操作可能な範囲。通常パディングまでがターゲット領域となる。
2. ボタンの使い分け
2-1. ボタンの優先順位
ボタンには優先順位が存在します。これによって、ユーザーに重要な行動を効果的に促すことができます。
2-2. ボタンの基本概念
プライマリーボタン（重要度：高）
画面内で最も重要なアクションに使用します。原則として、ひとつの画面につき1つまで使用することが推奨されます。これにより、ユーザーは何を優先すべきかを直感的に理解できます。
セカンダリーボタン（重要度：中）
プライマリー以外の選択肢がある場合に使用します。原則として、同時に最大3つまで使用可能です。プライマリーボタン以外の選択肢が4つ以上になる場合は、フロー自体の設計を見直すことが推奨されます。
ターシャリーボタン（重要度：低）
フローやアクションの実行を中断・中止するために使用します。原則として、ひとつの画面につき1つまで使用することが推奨されます。
2-3. 代表的なボタン３種類
ボタンは主に以下の３種類に分類されます。
| 塗りつぶしボタン | アウトラインボタン | テキストリンクボタン | |
|---|---|---|---|
| 概要 | プライマリーボタン（重要度：高） 最も目立つボタン。 ユーザーに強いアクションを促す。 | セカンダリーボタン（重要度：中） 塗りつぶしボタンの補助。 塗りつぶしボタンと同じ色を使用。 | ターシャリーボタン（重要度：低） 主にナビゲーションや補足情報へのリンク。 目立ちにくいため、下線を使って強調。 関連する要素の近くに配置し、クリックを誘発。 |
| デザイン | ラベル：白（White） ボタン背景色：任意の色 ボーダー：なし | ラベル：任意の色 ボタン背景色：白（White） ボーダー：任意の色 | ラベルと下線：任意の色 ボタン背景色：透明（transparent） ボーダー：なし |
| よく使われる項目 | 「はい」「登録」「ログイン」「保存」「決定」「送信」「購入」「印刷」「次へ」等 | 「いいえ」「戻る」「キャンセル」「新規登録」「一時保存」「修正」等 | 「パスワードをお忘れの方」「よくある質問」「詳細設定」「利用規約・プライバシーポリシー」等 |
3. ボタンの基本ルール
ボタンをデザインする際には、以下の5つのポイントを押さえておくことが重要です。
3-1. ホバー効果の設定
ホバー（hover）とは、ボタンの上にマウスカーソルを移動させたときに、ボタンに何らかの変化が起こることを指します。
ボタンは通常、押すとページが遷移するため、ユーザーがボタンがアクティブであることを視覚的に確認できるように、ホバー効果の設定は不可欠です。
引用：株式会社Designerforce デザインスタジオ
代表的なホバーの種類
- ・色の変化文字
- ・文字、画像の拡大
- ・文字、画像の移動アンダーライン
- ・影の追加
ホバー効果はさまざまな形で実装でき、UI/UXを向上させる重要な要素となります。
3-2. ボタンのサイズ
ボタンには主に4つのサイズがあります。
具体的には、
・ラージ（Large）136×56px
・ミディアム（Medium）96×48px
・スモール（Small）80×36px
・エクストラ スモール（Extra Small）72×28px
が最低限の大きさの目安として設定されています。
これらの最小の幅と高さを保って作成することが重要です。
また、ボタンはラベルの大きさによってサイズが変化できるように、パディング（padding）を可変長にする必要があります。
※ パディング（padding）…ラベルからボーダの矢印の範囲
さらに、クリック可能な範囲である「ターゲット領域」については、最低44px以上の設定が求められています。
スモールやエクストラ スモールは44pxに満たないため、上下にマージンを設けることでターゲット領域を確保します。
参考サイト：デジタル庁デザイン ボタン
3-3. ボタンの優先順位
LTR（Left To Right）言語である日本語では、過去は左、未来は右といった時間関係が存在します。また、「グーテンベルク・ダイヤグラム」や「Zの法則」、「Fの法則」に基づき、人間の視線は左上から右下に移動します。
そのため、ユーザーのアクションに複数の段階がある際には、「左から右、上から下にかけて重要度が上がるよう」要素を配置します。
３種類以上の場合
一方で、ボタンが２種類の場合は、「プライマリーボタンを上、セカンダリーボタンを下」、
または「プライマリーボタンを右、セカンダリーボタンを左」に配置するのが一般的です。
2種類の場合
3-4. 複数の要素がある場合
一連のアクションのほかに、複数のアクションが必要となる場合、異なる要素ごとにボタンの色を変更することで対応します。この場合、色のデザインに優先順位をつけることで、要素ごとの優先順位を示します。また、同じ要素内では複数の色を使わず、要素ごとに色を設定することが重要です。
関連記事：プライマリーカラーとセカンダリーカラーの決め方[前編]【テンプレ付】
4. ボタンデザインの実践 【Figmaテンプレートの活用】
本章ではすぐに使える【Figmaテンプレート】を活用しながら、実務におけるボタンのデザインの活用方法を解説します。
4-1. ボタンデザインの際のポイント
ボタンデザインを実践する際は、以下のポイントを意識しましょう。
ユーザーの動線を考慮：ボタンの配置は、ユーザーがどのようにページを移動するかを考慮して決定します。ユーザーのアクションを洗い出し、優先順位をつけた上でボタンを配置することで、UX（ユーザーエクスペリエンス）に優れたデザインを実現できます。
ラベルのデザイン：ウェブデザインにおけるアクセシビリティのガイドライン「WCAG」では、背景色と文字色のコントラスト比を「4.5:1」以上とすることが求められています。ボタンの背景に色をつけている場合、ラベル内の文字とのコントラスト比を4.5:1以上に保つことで視認性が向上します。また、暖色より寒色の方がコントラスト比を保ちやすい傾向があります。
関連記事：Web、UIデザインには欠かせない「コントラスト比」とは？【テンプレ付】
4-2. プロジェクト管理システムにおけるボタン活用の例
今回は、プロジェクト管理システムにおけるプロジェクトの作成画面を想定したボタンデザインの事例を紹介します。
| 良くない例
良くないボタン活用例
良くない例では、プライマリーボタンである「保存する」の塗りつぶしボタンが、セカンダリーボタンであるはずの「一時保存」と同じデザイン・位置であり、優先度が不明確になっています。
また、十分なボタンサイズと余白が確保されていない上に、背景が暖色系で文字とのコントラスト比が保たれていないため、見づらくアクセシビリティに配慮してないボタンデザインとなっています。
| 良い例
良いボタン活用例
正しくは、プライマリーボタンである「保存する」とセカンダリーボタンである「一時保存」のボタンデザインを区別し、右につれて重要なアクションとなるように配置します。
また、「戻る」を「キャンセル」に変更し、最小サイズ72px以上にすることでターゲティング領域を確保します。
さらに、ボタンの背景色に寒色系を使用することで、「4.5：1」のコントラスト比を保ち、十分な余白を取る事でターゲット領域を確保します。これにより、ユーザーにとって重要なアクションがわかりやすいデザインとなります。
＼ Figmaテンプレで作業を効率化しよう！ ／
※ 無料・個人情報入力不要。クリックするとFigmaファイルに遷移します。
このテンプレートを活用し、ご自身のプロジェクトに合わせてカスタマイズすることで、効率的にデザインを進めることができます。
| 良くない例と良い例の比較
~ Figmaファイルの活用方法 ~
STEP1. 上記サンプルファイルを参照
STEP2. ファイル右クリック「コピー」(Ctrl+C)、もしくは、「ドラフトに複製を作成」
※「コピー/貼り付けオプション」にて画像など、任意の形式でコピーすることも可能
STEP3. 「00（コピー）」複製版を自身のファイルに貼り付けまたは、移動
STEP4. 自身のファイル上で編集、調整
5. まとめ
ボタンとは、ユーザーがウェブサイトやアプリケーションでアクションを起こすためのインターフェースであり、主に「塗りつぶしボタン」「アウトラインボタン」「テキストリンクボタン」の3種類があります。
「塗りつぶしボタン」は一番重要なプライマリーボタンとなり、画面には1つだけ配置されます。
「アウトラインボタン」は、セカンダリーボタンとして、最大で3個まで同時に使用可能です。
「テキストリンクボタン」はターシャリーボタンとして機能し、主に補助的なアクションを示します。
また、ユーザーのアクションに沿って左から右、上から下へ優先順位が向上するようにボタンを設置しすることで、ユーザーの行動を促進できます。
さらに、ボタンはホバー効果や十分なターゲット領域を適用することで、ユーザーにとって使いやすいインターフェースづくりを実現できます。
また、Figmaテンプレートを活用することで、デザインの効率化が図れるため、ぜひ試してみてください。これらのルールを実践し、効果的なボタンデザインを実現しましょう！
＼ Figmaテンプレで作業を効率化しよう！ ／
※ 無料・個人情報入力不要。クリックするとFigmaファイルに遷移します。
6. Engineerforceの独自メソッド【UIコンポーネントライブラリ】を公開します！
WEBやシステム開発において、UI/UXやアクセシビリティに配慮したデザインを行うのは非常に大変です。そのため、作業の効率化が求められています。
そこで、当社独自の「【2025年最新版】UIコンポーネントライブラリ」を6月下旬に無料公開することをお知らせします！
このライブラリは、当社のUI/UXデザイナーのプロが日本向けのデザインに特化して作成したもので、
全11種類のコンポーネントを取り揃えています。
※ 無償公開、個人情報の登録不要、商業利用可能
お気軽にプロジェクトにご利用いただけます。
ぜひこの機会に、当社のUIコンポーネントライブラリをダウンロードし、プロジェクトにご活用くださいね。
7. デザイン研修会でデザイン思考を学びませんか？
“デザイン原則についてどこから学べばいいのかわからない“、
“デザイン思考には興味があるけど敷居が高そう“といったイメージをお持ちの方に向けて、
UIUXデザイン会社「Engineerforce」では企業向けデザイン研修会を行っています。
この研修では、UIUXデザインの専門家から直接学ぶことで、デザインの基礎知識から最新のトレンドを理解し、デザイン思考を体系的に身につけることができます。
実践にすぐ応用できるよう詳しく研修しておりますので、興味のある方はぜひ下のリンクからからお気軽にお問い合わせください。
