Vesper テンプレート — 完全ガイド
Vesper は、Fotify ライブラリの 4 つ目のウルトラプレミアムテンプレートです。Atelier がフォーマルな活版印刷、Cinematic が映画ポスターのようなドラマ性、Marigold が 1970 年代ボヘミアンだとすると、Vesper は やわらかな現代ロマンス — ブラッシュのペーパー、イタリックの Cormorant 見出し、アーチ型フォトフレーム、ダイヤのオーナメント、そしてポラロイド風スクラップブック・コラージュです。
このガイドでは、Vesper の見た目、Vesper 固有のカスタマイズ項目、イベントでの有効化方法、そして招待状の各セクションに与えられる特別なデザイン処理を解説します。
標準テンプレートライブラリとピッカー UI の概要は、RSVP 招待状をカスタマイズする方法 をご覧ください。
Vesper が特別な理由
標準テンプレートは CSS 変数で色・フォント・エフェクトを制御し、基盤となるレイアウトは共通です。Vesper は異なります。セクション全体のレイアウトを、やわらかなロマンティック表現の手作りデザインに置き換え、独自のタイポグラフィ(Cormorant Garamond + Inter)を同梱し、テンプレート固有のカスタマイズ項目を提供します。
シグネチャーデザイン要素
- アーチ型フォトカバー — 3 種類の SVG クリップによるアーチシルエット(ゴシック / ラウンド / ガーデン)。カバー写真はアーチ内に表示され、その上にイタリックの Cormorant Garamond でカップル名、左右に "When / Where" の行が並びます。
- ダイヤのオーナメント — 小さな塗りつぶしダイヤ(♦)のオーナメントがセクション間、章タイトルの周囲、そして Ceremony と Reception の時刻の間にインラインで表示されます。ページ全体に通る編集的ディテールです。
- プルクオート・バンド — カバーとストーリーの間に、イタリックの Cormorant 大見出しの引用("Once in a while, love gives us a fairy tale")を載せたテラコッタの帯を任意で表示できます。Markdown 形式のアスタリスクで特定の単語を斜体にできます。
- Ceremony / Reception のツイン表示 — 2 つの大きなイタリック時刻表示("4 pm" / "6 pm")をダイヤ区切りで表示。最初の 2 つの旅程エントリーから自動で取得します。
- ポラロイド風スクラップブック・コラージュ — 写真は白い縁とやわらかな影を持つ、回転した重なり合うポラロイドフレームとして表示されます。レイアウトは 3 種類:polaroid / grid / single。
- やわらかなパステルパレット — やわらかな紙色と深いロマンティックなアクセントを組み合わせた、4 つの調整済みパレット:rose+terracotta、sage+sand、sky+indigo、lavender+plum。
- イタリック Cormorant Garamond のディスプレイ — すべてのタイトル、アイブロウ、プルクオートに使われる、エレガントでカリグラフィ調の斜体が Vesper の声です。本文は Inter で、現代的で読みやすく。
- ピルボタン — アクセントカラーの丸みのあるピル形 CTA。ホバーで反転します。カレンダー、レジストリ、RSVP、クロージングカードに使用。
- シネマ風パララックス — カバーのアーチ画像とストーリー見開き写真に
background-attachment: fixedを使い、コンテンツがスクロールしてもビューポートに固定されて見えます。 - クロージングバンド — テラコッタのフッターに、ダイヤで挟んだ罫線、"Hoping to celebrate with you!" のイタリック見出し、そしてアクセント上に紙色の RSVP ピルを配置します。
Vesper を選ぶタイミング
Vesper は、やわらかなロマンスが主役のイベント向けに作られています:
- チャペルウェディング、ガーデンウェディング、ヴィンヤードウェディング — ゴシックアーチは歴史ある会場に、ラウンドアーチはモダン建築に、ガーデンアーチは屋外挙式にフィットします
- 少人数婚(≤120 名) — 浮遊感のあるポラロイドスクラップブックが、小規模でも温かくパーソナルに伝わります
- 誓いの更新(Vow renewals) — 落ち着いたロマンティックなムードが、長く連れ添ったカップルに合います
- 婚約パーティー、ブライダルシャワー — パステルとイタリック見出しが、これらの関連お祝いでも美しく映えます
- 結婚記念の節目イベント — 10 年、25 年、50 年など、Atelier のフォーマルさよりやわらかな空気感にしたい場合
- 現代的なカップル — ポラロイドコラージュ + オーディオプレイリストの組み合わせが、ミレニアル/Gen-Z の美意識にマッチ
- 同性婚、再婚、ステップファミリー — 伝統/フォーマルに寄りすぎない、インクルーシブなソフトロマンス
カジュアルなパーティー(標準テンプレート推奨)、ブラックタイのガラ(Atelier 推奨)、モダン/エッジーなウェディング(Cinematic 推奨)、70 年代ボヘミアン(Marigold 推奨)には、あまり適しません。
イベントに Vesper を適用する
- イベントダッシュボードの Customize タブを開きます
- 標準テンプレートギャラリーを過ぎて、最下部の Premium セクションまでスクロールします
- Vesper カードをクリックします
- ピッカーにカスタマイズパネルが表示されるので、項目を設定します(詳細は下記)
- 保存します
標準テンプレートへ戻しても破壊的変更にはなりません。Vesper 固有の設定は別に保存されるため、切り替えて戻しても設定は保持されます。
プレミアム権限(Vesper を使えるのは誰?)
Vesper はプレミアム階層のテンプレートで、有料の権限が付与されたイベントでのみ保存できます:
- 有料(クレジット消費)イベント — 自動的に権限付与
- 有効なサブスクリプションがあるサブスクリプションイベント — 自動的に権限付与
- 無料イベント — ピッカー上では Vesper がロック表示され、アップグレードの案内が出ます。サーバー側は保存を 403 で拒否します
ロックは、ピッカー UI とサーバーの両方で強制されます。
カスタマイズ項目
Vesper では、Fotify の標準のカラー + フォント制御に加えて、テンプレート固有の 6 つの項目を提供します。
1. カバーのアイブロウ
カップル名の下に表示される、小さなイタリックの 1 行です。例:"Invite You To Celebrate Their Wedding"(デフォルト)、"Together with their families"、"Are getting married"、"Are tying the knot"。
2. プルクオート
カバーとストーリーセクションの間に表示される、大きなテラコッタ帯の引用です。アスタリスク で特定の単語を斜体にできます("Once in a while, love gives us a fairy tale")。空欄にすると、引用帯は表示されません。
3. カラーパレット
やわらかな紙色 + 深いアクセントの組み合わせ。4 つのパレット:
- Rose & Terracotta(デフォルト) — 王道のブラッシュウェディング
- Sage & Sand — ガーデン / 田園 / ハーブガーデン
- Sky & Indigo — モダンミニマル / 海辺
- Lavender & Plum — 夕暮れ / 秋 / オーベルジーヌ
4. アーチスタイル
カバーのアーチ型フォトフレーム。3 つのバリエーション:
- Gothic(デフォルト) — 尖頭の大聖堂アーチ。チャペルウェディング、歴史ある会場、石造りのクラシックな教会に合います
- Round — 古典的なローマ風半円。モダン建築、出入口、現代的な会場に合います
- Garden — やわらかい丸みのアーチ。屋外挙式、ガーデンウェディング、フラワーアーチに合います
5. フォトコラージュスタイル
ギャラリー写真の配置方法:
- Polaroid(デフォルト) — 白い縁の写真が回転しながら重なり合う、スクラップブック風
- Grid — 均一な 2 または 3 列グリッド。エディトリアル / クリーン
- Single — 大きなヒーロー画像 1 枚。ミニマル
6. ダイヤオーナメントを表示
セクション間、章タイトル周り、ceremony/reception 時刻の間に表示されるダイヤ(♦)オーナメントの切り替えです。デフォルトはオン。オフにすると、よりクリーンでミニマルな印象になります。
各セクションのデザイン処理
Cover
Vesper のカバーは標準ヘッダーをまるごと置き換えます:
- カップル名 — イタリックの Cormorant Garamond、大きく、中央揃え
- アイブロウ — 名前の下にイタリックの Cormorant サブタイトル
- アーチ写真 — 中央配置、パララックス付き(写真はビューポートに固定)
- When / Where — アーチ左右にイタリックのラベルと、日付 / 場所の値
- ダイヤオーナメント — アーチ下に小さな塗りつぶしダイヤ
- Ceremony / Reception のツイン表示 — 2 つのイタリック時刻表示をダイヤで区切って表示。最初の 2 つの旅程エントリーから取得
イベント写真が未設定の場合、アーチ内にはやわらかなグラデーション背景が表示されます。
プルクオート・バンド(任意)
pullQuote の項目を設定すると、カバーとセクション一覧の間に、全幅のテラコッタ帯が表示されます。アクセント紙の上に大きなイタリックの Cormorant Garamond を配置し、上下にダイヤ付きの罫線ディバイダーが入ります。アスタリスク(*)でテキストを斜体強調できます。
Story (This Is Us)
ダイヤオーナメント + イタリックの "This Is Us" タイトル + 最初のマイルストーン説明文が導入になり、その後に フォトコラージュ(設定に応じて polaroid / grid / single)が続きます。以降のマイルストーンは、写真 + イタリックの日付 + イタリックの Cormorant タイトル + 本文の交互見開きとして表示されます。
Countdown
ダイヤ + イタリック章タイトル + やわらかな紙色のタイル(ダイヤオーナメントで区切り)。各単位の値はイタリックの Cormorant Garamond、ラベルは Inter のスモールキャップ。
RSVP
ページ中央に、やわらかな紙色(別トーン)のカードを表示。標準 RSVP フォームの上にイタリックの締切を表示し、フォームは磨き込み(極細下線の入力、ピル送信)で再スタイルされます。
Gallery (Carousel)
選択したスタイルのフォトコラージュを表示します。Polaroid は重なり合うスクラップブック風、grid はエディトリアル、single はミニマルです。
Location
会場写真のアーチ表示(カバーのアーチスタイルと一致)の横に、会場住所、埋め込みマップ、行き方を載せた、やわらかな紙色(別トーン)のカードが配置されます。マップは極細枠線で角丸です。
Save the Date (Calendar)
アクセント枠線のピルボタン(Google / Apple / Outlook)が 3 つ表示されます。ホバーで塗りつぶしに反転します。
Itinerary
イタリックの Cormorant で日付見出し(中央揃え)を表示し、その下に全スケジュールが続きます。各エントリーは左に Cormorant のディスプレイ時刻、右にイベント詳細を配置。
Gifts
アクセント反転の帯の上に、やわらかな紙色のカードを 3 枚(Registries / Monetary / Charity)表示。各カードにはイタリックのタイトル、本文説明、外部リンク / コピー操作のためのアクセントのピルボタンが含まれます。
Event Details
制作ノート風の積み重ね表示:ドレスコードは極細罫線に挟まれた中央のイタリック Cormorant プルクオートとして、宿泊はやわらかな紙色カードとして、交通はコンパクトな行として、FAQ はイタリックの Q & A(回答は極細左インデント)として表示されます。
Message
ホストの招待文は "A Word from the Hosts" のアイブロウ付きで表示され、最初の長い段落の先頭にはイタリックの Cormorant Garamond のドロップキャップが入ります。本文は Inter。
Closing band
テラコッタのフッターに、ダイヤで挟んだ罫線、"Hoping to celebrate with you!" のイタリック見出し、そしてアクセント上に紙色の RSVP ピルボタンを表示します。
継承されるセクション(専用レイアウトにならないもの)
一部のセクションはデフォルトのキットでレンダリングされ、Vesper の polish レイヤーを継承します:
- Photo Upload — ピル型のアップロードボタン、極細下線の入力
- QR Code — アクセント枠線の QR プレート
- Table Assignment — ピル型の検索/CTA ボタン
- Custom sections — イタリックの Cormorant 見出し、Inter 本文、やわらかなカード
polish レイヤーにより、全面的なレイアウト書き換えなしでもテンプレートに馴染む見た目になります。
ベータ版ステータス
Vesper は Atelier、Cinematic、Marigold と並んで beta として提供されています。意味するところは次のとおりです:
- 本番利用に十分安定 — 10 の専用セクションと継承セクション全体でテスト済み
- 進化する可能性 — 利用データに基づき、アーチ形状の微調整、パレット追加、ポラロイドの回転リズムの磨き込みを行う場合があります
- さらにプレミアムテンプレート追加予定 — Riviera(海辺のアールデコ)と Onyx(スピークイージー・ノワール)はロードマップ上にあります
磨き込みが必要そうな点を見つけたら、ダッシュボードのヘルプウィジェットからフィードバックをお送りください。
よくある質問
Q: 結婚式以外のイベントでも Vesper を使えますか? A: はい。Vesper のやわらかなロマンティックな雰囲気は、結婚記念パーティー、誓いの更新、婚約パーティー、ブライダルシャワー、節目のファミリーの集まりに適しています。カバーのアイブロウを用途に合わせて("Celebrating 25 Years"、"Bridal Shower" など)設定してください。
Q: Vesper と Marigold の違いは何ですか? A: どちらも温かみがありエディトリアルですが、Vesper は ソフトで現代的(ブラッシュ + イタリック Cormorant + アーチ写真 + ポラロイド)で、Marigold は 温かくボヘミアン(クリーム + コンデンスドのスラブセリフ + 手描きイラスト + 1970 年代マガジン)です。Vesper は Pinterest 2025、Marigold は Vogue 1975 のような印象です。
Q: ポラロイドの回転はモバイルでも機能しますか? A: 760px 未満の画面では、ポラロイドは中央揃えの折り返しレイアウトに変わり、小さな回転を一定に保ちます。デスクトップの重なり構図はなくなりますが、スクラップブックらしさは維持されます。
Q: 自分のアーチ形状をアップロードできますか? A: beta ではできません。3 つのアーチ(gothic / round / garden)は手調整された SVG の clip-path です。将来のリリースでカスタムアーチアップロードを追加する可能性があります。
Q: プルクオートが斜体ではなくアスタリスク表示になります
A: Markdown 形式の斜体は、単一のアスタリスクを使います:*love gives us* は love gives us と表示されます。強調したい語句を、必ずアスタリスクのペアで囲んでください。
Q: Vesper はオーディオプレイヤー / 音楽背景に対応していますか? A: はい。Fotify の標準 BackgroundMusicPlayer は、Vesper を含むすべてのプレミアムテンプレートで維持されています。イベント設定に YouTube URL を追加すると有効になります。
Q: ダイヤを無効にできますか? A: はい。カスタマイズパネルで "Show diamond ornaments" をオフに切り替えてください。セクション間、章ヘッダー、カウントダウンタイル間のダイヤがすべて消え、よりすっきりしたソフトロマンスの印象になります。
次のステップ
- ピッカー UI と、イベントでプレミアムテンプレートを有効化する方法は RSVP 招待状をカスタマイズする方法 をご覧ください
- 他の 3 つのプレミアムテンプレート Atelier、Cinematic、Marigold と比較する
- プレミアムテンプレートの料金は pricing page を参照
- 結婚式を予定している場合は、Fotify の結婚式向け写真共有アプリ もご覧ください
お困りですか?ダッシュボード内のヘルプウィジェットからお気軽にお問い合わせください。
この記事は役に立ちましたか?