ウェディング/イベントUI設計ガイド -- "Elegant Moment"
ウェディングサイトのUIは「特別な瞬間」を演出する舞台装置だ。Squarespace Wedding のような優雅さと静けさ。一画面に一つのメッセージ、スクロールごとに新しい物語。スクリプト書体で名前を飾り、アンティークゴールドで格式を添える。
本テンプレートは Squarespace Wedding から着想を得た「Elegant Moment」設計システムを定義する。クリーム色の温かい背景にアンティークゴールドのアクセント、セリフとスクリプトの優雅なタイポグラフィが、人生最良の日にふさわしい舞台を作る。
核心となる設計思想
一画面一メッセージ。名前が最も目立ち、日付と会場が即座に見つかり、RSVPが迷わず完了できる。色は3色（クリーム + チャコール + ゴールド）に制限し、写真とタイポグラフィだけで語る映画のような構成。
1. デザイン哲学 -- 「優雅さと特別」
Squarespace Wedding のアプローチ
Squarespace の結婚式テンプレートは、余白の贅沢さとフォントの優雅さで知られる。背景はクリームか白、テキストは中央揃え、セクション間に大きなスペース。全てが「特別な日」のために設計されている。
ウェディング招待プレビュー
このテンプレートの適用範囲
| カテゴリ | 適合度 | 具体例 |
|---|---|---|
| 結婚式招待サイト | 最適 | ペアサイト、招待状、RSVP |
| 記念日サイト | 最適 | 周年祝い、お祝いページ |
| 上品なイベント | 適合 | ガラパーティー、式典、授賞式 |
| 出産祝い | 適合 | ベビーシャワー、お宮参り |
| ビジネスイベント | 非推奨 | CORPORATE を使用 |
| パーティー/フェス | 非推奨 | カジュアルすぎる場合は別テンプレート |
2. クリーム & ゴールド配色
優雅さの3色
ELEGANT PALETTE
3. 優雅なタイポグラフィ
フォントシステム
Haruka & Takeshi
Names -- Cormorant Garamond, 72px, weight 300
OUR STORY
Heading 1 -- Cormorant, 36px, uppercase, letter-spacing 3px
DECEMBER 21, 2026
Date -- 18px, uppercase, letter-spacing 4px, gold
Separator -- 60px gold line (#c9b99a)
4. コンポーネント詳細
ゴールドセパレーターと装飾
短いゴールドライン
&
装飾的アンパサンド
フェードゴールドライン
ボタンスタイル
RSVP
Registry
5. レイアウト原則
狭い単一カラム
ウェディングサイトは最大幅 800px の単一カラム。中央揃えで縦に流れる構成。
| 要素 | 値 |
|---|---|
| 最大コンテンツ幅 | 800px |
| カラム数 | 1（基本単一カラム） |
| テキスト揃え | 中央 |
| セクション間余白 | 96-128px |
| サイドパディング | 48px (desktop) / 24px (mobile) |
6. 深度と影
影は使わない。深度は背景色の切り替え（#ffffff / #faf8f5 / #f0ebe3）とゴールドラインで表現する。写真の被写界深度が唯一の視覚的奥行き。
7. Do's and Don'ts
Do
- 名前を最も目立つ要素にする
- 日付と会場を明確に配置
- ゴールドセパレーターで優雅に区切る
- 中央揃えで格式ある印象
- 1セクション1メッセージ
- letter-spacing 広めで上品に
Don't
- ポップ体やカジュアルフォントを使わない
- 色を3色以上使わない
- 角丸を使わない（0pxが基本）
- 情報を詰め込まない
- 派手なアニメーションを入れない
- スクリプト書体を本文に使わない
8. レスポンシブ対応
| 画面サイズ | 名前サイズ | レイアウト | ギャラリー |
|---|---|---|---|
| Mobile (<640px) | 36px | 1列、余白縮小 | スワイプ |
| Tablet (640-1024px) | 48px | 1列、余白拡大 | グリッド |
| Desktop (1024px+) | 72px | 1列 (max 800px) | グリッド |
9. プロンプトガイド
クイックカラーリファレンス
Background: #faf8f5 | Linen: #f0ebe3
Text: #3d3a35 | Secondary: #7a7570 | Muted: #b0aaa3
Gold: #8b7355 | Light Gold: #c9b99a | Border: #e8e0d4Stitch向けプロンプト例
「ウェディング招待サイトを作成してください。
DESIGN.md の WEDDING_EVENT プリセットに従ってください。
背景 #faf8f5、最大幅 800px、全て中央揃え。
名前: Cormorant Garamond, 72px, weight 300, #3d3a35。
アンパサンド: 48px, weight 300, #8b7355。
日付: 18px, uppercase, letter-spacing 4px, #8b7355。
セパレーター: 60px gold line (#c9b99a)。
RSVP: border-bottom入力欄、ゴールドラベル、角丸0pxボタン。」