初めての方へ

KATACHI(カタチ)とは、デザインシステムのコンポーネントのデザイン素材を集めたサイトです。

デザインシステムは、一貫性のあるユーザーインターフェイス(UI)を構築するためのガイドライン、コンポーネント、ツールの集合です。

これにより、製品やサービスのデザインと開発が効率化され、品質が向上します。

作成したコンポーネントのデータは全てFigmaで制作しています。

いつもでコンポーネントを配置して、ワイヤーフレームからデザインまで効率よく作成することを意図しております。

コンポーネントとは?

デザインシステムのコンポーネントは、その中核をなす要素であり、以下のような種類があります。

  1. アコーディオン (Accordion)
  2. アラート (Alert)
  3. アバター (Avatar)
  4. バッジ (Badge)
  5. パンくずリスト (Breadcrumbs)
  6. ボタン (Button)
  7. ボタングループ (Button group)
  8. カード (Card)
  9. チェックボックス (Checkbox)
  10. カラーピッカー (Color picker)
  11. コンボボックス (Combobox)
  12. 日付入力 (Date input)
  13. 日付ピッカー (Datepicker)
  14. ドロワー (Drawer)
  15. ドロップダウンメニュー (Dropdown menu)
  16. 空状態 (Empty state)
  17. フィールドセット (Fieldset)
  18. ファイル (File)
  19. ファイルアップロード (File upload)
  20. フッター (Footer)
  21. フォーム (Form)
  22. ヘッダー (Header)
  23. 見出し (Heading)
  24. ヒーロー (Hero)
  25. アイコン (Icon)
  26. 画像 (Image)
  27. ラベル (Label)
  28. リンク (Link)
  29. リスト (List)
  30. モーダル (Modal)
  31. ナビゲーション (Navigation)
  32. ページネーション (Pagination)
  33. ポップオーバー (Popover)
  34. プログレスバー (Progress bar)
  35. プログレスインジケーター (Progress indicator)
  36. 引用 (Quote)
  37. ラジオボタン (Radio button)
  38. 評価 (Rating)
  39. リッチテキストエディター (Rich text editor)
  40. 検索入力 (Search input)
  41. セグメンテッドコントロール (Segmented control)
  42. セレクト (Select)
  43. セパレーター (Separator)
  44. スケルトン (Skeleton)
  45. スキップリンク (Skip link)
  46. スライダー (Slider)
  47. スピナー (Spinner)
  48. スタック (Stack)
  49. ステッパー (Stepper)
  50. テーブル (Table)
  51. タブ (Tabs)
  52. テキスト入力 (Text input)
  53. テキストエリア (Textarea)
  54. トースト (Toast)
  55. トグル (Toggle)
  56. ツールチップ (Tooltip)
  57. 視覚的に隠す (Visually hidden)