STYLE GUIDE
このテーマで使っているレイアウト、タイポグラフィ、コンポーネントを 1ページで確認できる最新版のスタイルガイドです。
新規ページ制作や既存ページ改修の際に、実装済みの部品を崩さず流用するための見本として使う想定です。ページ固有クラスを増やす前に、既存のコンポーネントとユーティリティの組み合わせで表現できるかをここで確認できます。
Principles
既存の見た目を活かしながら、更新しやすく、再利用しやすいマークアップを優先します。
- 1. ページ見本ではなく、実案件にそのまま転用できる構造を置く
- 2. 余白や幅はユーティリティで統一し、独自指定を増やさない
- 3. 見出し、導線、情報ブロックの並びで全体のトーンを確認する
Typography
.f-title
font sample
住まい選びを、もっと自由に。キャッチコピーに使うサイズ
.f-hd-l
font sample
Designing Better Living
.f-hd-m
font sample
NEWS, VOICE アーカイブページの見出しで使うサイズ。
.f-hd-s
font sample
セクションや下層ページの主見出しで使うサイズ。
.f-xl
font sample
メッセージや導入文を少し強めに見せたいときの本文。
.f-large
font sample
セクション冒頭のリード文や説明文に向いたサイズです。
base（.f-medium）
font sample
標準本文。長めの説明などに使います。
.f-small
font sample
ラベルや補足テキスト、日付、注釈向けのサイズ。
Buttons & Links
Layout & Media
1:1 grid
左右を同じ重みで見せたい紹介セクションに向いています。
1:2 grid
左にラベル、右に本文を置くページヘッダー系の構成です。
2:1 grid
左に本文、右にボタンを置く構成です。子要素で使用。
Containers
u-gutter で外余白、u-container--m / u-container--wide で最大幅を揃えるのが基本です。
Gutter + Container + Grid
Data & Lists
- Container
- .u-gutter / .u-container--m / .u-container--wide を使い分ける
- Grid
- .u-grid--1-1 / .u-grid--1-2 / .u-grid--2-1 が基本
- Spacing
- 縦方向は data-n 属性、要素間は .u-gap--* を基準にする
- Radius
- .u-radius--m と .u-radius--l を中心に使う
Ordered
- セクション見出しを置く
- 余白は `data-n` で揃える
- 繰り返し要素は配列とループで書く
Plain list
- ・採用ページの募集要項一覧
- ・サービス比較の箇条書き
- ・FAQ 前の要点整理
Banner List
Guiding You to Better Living
Guiding You to Better Living
Guiding You to Better Living
Guiding You to Better Living