住宅設計士 認定資格サイト
サイト構成概要書
ページ構成（6ページ）/ 各ページのコンテンツ設計 / デザイン方向性
※ 詳細ワイヤーフレーム（実寸レイアウト・UI配置）はご契約後に制作いたします
2026.04.03クライアント：グランハウス一級建築士事務所

サイト全体構成

2つのターゲット × 2つの導線を1サイトに同居させる。
TOPはエンドユーザー（住宅購入検討者）が「この資格すごい」と感じる権威訴求に特化。
受講希望者向けは別LPで入学訴求に振り切り、広告からの流入もこちらで受ける。
共通ヘッダーナビゲーション
▼
1
TOP — エンドユーザー向け権威訴求
▼
2
住宅設計士とは — 資格詳細・認定基準
3
協会について — 理念・監修体制・透明性
▼
4
認定設計士・導入企業 — 資格保持者 / 採用企業
5
FAQ / お問い合わせ
▼「資格を取得する」ボタンから遷移
P6：受講案内LP（入学訴求 / 広告着地）
※ LPはトーンを変え、がっつり営業をかけるデザイン。広告出稿時はここに直接流入させる。
1

TOP

エンドユーザー向け
目的：「住宅設計士」を検索したエンドユーザーが
「この資格を持ってる人に家を設計してほしい！」と感じる状態をつくる。
住宅設計士とは 協会について 認定設計士 FAQ 資格を取得する
FIRST VIEW
PHOTO
〇〇協会 公式認定資格

住まいの設計に、確かな証明を。

住宅設計の専門性と実践力を客観的に証明する認定資格
※背景: 住宅外観 or 設計士が図面を引いているシーンの写真
1,200+
累計認定者
47社
導入企業
98%
依頼者満足度
認定設計士に相談する
ABOUT — 導入
PHOTO認定証 / 協会ロゴ
イメージ写真
なぜ「住宅設計士」が必要なのか
住宅設計は建築士だけでは測れない専門性がある。デザイン・構造・コスト・暮らしやすさを総合的に証明する〇〇協会の認定資格。
資格の詳細を見る →
NUMBERS
1,200+
累計認定者数
47社
導入企業数
5科目
認定試験範囲
98%
依頼者満足度
MERIT — 住宅設計士に依頼するメリット（お客様向け）
1
設計品質の「見える化」 — 第三者機関が設計力を認定。品質に客観的な基準がある安心感
2
住宅特化の専門スキル — 汎用的な建築士ではなく、住宅設計に特化した知識・技術の証明
3
安心して任せられる — 認定基準を満たしたプロにのみ付与。依頼先選びの判断材料になる
PARTNERS — 導入企業ロゴ
LOGO企業ロゴ
LOGO企業ロゴ
LOGO企業ロゴ
LOGO企業ロゴ
LOGO企業ロゴ
CTA

住宅設計士のいる会社に相談する

認定設計士が在籍する企業を探せます

認定設計士を探す資格を取得する
2

住宅設計士とは（資格詳細）

エンドユーザー向け
目的：資格の中身を知り「こんな厳しい基準をクリアしてるんだ」と感じさせる。
HEADER
PHOTOページヘッダー背景写真 + タイトル「住宅設計士とは」
BACKGROUND — 資格が生まれた背景
住宅設計の品質格差という社会課題 → 客観的な指標の必要性 → 〇〇協会が制度設計 → 認定開始。
権威性の源泉を「社会課題の解決」として位置づける。
GRADE — 1級・2級の構成
1級
住宅設計マスター
高度な設計力＋後進指導力。独立・事務所運営レベル。
2級
住宅設計スペシャリスト
住宅設計の基礎力を証明。実務現場の即戦力。
CRITERIA — 認定基準・試験科目
01
住宅設計基礎 — 法規・構造・材料の知識
02
デザイン・空間計画 — プランニング・動線設計
03
性能設計 — 断熱・耐震・省エネ対応
04
コスト管理 — 見積・予算管理・VE提案
05
実技審査 — 実際の設計課題を提出・評価
COMPARISON — 他資格との比較表
一級建築士 / 二級建築士 / インテリアコーディネーター / 住宅設計士 の比較表。
「住宅設計に特化している唯一の資格」というポジションを明確化。
CTA

住宅設計士に家づくりを相談する

認定設計士を探す資格を取得する
3

〇〇協会について

権威性
目的：「どんな組織が、どんな基準で発行しているのか」を明示し、
「ちゃんとした機関が出してる資格だ」と確信させる。
MISSION — 理念・設立背景
LOGO協会ロゴ
〇〇協会（仮称）
「住宅設計の品質を社会に約束する」をミッションに設立。グランハウスを含む住宅業界のプロが監修・運営。
COMMITTEE — 認定委員・監修体制
PHOTO
委員長名
一級建築士 / 大学教授
PHOTO
副委員長名
グランハウス代表
PHOTO
委員名
構造設計事務所代表
※ 大学教授・業界団体関係者を入れることで第三者性を担保
TRANSPARENCY — 認定プロセスの透明性
試験の評価基準、採点方法、合格率等を開示。
「基準が厳しい ＝ 資格の価値が高い」という文脈をつくる。
MEDIA — 掲載・活動実績
メディア掲載ロゴ / セミナー開催実績 / 業界団体との連携。
初期はコンテンツが少なくてもOK。枠だけ用意して段階的に追加。
LOGO掲載メディア
VIDEOセミナー動画（あれば）
PHOTO活動写真
4

認定設計士・導入企業

エンドユーザー向け
目的：「資格すごい」→ 「じゃあこの資格持ってる設計士に頼みたい」の着地ページ。
PARTNERS — 導入企業一覧
LOGO企業ロゴ
グランハウス一級建築士事務所
認定設計士〇名在籍 / 岐阜・愛知・三重・大阪
LOGO企業ロゴ
〇〇工務店（ダミー）
認定設計士〇名在籍 / 東京
※ 各企業の公式サイトへリンク。グランハウスが筆頭で表示される設計。
VOICE — お客様の声
「住宅設計士の資格を持っている方だと聞いて、安心して任せられました」
— 岐阜市 S様
「専門的な説明をわかりやすくしてくださり、信頼できました」
— 一宮市 K様
CTA

認定設計士のいる会社に相談する

お近くの導入企業を探せます

お問い合わせ
5

FAQ / お問い合わせ

共通
FAQ — アコーディオン形式
Q. 住宅設計士と一級建築士の違いは？
Q. 住宅設計士が在籍している会社の探し方は？
Q. 資格の取得にはどのくらいの期間がかかりますか？
Q. 建築士でなくても取得できますか？
Q. 法人での導入は可能ですか？
CONTACT — お問い合わせフォーム
お名前 / メール / 問い合わせ種別（資格について / 受講について / 法人導入）/ 本文 / 送信ボタン
6

受講案内LP

受講者向け / 広告用
目的：資格取得を検討している人に入学申し込みさせる。
流入経路：TOPの「資格を取得する」ボタン / 広告（リスティング・SNS）直接流入
参考：lbyu-net.com（がっつり入学訴求）/ P1〜5より少しテンション高め
LP FIRST VIEW
〇〇協会認定

住宅設計士になる。

住宅設計の専門性を証明し、キャリアを次のステージへ

最短3ヶ月
で資格取得
オンライン
完結可能
無料説明会に申し込む
TARGET — こんな方へ
設計力を客観的に証明したい
お客様からの指名を増やしたい
工務店内でのキャリアアップ
就活・転職での差別化
CURRICULUM
全5回講義＋実技課題の詳細。各回の内容・到達目標をステップ形式で掲載。
INSTRUCTOR
PHOTO
講師名 / グランハウス一級建築士事務所
設計実績〇〇〇棟。カリキュラム監修。
VOICE / FLOW / PLAN / FAQ
受講者の声（3名） → 受講の流れ（4ステップ） → 料金テーブル → FAQ（5問）
1ページ内に全情報を収め、離脱を最小化する。
VIDEO受講者インタビュー動画（あれば）
PHOTO受講風景 / 認定証授与の写真
FINAL CTA + FORM

キャリアを変える一歩を、今。

無料説明会は毎週開催 / オンライン参加OK

無料説明会に申し込む
② ワイヤーフレーム
PC / SP レイアウト設計
各ページの要素配置・寸法・余白・レスポンシブ挙動・インタラクション指示を記載
※ 実寸デザインカンプではなく、配置意図と仕様を伝えるためのレイアウト図です
0

共通コンポーネント定義

SHARED
全ページで使い回すパーツを先に定義。ワイヤー内では「共通NAV」「共通FOOTER」「共通CTA」として参照。
HEADER / NAVIGATION
PC（1025px以上）
住宅設計士｜〇〇協会
住宅設計士とは協会について認定設計士FAQ
認定設計士を探す 資格を取得する
挙動：スクロール時に背景 opacity 0→0.95 で追従固定（position: sticky）。ロゴは白固定。
高さ：72px（コンテンツはvertical-center）。下線なし。影なし（granhouse準拠のミニマル路線）。
CTAボタン：Primary（Gold塗り）= 「資格を取得する」→ P6へ遷移。Secondary（Gold枠）= 「認定設計士を探す」→ P4へ遷移。
SP（640px以下）
住宅設計士｜〇〇協会
資格を取得 ☰
高さ：56px。CTAミニボタン常設（ハンバーガーの左）。
ハンバーガー展開：全画面オーバーレイ（Navy背景）。メニュー項目は中央揃え・大きめタップ領域（48px以上）。
アニメーション：☰ → × のモーフ。メニューは上からスライドイン（300ms ease-out）。
FOOTER
住宅設計士｜〇〇協会
住宅設計の品質を社会に約束する
PAGES
TOP / 住宅設計士とは / 協会について / 認定設計士 / FAQ / 受講案内
LEGAL
プライバシーポリシー / 特定商取引法に基づく表記
© 2026 〇〇協会 All Rights Reserved.
PC：3カラム（ロゴ+説明 / ページリンク / 法的リンク）→ コピーライト。全幅Navy背景。
SP：1カラム縦積み。ロゴ→アコーディオンメニュー→法的リンク→コピーライト。
共通CTAバンド（P1〜P5 各ページ末尾に配置）

住宅設計士のいる会社に相談する

認定設計士が在籍する企業を探せます

認定設計士を探す資格を取得する
構造：Navy全幅背景 / 上下パディング 64px（PC）40px（SP）。
見出し：Noto Serif JP 24px / 白 / 中央揃え。サブテキスト 13px rgba(255,255,255,.5)。
ボタン：横並び（PC）、縦積み（SP）。Primary + Secondary。gap: 16px。
出現アニメ：スクロールで画面内に入った時点でフェードアップ（translateY 20px→0, opacity 0→1, 600ms）。
1

TOP — レイアウト詳細

PC / SP
想定スクロール深度：PC約3,200px / SP約4,800px。直帰率目標：40%以下。CTA到達率目標：65%以上。
SEC-1: FIRST VIEW — 100vh フルスクリーン
PC — 1440 x 900
住宅設計士｜〇〇協会 住宅設計士とは協会について認定設計士FAQ 資格を取得する
PHOTO: 住宅外観 or 設計士が図面を引くシーン（暗めオーバーレイ 60%）
〇〇協会 公式認定資格
住まいの設計に、確かな証明を。
住宅設計の専門性と実践力を客観的に証明する認定資格
1,200+
累計認定者
47社
導入企業
98%
依頼者満足度
認定設計士に相談する
scroll
SP — 375 x 812
住宅設計士
資格を取得 ☰
公式認定資格
住まいの設計に、
確かな証明を。
1,200+
累計認定者
47社
導入企業
98%
満足度
認定設計士に相談する
写真：横1920px以上の高解像度。住宅外観の俯瞰 or 設計士が図面を広げているシーン。暖色系の自然光。
オーバーレイ：linear-gradient(rgba(26,39,68,.65), rgba(15,26,46,.85))。テキスト可読性を担保。
数値：Noto Serif JP 48px（PC）/ 32px（SP）。カウントアップアニメーション（画面内に入ってから2秒間）。
scroll表示：下部中央。opacity 0→1→0 の無限ループ（2s ease-in-out）。
SP：コピーを2行に改行。バッジ「公式認定資格」に短縮。写真はobject-position: center 40%。
SEC-2: ABOUT — なぜ住宅設計士が必要なのか
PHOTO認定証＋設計士のイメージ
ABOUT
なぜ「住宅設計士」が必要なのか
住宅設計は建築士だけでは測れない専門性がある。デザイン・構造・コスト・暮らしやすさを総合的に証明する〇〇協会の認定資格。
PC：左写真40%（aspect-ratio: 3/2） / 右テキスト60%。コンテナ最大幅1000px中央。セクション上下余白 100px。
SP：写真全幅（aspect-ratio: 16/9 → object-fit: cover）→ テキスト。gap: 24px。
英字ラベル：セクション見出し上に「ABOUT」「NUMBERS」等を Gold/9px/letter-spacing:3px で配置（granhouse.co.jp 準拠）。
アニメ：写真は左からスライドイン、テキストは右からフェードイン（stagger 200ms）。
SEC-3: NUMBERS — 実績数値
NUMBERS
1,200+
累計認定者数
47社
導入企業数
5科目
認定試験範囲
98%
依頼者満足度
背景：Off-White帯。全幅。上下余白 80px（PC）/ 48px（SP）。
PC：4つ横並び、間に1px区切り線（Warm Gray）。数値 48px / ラベル 13px。
SP：2x2グリッド。区切り線なし。数値 32px。
アニメ：画面内に入るとカウントアップ（0→目標値、1.5s ease-out）。一度だけ発火。
SEC-4: MERIT — 住宅設計士に依頼するメリット
1
設計品質の「見える化」
第三者機関が設計力を認定。品質に客観的な基準がある安心感。
2
住宅特化の専門スキル
汎用建築士ではなく住宅設計に特化した知識・技術の証明。
3
安心して任せられる
認定基準を満たしたプロにのみ付与。依頼先選びの判断材料に。
PC：3カラム均等（max-width: 1000px中央）。アイコンは丸Navy背景+Goldナンバー。
SP：1カラム縦積み。左にアイコン、右にテキストの横並び型に変形（カード→リスト）。
hover（PC）：カード全体にbox-shadow 0 4px 20px rgba(0,0,0,.08) + translateY(-2px)。300ms ease。
アニメ：3枚を左から順にstagger表示（200ms間隔）。
SEC-5: PARTNERS — 導入企業ロゴ
PC：ロゴ5列横並び（グレースケール → hover時カラー復元 + opacity 0.5→1）。max-height: 40px。gap: 40px。中央揃え。
SP：3列折り返し。ロゴは最初からカラー表示（タッチではhover不可のため）。
余白：上下 60px（PC）/ 40px（SP）。背景: White。
SEC-6: CTA — 共通CTAバンド
共通コンポーネント「共通CTAバンド」を使用（上記参照）。
2

住宅設計士とは — レイアウト詳細

PC / SP
想定スクロール深度：PC約2,800px / SP約4,200px。資格の詳細を知りたいユーザー向け。情報密度高めだが読みやすさ最優先。
SEC-1: PAGE HEADER — 下層ページ共通パターン
PHOTO: 背景写真（暗めオーバーレイ）
CERTIFICATION
住宅設計士とは
高さ：PC: 280px / SP: 200px。構成：英字ラベル（Gold/9px） + 日本語タイトル（Serif/36px PC, 24px SP）。中央配置。
パンくず：ヘッダー直下に配置。「TOP > 住宅設計士とは」。font-size: 11px。White背景。
SEC-2: BACKGROUND — 資格が生まれた背景
構成：中央揃えテキストブロック（max-width: 720px）。リード文は16px、本文は15px。
フロー図：社会課題 → 客観指標の必要性 → 協会設立 → 認定開始。横矢印（PC）/縦ステッパー（SP）。
余白：上下 100px（PC）/ 64px（SP）。
SEC-3: GRADE — 1級・2級の比較
1級
住宅設計マスター
高度な設計力＋後進指導力
独立・事務所運営レベル
2級
住宅設計スペシャリスト
住宅設計の基礎力を証明
実務現場の即戦力
PC：2カラム均等。1級はGold枠で強調（上位資格＝視覚的優位性）。
SP：縦積み。1級→2級の順。それぞれフルwidthカード。
hover：カード全体にscale(1.02) + shadow。300ms。
SEC-4: CRITERIA — 認定基準・試験5科目
構成：番号付きリスト。各行＝左にNavy丸ナンバー（Gold文字） + 右にタイトル（Bold）+ 補足テキスト。
PC/SP共通：max-width: 720px中央。行間 border-bottom: 1px solid #E8E4DD。行高: 56px。
アニメ：各行がスクロールで順にフェードイン（stagger 100ms）。
SEC-5: COMPARISON — 他資格との比較表
PC：4列テーブル（一級建築士 / 二級建築士 / インテリアC / 住宅設計士）。住宅設計士列のみGold背景+太枠。
SP：横スクロール（overflow-x: auto）。住宅設計士列は sticky left:0 で固定表示。
行項目：対象範囲 / 試験内容 / 住宅特化度 / 取得難易度 / 実務直結度。
ポイント：「住宅設計に特化している唯一の資格」を視覚的に一目で伝える。
SEC-6: CTA
共通CTAバンド使用。
3

〇〇協会について — レイアウト詳細

PC / SP
このページの鍵：「誰がやってるの？」への回答。人の顔と肩書が最重要。写真の品質がこのページの成否を決める。
SEC-1: PAGE HEADER
下層ページ共通パターン。英字ラベル「ASSOCIATION」+ タイトル「〇〇協会について」。
SEC-2: MISSION — 理念・設立背景
PC：左に協会ロゴ（SVG / max-width: 200px）+ 右にテキスト。横並び。
テキスト：ミッション文「住宅設計の品質を社会に約束する」を Noto Serif JP 24px Gold で強調表示。その下に設立経緯 15px。
SP：ロゴ中央 → テキスト。ミッション文は20px。
SEC-3: COMMITTEE — 認定委員・監修体制
PHOTO
委員長名
一級建築士 / 大学教授
PHOTO
副委員長名
グランハウス代表
PHOTO
委員名
構造設計事務所代表
写真：正方形（1:1）、object-fit: cover、border-radius: 50%。PC: 120px / SP: 80px。プロ撮影必須（スーツ着用・背景統一）。
PC：3カラム均等。カード背景 Off-White。
SP：横スクロール（snap-type: x mandatory）。カード幅: 70vw。ドットインジケーター付き。
信頼性の設計：大学教授を最左に配置（第三者 → グランハウス → 外部の順。「身内だけじゃない」印象）。
SEC-4: TRANSPARENCY — 認定プロセスの透明性
数値公開：受験者数 / 合格率 / 平均スコア を大きめ数字で表示（NUMBERSセクションと同じスタイル）。
テキスト：「基準が厳しい ＝ 資格の価値が高い」という文脈をつくる。合格率が低いほど権威性UP。
配置：Off-White帯。数値は3列横並び（PC）/ 3列グリッド（SP）。
SEC-5: MEDIA — 掲載・活動実績
構成：メディアロゴ横並び + セミナー動画（あれば16:9埋め込み）+ 活動写真ギャラリー（3列グリッド）。
初期運用：コンテンツ不足でもOK。「枠だけ作って段階追加」を前提に設計。CMS管理が理想。
4

認定設計士・導入企業 — レイアウト詳細

PC / SP
コンバージョンページ。ここからの離脱＝「問い合わせに至らなかった」。CTAは複数箇所に配置し、どこからでもアクションできる設計。
SEC-1: PAGE HEADER + エリアフィルター
ヘッダー直下：エリア絞り込み（岐阜 / 愛知 / 三重 / 大阪 / すべて）。タブUI。PCは横並び、SPはselect。
将来拡張：企業数が増えた場合に検索・ソートを追加できる設計にしておく。
SEC-2: PARTNERS — 導入企業カード
LOGO
グランハウス一級建築士事務所
認定設計士 〇名在籍 / 岐阜・愛知・三重・大阪
LOGO
〇〇工務店
認定設計士 〇名在籍 / 東京
PC：2カラムグリッド。左Gold縦線がアクセント。カード内にロゴ+社名+在籍数+対応エリア+外部リンク。
SP：1カラム縦積み。カード間 margin: 12px。
グランハウスの優位性：最上部固定 + 「推奨」バッジ（Gold背景）。他社との差別化を自然に演出。
hover：カード全体クリッカブル。shadow + translateY(-2px)。外部リンクは別タブ（target="_blank"）。
SEC-3: VOICE — お客様の声
PC：2カラム。左Gold縦線 + イタリック引用文 + 「— 岐阜市 S様」右寄せ。
SP：1カラム。カルーセル（snap scroll）にしてスワイプで切り替え。
アイコン：引用符「 」をGold/48pxでデコレーション（背景的に配置・opacity 0.1）。
追加要件：CMS管理で件数を増やせる構造。初期は2〜4件。
SEC-4: CTA
共通CTAバンド使用。ボタンは「お問い合わせ」1つに集約（このページは「探す」フェーズが完了しているため）。
5

FAQ / お問い合わせ — レイアウト詳細

PC / SP
SEC-1: FAQ — アコーディオン
Q. 住宅設計士と一級建築士の違いは？
+
Q. 住宅設計士が在籍している会社の探し方は？
+
Q. 資格の取得にはどのくらいの期間がかかりますか？
+
max-width：800px中央。Q行: 56px高。「+」アイコンはGold、展開時に「−」に変化（回転アニメ 200ms）。
回答部：max-height: 0 → auto。スライドダウン（300ms ease）。本文 14px / color: #6B7280。
構造化データ：FAQPage schema 必須。SEOでリッチスニペット表示を狙う。
SEC-2: CONTACT — お問い合わせフォーム
お問い合わせ
お名前
メールアドレス
問い合わせ種別 ▼
お問い合わせ内容
送信する
PC：名前・メール 2カラム / 種別・本文 1カラム / 送信ボタン中央。max-width: 640px。
SP：全項目1カラム。送信ボタン全幅。
種別選択肢：資格について / 受講について / 法人導入について / その他。
バリデーション：リアルタイム（blur時）。エラーは赤テキスト + 枠線変色。
送信後：確認画面なし（同ページ内でサンキューメッセージに差し替え）。自動返信メール送信。
スパム対策：reCAPTCHA v3（UIに表示されない）。honeypotフィールド併用。
6

受講案内LP — レイアウト詳細

PC / SP
P1〜5との差異：このページだけトーンが違う。Navy×Gold の権威路線 → Red×White の行動喚起路線に切り替わる。
ナビ：LP専用（ロゴ + CTAボタンのみ）。戻り導線を意図的に削減。
SP固定CTA：画面下部に常設（height: 56px / Red背景 / 「無料説明会に申し込む」）。スクロール追従。
SEC-1: LP FIRST VIEW
PC — 1440 x 900
住宅設計士｜〇〇協会 無料説明会に申し込む
〇〇協会認定
住宅設計士になる。
住宅設計の専門性を証明し、キャリアを次のステージへ
最短3ヶ月
で資格取得
オンライン
完結可能
無料説明会に申し込む
SP — 375 x 812
住宅設計士 説明会申込
住宅設計士になる。
最短3ヶ月
オンライン
無料説明会に申し込む
背景：Red全面。写真は使わない（P1〜5との差別化 + 文字の可読性優先）。
数値バッジ：半透明White背景（rgba 15%）で囲む。PC: 横並び / SP: 横並び（狭いので2列）。
CTAボタン：White塗り+Red文字。hover: scale(1.05) + shadow。
SP固定CTA：ファーストビューを超えたらbottom: 0 に固定バー出現（Red / 56px / z-index: 100）。
SEC-2〜7: LPボディ
SEC-2 TARGET
こんな方へ — 2x2グリッド（PC）/ 1カラム（SP）。チェックマーク+テキスト。
SEC-3 CURRICULUM
カリキュラム全5回 — 横タイムライン（PC）/ 縦ステッパー（SP）。各回のタイトル+到達目標。
SEC-4 INSTRUCTOR
講師紹介 — 左:丸写真（PC 160px / SP 100px）+ 右:プロフィールテキスト。
SEC-5 VOICE
受講者の声3名 — 3カラム（PC）/ スワイプカルーセル（SP）。写真+名前+一言コメント。動画あれば埋め込み。
SEC-6 FLOW
受講の流れ4ステップ — 横矢印（PC）/ 縦ステッパー（SP）。①申込→②説明会→③受講→④認定。
SEC-7 PLAN
料金テーブル — 1〜2プラン。Gold枠で推奨プランを強調。早期割引があれば赤バッジで表示。
セクション間CTA：SEC-3後、SEC-5後、SEC-7後にミニCTA（Redボタン中央）を挟む。離脱ポイントごとに回収。
背景切り替え：White → Off-White を交互に。Red帯は使わない（FVとFinal CTAに限定して特別感を維持）。
SEC-8: FINAL CTA + FORM
背景：#222 ダーク。コピー：「キャリアを変える一歩を、今。」Noto Serif JP 32px White。
フォーム：名前 / メール / 電話番号（任意）/ 希望日程（セレクト）。4フィールド以内で完結。
送信ボタン：Red塗り+White文字。全幅（SP）/ 280px中央（PC）。
離脱防止：ブラウザバック検知でモーダル表示（「説明会は無料です。本当に離れますか？」）。実装は要判断。
③ デザイントンマナ・仕様書
Design Guideline & Technical Spec
granhouse.co.jp のクオリティラインを基準に、本案件の設計指針を定義
A

デザインコンセプト

CONCEPT
granhouse.co.jp の分析結果を踏まえた方針。同社は「モダンミニマリズム × ラグジュアリー」路線。
写真主体・余白重視・装飾排除。本案件もこの世界観を継承しつつ、「権威性」を加味する。
DO（やること）
• 大きな余白で「格」を表現する
• 写真はプロ撮影のみ。素材感を伝える
• 数値は大きく、説明は短く
• Navy × Gold で「信頼 × 格式」を演出
• セリフ体（明朝）は見出し・数値に限定
• 全セクションに英字ラベルを配置
• アニメーションは控えめ（フェード＋微移動のみ）
DON'T（やらないこと）
• グラデーション、ドロップシャドウの多用
• 角丸の大きいポップなUI
• フリー素材・ストックフォトの安易な使用
• 彩度の高いアクセントカラーの乱用
• パララックスや派手なスクロール演出
• 情報を詰め込みすぎたレイアウト
• LP（P6）以外でのRed使用
参照サイト：
• granhouse.co.jp — 全体のトーン・余白感・写真の使い方を踏襲
• 一級建築士事務所の公式サイト群 — 「プロが発信する資格」としての重厚感
• lbyu-net.com — LP（P6）のみ参考。入学訴求のテンション・構成
B

カラーシステム

COLOR
Primary
Navy
#1A2744
Dark Navy
#0F1A2E
Gold
#C5A55A
Gold Light
#D4BA7A
Neutral
White
#FFFFFF
Off-White
#F5F3EE
Warm Gray
#E8E4DD
Border
#D1CCC4
Sub Text
#6B7280
Body Text
#2C2C2C
Accent（LP P6専用）
LP Red
#C13A3A
Red Dark
#A83232
配色パターン（実使用例）
ヒーロー
Navy bg + White text
Gold accent
セクション
Off-White bg
Gold label
カード
White bg
Gold accent line
LP専用
Red bg + White text
CTA button
カラー使用ルール
NavyNAV / FOOTER / ヒーロー背景 / 見出しテキスト / CTA背景。サイト全体の「基調色」
GoldCTAボタン / 英字ラベル / 数値 / 1級表示 / アクセントライン。使用面積は全体の5%以下に抑え、特別感を維持
Off-White / Whiteセクション背景の交互配色。Off-White → White → Off-White で奥行きをつくる
LP RedP6のみ。P1〜P5では一切使用しない（世界観の分離）。hover時はRed Darkに遷移
コントラストNavy上のWhite文字: 12.6:1（AAA）/ Navy上のGold文字: 5.2:1（AA）/ Red上のWhite: 5.1:1（AA）
C

タイポグラフィ

FONT
見出し — Noto Serif JP
住まいの設計に、確かな証明を。
用途: ヒーローコピー / セクション見出し / CTA見出し。Weight: 700限定（400は使わない）。line-height: 1.5。letter-spacing: 0.02em。
本文 — Noto Sans JP
住宅設計は建築士だけでは測れない専門性がある。デザイン・構造・コスト・暮らしやすさを総合的に証明する認定資格です。
用途: 本文 / 説明文 / ナビ / ボタン。Weight: 400（本文）/ 500（サブ見出し）/ 700（ボタン・強調）。line-height: 1.9。
英字ラベル — Noto Sans JP（または欧文フォント検討）
CERTIFICATION    NUMBERS    ABOUT    ASSOCIATION
用途: セクション見出し上の英字ラベル。font-size: 10px / Gold / letter-spacing: 3px / font-weight: 700。granhouse.co.jp が各セクションで [concept] [works] 等を使用している手法を踏襲。
数値 — Noto Serif JP Bold
1,200+ 累計認定者数
用途: 実績数値。Gold色。letter-spacing: -0.02em（数字の詰め）。単位は本文フォントで小さく添える。
要素PCSP備考
H1 ヒーロー42px / 70028px / 700Noto Serif JP。1ページに1つ
H2 セクション見出し28px / 70022px / 700Noto Serif JP。英字ラベルとペア
H3 カード見出し18px / 70016px / 700Noto Sans JP。カード・リスト内
本文15px / 40014px / 400Noto Sans JP。line-height: 1.9
サブテキスト13px / 40012px / 400#6B7280。補足・注釈
キャプション11px / 40010px / 400写真キャプション・フッター内
ボタン15px / 70014px / 700Noto Sans JP。letter-spacing: 0.05em
英字ラベル10px / 7009px / 700Gold。letter-spacing: 3px
D

レイアウト・余白・グリッド

LAYOUT
グリッド
コンテナ最大幅1200px（通常セクション）/ 1000px（テキスト主体セクション）/ 720px（本文ブロック）
カラム12カラム。ガター: PC 24px / SP 16px
サイドパディングPC: 80px / Tablet: 32px / SP: 16px
全幅セクションNAV / FOOTER / Hero / CTA / NUMBERS は全幅。内部コンテンツのみmax-width制約
余白（8px基準のスケール）
セクション間PC: 120px / SP: 64px（大セクション）。PC: 80px / SP: 48px（小セクション）
英字ラベル→見出し8px
見出し→本文PC: 32px / SP: 20px
カード間PC: 24px / SP: 16px
CTA上下PC: 64px / SP: 48px
ブレークポイント
Desktop1025px〜。12カラム。フル機能
Tablet641px〜1024px。8カラム。カードは2列維持。NAVはハンバーガー化
Mobile〜640px。4カラム。1列中心。タッチ最適化（タップ領域48px以上）
E

UIコンポーネント仕様

UI PARTS
ボタン
Primary
Gold bg / Navy text
hover: #D4BA7A
Secondary
Gold border / Gold text
hover: Gold bg + Navy text
LP CTA
Red bg / White text
hover: #A83232
LP Inverse
White bg / Red text
FV上で使用
ボタン共通仕様
paddingPC: 12px 32px / SP: 12px 24px（Primary・LP CTA）。SP全幅の場合もあり
border-radius4px（全ボタン統一。丸すぎず角すぎず）
transitionall 300ms ease。hover時に background-color + box-shadow 変化
min-height48px（タッチ対応）
cursorpointer。disabled時は opacity: 0.5 + cursor: not-allowed
カード
カード仕様
背景Off-White (#F5F3EE) or White。ページ背景と交互
border-radius8px
paddingPC: 24px / SP: 20px
shadow（default）none（granhouse準拠。影なしでフラットに）
shadow（hover）0 4px 20px rgba(0,0,0,.08)。クリッカブルなカードのみ
Gold line導入企業カード・VOICEカードは border-left: 3px solid #C5A55A
フォーム
フォーム要素
input / textareaborder: 1px solid #D1CCC4 / border-radius: 4px / padding: 12px 16px / font-size: 15px
focusborder-color: #C5A55A / box-shadow: 0 0 0 3px rgba(197,165,90,.15) / outline: none
errorborder-color: #C13A3A / エラーテキスト 12px #C13A3A を直下に表示
labelfont-size: 13px / font-weight: 500 / color: #2C2C2C / margin-bottom: 4px
placeholdercolor: #D1CCC4
F

写真・素材ディレクション

ART DIRECTION
写真のトーン（granhouse.co.jp 準拠）
色温度やや暖色寄り（5500〜6000K）。冷たくならない。グランハウスの施工写真と同じトーン
コントラストやや低め。柔らかい自然光。影はソフト。ハイキー寄り
彩度控えめ（-10〜-15%）。素材感・質感を伝える程度に留める
被写体住宅外観 / 設計図面 / 打ち合わせシーン / 認定証 / 委員の人物。生活感よりプロフェッショナル感
NGパターンフリー素材感のある笑顔ポーズ / 過度な加工 / 人物なしの風景のみ / 古い住宅
画像仕様
形式WebP優先（<picture> + JPEGフォールバック）。ロゴ・アイコンはSVG
Hero画像PC: 1920x1080以上 / SP: 750x1334以上（別ファイル or art direction with <source>）
カード画像800x600（4:3）。object-fit: cover。lazy loading（loading="lazy"）
人物写真正方形（800x800以上）。border-radius: 50%表示。プロ撮影必須
圧縮WebP: quality 80 / JPEG: quality 85。1枚あたり200KB以下を目標
G

アニメーション・インタラクション

MOTION
原則：granhouse.co.jp は Pace.js によるローディング + IntersectionObserver によるフェードイン。装飾ではなく「情報の登場順を制御する」目的でアニメーションを使う。
要素トリガーアニメーションパラメータ
セクション要素viewport内に入った時（IntersectionObserver threshold: 0.15）フェードアップ（opacity 0→1 + translateY 20px→0）600ms / ease-out / 一度だけ
カード群viewport内staggerフェードアップ各カード200ms間隔で順次表示
数値viewport内カウントアップ（0→目標値）1.5s / ease-out / 一度だけ
ボタン hovermouseenter背景色変化 + shadow追加300ms / ease
企業ロゴ hovermouseenterグレースケール→カラー + opacity 0.5→1400ms / ease
NAVスクロールscroll > 100px背景 transparent→Navy(0.95)300ms / ease
ハンバーガーclick☰→×モーフ + メニュースライドイン300ms / ease-out
FAQ展開click+→−回転 + コンテンツスライドダウン200ms（アイコン）/ 300ms（コンテンツ）
ページロードDOMContentLoadedローディングバー→フェードアウトPace.js or CSS only。完了後 body.loaded クラス追加
パフォーマンス：will-change: transform, opacity を使用。GPU合成レイヤーで処理。
アクセシビリティ：prefers-reduced-motion: reduce が有効な場合、すべてのアニメーションを無効化。
H

技術仕様・対応環境

TECH SPEC
対応ブラウザ・OS
Chrome最新2ver（Windows / Mac / Android / iOS）
Safari最新2ver（Mac / iOS）※ iPhoneの主要ブラウザ。最優先でテスト
Edge最新2ver
Firefox最新2ver
IE非対応。アクセス時に Chrome/Edge 推奨の案内表示
パフォーマンス目標値
LighthousePerformance: 90+ / Accessibility: 95+ / Best Practices: 95+ / SEO: 100
LCP< 2.5s（Hero画像の最適化が鍵。preload + fetchpriority="high"）
INP< 200ms（FIDの後継指標。FAQ展開等のインタラクション応答速度）
CLS< 0.1（画像にwidth/height指定必須。Webフォントのfont-display: swap）
初回ロードHTML + CSS + JS + Above-the-fold画像 = 1.5MB以下
SEO設計
title形式「ページ名｜住宅設計士 - 〇〇協会」。30〜60文字
description各ページ固有。80〜120文字。CTRを意識した訴求文
OGPog:title / og:description / og:image（1200x630px）/ og:type / og:url 全ページ設定
構造化データOrganization（TOP） / FAQPage（P5） / BreadcrumbList（P2〜5）/ LocalBusiness（P4 各企業）
canonical全ページ設定。www有無・スラッシュ有無を統一
sitemap.xml自動生成。更新頻度: weekly。priority: TOP 1.0 / P2-4 0.8 / P5 0.6 / P6 0.9
インフラ・実装方針
CMSWordPress + カスタムテーマ（認定設計士・企業・FAQ をカスタム投稿タイプで管理。クライアント自身で更新可能に）
ホスティングエックスサーバー or ConoHa（WordPress互換）。Cloudflare CDN併用
SSL必須。Cloudflare or サーバー標準のLet's Encrypt
フォームContact Form 7 + reCAPTCHA v3 + honeypot。自動返信メール設定。管理者通知はSlack連携も検討
計測GA4 + GTM。イベント: CTA click / form submit / scroll depth(25/50/75/100%) / external link click / FAQ expand
LP（P6）計測追加Facebook Pixel / Google Ads タグ（広告流入のCV計測）。LP専用のコンバージョン定義
I

アクセシビリティ

A11Y
WCAG 2.1 AA 準拠
コントラスト比通常テキスト: 4.5:1以上 / 大テキスト(18px+): 3:1以上。上記カラーシステムで検証済み
キーボード操作全インタラクティブ要素にフォーカスリング表示。Tab順序は視覚順序と一致させる
スクリーンリーダー全画像にalt属性。装飾画像はalt=""。アイコンにはaria-label
セマンティクスh1→h2→h3 の階層厳守。<nav> <main> <footer> <section> のlandmark使用
フォームlabel要素と入力欄の紐付け必須。エラーメッセージは aria-describedby で関連付け
アニメーションprefers-reduced-motion 対応。モーション無効時はすべてのアニメーションを即時表示に
タップ領域最小 44x44px（WCAG） / 推奨 48x48px。ボタン・リンクのパディングで確保
本資料のテキスト・数値・画像はすべてダミーです。詳細はお打ち合わせにて確定。
本資料には ①サイト構成・要件整理 / ②ワイヤーフレーム（PC・SP レイアウト詳細） / ③デザイントンマナ・仕様書 を含みます。
デザインフェーズでは、granhouse.co.jp のクオリティラインを基準に制作します。
PHOTO VIDEO ILLUST