応援ページのカスタマイズ

ビジュアルカスタマイズとは

応援ページのビジュアルカスタマイズは、ページの外観を自分らしくデザインする機能です。

設定できる画像:

• 背景画像（ヘッダー画像）
• ロゴ画像

カスタマイズのメリット:

• ページの印象を強化
• ブランドイメージの統一
• 応援者に視覚的な魅力を提供
• プロフェッショナルな見た目

背景画像（ヘッダー画像）

背景画像の役割

背景画像は応援ページのトップに大きく表示される画像です。

表示場所:

• 応援ページのヘッダー部分
• ページ名の背景
• ページの第一印象を決める重要な要素

おすすめの用途:

• アーティスト写真
• 活動のイメージ写真
• ブランドカラーのグラフィック
• ロゴやメッセージを含むデザイン

推奨サイズ

アスペクト比: 16:9

推奨解像度:

• 最小: 1280×720px
• 推奨: 1920×1080px以上
• 高解像度ディスプレイ対応: 2560×1440px

ファイルサイズ:

• 推奨: 5MB以下
• 最大: 10MB程度

背景画像の設定手順

1. 応援ページの管理画面にアクセス
2. 「基本情報」セクションの「背景画像」を見つける
3. 「ファイルを選択」ボタンをクリック
4. 画像を選択してアップロード
5. クロップ画面で表示範囲を調整（後述）
6. 「クロップを適用」ボタンをクリック
7. 「基本情報を保存」ボタンで変更を保存

ロゴ画像

ロゴ画像の役割

ロゴ画像は応援ページのアイコンとして表示される正方形の画像です。

表示場所:

• 応援ページのプロフィール部分
• 一覧表示のサムネイル
• SNSシェア時のアイコン

おすすめの用途:

• ロゴマーク
• アイコン
• シンボル画像
• 顔写真

推奨サイズ

アスペクト比: 1:1（正方形）

推奨解像度:

• 最小: 256×256px
• 推奨: 512×512px以上
• 高解像度ディスプレイ対応: 1024×1024px

ファイルサイズ:

• 推奨: 2MB以下
• 最大: 5MB程度

ロゴ画像の設定手順

1. 応援ページの管理画面にアクセス
2. 「基本情報」セクションの「ロゴ画像」を見つける
3. 「ファイルを選択」ボタンをクリック
4. 画像を選択してアップロード
5. クロップ画面で表示範囲を調整
6. 「クロップを適用」ボタンをクリック
7. 「基本情報を保存」ボタンで変更を保存

クロップ機能の使い方

画像をアップロードすると、自動的にクロップ（トリミング）画面が表示されます。

クロップ画面の操作

基本操作:

• ドラッグで範囲を移動
• 四隅のハンドルで範囲を拡大縮小
• アスペクト比は固定（16:9または1:1）

回転機能:

• 画面上部の回転ボタンをクリック
• 90度ずつ回転
• 縦向き写真を横向きに変更可能

クロップのコツ

背景画像のクロップ

ポイント:

• 主要な要素が中央に配置されるように
• 上下が切れても問題ない部分を選択
• テキスト（ページ名）が重なる部分を考慮

よくある失敗:

• 顔や重要な要素が端に配置される
• テキストと重なって見にくくなる
• 横長すぎて主題がぼやける

ロゴ画像のクロップ

ポイント:

• ロゴやアイコンが中央に配置
• 余白を適切に確保
• 小さく表示されても認識できるデザイン

よくある失敗:

• 余白が少なすぎて窮屈
• 端が切れてしまう
• 細かすぎるデザインで小さいと見えない

画像の最適化

ファイル形式

推奨形式:

• JPEG: 写真に最適、ファイルサイズが小さい
• PNG: ロゴや図形に最適、透過対応
• WebP: 最新形式、高品質で軽量

避けるべき形式:

• GIF（アニメーションは非対応）
• BMP（ファイルサイズが大きい）
• TIFF（Web向きではない）

ファイルサイズの削減

方法1: オンライン圧縮ツール

• TinyPNG
• Squoosh
• Compressor.io

方法2: 画像編集ソフト

• Photoshop - 「Web用に保存」
• GIMP - エクスポート時に品質を調整
• Canva - ダウンロード時に品質を選択

圧縮の目安:

• 背景画像: 500KB〜2MB
• ロゴ画像: 100KB〜500KB

色とコントラスト

背景画像の注意点:

• ページ名（白文字）が読みやすいコントラスト
• 暗めの画像または暗いオーバーレイ効果を考慮
• 明るすぎる背景は避ける

ロゴ画像の注意点:

• 小さく表示されても認識できる配色
• 背景色との区別が明確
• シンプルな配色が効果的

画像変更のタイミング

定期的な更新

おすすめのタイミング:

• 新しいプロジェクト開始時
• シーズンやイベントに合わせて
• ブランディング変更時
• 新しい写真が用意できた時

注意点

変更前の確認:

• 既存の応援者への影響
• SNSシェア画像の変更
• 一貫性の維持

トラブルシューティング

Q. 画像のアップロードに失敗します

原因と対処法:

1. ファイルサイズが大きすぎる

   • 5MB以下に圧縮してください
   • オンラインツールで圧縮

2. ファイル形式が非対応

   • JPEG、PNG、WebPを使用してください
   • 画像編集ソフトで変換

3. ネットワークエラー

   • ページを再読み込み
   • ネットワーク接続を確認

Q. アップロードした画像がぼやけています

原因と対処法:

1. 元の画像の解像度が低い

   • より高解像度の画像を用意
   • 背景画像: 1920×1080px以上
   • ロゴ画像: 512×512px以上

2. 過度な圧縮

   • 圧縮率を下げて再アップロード
   • 品質を優先した圧縮設定

Q. クロップ範囲を変更したいです

対処法:

• 新しい画像を再度アップロード
• クロップ画面で範囲を調整し直す
• 同じ画像でも再アップロードで再調整可能

Q. 画像を削除したいです

対処法:

• 現在、画像の完全な削除機能はありません
• 別の画像に差し替えることで対応
• シンプルな単色画像で置き換えも可能

Q. スマートフォンで見ると画像が切れます

原因と対処法:

• レスポンシブデザインに対応
• 重要な要素は中央に配置
• 上下左右に余裕を持たせる

Q. 回転ボタンが効きません

対処法:

• ブラウザをリロード
• 別のブラウザで試す
• 画像編集ソフトで事前に回転

よくある質問

Q. 背景画像とロゴ画像は必須ですか？

A. いいえ、どちらも任意です。ただし、設定することでページの印象が大きく向上します。

Q. 画像は何度でも変更できますか？

A. はい、何度でも変更できます。新しい画像をアップロードすると、以前の画像は上書きされます。

Q. 推奨サイズより小さい画像は使えますか？

A. 使えますが、表示がぼやけたり粗くなる可能性があります。可能な限り推奨サイズ以上をお使いください。

Q. 透過PNG画像は使えますか？

A. はい、ロゴ画像では透過PNG画像が使えます。背景画像でも使えますが、透過部分は白または黒で表示される可能性があります。

Q. アニメーションGIFは使えますか？

A. いいえ、アニメーションGIFには対応していません。静止画のみです。

Q. 画像の著作権は大丈夫ですか？

A. 使用する画像の著作権はご自身で確認してください。自分で撮影した写真、著作権フリー素材、または使用許可を得た画像をお使いください。

Q. 画像が横向きになってしまいます

A. クロップ画面の回転ボタンで90度ずつ回転できます。または、画像編集ソフトで事前に正しい向きに保存してください。

Q. 画像の変更が反映されません

A. ブラウザのキャッシュが原因の可能性があります。ページを強制リロード（Ctrl+Shift+R または Cmd+Shift+R）してください。

Q. プロフィール写真とロゴ画像の違いは？

A. YumeOshiでは、応援ページのロゴ画像が実質的なプロフィール写真の役割を果たします。両者は同じものです。

Q. 複数の画像を設定できますか？

A. 背景画像とロゴ画像はそれぞれ1枚ずつです。ギャラリーのように複数表示したい場合は、詳細紹介セクションで画像を挿入してください。

---