Styleguide

ID

Category

Namespace

All Colors

スタイルガイド

id

主にワイヤーフレームの指示で使われるコンポーネントの識別子です。
例えば、btn-1やbnr-2Aのように名前をつけます。数字は別のコンポーネント、アルファベットはバリエーションと考えます。単語の省略は任意です。

スタイルガイドにid: abcのように追加するとabc/index.htmlというIDページが生成されます。

name: l-Wrapper
namespace: l-
category: Layout
id: abc

category

GlobalやHeadingのようなコンポーネントの分類です。
コンポーネントをこの分類で分けて一覧化（スクリーンショットを撮ってリストアップ）することで、似たようなコンポーネントを統合したり、コンポーネントごとの仕様を確認してください。

  • Global：ヘッダーやフッターのようなサイト全体で使われる要素
  • Layout：グリッドやコンポーネントの余白指定などのレイアウトパターン
  • Navigation：メインナビゲーションやフッターのナビゲーション、ページネーションやパンくずリストなどのユーザーを誘導することが目的とする要素
  • BaseModule：比較的小さなコンポーネントで、Layoutコンポーネントとセットで使うものと、後述するBlockModuleの中で使用するスタイルのベースになるものがあります。
    • Image：ロゴやメインビジュアル、アバターやサムネイルや背景画像などの画像
    • Icon：用途やカテゴリーを端的に示す画像です。虫眼鏡、ソーシャルアイコン、矢印、ハンバーガーなどです。
    • Form：入力エリア、Selectメニュー、チェックボックス、ラジオボタンのような、ユーザーが操作するフォーム要素
    • Button：オンオフやページ遷移、表示や非表示といった操作の切り替えに使われる要素
    • Heading：ページタイトルや見出し
    • Text：文章やラベルのようなテキスト要素
    • Link：テキストリンク
    • List：順序付きや定義リストなどのHTMLで定義されているリスト要素や、一覧や表といった形式であらわされている要素
    • Media：ビデオやオーディオのようなリッチメディア要素
  • BlockModule：BaseModuleのような小さなコンポーネントを集めた、一定のパターンを持っているモジュールです。1つのコンポーネントとして定義することで、個別に仕様変更の対応ができるようにしておきます。
    • Block：見出しや画像、テキストなどが1つのまとめりになっているエリア
    • InteractiveComponent：アコーディオン、タブ、カルーセル、オフキャンバスのようなユーザーの操作で稼働する要素
    • Messaging：警告メッセージ、エラーメッセージ、ローディング、ポップアップのようなユーザーに何らかのメッセージを伝える要素
  • ThirdPartyComponent：サイト製作者側がすべてをコントロールすることができないサービス
  • Advertising：広告

namespace

クラス名の接頭辞で、どの範囲で使われるかという影響度を示します。
以下はデフォルトで用意しているものです。サイトの構造によって変更してください。

  • .sw- (SiteWide)：サイト共通の汎用的なModule（リストやボタンなどの場所を選ばないもの）
  • .st- (Structure)：サイト共通の構造的なModule（ヘッダーやフッターのような場所が固定されるもの）
  • .l- (Layout)：コンテンツ内の余白やレイアウト専用のModule
  • .wisywig- (WISYWIG)：WISYWIG（ウィジウィグ）で入力した要素に対するスタイル
  • .home- (HomePage)：ホームページ（サイトトップページ）
  • .top- (TopPage)：カテゴリートップページ
  • .sub- (SubPage)：カテゴリー下層ページ
  • .products- (Products)：製品情報
  • .news- (News)：ニュース
  • .company- (Company)：会社案内・企業情報
  • .recruit- (Recruit)：採用情報ページ
  • .csr- (CorporateSocialResponsibility)：企業の社会的責任
  • .faq- (FrequentlyAskedQuestions)：よくある質問
  • .inquiry- (Inquiry)：お問い合わせ
  • .ir- (InvestorRelations)：投資家向け情報
  • .results- (Results)：検索結果ページ
  • .sitemap- (Sitemap)：サイトマップページ