Logo
Docsコンテンツ作成

テーマとデザインのカスタマイズ

色、フォント、背景、音楽、アニメーションまで招待状を自分好みにカスタマイズする方法をご紹介します。

13 min read
2026-03-11

テーマとデザインのカスタマイズ

招待状を自分だけのスタイルに仕上げましょう!色、フォント、背景、音楽、アニメーションまですべて変更できます。

テーマ設定の見つけ方

  1. 編集画面の左側エリア
  2. 上部タブの 「テーマ設定」 をクリック
  3. さまざまなカスタマイズオプションが表示されます

おすすめの順番: まずすべての内容を入力してから、テーマを設定しましょう。内容があってこそ、色やフォントが合っているか確認できます!


テーマプリセット

あらかじめ用意されたテーマを一括で適用できます。

16種類のプリセットが用意されています:

プリセット印象
Minimalすっきりシンプル
Classic伝統的でフォーマル
Brown温かく落ち着いた
Spring明るくさわやか
Blue涼やかで澄んだ
Lavender柔らかく淡い
Pinkかわいらしくロマンチック
Dark深くドラマチック
Vivid鮮やかで軽快
Lemon明るく元気な
Mint涼しくさっぱりした
Cherry華やかでお祝いらしい
Sage自然で心地よい
Charcoalモダンで落ち着いた
Slate落ち着いていて洗練された
Indigo深く上品な

プリセットを選んだ後に色やフォントなどを個別に変更することも、カスタム を選んですべての値を自分で指定することもできます。


色を変更する

カラーピッカー

テーマ設定で各色の項目をクリックすると、

  • カラーピッカー: 視覚的に色を選択
  • HEXコード: 直接入力(例: #FFB6C1)

変更できる色

項目適用範囲
Primary(メイン)タイトル、ボタン、強調ポイント、アイコン
Secondary(サブ)サブタイトル、補助要素
Accent(アクセント)特別に強調する要素
Background(背景)全体の背景色
Surface(表面)カード、セクションの背景
Text Primary本文テキスト
Text Secondary補助テキスト
Text Muted薄いテキスト、キャプション
Border区切り線、枠線

配色のコツ

ロマンチック: Primary ピンク(#FFB6C1)+ Background アイボリー(#FFFAF0)

モダン: Primary ブラック(#000000)+ Accent ゴールド(#FFD700)

ナチュラル: Primary グリーン(#8FBC8F)+ Background ベージュ(#F5F5DC)


フォント設定

グローバルフォント設定

招待状全体に適用される基本フォントです。

テーマ設定 > フォント選択で、

  1. フォント選択: ドロップダウンから好きな書体を選択
  2. 文字サイズスライダー: 全体のフォントサイズ比率を調整(0.5倍〜2.0倍)
  3. テキスト整列: 左揃え / 中央揃え / 右揃え(全体のデフォルト値)

日本語で編集する場合、21種類のフォントが使えます。よく使われるもの:

フォント印象おすすめ
Noto Sans JPすっきりモダン、可読性が最も高いモダンな招待状
Noto Serif JP落ち着いた明朝、正統的クラシックな招待状
Zen Maru Gothic丸みがあり柔らかい温かみのある招待状
Shippori Mincho端正で品のある明朝フォーマルな招待状
Klee One手書き風の楷書カジュアルな招待状
Yuji Mai味のある筆文字和風の招待状

このほかに Hina Mincho、Zen Old Mincho、Kaisei Tokumin、Sawarabi Mincho、Shippori Antique、Zen Antique Soft、M PLUS 1p、Yuji Boku などもあります。

欧文フォントも一部使えます(日本語の招待状でタイトルだけ欧文にする使い方):

  • DM Serif Display: 上品で洗練された
  • Parisienne: 華やかな筆記体
  • Homemade Apple: 手書き風
  • Limelight: モダンで印象的

フォントの一覧は編集中の言語によって変わります。 韓国語・ベトナム語にはそれぞれ専用のフォントがあるため、ドロップダウンにはその言語が正しく表示されるフォントだけが並びます。

フォントは最大2つまで使用できます。フォントを使いすぎると統一感が損なわれる可能性があります。

セクション別フォントオーバーライド

各セクションごとに、グローバル設定とは異なるフォント・サイズを指定できます!

左サイドバーで対象のセクションを選択した後、そのセクションの編集エリアで、

設定説明
個別フォントそのセクションだけ異なる書体を適用(グローバルフォントとは無関係)
個別サイズ倍率そのセクションだけ文字サイズ倍率を調整(グローバルサイズとは独立)
タイトルのみ適用オンにするとフォント・サイズがセクションタイトル(h2)にのみ適用され、本文はグローバル設定を維持
個別整列そのセクションのテキスト整列をグローバル設定と別に指定

活用例:

例1: 挨拶文だけ明朝体に

  • グローバルフォント: Noto Sans JP
  • 挨拶セクション: 個別フォント → ナヌムミョンジョ(フォーマルな印象)
  • 他のセクション: グローバル設定のまま

例2: メイン画面のタイトルだけ大きく

  • グローバルサイズ倍率: 1.0(基本)
  • メイン画面(Hero)セクション: 個別サイズ倍率 → 1.5 +「タイトルのみ適用」をオン
  • 結果: Heroタイトルだけ1.5倍大きく、本文は基本サイズを維持

例3: ギャラリーセクションだけ左揃え

  • グローバル整列: 中央
  • ギャラリーセクション: 個別整列 → 左
  • 他のセクション: 中央揃えを維持

グローバル vs セクション別設定の優先順位

セクション個別設定(あれば)> グローバル設定
  • セクションに個別フォントを指定すると → そのセクションは個別フォントを使用
  • セクションに個別設定がない場合 → グローバル設定が適用
  • 「タイトルのみ適用」をオンにすると → タイトルは個別設定、本文はグローバル設定

セクション別フォントオーバーライドは、特別な強調が必要なセクションにのみ使用することをおすすめします。全体の統一感を保ちながらポイントをつけられます!


レイアウトの選択

レイアウトは招待状全体の構造や雰囲気を決めます。選べるレイアウトはテンプレートのカテゴリーによって変わり、随時追加されています。個人向けの行事でよく使われるもの:

レイアウト特徴
Basic基本レイアウト、シンプルですっきり
Archアーチ型フレーム、上品な印象
Celebrationお祝いムード、華やかな装飾
DateReveal日付強調型、数字が際立つ
ElegantArch精巧なアーチ型、高級感
GoldBorderゴールドの縁取り、ラグジュアリー
ModernMinimalミニマル、余白を強調
Partyパーティーの雰囲気、躍動感
Polaroidポラロイド写真風
Romanticロマンチック、柔らかな曲線

レイアウトはメイン画面(Hero)と全体構造に影響します。テンプレート選択時に基本レイアウトが決まりますが、編集中に変更できます。


背景設定

背景パターン

さまざまな背景パターンを追加できます。

  • スタイル: 全面背景または枠のみ表示
  • 背景固定: スクロールしても背景が固定されるオプション
  • 24種類のパターン画像を提供(シンプルなグラデーションから和紙の質感まで)

背景ビデオ

動く背景エフェクトを追加できます。17種類が用意されています:

エフェクト説明
Blossom舞い落ちる花びらのアニメーション
Snow雪が降る効果
Confetti上から降り注ぐ紙吹雪
Aurora流れるオーロラの光
Firefliesゆらめく光の粒
Bubble浮かび上がるシャボン玉
Candleゆらめくキャンドルの灯り
Butterfly舞う蝶
Feather落ちる羽根

このほかにユーカリ、コンフェッティキャノン、色紙、パーティクル、電球などもあります。

  • ループ再生: 繰り返し再生の設定
  • 背景パターンとビデオは同時使用が可能

背景音楽

招待状を開くと音楽が自動再生されるように設定できます。

プリセット音楽

31曲が標準で用意されているので、音源を別途準備しなくても大丈夫です。例えば:

  • Acoustic Piano: 静かなピアノ、バラード系
  • Romantic Jazz: 温かく柔らかいジャズ
  • Sophisticated: 洗練されたアコースティック
  • Bossa Nova: 軽やかで爽やか
  • City Pop: レトロで軽快な雰囲気
  • Traditional: クラシックでフォーマルな印象
  • First Birthday: 明るく元気な一歳のお祝い向け

各曲はエディター上で試聴してから選べます。

カスタム音楽

音楽ファイルのURLを直接入力できます。

再生設定

設定説明
自動再生招待状を開くと自動でスタート(ブラウザのポリシーにより制限される場合あり)
ループ最後まで再生後、最初から繰り返し
音量0〜100%の音量調整スライダー

ほとんどのモバイルブラウザは、ユーザーのタップなしでの自動再生をブロックします。ゲストが招待状をタップすると音楽が再生されます。


スクロールアニメーション

スクロール時に各セクションが表示される効果を設定できます。

エフェクト説明
Slide下から上へスライドして表示
Blur-Fadeぼやけた状態から徐々にくっきりフェードイン
なし効果なしで即座に表示

オン/オフの切り替えでスクロールアニメーション全体を制御できます。


セクションフレーム

オーバルフレーム

セクションラッパーを オーバル(楕円) フレームで囲むことができます。

  • 不透明度(Opacity)スライダーでフレームの濃さを調整(0〜1)
  • セクションごとにフレームを無効化可能(「フレーム無効化」オプション)

テキスト整列

グローバル整列

テーマ設定で招待状全体の基本テキスト整列を選択:

  • 左揃え: モダンで雑誌のような印象
  • 中央揃え: 伝統的で安定感がある(デフォルト)
  • 右揃え: 特殊なデザイン向け

セクション別整列

各セクションでグローバル整列を上書きできます。例えば全体は中央揃えでも、挨拶文だけ左揃えに設定できます。


レスポンシブデザイン

すべてのテーマ設定はデスクトップとモバイルで自動的に最適化されます。

  • フォントサイズの自動調整
  • 画像サイズのレスポンシブ対応
  • 余白・間隔の自動調整
  • ボタンのタップ領域の最適化

モバイル確認のコツ:

  • 編集後は右側のプレビューで確認
  • 保存後は実際のスマートフォンでも確認しましょう

完了チェックリスト

  • テーマプリセットまたはカスタムカラーを選択
  • グローバルフォント&サイズを設定
  • 必要なセクションに個別フォント/サイズをオーバーライド
  • レイアウトスタイルを確認
  • 背景パターン/ビデオを設定(任意)
  • 背景音楽を設定(任意)
  • スクロールアニメーションを設定
  • デスクトップ+スマートフォンで確認
  • 保存!

お困りですか?

デザイン設定でお困りの場合は お問い合わせ までお問い合わせください!

次のステップ