9 min 読むintermediate最終更新日: 2026年5月11日

Cinematic テンプレート — 完全ガイド

Cinematic は、Fotify ライブラリで 2 つ目の超プレミアムテンプレートです。Atelier がレタープレス(活版印刷)風のステーショナリーから着想を得ているのに対し、Cinematic は映画ポスター、タイトルカード、編集系の映画雑誌の表現を取り入れています。全面写真(フルブリード)、躍動感のあるディスプレイ書体、レターボックスの黒帯、フレームカウンター、チケット半券風ボタンなどが特徴です。

このガイドでは、Cinematic の見た目、Cinematic 専用のカスタマイズ項目、イベントでのアンロック方法、そして招待状の各セクションに施される特別なデザイン処理について解説します。

標準テンプレートライブラリとピッカー UI の概要は、RSVP 招待状をカスタマイズする方法 をご覧ください。

Cinematic が他と違う点

標準テンプレートは CSS 変数でカラー、フォント、エフェクトを制御しており、いずれも同じ基本レイアウトを共有しています。Cinematic はそこが違います。セクション全体のレイアウトを、手作業で作り込んだ映画ポスター風の処理に置き換え、独自のディスプレイ書体(Bebas Neue + Inter)を同梱し、標準の色・フォント設定に加えてテンプレート固有のカスタマイズ項目を提供します。

シグネチャーデザイン要素

  • レターボックス構成のシネマティックなカバー — 全面(フルブリード)のヒーロー写真に、スポットライトのような色味(Color Grade)を重ね、上下の黒帯に「"FOTIFY PRESENTS"」と日付/場所メタデータを配置。タイトルは Title Weight 設定に応じて Bebas Neue でスケール
  • 躍動感のあるディスプレイタイポグラフィ — すべての見出しに Bebas Neue(定番の映画ポスター書体)、本文に Inter を採用し、見せ場のドラマ性を強調
  • カラーグレーディングされた写真 — ページ上のすべての写真に、Color Grade(Golden Hour / Cool Blue / Monochrome / Vivid)に合わせた微細な色味を付与
  • 随所のフレームカウンター — ストーリー章を Frame Numbers 設定に応じて「"FR. 01 / 12"」または「"ACT I / XII"」のように番号付け
  • スレートマーカー装飾 — セクション間の区切りとしてカチンコ(clapperboard)の SVG を使用
  • 35mm フィルムグレインのオーバーレイ — ページ全体に控えめなアニメーション粒子を重ねる。オフに切り替え可能
  • チケット半券風のカレンダーボタン — 穴あきの映画チケット形状に、カレンダープロバイダーごとのシリアル番号を付与
  • フィルムストリップ・ギャラリー — ギャラリーセクションはレターボックスのスチルに、上下のスプロケット風レールを追加。各フレームに「"SC. 03 / 12"」キャプション
  • クレジットロール風の旅程 — 旅程は「"Running Order"」として表示され、日ごとの見出し(「"DAY 01 / FRIDAY"」)、フレームカウンター風の時刻、クレジット風のイベントタイトルで構成
  • 制作クレジット風のギフト — レジストリ(Registry)セクションは映画のエンドクレジットのように表示され、部門ラベル(「"PRODUCTION · REGISTRIES"」「"FINANCE · GIFTS OF FUNDS"」)を使用
  • エスタブリッシングショット風のロケーション — 地図はコーナーブラケット付きのビューファインダーフレーム内に表示。会場住所は横のスレートカードに配置

Cinematic を選ぶタイミング

Cinematic は、招待状自体を「一本の作品」のように演出したいイベント向けです。到着の瞬間を作り、壁に貼られたポスターのような存在感を目指します。

  • モダンな結婚式 — 特にデスティネーション、山でのウェディングなど。「伝統的なステーショナリー」より「ムードボード的な映画ポスター」にしたい場合に最適
  • 節目の誕生日(40/50/60 歳など) — 繊細な装飾のステーショナリーより、Cinematic のドラマ性が節目の祝宴に合います
  • 記念パーティー/バウリニューアル — ストーリーを Act(幕)として見せる構成が、長い年月のタイムラインを美しく読ませます
  • プレミア、ローンチ、オープニング — ギャラリーオープニング、映画上映、プロダクトローンチ、レストラン開業など
  • 企業のガラ/節目の会社イベント — 年次ガラディナー、IPO パーティー、創業記念など
  • 強いビジュアルアイデンティティのあるカクテルパーティー — ハロウィンディナー、年越しガラ、テーマ性のあるコスチュームナイトなど

一方で、カジュアルな集まり、子どもの誕生日、ガーデンシャワー、また「シネマティック」よりも「親密さ」や「手仕事感」を優先したい場合には、あまり適しません。

イベントに Cinematic を適用する

  1. イベントダッシュボードの Customize タブを開きます
  2. 標準テンプレートギャラリーを下へスクロールし、最下部の Premium セクションへ移動します
  3. Cinematic カードをクリックします
  4. ピッカーでカスタマイズパネルが表示されるので、項目を設定します(下記参照)
  5. 保存します

いつでも標準テンプレートへ戻せます(非破壊)。イベント内容は入力したまま保持されます。プレミアム固有の設定項目は別途保存されるため、後から戻しても Cinematic の設定はそのまま残ります。

Note: Cinematic は beta です。今後のリリースでさらにプレミアムテンプレートを提供予定で、初期フィードバックに基づき Cinematic のタイポグラフィや細部を調整する可能性があります。

プレミアム権限(Cinematic を使える人)

Cinematic はプレミアム階層のテンプレートで、保存できるのは有料の権限が付与されたイベントのみです。

  • 有料(クレジット消費)イベント — イベントクレジットを使用しているイベントは自動的に権限対象です
  • 有効なサブスクリプションのイベント — アクティブ期間または猶予期間中のサブスクリプションに紐づくイベントは権限対象です
  • 無料イベント — ピッカーでは Cinematic がロック表示され、アップグレードのヒントが表示されます。閲覧はできますが、サーバー側で保存が 403 で拒否されます

また、有料権限のないイベントではピッカー自体も無効になり、ツールチップで 料金ページ が案内されます。

カスタマイズ項目

Cinematic では、Fotify の標準のカラー+フォント設定に加えて、テンプレート固有の 7 つの項目を利用できます。

1. タイトルカードテキスト

シネマティックカバーに表示される見出しです。空欄にするとイベント名を使用します。イベント名より短く、よりドラマチックなタイトルにしたいときに便利です。例:イベント名が「"Anna & Frederick's wedding weekend"」の場合、タイトルカードを「"Anna & Frederick"」にできます。

2. タグライン

タイトルの上に表示される小型大文字(small-caps)の 1 行です。例:「"a celebration in two acts"」「"the love story, continued"」「"a feature presentation"」「"now playing for one night only"」。空欄にすると非表示になります。

3. カラーグレード

カバーと見出しにかかる、スポットライトのような色味です。4 種類あります。

  • Golden Hour(デフォルト) — 暖かいアンバー。シネマティックなゴールデンアワーの温もり
  • Cool Blue — シアン/ネイビー。ムーディーで Drive を想起するトーン
  • Monochrome — 銀幕の白黒。純粋なコントラスト
  • Vivid — 強い赤のポスターアクセント。A24/Wes Anderson 的な雰囲気

4. ペーパートーン

ページ全体のベースとなる色調です。

  • Obsidian(デフォルト) — 深い黒。クラシックな劇場感
  • Bone — アイボリー。印刷された映画ポスターの質感
  • Gravel — ダークグレー。控えめで重厚

カラーグレードはペーパートーンと相互作用します。Obsidian × Golden Hour がデフォルトで、最も「映画らしさ」を感じやすい組み合わせです。Bone × Vivid は大胆なポスタールックになります。

5. フレーム番号

章やクレジットの番号表記スタイルです。

  • Decimal (#01) — モダンなフレームカウンター美学
  • Roman (I, II) — 幕構成のフォーマルさ
  • Hidden — 章番号なしでクリーンなカバー

6. タイトルウェイト

タイトルカードの表示サイズです。

  • Display — 程よいサイズでシネマティック。長いタイトルに向きます
  • Banner(デフォルト) — 大きく、ポスター級
  • Epic — 端から端まで、最大のインパクト。短いタイトルに最適

7. フィルムグレインオーバーレイ

控えめな 35mm フィルムグレインのオーバーレイを切り替えます。デフォルトはオンです。古い端末でアニメーションが重く感じる場合は、オフにすると改善することがあります。

各セクションの扱い

Cover

Cinematic のカバーは、標準ヘッダーを全面的に置き換えます。全面(フルブリード)の写真(イベント招待状の写真)として表示され、次の要素が含まれます。

  • 上下のレターボックス黒帯に「"FOTIFY PRESENTS"」/「"A FEATURE CELEBRATION"」/日付/場所を表示
  • 選択した Color Grade に合わせた、カラーグレーディングされたスポットライト
  • タイトル上部に small-caps のタグライン
  • タイトル(選択した Title Weight の Bebas Neue)
  • 下部にスレートマーカー装飾+日付+会場

イベント写真が設定されていない場合、カバーはペーパートーンの背景にフォールバックし、スポットライトのグレードは適用されたままになります。

Story

各マイルストーンは Act(幕)になり、左右交互の写真配置、フレームカウンター(「"FR. 03 / 12"」または「"ACT III"」)、21:9 のカラーグレードされたレターボックス写真、Bebas Neue の Act タイトル、Inter の本文で構成されます。

Countdown

各ユニット(Days / Hours / Minutes / Seconds)は frame tile として表示され、左上の「"FR. 01"」タグ、Bebas Neue の大きな数字、下部の small-caps ラベルを備えます。極細ボーダーと、フィルムストックを感じさせる控えめなグラデーションが入ります。

RSVP

casting-call card として表示されます。上部にスレートマーカーのクラウン、「"CASTING CALL"」のアイブロウ、Bebas Neue の「You're Cast」タイトル、small-caps italic の締切表示が続き、標準 RSVP フォームが極細の入力欄と、アクセントボーダーのチケット半券風送信ボタンで再スキンされます。

Gallery (Carousel)

filmstrip レイアウトです。上下にスプロケット風レール、21:9 のヒーロースチル、その下に 3 枚グリッドの追加スチルが並びます。各スチルには「"SC. 03 / 12"」キャプションタグが付与され、フィルムプリントらしさを出すための控えめなコントラスト/彩度フィルターが適用されます。

Location

establishing shot として表示されます。地図はコーナーブラケット付きのビューファインダーフレーム内に表示され、隣に「"ON LOCATION"」アイブロウ、Bebas Neue の住所、そして極細の罫線を伴う案内(directions)ブロックを載せたスレートカードが配置されます。

Save the Date (Calendar)

Google / Apple / Outlook の 3 つの ticket-stub ボタンです。それぞれに「"NO. 001"」シリアル番号、ミシン目ドット、ホバー時のアクセント切り替えがあります。

Itinerary

Running Order として表示されます。各日には「"DAY 01 / FRIDAY"」ヘッダーが付き、個別イベントはクレジットロールの行として縦に並びます。行間には極細の罫線が入り、small-caps のフレームカウンター、Bebas Neue の時刻、右側にイベント詳細が配置されます。

Gifts

Production Credits レイアウトです。3 つの部門ブロック(Registries / Monetary / Charity)に分かれ、それぞれ「"PRODUCTION · REGISTRIES"」のような small-caps ラベル、番号付きアイテム(decimal counters)、Bebas Neue のアイテムタイトル、外部リンクとコピー用のアクセントボーダー付きアイコンボタンが表示されます。

Event Details

Production Notes として表示されます。ドレスコードは、極細の罫線に挟まれた Bebas Neue の大文字プルクオートになります。宿泊は(「"HOTEL"」などの)コーナータグ付きスレートカードとして表示されます。交通はコールシート風の行として表示されます。FAQ は脚本調の Q & A となり、質問には「"Q · "」のアクセント接頭辞、回答には左側の極細ラインが付きます。

Message

ホストの招待文は、small-caps の「"OPENING MONOLOGUE"」アイブロウと、CSS ::first-letter の Bebas Neue ドロップキャップ(アクセントカラー)で表示されます。本文は Inter を 1.08rem で、上映プログラムのような読みやすさを意識しています。

継承されるセクション(専用レイアウトがないもの)

一部のセクションはデフォルトのキットでレンダリングされ、Cinematic のポリッシュレイヤーを継承します。

  • Photo Upload — アクセントボーダーのチケット半券風ボタン、極細の入力欄
  • QR Code — QR の周囲にアクセントボーダーのプレート
  • Table Assignment — 検索/CTA ボタンをチケット半券風に処理
  • Custom sections — Bebas Neue の見出し、Inter の本文、極細の罫線

ポリッシュレイヤーにより、レイアウトを全面的に書き換えなくてもテンプレートの一体感が出ます。需要があれば、今後のリリースでこれらにも専用オーバーライドを追加します。

ベータ版について

Cinematic は Atelier と並行して beta として提供されています。これは次の意味です。

  • 本番利用に安定 — 専用 10 セクションと継承セクション全体でテスト済みです
  • 進化する可能性 — 利用データに基づき、タイポグラフィ(より重いディスプレイウェイト)、カラーグレードの追加、スポットライト効果の調整などを行う場合があります
  • さらなるプレミアムテンプレートを追加予定 — 次は Maison(手書きレタリング)、Riviera(海沿いアールデコ)、Onyx(スピークイージー・ノワール)を予定しています

改善すべき点を見つけた場合は、ダッシュボード内のヘルプウィジェットからフィードバックをお送りください。

よくある質問

Q: デスティネーションではない結婚式でも Cinematic は使えますか? A: はい。Cinematic はどのモダンウェディングにも適しており、特に「伝統的なステーショナリー」よりも「ポスター級の雰囲気」を出したい場合におすすめです。

Q: モバイルではどのように表示されますか? A: モバイルファーストで設計されています。レターボックスの黒帯は維持され、タイトルは収まるように縮小され、フィルムストリップは 1 カラムに畳まれ、Running Order の旅程は縦型表示になります。すべてのセクションが完全にレスポンシブです。

Q: Cinematic に切り替えるとデータは失われますか? A: いいえ。テンプレート切り替え時も、イベント内容(イベント名、写真、ストーリー、RSVP フォーム、ギフト、旅程など)はそのまま保持されます。Cinematic 固有のカスタマイズ(タイトルカードテキスト、カラーグレードなど)も、切り替えて戻した際に保持されます。

Q: 自分の hex コードでカラーグレードをカスタマイズできますか? A: ベータ期間中はできません。4 つのグレード(Golden Hour / Cool Blue / Monochrome / Vivid)は、映画らしさが出るように手作業で調整しています。特定のパレットが必要な場合は、カスタムのプレミアムテンプレートについてお問い合わせください。

Q: 結婚式以外(企業ガラ、節目の誕生日など)でも Cinematic は使えますか? A: はい。Title Card Text、Tagline、Act 構成の Story は、どのイベント形式にも対応します。Tagline を「"a celebration in two acts"」ではなく、「"a milestone celebration"」や「"annual gala"」のように設定してください。

Q: フィルムグレインのオーバーレイは古いスマホを遅くしませんか? A: GPU アクセラレーションを利用しており、2018 年のミドルレンジ Android までテスト済みです。非常に古い端末の利用者が多い場合は、カスタマイズパネルで Film Grain をオフにできます。

Q: Cinematic でもゲストは写真アップロードや QR コードを使えますか? A: はい。Fotify のすべての機能(写真アップロード、QR コード、RSVP、座席割り当て、カスタムセクション)は引き続き利用でき、ポリッシュレイヤーを通じて Cinematic のタイポグラフィと外観を継承します。

次のステップ

お困りですか? ダッシュボード内のヘルプウィジェットからご連絡ください。

この記事は役に立ちましたか?

関連する記事