🎯 AIタスク仕分けダッシュボード

← トップに戻る

🧩 Organism パーツライブラリ

MS11 Phase 1 で test_sites v7 承認版10業種から抽出した9種類の構造パターン。各 Organism のHTML構造・スタイル・実際の実装例を確認できます。

#1 FVSection 業種横断（common）

ファーストビュー（ヒーロー）

ページ最上部の主役セクション。動画/SVG装飾背景＋12分割2カラム （左:コピー＋CTA＋トラストバッジ、右:メインビジュアル+数値オーバーレイ）の 構成が10業種で完全に統一されている。GSAPタイムラインで段階表示。

📐 構造・スタイル

ルート要素
section
Tailwindクラス
relative overflow-hidden（業種で背景クラス追加: bg-sumiDeep / sakura-bg / sumi-bg 等）
内部構造
section.relative.overflow-hidden
├ div.hero-video-wrap#hero-video-wrap（video予約 + SVG装飾背景）
├ div.hero-bg-ornament（SVG ornament: radialGradient / グリッド線）
└ div.max-w-7xl.mx-auto.grid.md:grid-cols-12
├ div.md:col-span-7 / col-span-6
│ ├ p#hero-eyebrow.gsap-hidden（SINCE/SERVICE LABEL）
│ ├ h1#hero-headline.gsap-hidden（2行・改行で韻）
│ ├ p#hero-sub1.gsap-hidden（補足コピー1）
│ ├ p#hero-sub2.gsap-hidden（補足コピー2）
│ ├ div#hero-cta.gsap-hidden（btn-primary cta-pulse + quietリンク）
│ └ div#hero-badges（badge-trust×3：CHECK + 短文）
└ div.md:col-span-5 / col-span-6
├ div#hero-photo.photo-ph（aspect-[4/5]、SVGプレースホルダ）
├ div#hero-stat / #hero-seal（数値オーバーレイ or 円相）
└ p#hero-caption.tegaki（手書き風キャプション）
padding_y
pt-14〜pt-28 / pb-16〜pb-32（業種で揺れあり）
背景パターン
bg-{deep色} + hero-video-wrap::after gradient（180度・55%→85%）
見出しフォント
業種により明朝(Shippori Mincho等) / Noto Sans 900 / Garamond
AOS使用
なし
GSAP使用
あり
カスタムJS
hero-video-wrap内のvideo自動再生（推奨コメントのみ。実動画未配置）

スロット（差し替えポイント）

  • {hero_eyebrow} : SINCE 20XX / SERVICE LABEL（英字+トラックワイド）
  • {hero_headline} : メインコピー2行（韻を踏む構成、アクセントカラー1語）
  • {hero_sub1} : 補足1（情緒的に立ち上げる）
  • {hero_sub2} : 補足2（事実・サービス説明）
  • {hero_cta_label} : 主CTAラベル（例: 無料戦略セッションを予約する）
  • {hero_cta_anchor} : #contact / #form / #cta 等
  • {hero_secondary_label}: 副CTAリンクラベル（例: メソッドを見る →）
  • {hero_badges[]} : 3〜4個のtrust badge（チェックアイコン + 短文）
  • {hero_visual} : ビジュアルスロット（動画 / SVGモック / 写真）
  • {hero_overlay} : 数値カード or 円相シール（業種により差し替え）

業種別の差分

  • coaching: bg-sumiDeep + ember(#FF6B35)グリッド線 + 男性シルエットSVG + 数値オーバーレイ(312/co.)
  • cafe: sakura-bg + terracotta + 円相シール『定休日』 + tegakiキャプション
  • clinic: sakura-bg + pinkdeep + 円相シール『開院10年』 + tegakiキャプション
  • ai_diagnose: 心拍ライン装飾 + 診断UIモックSVG（円形プログレス+バイタルバー）
  • saas: blueprint風グリッド + ダッシュボードUIモック
  • line_mgmt: EAF1F1薄ブルー + 院長立ち姿SVG + 落ち着いた医療系
  • law_office: stone/40 + forest + 厳粛トーン
  • creator_portfolio: blueprint-bg + asa（青系) + 建築図面風
  • ai_dx: moegi(若草) + cream + 図解SVG
  • local_business: sumi-bg + 和柄 + 老舗トーン
🖼 実際のデザインを確認 フルスクリーンで開く ↗

💻 他の業種での実装例

コーチング・スクールLP L371-497 ↗飲食・サービス業HP L339-489 ↗介護・医療クリニックHP L341-467 ↗

📝 ・10業種すべてで「左コピー+右ビジュアル」の12カラム構成が踏襲されており、最も再利用性が高い。
・差分は背景SVG ornament・hero-overlay・accent color の3点のみ。
・動画スロットはコメントアウト状態（実動画は配置せず推奨記述だけ残す運用）。

#2 TrustSection 業種横断（common）

実績ストリップ＋数値カウントアップ

FV直後の信頼補強。2系統で運用される： (A) メディア掲載ロゴ列（6社、grid-cols-3 md:grid-cols-6） (B) 数値カウントアップカード4枚（id="stats"、累計実績/満足度/改善率等） 業種により(A)(B)両方／(B)のみが選択される。

📐 構造・スタイル

ルート要素
section
Tailwindクラス
bg-{tone_soft} border-y hairline
内部構造
# パターンA: メディア掲載ロゴ
section.bg-sumiDeep.border-b.hairline
└ div.max-w-7xl.mx-auto.px-6.py-10
├ p[text-center].sec-label (ALUMNI FEATURED IN / メディア掲載)
└ div.grid.grid-cols-3.md:grid-cols-6.gap-6
└ span × 6（媒体名テキスト、Inter font）

# パターンB: 数値カウントアップ
section#stats.bg-{tone}
└ div.max-w-7xl.mx-auto.px-6.py-20
├ div.text-center（sec-label + sec-heading 「数字が、語る」）
└ div.grid.grid-cols-2.md:grid-cols-4.gap-5
└ div.stat-card × 4
├ p.text-[10px].tracking-jpx（CUMULATIVE 等のラベル）
├ p.stat-num.text-5xl
│ └ span.counter[data-target="312"]
└ p.text-xs（説明文 + 出典脚注）
padding_y
py-14 md:py-20 / py-20 md:py-24
背景パターン
bg-{soft色}/60 + border-y hairline で挟む
見出しフォント
sec-heading（明朝 or Noto 900）
AOS使用
あり
GSAP使用
なし
カスタムJS
// .counter[data-target] のIntersectionObserverで発火
// ScrollTrigger or 自前のIO で 0→target を duration 1.5s でカウントアップ
// data-format="comma" / data-decimal="1" のサポート

スロット（差し替えポイント）

  • {section_label}: BY THE NUMBERS / TRACK RECORD 等
  • {section_heading}: 「数字で見る、{サービス名}」
  • {stat_cards[]}: { label, target, suffix, caption }×4
  • {media_logos[]}: { name }×6（オプショナル）
  • {footnote}: 出典・集計時点（任意）

業種別の差分

  • coaching: 媒体ロゴ(FORBES JAPAN等)＋数値4枚（卒業生数/起業数/平均年商/3年継続率）
  • saas: 数値4枚（導入社数/離職率改善/サーベイ回答率/満足度）
  • clinic: 数値（分娩件数/満足度/再来率）+ メディア（たまごクラブ/VERY等）
  • ai_diagnose: 数値（累計診断者/早期発見率/精度）
  • line_mgmt: 数値4枚（導入院数/再診療率↑/予約完了率/院長満足度4.7）
🖼 実際のデザインを確認 フルスクリーンで開く ↗

💻 他の業種での実装例

コーチング・スクールLP L502-555（A媒体ロゴ + B数値） ↗LINE運用代行LP L440-471 ↗SaaS/サブスクLP L446-487 ↗

📝 ・stat-card のborder-top accentは美意識#3「数値カウントアップ」の中核。
・出典脚注（「※自己申告に基づく」「中小庁データ比較」等）は誠実トーンの肝。
・media-logos は実ロゴSVGがあれば差し替え、なければ社名テキストで運用。

#3 FeatureSection 業種横断（common）

提供価値・メソッド（特徴）

サービスの中身を伝えるセクション。代表パターンは2系統： (A) 3カラム横並び（提供価値3つ・アイコン+見出し+本文） (B) 6カードグリッド（method-num + アイコン + 見出し + 本文、md:cols-3） 上部に「左:見出し+ラベル、右:導入文」の対峙レイアウトが多い。

📐 構造・スタイル

ルート要素
section
Tailwindクラス
id={service|method|how|values|approach|feature} bg-{tone} border-y hairline
内部構造
section#method.bg-{深色}
└ div.max-w-7xl.mx-auto.px-6.py-24
├ div.grid.md:grid-cols-12.gap-10.items-end.mb-16
│ ├ div.md:col-span-6（sec-label + sec-heading）
│ └ div.md:col-span-6（補足文）
└ div.grid.md:grid-cols-2.lg:grid-cols-3.gap-5
└ div.card-hover.bg-{soft色}.border.hairline.p-8 × 3〜6
├ div.flex.items-start.justify-between.mb-6
│ ├ p.method-num（"01" 大型数字、アクセント色）
│ └ span.icon-hover（SVGアイコン、線太1.5px）
├ h3.font-bold-jp.text-xl.mb-3 (2行見出し)
└ p.text-sm.leading-relaxed (本文)
padding_y
py-20 md:py-24 / py-24 md:py-28
背景パターン
明色背景(bg-paper/cream)と暗色背景(bg-sumiDeep)を交互配置でリズム
見出しフォント
sec-heading + font-bold-jp
AOS使用
あり
GSAP使用
なし
カスタムJS
なし。CSS transition のみで card-hover を実現

スロット（差し替えポイント）

  • {section_id}: method / service / values / approach / feature
  • {section_label}: METHOD / OUR SERVICE / VALUES 等
  • {section_heading}: 大見出し（強調1語をアクセント色）
  • {intro_paragraph}: 補足の導入文
  • {feature_cards[]}: { number?: '01', icon_svg, title, description }×3〜6

業種別の差分

  • coaching: 6カードgrid + method-num（01〜06）+ 中盤CTA（btn-ghost）
  • line_mgmt: 3カラム + icon-circle + お約束box（3点）
  • saas: feature 機能ベース
  • law: approach 哲学ベース（左右対峙）
  • cafe: values（焙煎の哲学・季節食材の出自・地元繋がり）
  • clinic: approach（無痛分娩/個室/産後ケアの考え方）
🖼 実際のデザインを確認 フルスクリーンで開く ↗

💻 他の業種での実装例

コーチング・スクールLP L779-910（6カード型 METHOD） ↗LINE運用代行LP L557-625（3カラム型 SERVICE） ↗SaaS/サブスクLP L617-679（feature型） ↗

📝 ・card-hover はサイト全体の標準動作。Atomレベル（CardBlock molecule）に切り出し推奨。
・method-num のような大型数字は他のセクションでは使われないので、6カード型FeatureSection限定。
・「お約束box（border-left + 3点リスト）」は美意識「無理な勧誘なし」3回ルールの実装場所。

#4 TestimonialSection 業種横断（common）

お客様の声（受講生・卒業生・利用者）

実名・実写・実成果を載せる信頼補強。2パターン： (A) 縦長1人深掘りインタビュー＋下に3人カード（clinic/coaching等） (B) 3〜6人カードのみ（saas/line_mgmt等） pullquote class による「」アクセント引用が共通。

📐 構造・スタイル

ルート要素
section
Tailwindクラス
id={voice|alumni} bg-{tone} border-y hairline
内部構造
section#voice.bg-cream.border-y.hairline
└ div.max-w-6xl.mx-auto.px-6.py-20
├ div.text-center.mb-14（sec-label + sec-heading 「お客様の声」+ 補足）
│
├ # パターンA: 縦長インタビュー（縦並びgrid-cols-12）
├ div.grid.md:grid-cols-12.gap-8.mb-14
│ ├ div.md:col-span-5
│ │ ├ div.photo-ph.aspect-[4/5]（顔写真プレースホルダSVG）
│ │ └ p.tegaki.text-right（撮影状況キャプション）
│ └ div.md:col-span-7
│ ├ p.text-xs.tracking-jpwide (INTERVIEW 01)
│ ├ h3 (名前 + 属性: 33歳・第一子・無痛分娩)
│ ├ blockquote.pullquote.text-xl (引用文、accent色)
│ ├ p × 3〜4（具体エピソード）
│ └ div.grid.grid-cols-3.border-t（属性スコア3カラム）
│
└ # パターンB: 横並びカード
div.grid.sm:grid-cols-2.md:grid-cols-3.gap-6
└ div.card-hover.bg-{soft色}.p-6 × 3
├ div.photo-ph.aspect-square.rounded-full.max-w-[80px]
├ p.text-center (名前 + サブ情報)
├ p.text-sm.leading-relaxed (短いコメント)
└ p.text-xs.{accent} (→ ハッシュ的サマリ)
padding_y
py-20 md:py-24
背景パターン
bg-cream / bg-paper（明）が定石
見出しフォント
業種別主フォント + pullquote::before/after で「」装飾
AOS使用
あり
GSAP使用
なし
カスタムJS
なし

スロット（差し替えポイント）

  • {interview_feature?}: { photo_alt, name, attribute, headline_quote, paragraphs[], stats[]? }
  • {testimonial_cards[]}: { photo_alt, name, attribute, comment, summary_tag }×3〜6

業種別の差分

  • coaching: alumniテーブル型（6行のtable風 + 売上数値）+ サブのvoice
  • clinic: 縦長1名深掘り（無痛分娩等の属性スコア3つ）+ 3カード
  • saas: 3カラム（人事責任者の声、課題→導入後の数値変化）
  • cafe: voice + chef（料理人とお客様の対話風）
  • ai_diagnose: 数値改善付き（◯kg減・血圧◯mmHg改善 等）
🖼 実際のデザインを確認 フルスクリーンで開く ↗

💻 他の業種での実装例

介護・医療クリニックHP L995-1108（パターンA+B複合） ↗コーチング・スクールLP L621-772（alumni表＋下記voice） ↗SaaS/サブスクLP L794-906 ↗

📝 ・実名+顔写真+属性+具体的引用 の4点セットが美意識#1の最重要適用ポイント。
・「無理な勧誘」「合わなければ断ってOK」等のコピーが必ずどこかに入る業種運用。
・coaching の alumni-table は変則的（数値前面の信頼補強）。Phase 2 で AlumniSection を別途検討余地あり。

#5 PricingSection 業種横断（common）

料金プラン

透明性ある料金提示。3パターン： (A) 単独プラン（saas: ¥980/月、border-2 border-coral/20で枠強調） (B) 比較表（複数プラン横並び）→ v07時点では未確認、設計余地 (C) 詳細は無料相談で（coaching: FAQで明示、専用Pricing非設置） stat-num大型数値表示 + 機能リスト2カラムが定石。

📐 構造・スタイル

ルート要素
section
Tailwindクラス
id={price|pricing} bg-paperSoft border-y hairline
内部構造
section#price.bg-paperSoft.border-y.hairline
└ div.max-w-5xl.mx-auto.px-6.py-20
├ div.text-center.mb-12（sec-label PRICING + sec-heading）
└ div.bg-paper.border-2.border-{accent}/20.rounded-2xl.p-8
├ div.text-center.pb-8.border-b.hairline
│ ├ p.sec-label (STANDARD PLAN)
│ ├ p.text-lg (月額 / 従業員1名あたり)
│ ├ p.stat-num.text-7xl
│ │ └ ¥<span.counter[data-target=980]>0</span>
│ ├ p.text-xs (税抜・初期費用0円・最低契約期間なし)
│ └ div.inline-flex.bg-{accent}/10.rounded-full (キャンペーンバッジ)
├ div.grid.md:grid-cols-2.gap-x-10.gap-y-3 (機能リスト×6)
│ └ div.flex.gap-3 (✓SVG + テキスト)
├ div.p-6.bg-mist.border-l-3.border-{accent} (お約束box、3〜4点)
└ div.text-center
├ a.btn-primary.cta-pulse (CTAボタン)
└ p.text-xs (枠数表示: 今月の枠 残り◯社)
padding_y
py-20 md:py-28
背景パターン
bg-paperSoft（白っぽい）の上に border-2 アクセント枠
見出しフォント
stat-num（Inter800、5xl-7xl大型）
AOS使用
あり
GSAP使用
なし
カスタムJS
counter animation（カウントアップ）

スロット（差し替えポイント）

  • {plan_label}: STANDARD PLAN / ENTRY 等
  • {plan_unit}: 月額 / 従業員1名あたり / 6ヶ月総額 等
  • {plan_price_amount}: counter target値（円表示）
  • {plan_price_suffix}: ¥ / 円 / 万円
  • {plan_subtext}: 税抜・初期費用0円 等
  • {campaign_badge}: いまなら30日無料診断付き 等
  • {features[]}: { icon, label }×6（機能リスト）
  • {promises[]}: お約束3〜4点
  • {cta_label}, {cta_anchor}
  • {scarcity_note}: 今月のオンボーディング枠 残り◯社

業種別の差分

  • saas: ¥980/月・1名あたり・30日無料診断付き → 数値前面型
  • clinic: 0円見学（無料体験型）→ Pricing=CTAと統合
  • coaching: 料金非掲載（FAQで「無料セッション時にご案内」明示）→ 文化的に隠す
  • cafe: メニュー価格表（IndustryUnique扱い）
  • law: 費用見積（要相談型）
🖼 実際のデザインを確認 フルスクリーンで開く ↗

💻 他の業種での実装例

SaaS/サブスクLP L924-993 ↗介護・医療クリニックHP L1130-1185（CTA兼Pricing型） ↗AI診断サービスLP L（無料診断＝価格表示なし、CTA統合） ↗

📝 ・「料金を見せる/隠す」は業種文化に直結。テンプレ生成時は YAML で `pricing_strategy: show|hide|consult` を選択させる。
・「お約束box」は美意識#3「無理な勧誘なし」の3回ルールの2回目を消化する場所。
・clinic は Pricing と CTA が融合（無料見学）。Phase 2 で CTASection と兼用可能なバリアントを作る判断あり。

#6 FAQSection 業種横断（common）

FAQ

購買障壁の除去。<details>/<summary> ベースのアコーディオン。 6〜10問が標準。faq-icon (+ → ×) のrotate transitionが全業種統一。

📐 構造・スタイル

ルート要素
section
Tailwindクラス
id=faq bg-{tone}（明色）
内部構造
section#faq.bg-{tone}
└ div.max-w-3xl.mx-auto.px-6.py-24
├ div.text-center.mb-12（sec-label FAQ + sec-heading 「よくある質問」）
└ div.space-y-3
└ details.bg-{soft色}.border.hairline.p-6 × 6
├ summary.flex.items-start.justify-between
│ ├ span.font-bold-jp.text-base（質問文）
│ └ span.faq-icon.text-{accent}.text-2xl （「＋」）
└ p.text-sm.leading-relaxed.mt-4 (回答、複数行OK)
padding_y
py-20 md:py-28
背景パターン
bg-paperSoft / bg-sumiDeep（明暗どちらも採用業種あり）
見出しフォント
sec-heading 統一
AOS使用
あり
GSAP使用
なし
カスタムJS
なし（native details/summary + CSS rotate）

スロット（差し替えポイント）

  • {faq_items[]}: { question, answer_html }×6〜10

業種別の差分

  • coaching: 6問（勧誘なし/性別/在職中OK/料金/他塾との違い）
  • saas: 6問（勧誘なし/データ保管/他SaaS連携/解約条件）
  • clinic: 6問（無痛分娩/個室/夫立会/初診の流れ）
  • cafe: 6問（個室予約/アレルギー/子連れOK/手土産）
  • law: 6問（初回相談無料/着手金/弁護士相談範囲/秘密保持）
🖼 実際のデザインを確認 フルスクリーンで開く ↗

💻 他の業種での実装例

コーチング・スクールLP L1031-1112 ↗SaaS/サブスクLP L1059-1140 ↗飲食・サービス業HP L1251-1342 ↗

📝 ・全業種で「初回無料勧誘なし」「合わなければ断ってOK」が必ず1問入る → 美意識#3 の3回ルール最後の消化場所。
・JS不要のためAstro静的出力との相性が最良。アイランド化不要。

#7 CTASection 業種横断（common）

クロージングCTA（中盤 / 末尾 / Sticky）

ハードルを下げる文言で背中を押す。3配置： (A) 中盤CTA: ボタン単体（btn-ghost、Featureセクション末尾に挿入） (B) 末尾CTA: id=contact / cta / form / reserve、2カラムカード（戦略セッション + 資料請求） (C) Sticky CTA: モバイル下部固定（.sticky-cta、scroll後 show）

📐 構造・スタイル

ルート要素
section
Tailwindクラス
id={contact|cta|form|reserve} bg-{accent} or bg-{深色} relative overflow-hidden
内部構造
# パターンB: 末尾CTA 2カラム
section#contact.bg-sumi.relative.overflow-hidden
├ svg.absolute (背景装飾の同心円 等)
└ div.max-w-5xl.mx-auto.px-6.py-24
├ div.text-center.mb-14
│ ├ p.sec-label CONTACT
│ ├ h2.sec-heading（強調コピー、アクセント1語）
│ └ p.text-base.leading-relaxed (補足: 無理な勧誘なし)
├ div.grid.md:grid-cols-2.gap-6
│ ├ # 主CTA: bg-{soft}.border-2.border-{accent}.p-8
│ │ ├ sec-label PRIMARY
│ │ ├ h3 (無料戦略セッション)
│ │ ├ p (60分・オンライン)
│ │ ├ ul (✓無料 / ✓勧誘なし / ✓守秘)
│ │ └ a.btn-primary.cta-pulse (主ボタン)
│ └ # 副CTA: bg-{soft}.border.hairline.p-8
│ ├ sec-label DOCUMENT
│ ├ h3 (プログラム資料請求)
│ └ a.btn-ghost (副ボタン)
└ p.text-center.text-xs (強引な勧誘なし note)

# パターンC: Sticky CTA
div.sticky-cta#sticky-cta
└ div.max-w-md.mx-auto.flex
├ div.flex-1 (60min/FREE/NO PUSH + label)
└ a.btn-primary (予約する →)
padding_y
py-24 md:py-32
背景パターン
末尾は accent色背景 or 深色背景。背景装飾SVG（同心円 / 円相）配置
見出しフォント
sec-heading + accent強調
AOS使用
あり
GSAP使用
なし
カスタムJS
// ScrollTrigger で window.scrollY > 600 → .sticky-cta.classList.add('show')
// FV/CTA到達時は逆に外す制御（業種で実装差あり）

スロット（差し替えポイント）

  • {section_label}: CONTACT / VISIT / RESERVATION 等
  • {section_heading}: 強調コピー2行
  • {section_subtext}: 補足の安心文言
  • {primary_cta}: { label, anchor, bullets[], badge?: PRIMARY }
  • {secondary_cta}: { label, anchor, bullets[], badge?: DOCUMENT }
  • {closing_note}: 強引な勧誘なし note
  • {sticky_cta}: { hint_top, hint_bottom, btn_label, anchor }

業種別の差分

  • coaching: 2カラム（無料戦略セッション + 資料請求）+ Sticky
  • saas: 1カラム + 30日無料診断
  • clinic: 見学申込 + 末尾フォーム（2層）
  • law: 初回相談 + form
  • cafe: 予約のみ（電話/オンライン）
🖼 実際のデザインを確認 フルスクリーンで開く ↗

💻 他の業種での実装例

コーチング・スクールLP L1117-1187, 1241-1250 (sticky) ↗SaaS/サブスクLP L（末尾#form） ↗介護・医療クリニックHP L1130-1185 (見学CTA), 1386-1422 (末尾form) ↗

📝 ・末尾CTAの2カラム（主 + 副）が高転換構成。副CTA（資料請求）でハードルを下げる定石。
・「無理な勧誘なし」「合わなければ断ってOK」の3回ルール、ここで最終消化。
・Sticky CTA はモバイル限定（md:hidden）。

#8 OwnerVoiceSection 業種横断（common）

代表/院長/オーナー紹介（必須スロット・美意識#1）

美意識プロファイル#1「実名・実写・個人の言葉」の中核実装。 左:大型顔写真（aspect-4/5）+ 右:名前/肩書/blockquote/略歴/実績タグ。 手書き風キャプション or CEO BLOG引用 box が emotional anchor。

📐 構造・スタイル

ルート要素
section
Tailwindクラス
id={doctor|chef|coach|founder|lawyer|architect|craftsman|representative} bg-{tone} border-y hairline
内部構造
section#doctor.bg-shoji/40.border-y.hairline
└ div.max-w-6xl.mx-auto.px-6.py-20
└ div.grid.md:grid-cols-12.gap-10.items-start
├ div.md:col-span-5
│ ├ div.photo-ph.aspect-[4/5].shadow-card
│ │ ├ svg (人物シルエットプレースホルダ)
│ │ └ span.ph-meta (PHOTO: 木村慎一 / 院長室)
│ └ p.tegaki.text-right (撮影日キャプション)
└ div.md:col-span-7
├ p.sec-label FOUNDER / CEO / HEAD COACH
├ h3.text-2xl-4xl (名前 + 英字name + 年齢/属性)
├ blockquote.pullquote.text-xl.mt-8 (代表の言葉、accent色)
├ div.mt-8.space-y-4 (略歴3〜4段落)
├ div.p-5.bg-{soft}.border-l-2.border-{accent} (CEO BLOG引用box)
│ ├ p.text-[10px] (FROM CEO BLOG — DATE)
│ └ p (引用文)
└ div.grid.grid-cols-2.gap-3 (実績タグ4つ: ▸ 起業3社 等)
padding_y
py-20 md:py-24
背景パターン
bg-{soft色}/40（少しトーン下げ）で誠実感
見出しフォント
業種別主フォント、英字subはInter
AOS使用
あり
GSAP使用
なし
カスタムJS
なし

スロット（差し替えポイント）

  • {section_id}: doctor / chef / coach / founder / lawyer / architect / craftsman / representative
  • {role_label}: FOUNDER / CEO / 院長 / 代表シェフ 等
  • {owner_name_ja}: 三浦 慎之介
  • {owner_name_en}: Shinnosuke Miura
  • {owner_attribute}: 42yo / Founder of XX
  • {owner_quote}: 代表の言葉（2行・aceent色のpullquote）
  • {owner_bio_paragraphs[]}: 略歴3〜4段落
  • {ceo_blog_quote?}: { date, body } （オプショナル、誠実感upgrade）
  • {achievement_tags[]}: 「▸ 起業3社」「▸ 元・戦略コンサル」×4
  • {photo_caption}: PHOTO: 名前 / 撮影場所

業種別の差分

  • coaching: 代表＋サブコーチ3名（5+7分割の代表大型 + 下に3カード）
  • saas: 代表のみ。CEO BLOG引用 box が特徴的
  • clinic: 院長のみ。「医師としての10年」「育児中の母として」の二面表現
  • cafe: シェフ + 一品の哲学（食材産地）
  • law: 弁護士 + 専門領域タグ
  • creator: 建築家 + 作品哲学
  • craftsman: 職人 + 道具・流派
  • ai_dx: 代表のみ。事例数で権威付け
🖼 実際のデザインを確認 フルスクリーンで開く ↗

💻 他の業種での実装例

コーチング・スクールLP L917-1024（COACHES: 代表 + サブ3名） ↗SaaS/サブスクLP L998-1054（coach=CEO） ↗介護・医療クリニックHP L1190-1244（doctor=院長） ↗

📝 ・**美意識#1 必須スロット**。Pre-Flight Lintで「ownerVoiceSection が空ならビルド失敗」を実装すべき。
・写真スロットは「日本人実写 or イラスト or SVG」の3択を強制（海外ストック禁止）。
・SubCoachCard が必要なのはcoachingのみ。他業種ではPropsで使わない。

#9 IndustryUniqueSection 業種特化（industry_unique）

業種別独自セクション（必須スロット・美意識#2）

美意識#2「業種別独自セクション枠」の中核。業種ごとに完全に異なる構造を取る、 テンプレでは絶対に没個性化させない場所。Pre-Flightで「IndustryUniqueSection が1つ以上含まれること」をチェックする。

📐 構造・スタイル

ルート要素
section
Tailwindクラス
業種固有: id={menu|alumni|works|mission|story|access|ingredients|how|cases|products} bg-{tone}
内部構造
各業種で完全に異なる（下記 industry_variants 参照）
padding_y
py-20 md:py-24（共通）
背景パターン
業種色 + 業種特有の装飾（畑・建築図面・和柄・テクニカル）
見出しフォント
業種別主フォント
AOS使用
あり
GSAP使用
なし
カスタムJS
セクションにより異なる

スロット（差し替えポイント）

  • 業種ごとに別構造 → variant別Astroコンポーネント化が前提

業種別の差分

  • coaching: {'sections': ['MissionSection（哲学声明 + pullquote + 創立年/期/拠点グリッド）', 'AlumniSection（卒業生6名のテーブル: 名前/会社/事業/年商）', '「無理な勧誘しません」3回repetition（hero badge + FAQ + CTA脚注）']}
  • cafe: {'sections': ['MenuSection（4カテゴリ Antipasti/Pizza/Pasta/Dolce、price-dotで料理名と価格を点線で接続）', 'IngredientsSection（食材産地Bento: 5+7+4+4+4のmd:grid-cols-12不均等）', 'AccessSection（営業時間・徒歩◯分・地図SVG）']}
  • clinic: {'sections': ['BirthPlanSection（無痛分娩 / 自然分娩 / 産後ケア の3プラン比較）', 'FacilityTour（個室14室の見学 / 設備写真bento）', 'AccessSection（駅徒歩・送迎・院内動線）']}
  • saas: {'sections': ['ProblemSection（人事責任者の課題リスト4つ + 共感1文）', 'FeatureDeepSection（機能スクリーンショットモック）', 'JourneySection（導入1日目→1週間→1ヶ月のジャーニー）']}
  • law: {'sections': ['ApproachSection（哲学声明）', 'PracticeSection（取扱分野: 企業法務/相続/離婚 等）']}
  • line_mgmt: {'sections': ['ProblemSection（こんなクリニック様へ、悩み4枚 + 共感1文）', 'FlowSection（導入の流れ stepカウント 1→2→3→4）']}
  • creator: {'sections': ['WorksPortfolioSection（作品グリッド、Bento不均等）', 'ProcessSection（設計プロセス step）', 'PhilosophySection（建築観の声明）']}
  • local_business: {'sections': ['StorySection（創業からの歴史、年表）', 'ProductsSection（商品グリッド + 職人のひと言）', 'AccessSection（地図 + 老舗看板）']}
  • ai_diagnose: {'sections': ['HowItWorksSection（3分診断のフロー）', 'RiskCategoriesSection（生活習慣病/メンタル/睡眠/肝腎 の4カテゴリ）']}
  • ai_dx: {'sections': ['ServiceSection（DXメニュー）', 'CasesSection（事例カード、課題→解決→数値）', 'JourneySection（導入ステップ）']}
🖼 実際のデザインを確認 フルスクリーンで開く ↗

💻 他の業種での実装例

飲食・サービス業HP L680-815 (menu), 819-905 (ingredients) ↗コーチング・スクールLP L621-772 (alumni), 562-616 (mission) ↗介護・医療クリニックHP L723-810 (menu/birth plan), 1332-1385 (access) ↗

📝 ・**美意識#2 必須スロット**。Pre-Flight Lintで「業種テンプレに最低1つの IndustryUniqueSection が含まれる」をチェック。
・業種を増やすたびにここが拡張される（Phase 3でAIキット化する際の主拡張ポイント）。
・無理に共通化せず、業種ごとに完全独立コンポーネントとして格納する設計が結果的に保守性が高い。
・coaching の AlumniSection は Testimonial と境界が曖昧。Phase 2 着手時に再判断。

📄 詳細YAML: deliverables/2026-06-22_MS11_Phase1_Organism抽出.yaml（888行）

← トップに戻る