07 / ACTION
アクションボタン
実行前・処理中・完了を伝える。
組み込みコード
<tm-action label="保存する"></tm-action>
tm-action / busy / disabled
触れる作品集へ ↗THINK & MOVE
次につくるものを、
ここから。
試して、選んで、組み込む。ThinkMoveのデザイン部品集。
18部品
動きで伝える
前回の6種類 · ThinkMove版
操作を支える
3 components
08 / CHOICE
選択スイッチ
期間や表示方法を切り替える。
「月次」を選択中
組み込みコード
<tm-choice label="表示期間" options='["月次","四半期","年次"]'></tm-choice>
tm-change / value
09 / TABS
タブ
情報を分け、必要な内容へ移る。
組み込みコード
<tm-tabs></tm-tabs>
tm-change / items
入力を支える
3 components
10 / FIELD
入力とエラー表示
形式の間違いを、その場で伝える。
組み込みコード
<tm-field label="メールアドレス" required></tm-field>
tm-input / value / validate()
11 / SEARCH
絞り込み検索
入力に合わせて候補を絞る。
組み込みコード
<tm-search items='["月次レポート","SEO診断"]'></tm-search>
tm-search / items
12 / CHECKLIST
チェックリスト
やることと完了したことを揃える。
組み込みコード
<tm-checklist items='["目的の確認","根拠の確認"]'></tm-checklist>
tm-change / value
説明を支える
3 components
13 / ACCORDION
開閉する補足
読みたい説明だけを開く。
組み込みコード
<tm-accordion items='[{"title":"使い方","body":"補足説明です。"}]'></tm-accordion>items / native details
14 / STEPPER
手順ナビゲーション
今どこにいるかを、順序で伝える。
組み込みコード
<tm-stepper steps='["確認","準備","実施"]'></tm-stepper>
value (0-based) / steps
15 / PROGRESS
進捗バー
どこまで進んだかを量で示す。
操作して試すサンプルの進捗です。
組み込みコード
<tm-progress label="準備の進捗" value="25"></tm-progress>
value (0–100) / label
確認を支える
3 components
16 / NOTICE
完了通知
操作の結果を画面内で伝える。
組み込みコード
<tm-notice id="notice"></tm-notice>
<script>
customElements.whenDefined("tm-notice").then(() => {
document.querySelector("#notice").show("保存しました");
});
</script>show(message) / tm-dismiss
17 / DIALOG
確認ダイアログ
反映する前に、内容を確かめる。
組み込みコード
<tm-dialog heading="変更を反映しますか？"></tm-dialog>
show() / tm-confirm / Escape
18 / METRIC
指標と比較
数値と比較元を、ひとまとまりに。
架空のサンプル値。増加を良し悪しで色分けしません。
組み込みコード
<tm-metric label="完了した項目" current="124" previous="100" unit="件"></tm-metric>
current / previous / unit
見た目を揃える、共通データ。
ThinkMoveのブランド資料をもとに
色には役割を持たせる
見出し
#1E3A5F
#1E3A5F
操作
#0D9488
#0D9488
ボタン文字の背景
#0A7A70
#0A7A70
背景
#FAFBFC
#FAFBFC
余白と動きの基準
- 余白：8 / 16 / 24 / 32pxを基本に
- 角丸：8 / 12 / 16 / 20px
- 動き：180ms / 420ms。操作の意味を伝えるときに
- キーボード操作と、動きを抑える設定に対応