デザインシステム 法令整備・編さんデータベース

ボタン

概要

用途

ユーザーが何らかの重要行為を行う際に使用します。link.scss にてデザインを改変することが出来ます。

ルール

ユーザーの操作ミスを防ぐため、優先順位を考慮して配置を行い、ボタンの持つ機能に対して適切な表現を適用します。また、アクセシビリティを確保したサイズを使用します。

優先順位と配置

ボタンの配置ルールを以下のように定め、サイト全体で統一した操作性を提供します。

  1. ページ全体に対するアクションボタンはページ最下部に配置する。
  2. 優先度の高い順に右から配置する。
  3. キャンセルや戻る等のネガティブな内容のボタンは左に配置する。
  4. リスト全体に対するアクションボタンは基本的にリスト下部に配置する。
  5. 例外として、リストに対してダウンロードを実行する場合はリスト上部に配置する。
  6. テーブルの任意の行に対するアクションボタンはテーブル内に配置する。

アイコン

余白を設けて、テキストに被らない大きさにする。SP版のアイコンのみ表示ボタンの場合、40px×40px内に配置します。

位置
文字の左に配置 アイキャッチ目的の場合
文字の右に配置 部位の開閉 / 別ウィンドウ・別サイトを示す場合

アイコンについて詳しくはこちらをご覧ください。

アクション

デザイン定義

優先度1 、優先度2は、ユーザーに対して重要な行為を促す際に使用。優先度3は、通常リンク同様の役割を担います。
※ボタンは案件ごとにルールに沿ってデザインしてください。

優先度1 （実行・決定）

一番優先度が高いもので、具体例はCTAボタンやユーザーに実行を促すボタンです。

<button type="button" class="labelType main"><span>BTN</span></button>
優先度2 （条件選択等）

選択や絞り込みなど、重要な決定をする前段階の操作の実行を促すボタンです。

<button type="button" class="labelType sub"><span>BTN</span></button>
優先度3

重要度はテキストボタンと同程度だが、テキストの導線から目立たないレイアウト位置にある場合に採用します。（例）以前のお知らせ」など。
テキストボタンについては、テキストリンク・ボタンをご覧ください。

<button type="button" class="labelType base"><span>BTN</span></button>
ネガティブ

リセットボタンのように、取り消す、元に戻す、などネガティブな行為に対して使用します。

<button type="button" class="labelType negative"><span>BTN</span></button>
デリート

削除に対して使用します。

<button type="button" class="labelType del"><span>BTN</span></button>
非アクティブ

この状態ではボタンは機能しませんが、何かしらのアクションが発生した際に、ボタンはアクティブになります。（アクティブは優先度1 or 優先度2 へ変化）

<button type="button" class="labelType disabled"><span>BTN</span></button>
改変対象ファイル
CSS:
link.scss 内に改変対象箇所があります。

デザイン

※デザインは初期デザイン時のみ変更可能です。

種類:
優先度1 優先度2 優先度3 ネガティブ デリート 非アクティブ
.main .sub .base .negative .del .disabled

サイズ

※幅、高さは初期デザイン時のみ変更可能です。

幅:
通常 最小 中 最大 100% 成り行き
-- .min .middle .long .w100 .auto
n px (110px) n px (40px) n px (250px) n px (330px) 100% auto
width: 100%
max-width: $btn-size-base
padding: 0 $min-space		 width: 100%
max-width: $btn-size-small
padding: 0 $min-space		 width: 100%
max-width: $btn-size-middle
padding: 0 $min-space		 width: 100%
max-width: $btn-size-long
padding: 0 $min-space		 width: 100%
padding: 0 $min-space		 width: auto
padding: 0 $hf-space
高さ:
通常 最小
-- .smallHeight
$btn-size-small: 40px; 30px (フォームと同じ高さ)
改変対象ファイル
CSS:
link.scss 内に改変対象箇所があります。

スイッチ・絞り込み

内容の切り替えや、結果の絞り込みをしたいときに利用するボタンです。110px（通常幅）× 30px（フォームと同じ高さ）を基本とします。フォームと一体感のあるデザインにすることで、スイッチ、絞り込み操作と印象付けます。

通常サイズ:
<nav class="switchNavi">
<ul>
<li class="active"><button type="button">左スイッチ</button></li>
<li><button type="button">真ん中</button></li>
<li><button type="button">右スイッチ</button></li>
</ul>
</nav>
小サイズ:
<nav class="switchNavi">
<ul class="min">
<li class="active"><button type="button">左スイッチ</button></li>
<li><button type="button">真ん中</button></li>
<li><button type="button">右スイッチ</button></li>
</ul>
</nav>
改変対象ファイル
CSS:
link.scss 内に改変対象箇所があります。
Javascript:
tips.js / switchNavi()関数

実行内容を選択するボタン

オプションの値に出現させたいポップアップのIDを設定することで、出現するポップアップが変化します。SELECTタグのdata-labelの値に埋め込まれたCLASS名で、アクティブ化されたボタンのデザインを設定します。（CLASS名については上記『デザイン - 種類』参照）

<div class="matomeSelect">
<div class="flexTable">
<select data-label="sub" class="w100 mMinRight selectBtn">
<option value="">選択してください</option>
<option value="madal-targetA">項目A</option>
<option value="madal-targetB">項目B</option>
</select>
<button type="button" data-madal-target="" data-madal-size="" data-madal-scroll="" class="labelType smallHeight disabled modalBtn"><span>実行</span></button>
</div>
</div>
改変対象ファイル
CSS:
modules.scss 内に改変対象箇所があります。

吹き出しアイコンボタン

オプションの値に出現させたいポップアップのIDを設定することで、出現するポップアップが変化します。SELECTタグのdata-labelの値に埋め込まれたCLASS名で、アクティブ化されたボタンのデザインを設定します。（CLASS名については上記『デザイン - 種類』参照）

  • 追加
  • 複写
  • 削除
<ul class="iconBtns">
<li><div class="btnWrap"><div class="fukidashi">吹き出しのテキスト</div><button type="button" class="iconBtn add"><span>アイコンのテキスト</span></button></div></li>
<li><div class="btnWrap"><div class="fukidashi">吹き出しのテキスト</div><button type="button" class="iconBtn copyPlus"><span>アイコンのテキスト</span></button></div></li>
<li><div class="btnWrap"><div class="fukidashi">吹き出しのテキスト</div><button type="button" class="iconBtn del"><span>アイコンのテキスト</span></button></div></li>
</ul>
改変対象ファイル
CSS:
modules.scss 内に改変対象箇所があります。
Javascript:
tips.js / selectSetBtn()関数

選択して印刷

選択してダウンロード