5 min 読むintermediate最終更新日: 2026年7月15日

アップロードページのデザインをカスタマイズする方法

ゲストがQRコードをスキャンすると、最初に表示されるのがアップロードページです。Fotifyの「Upload Page Design」機能を使えば、イベントの雰囲気に合わせて見た目をカスタマイズできます。用意されたテンプレートから選んだり、色やフォントを調整したり、ページレイアウトと写真の形を選んだり、アップロード体験の各所でゲストに表示されるテキストをパーソナライズしたりできます。

この機能はFreeプランを含むすべてのプランで利用できます。

Step 1: アップロードページデザイナーを開く

  1. Dashboard に移動し、イベントを選択します
  2. サイドバーで Photos をクリックします
  3. Actions セクションで Upload Page Design をクリックします
  4. ライブプレビュー付きのデザインエディターが開きます

Step 2: テンプレートを選ぶ

テンプレートギャラリーでは、カテゴリー別に整理された、事前にデザインされたアップロードページのスタイルから選択できます。

  • All — 利用可能なテンプレートをすべて閲覧
  • Wedding — 上品でロマンチックなデザイン
  • Party — 楽しく鮮やかなスタイル
  • Corporate — すっきりしたプロフェッショナルなレイアウト
  • Elegant — 洗練された落ち着いたデザイン
  • Minimal — シンプルで気が散りにくいスタイル
  • Fun — 遊び心のあるカラフルなオプション

任意のテンプレートをクリックすると、すぐに適用されます。右側のライブプレビューはリアルタイムで更新されるため、保存する前に見た目を確認できます。

Step 3: 色をカスタマイズする

テンプレートを選択した後、6つのカラー設定を微調整できます。

Color SettingWhat It Controls
Backgroundページ全体の背景色
Surfaceカードやコンテンツ領域の背景
Text主要な本文テキストと見出しの色
Accent強調要素と装飾アクセント
Button Backgroundアップロードボタンの塗りつぶし色
Button Textボタン上のテキスト色

任意のカラースウォッチをクリックしてカラーピッカーを開くか、正確なhexコードを入力してください。変更はプレビューに即時反映されます。

Step 4: タイポグラフィをカスタマイズする

イベントの個性に合うフォントを選びましょう。

  • Heading Font — イベントタイトルとセクション見出しに使用
  • Body Font — 説明、ラベル、手順に使用

どちらもGoogle Fontsを使用するため、ゲストはどのデバイスでも同じフォントで表示されます。相性の良い組み合わせになるよう厳選されたリストから選べます。

Step 5: レイアウトオプションを調整する

ページの構成とスタイルを微調整します。

ページレイアウト

アップロードページ全体の構成を選びます。

  • Classic card — イベント写真を枠付きボックスに収めた、中央配置のカードレイアウト(デフォルト)
  • Hero photo — イベント写真がページ上部いっぱいに表示され、その上にイベント名が重なります
  • Minimal (no card) — カード枠を取り除き、コンテンツが背景の上に直接配置されます

Heroレイアウトを使うにはイベント写真が必要です。イベント写真が設定されていない場合、ページは自動的にClassicレイアウトにフォールバックします。

写真の形

ClassicとMinimalのレイアウトでは、イベント写真の枠の形を選べます。

  • Rounded — 角丸の長方形(デフォルト)
  • Arch — アーチ型の窓のような形。結婚式で人気です
  • Circle — 円形の枠
  • Polaroid — 少し傾いた白いインスタント写真風の枠

この設定はHeroレイアウトには適用されません。このレイアウトでは写真が全幅で表示されます。

ヘッダースタイル

イベントタイトルとブランディング領域の見た目を選びます。

  • Default — イベント名を表示する標準ヘッダー
  • Hero — 大きく大胆なヘッダー領域
  • Minimal — コンパクトで控えめなヘッダー
  • Centered — すべて中央揃えでバランスの取れた見た目

ボタンスタイル

操作ボタンの形状を選びます。

  • Rounded — 角が少し丸い
  • Pill — 両端が完全に丸い
  • Square — シャープな角でモダンな印象

アップロードエリアのスタイル

写真のドロップゾーンの表示方法を調整します。

  • Default — 標準の破線枠
  • Bordered — 境界がわかりやすい実線の枠
  • Gradient — さりげないグラデーション背景
  • Minimal — ほぼ目立たない、すっきりした見た目

背景パターン

ページ背景に控えめな質感を追加します。

  • None — 単色のみ
  • Dots — ドットパターンのオーバーレイ
  • Grid — グリッド線パターン
  • Diagonal — 斜めストライプパターン
  • Waves — やわらかい波形の模様
  • Confetti — アクセントカラーで散りばめたドット。パーティーにぴったりです

パターンはテンプレートの色に合わせて自動的に調整され、テンプレートによってはグラデーション背景も使われます。

イベント写真

アップロードページ上部に表示されるイベント写真の見せ方を選びます。

  • 切り抜いて全体に表示 — 写真が領域全体を埋めるように切り抜かれて表示されます(デフォルト)。
  • 写真全体を表示 — 写真全体が切り抜かれずに表示されます。写真の周囲にできる余白にはページ背景が使われます。
  • 背景をぼかして全体を表示 — 写真全体が、その写真自体をやわらかくぼかした複製の上に重ねて表示されます。切り抜かれることがなく、余白も生じません。

この設定は、イベント写真が設定されているイベントにのみ適用されます。

Step 6: テキスト&メッセージをカスタマイズする

アップロード体験中にゲストに表示される、3つのテキスト項目をパーソナライズできます。

Custom Page Description

アップロードページでイベント名の下に表示されるテキストです。デフォルトではゲストに「"Share your photo with a message!"」が表示されますが、任意の文言(最大200文字)に置き換えられます。

活用例:

  • 写真の用途を説明する(例: "Upload your best moments from tonight's gala!")
  • ゲスト向けの背景情報や手順を追加する
  • URLを含める — 入力したリンクはページ上で自動的にクリック可能なリンクに変換されます

Custom Success Title

写真のアップロードが成功した後にゲストが目にする見出しです。デフォルトでは「"Thank you for sharing!"」ですが、任意のタイトル(最大100文字)を設定できます。

活用例:

  • イベントの雰囲気に合わせる(例: "You're amazing!" や "Photo received!")
  • 確認画面に個人的な一言を加える

Custom Success Message

確認画面で、成功タイトルの下に表示される長めのメッセージです。最大500文字で、次のような内容を記載できます。

  • 協力してくれたゲストへのお礼
  • 写真がどこで、いつ表示されるかの案内
  • 楽しい一言や個人的なメモ
  • イベント中に追加でアップロードするようリマインド

いずれの項目も空欄のままにすると、デフォルトのテキストが使用されます。

ゲストのアップロード品質

Upload Quality セクションでは、ゲストがアップロード時に選べる写真の品質オプションを管理できます。

  • Guests choose (both options) — ゲストにOptimizedとFull HDのトグルが表示されます(デフォルトの動作)。どちらを初期選択にするかも設定できます。
  • Optimized only — トグルは非表示になり、すべての写真がOptimized品質でアップロードされます。
  • Full HD only — トグルは非表示になり、すべての写真がFull HDでアップロードされます。これにより、すべての写真を最高品質で確実に受け取れます。

注: Full HDでのアップロードは有料イベントでのみ利用できます。Freeプランのイベントでは、この設定に関わらずゲストは常にOptimized品質でアップロードします。

2つの品質モードの比較については、Optimized vs Full HDをご覧ください。

アップロード画面に写真を表示

アップロードページデザイン設定の最下部に、**「アップロード画面にアルバムリンクを表示」**のトグルがあります。

有効にすると、アップロードページに公開アルバムの最近の写真がライブプレビューで表示され、さらに全ての写真を表示するリンクも表示されます。これにより、ゲストはアップロードページ上でそのままイベント写真を閲覧でき、参加意欲が高まるほか、他の参加者の写真も見つけやすくなります。

この設定は、フォト統計カード(写真 → フォト統計)内の公開アルバムセクションからも管理できます。こちらでは**「アップロード画面に写真を表示」**として表示され、共有を有効にすると既定でオンになります。

注: プレビューを表示するには、公開アルバム共有を有効にする必要があります。まだ設定していない場合は、まず公開アルバムセクションで公開アルバム共有をオンにしてください。

Step 7: 保存してプレビューする

  • Save をクリックしてデザイン変更を適用します
  • Preview をクリックすると、実際のアップロードページが新しいブラウザタブで開き、ゲストが体験する内容をそのまま確認できます
  • テンプレートのデフォルトに戻したい場合は Reset を使用します

デザインはイベントごとに保存されます。各イベントでそれぞれ異なるアップロードページのスタイルを設定できます。

よくある質問

Q: アップロードページデザインはどのプランに含まれますか? A: 無料プランを含む全プランで利用できます。すべてのイベントでアップロードページをカスタマイズできます。

Q: イベント開始後にデザインを変更できますか? A: はい!ゲストがアップロード中であっても、いつでもアップロードページのデザインを更新できます。変更は即時に反映されます。

Q: デザイン変更を見てもらうには、ゲスト側でページの更新が必要ですか? A: 新しくアクセスしたゲストには最新のデザインが表示されます。すでにページを開いているゲストは、更新すると変更が反映される場合があります。

Q: イベントごとに異なるデザインにできますか? A: はい。各イベントには独立したアップロードページデザインがあります。結婚式と企業イベントで、まったく別の見た目にすることも可能です。

Q: すべてのスマートフォンで見栄え良く表示されますか? A: はい。アップロードページは完全にレスポンシブで、あらゆる画面サイズに適応します。テンプレートはモバイルとデスクトップの両方で見栄え良くなるよう設計されています。

Q: 自分のカスタムフォントを使えますか? A: フォントの選択肢は、厳選された Google Fonts のリストから提供されています。現在、カスタムフォントのアップロードには対応していません。

Q: ページ説明にリンクを追加できますか? A: はい。カスタムページ説明フィールドに入力したURLは、ゲストがアップロードページを表示する際に自動的にクリック可能なリンクに変換されます。

Q: 完了後のタイトルは、メッセージとは別にカスタマイズできますか? A: はい。カスタム完了タイトルとカスタム完了メッセージは別々のフィールドです。どちらか一方のみ、両方、またはどちらもカスタマイズしないことも可能です。空欄の場合は、それぞれの既定テキストに戻ります。

Q: ページレイアウトにはどのような違いがありますか? A: Classicは元の中央配置カードです。Heroはイベント写真をページ上部に全幅で表示し、タイトルを重ねます。Minimalはカード枠を完全に取り除きます。Heroにはイベント写真が必要で、写真がない場合はClassicレイアウトが使われます。

Q: ゲストが最高品質で写真をアップロードするようにするにはどうすればよいですか? A: Upload Qualityセクションで、利用可能なオプションをFull HD onlyに設定してください。ゲストからは品質トグルが表示されなくなり、すべての写真がオリジナル解像度でアップロードされます。これには有料イベントが必要です。Freeプランでは、アップロードは常にOptimizedになります。

Q: アップロードページでイベント写真が切り抜かれないようにするにはどうすればよいですか? A: レイアウトセクションで、イベント写真の設定を「切り抜いて全体に表示」(デフォルト)から「写真全体を表示」(写真全体を表示し、周囲にページ背景を表示します)または「背景をぼかして全体を表示」(写真自体をぼかした複製の上に写真全体を表示するため、余白が生じません)に変更してください。

Q: 「アップロード画面にアルバムリンクを表示」オプションはどこにありますか? A: アップロードページデザイン設定の最下部にあります。また、フォト統計カードの公開アルバムセクションにも(「アップロード画面に写真を表示」として)あります。どちらを有効にしても、アップロードページに最近の写真のライブプレビューが表示されます。事前に公開アルバム共有を有効化していることをご確認ください。

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

関連する記事