Summary
Project Type:
コーポレートサイト, ブランドサイト
Launch Date:
高級結婚相談所「LIAISON NOBLE」のコーポレートサイト。
Astro + Tailwind CSS v4で構築し、優雅で上質なデザインと高速なパフォーマンスを実現。
成婚事例、料金プラン、お客様の声などを掲載し、ターゲット層に信頼感を与えるプレミアムな印象を演出しています。
※実際のクライアント案件のコンテンツを改変したデモサイトとして制作しました。
Tasks Tasks
技術コンサルタント, ブランディング, CMS, レスポンシブ, サイトマップ設計, SEO, コピーライティング
Technologies Technologies
TypeScript, Astro, Tailwind CSS v4
Colors Colors
#a98466
#e0d6c8
#4d4d4d
#d1d1d1
#ededed
Top Page Top Page
フルスクリーンのヒーローセクションで「運命の出会いを、最上級のおもてなしで」というキャッチコピーと共に、幸せなカップルの写真を背景に配置。ファーストビューで訪問者の心を掴む設計です。続く実績セクションでは成婚率94%、成婚実績1,200件以上など、具体的な数値を大きく表示し信頼性を訴求。
成婚事例3件のカード表示、お客様の声3名分、料金プラン3段階（エントリー・ベーシック・プレミアム）、代表者紹介、無料カウンセリング予約フォームと、1ページで必要な情報を網羅。
各セクションは適度な余白とリズムで構成され、スクロールしながら自然に情報が入ってくる設計になっています。ベージュとゴールドを基調とした上品なカラーパレット、明朝体とゴシック体の使い分けにより、高級感と親しみやすさを両立。
Works Detail Page Works Detail Page
各カップルの成婚ストーリーを深く掘り下げたページ。ヘッダー画像で幸せな瞬間を大きく見せた後、お客様の年齢・職業・成婚までの期間・エリアなどの基本情報を明示。
本文では出会いのきっかけ、交際の経緯、カウンセラーのサポート内容などを紹介し、読者が自分の状況と重ね合わせられるよう工夫しています。ページ中盤には結婚式や前撮り写真をギャラリー形式で複数枚掲載。写真は遅延読み込みと最適化により、表示速度を損なわずに美しく表示。
関連するお客様の声がある場合は紐付けて表示し、信頼性をさらに高めています。ページ下部には他の成婚事例へのリンクや、無料カウンセリング予約のCTAを配置し、回遊性とコンバージョンを意識した設計です。
