デザインライブラリ

デザインシステム

コンポーネントの一貫性を保ち、理解しやすく、使いやすくします。

関連ツールAgent skillFigma skill

チェックリストを探す

プラットフォームやテーマを選択。

関連ツール

デザインプラットフォーム

テキスト、色、間隔、トークン、アクセシビリティのルールを設定します。

5

インターフェースコンポーネント

各コンポーネントの構造、バリエーション、状態を確認してください。

27
デザインシステム

アコーディオン

コンテンツを折りたたんでも、検索や移動が簡単になります。

6 個の確認項目
デザインシステム

バナー

重要な情報を適切な文脈に配置します。

6 個の確認項目
デザインシステム

ラジオボタン

単一の選択が明確になり、操作が簡単になります。

6 個の確認項目
デザインシステム

ツールチップ

必要な情報を隠さずに説明を追加します。

6 個の確認項目
デザインシステム

モーダルダイアログ

意思決定に焦点を当て、最終決定ラインを見つけやすくします。

6 個の確認項目
デザインシステム

入力フィールド

情報フィールドに正しく入力し、エラーを修正するのに役立ちます。

8 個の確認項目
デザインシステム

ボタン

アクティベーション後のアクションと応答を明確にします。

6 個の確認項目
デザインシステム

トグル

効果を推測することなくステータスを変更できます。

6 個の確認項目
デザインシステム

引き出し

メイン画面のコンテキストを維持したまま、セカンダリ コンテンツを開きます。

8 個の確認項目
デザインシステム

日付ピッカー

形式や期間を混乱させることなく日付を選択するのに役立ちます。

8 個の確認項目
デザインシステム

ブレッドクラム

コンテンツ構造内の位置とパスを示します。

4 個の確認項目
デザインシステム

アラート

何が起こったのか、どのような手順が必要なのかを報告します。

6 個の確認項目
デザインシステム

スケルトン

レイアウトをジャンプさせることなく、今後のコンテンツを示します。

5 個の確認項目
デザインシステム

カルーセル

場所を制御しながら、コンテンツを順番に閲覧できます。

7 個の確認項目
デザインシステム

スライダー

制御された値または値の範囲を選択するのに役立ちます。

6 個の確認項目
デザインシステム

乾杯

作業を妨げることなく、アクション後に短いフィードバックが得られます。

8 個の確認項目
デザインシステム

タブ

同じレベルのコンテンツ領域を切り替えます。

7 個の確認項目
デザインシステム

チェックボックス

複数の項目を選択するか、独立した選択を有効にします。

6 個の確認項目
デザインシステム

検索バー

明確な範囲と対応を持って検索を開始してください。

7 個の確認項目
デザインシステム

読み込み中

タスクが進行中であり、いつ処理する必要があるかを示します。

6 個の確認項目
デザインシステム

アイコン

アイコンはどのサイズでも認識可能で意味のあるものにしてください。

5 個の確認項目
デザインシステム

テーブル

スキャンと比較のために構造化データを提示します。

10 個の確認項目
デザインシステム

カード

情報とアクションを 1 つの簡単に調べられる単位に収集します。

5 個の確認項目
デザインシステム

バッジ

メインコンテンツを侵害することなく、数量やステータスを追加します。

4 個の確認項目
デザインシステム

アバター

身元を示し、管理された写真の更新を提供します。

6 個の確認項目
デザインシステム

ドロップダウンメニュー

関連するアクションを管理しやすいメニューにまとめます。

8 個の確認項目
デザインシステム

ステッパー

明確なステップで数値を増減します。

7 個の確認項目

確認して進捗を保存

確認した項目にチェックを付けてください。
進捗はこのブラウザーに保存されます。

チェックリストを検索

チェックリストの使い方

  1. チェックリストを選ぶカテゴリーを選ぶか、Ctrl / ⌘ K で検索。
  2. 各項目を確認するガイドを参考にデザインを確認し、済んだ項目にチェックを付けてください。
  3. 保存して続ける再度確認するチェックリストを保存できます。進捗はこのブラウザーに保存され、端末間では同期されません。