ボタン

概要

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

ルール

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

優先順位と配置

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

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

アイコン

余白を設けて、テキストに被らない大きさにする。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 is-disabled"><span>BTN</span></button>

デザイン

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

種類:

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

サイズ

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

幅:

最小	小	通常	大	最大	100%	成り行き
.xs	.sm	-	.lg	.xl	.w-full	.w-auto
(40px)	(72px)	(100px)	(180px)	(250px)	100%	auto
$btn-size-xs	$btn-size-sm	$btn-size-base	$btn-size-lg	$btn-size-xl	-	-

高さ:

通常	小
-	.height-sm
(48px)	(40px : フォームと同じ高さ)
$btn-hi-base;	$btn-hi-sm

改変対象ファイル

CSS:: _link.scss 内に改変対象箇所があります。

ボタン

概要

ルール