ページ制作に使えるパーツ見本集です。base.css（共通）／snippets.css（このページ専用）を読み込んで使用します。実装時はこのページのHTMLブロックをそのままコピーしてください。
カラムレイアウト
.demo-grid に .cols-* を組み合わせて使用します。スマホ幅では自動で1カラムに縦積みされます。
<div class="demo-grid cols-2">...</div>
<div class="demo-grid cols-3">...</div>
<div class="demo-grid cols-2-1-2">...</div>
カードレイアウト
基本カード（.card）／アイコン型（.card--icon）／横並び型（.card--h）の3種類。
デザインタイトル
見出しの基本サイズと、装飾バリエーション（下線・中央・番号付き）。
H1見出しレベル1
H2見出しレベル2
H3見出しレベル3
H4見出しレベル4
H5見出しレベル5
H6見出しレベル6
下線アクセント
SUBTITLE中央揃えタイトル
01番号付きタイトル
テーブルデザイン
会社概要用（.tbl-profile）／スペック比較用（.tbl-spec）／料金表用（.tbl-price）。
| 会社名 | レトリバーデザイン合同会社 |
|---|---|
| 所在地 | 東京都 町田・八王子エリア |
| 事業内容 | Webサイト制作・コンサルティング |
| ライト | スタンダード | プレミアム | |
|---|---|---|---|
| 初期費用 | ¥300,000〜 | おすすめ¥600,000〜 | ¥1,200,000〜 |
| ページ数 | 5P | 10P | 20P〜 |
| AIO・LLMO対応 | ー | ○ | ○ |
ステップデザイン
制作の流れ・ご利用の流れなどに。横並び／縦タイムライン／アイコンフローの3種類。
フォームよりご相談ください。
課題・目的をお伺いします。
戦略とお見積りをご提示。
ご契約後、制作を開始します。
- お打ち合わせ
要件・目的を整理します。
- 設計・デザイン
構成案・デザイン案を作成します。
- 公開
確認後、本番公開します。
CTAデザイン
1カラム（ベース共通）／2カラム（テキスト＋連絡先）の2種類。
お電話でのお問い合わせ
平日10:00-18:00 受付
その他パーツ
バッジ・アラート・アコーディオン・タブ・パンくず・ページネーション・お客様の声・チェックリスト・実績スタッツ・料金カード・フォーム・ディバイダー。
お知らせ
情報系のメッセージに使用します。
成功
完了・成功系のメッセージに使用します。
注意
注意喚起のメッセージに使用します。
おかげさまで問い合わせ数が増加しました。運用面でも手厚くサポートいただき安心です。
採用サイトのリニューアルで、応募者の質が明らかに変わりました。
- ✓自社で更新できるCMS構成
- ✓AIO・LLMO最適化済みの構造
- ✓公開後の運用サポート付き