ユーザーの行動を導く。UIデザインのボタンルール【Figmaテンプレ付き】

執筆日：2025年5月19日　提供元：株式会社Engineerforce

デザインにおいて、”ボタン”はユーザーの行動を促す重要な要素です。

特にウェブデザインにおいては、クリック率（CTR）を向上させたり、

システムデザイン上でユーザーが行うべき行動を視覚的にわかりやすく指示するために、ボタンのデザインや配置に工夫が必要です。

本記事では、ボタンの種類を

「塗りつぶしボタン」「アウトラインボタン」「テキストリンクボタン」

の3つに分け、それぞれの特性や効果的な使い方、デザインする際のポイントについて詳しく解説します。

また、実務に使えるFigma形式のテンプレート（※無料、個人情報登録不要）を用いて、ボタンの活用事例を紹介していますのでぜひご活用ください。

＼ Figmaテンプレで作業を効率化しよう！／

【プロジェクト管理システムでの良いボタン活用例】
をFigmaで見る

※ 無料・個人情報入力不要。クリックするとFigmaファイルに遷移します。

ボタンデザインの基礎を理解し、アクセシビリティに配慮したデザインを実践することで、UX（ユーザー体験）を向上させましょう！

Contents

1 1. ボタンの重要性と基本概念
- 1.1 | 1-1. ボタンの役割
- 1.2 | 1-2. ボタンの基本概念
2 2. ボタンの使い分け
3 3. ボタンの基本ルール
4 4. ボタンデザインの実践　【Figmaテンプレートの活用】
- 4.1 | 4-1. ボタンデザインの際のポイント
- 4.2 | 4-2. プロジェクト管理システムにおけるボタン活用の例
5 5. まとめ
6 6. Engineerforceの独自メソッド【UIコンポーネントライブラリ】を公開します！
7 7. デザイン研修会でデザイン思考を学びませんか？

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の法則」に基づき、人間の視線は左上から右下に移動します。

そのため、ユーザーのアクションに複数の段階がある際には、「左から右、上から下にかけて重要度が上がるよう」要素を配置します。

一方で、ボタンが２種類の場合は、「プライマリーボタンを上、セカンダリーボタンを下」、

または「プライマリーボタンを右、セカンダリーボタンを左」に配置するのが一般的です。

| 3-4. 複数の要素がある場合

一連のアクションのほかに、複数のアクションが必要となる場合、異なる要素ごとにボタンの色を変更することで対応します。この場合、色のデザインに優先順位をつけることで、要素ごとの優先順位を示します。また、同じ要素内では複数の色を使わず、要素ごとに色を設定することが重要です。

プライマリーカラーとセカンダリーカラーの決め方[前編]【テンプレ付】

4. ボタンデザインの実践　【Figmaテンプレートの活用】

本章ではすぐに使える【Figmaテンプレート】を活用しながら、実務におけるボタンのデザインの活用方法を解説します。

| 4-1. ボタンデザインの際のポイント

ボタンデザインを実践する際は、以下のポイントを意識しましょう。

ユーザーの動線を考慮：ボタンの配置は、ユーザーがどのようにページを移動するかを考慮して決定します。ユーザーのアクションを洗い出し、優先順位をつけた上でボタンを配置することで、UX（ユーザーエクスペリエンス）に優れたデザインを実現できます。

ラベルのデザイン：ウェブデザインにおけるアクセシビリティのガイドライン「WCAG」では、背景色と文字色のコントラスト比を「4.5:1」以上とすることが求められています。ボタンの背景に色をつけている場合、ラベル内の文字とのコントラスト比を4.5:1以上に保つことで視認性が向上します。また、暖色より寒色の方がコントラスト比を保ちやすい傾向があります。

コントラスト比とは？アクセシビリティを高める基準とチェックツール4選【Figmaテンプレ付】

| 4-2. プロジェクト管理システムにおけるボタン活用の例

今回は、プロジェクト管理システムにおけるプロジェクトの作成画面を想定したボタンデザインの事例を紹介します。

NG：良くない例

良くない例では、プライマリーボタンである「保存する」の塗りつぶしボタンが、セカンダリーボタンであるはずの「一時保存」と同じデザイン・位置であり、優先度が不明確になっています。

また、十分なボタンサイズと余白が確保されていない上に、背景が暖色系で文字とのコントラスト比が保たれていないため、見づらくアクセシビリティに配慮してないボタンデザインとなっています。

OK：良い例

正しくは、プライマリーボタンである「保存する」とセカンダリーボタンである「一時保存」のボタンデザインを区別し、右につれて重要なアクションとなるように配置します。

また、「戻る」を「キャンセル」に変更し、最小サイズ72px以上にすることでターゲティング領域を確保します。

さらに、ボタンの背景色に寒色系を使用することで、「4.5：1」のコントラスト比を保ち、十分な余白を取る事でターゲット領域を確保します。これにより、ユーザーにとって重要なアクションがわかりやすいデザインとなります。

＼ Figmaテンプレで作業を効率化しよう！／

【プロジェクト管理システムでの良いボタン活用例】
をFigmaで見る

※ 無料・個人情報入力不要。クリックするとFigmaファイルに遷移します。

このテンプレートを活用し、ご自身のプロジェクトに合わせてカスタマイズすることで、効率的にデザインを進めることができます。

良くない例と良い例の比較

~ Figmaファイルの活用方法 ~

STEP1. 上記サンプルファイルを参照
STEP2. ファイル右クリック「コピー」(Ctrl+C)、もしくは、「ドラフトに複製を作成」
　※「コピー/貼り付けオプション」にて画像など、任意の形式でコピーすることも可能
STEP3. 「⁨⁩00（コピー）」複製版を自身のファイルに貼り付けまたは、移動
STEP4. 自身のファイル上で編集、調整