命名フォーマットは基本的に[種類]/[用途]/[バリエーション]と考えます。以下の例をご参照ください。
| ページ（Page） | |
|---|---|
| page / top | トップページ |
| page / about | 会社概要(アバウト)ページ |
| page / contact | お問い合わせページ |
| セクション（Section） | |
| section / hero | ヒーロービジュアル |
| section / header | ヘッダー |
| section / features | 機能紹介 |
| section / cta | コールトゥアクション |
| section / footer | フッター |
| section / area / ◯◯◯ | 上記以外に幅広く利用 |
| コンポーネント（Component） | |
| component / button / primary | コンポーネント化された主要ボタン |
| component / card / service | コンポーネント化されたカード |
| component / navbar / main | コンポーネント化されたナビゲーション |
| component / form / contact | コンポーネント化されたフォーム |
| テキスト（Text） | |
| text / heading / h1 | タイトル |
| text / heading / h2 | サブタイトル |
| text / body / normal | リード文 |
| text / body / small | 補足文 |
| 画像（Image） | |
| image / hero / main | |
| image / team / member1 | 採用画像 |
| image / logo / main | ロゴ画像 |
| アイコン（Icon） | |
| icon / social / twitter | SNSアイコン |
| icon / menu | メニューアイコン |
| icon / arrow / left | 矢印アイコン |
| ボタン（Image） | |
| button / primary | メインのアクション（例：CTA） |
| button / secondary | サブアクション、補助的なボタン |
| button / tertiary | 枠線や背景なしのリンク風ボタン |
| button / icon | アイコンのみのボタン |
| button / text | テキストリンク風ボタン（小要素） |
| サーチボックス（Search Box） | |
| searchbox / default | 標準的な検索フォーム（一般的な用途） |
| searchbox / header | ヘッダー用の小型検索 |
| searchbox / sidebar | サイドバー用 |
| searchbox / advanced | 絞り込み付きの検索（タグ・カテゴリなど） |
| サイズ | |
|---|---|
| / sm | 小サイズ（例：フォーム内） |
| / md | 標準サイズ |
| / lg | 大サイズ（例：ヒーローセクション） |
| カラー | |
| / wh | ホワイト |
| / bk | ブラック |
| / or | オレンジ |
|
1 2 3 4 5 6 7 |
section/hero ├── text/heading/h1 ├── text/body/lead ├── button/primary/default ├── button/primary/hover ├── image/hero/main └── icon/arrow/down |
命名に迷ったらこのガイドをぜひ参照してみてください。また、命名ルールに変更がある場合は、メンバーに共有しガイドを更新する事でプロジェクト品質を高める事ができます。
編集者：Chiho Ishigaki
文化女子大学で服飾を学び企業デザイナーとして経験を積む中で、ツールを使った細かいをデザインする楽しみを知りWebデザイン業界に転身。2児の母。日々学びを忘れず、人としても良いアップデートをしていく事が目標です🌷
監修者：Yuka Fujimoto
Webディレクター / デザイナー。美大在学中に、画面ひとつで世界中の人と繋がれるWebの可能性やデザインへ興味を持つ。インターンを経て就職したIT企業で実務経験を積む。肉より魚派🐟
PICK UP
