ThinkMoveDESIGN LIBRARY / LOCAL

THINK & MOVE

次につくるものを、
ここから。

試して、選んで、組み込む。ThinkMoveのデザイン部品集。

18部品

動きで伝える

前回の6種類 · ThinkMove版

操作を支える

3 components

07 / ACTION

アクションボタン

実行前・処理中・完了を伝える。

組み込みコード
<tm-action label="保存する"></tm-action>

tm-action / busy / disabled

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
操作
#0D9488
ボタン文字の背景
#0A7A70
背景
#FAFBFC

余白と動きの基準

  • 余白：8 / 16 / 24 / 32pxを基本に
  • 角丸：8 / 12 / 16 / 20px
  • 動き：180ms / 420ms。操作の意味を伝えるときに
  • キーボード操作と、動きを抑える設定に対応

再利用するコードと共通データは部品セットに収録しています。