アカウント
ヘッダー画像の推奨サイズと表示範囲
マイページのヘッダー画像を、パソコン・スマートフォン・アプリのどれで見ても崩れないように用意するためのサイズと注意点
マイページのヘッダー画像は、パソコン・スマートフォン・アプリで表示される枠の比率が違うため、同じ画像でも切り取られる範囲が変わります。どの環境で見ても見せたいものが残るように、画像を用意するときのサイズと注意点を説明します。
入稿サイズは 1500 × 500px（3 : 1）。ロゴやキャッチコピーなど読ませたい要素は、中央 900 × 230px の「セーフエリア」の中に収めてください。
入稿サイズとセーフエリア
マイページ編集の「ヘッダー」タブから画像をアップロードすると、3 : 1（1500 × 500px）に切り抜かれて保存されます。保存された画像は、表示する場所ごとに中央を基準として枠を埋めるように拡大・切り取りされます。
入稿サイズ：1500 × 500px（3 : 1）／ JPG・PNG・WebP
セーフエリア（推奨）：中央 900 × 230px
どの環境でも必ず残る範囲：中央 900 × 170px
左右それぞれ 300px・上下それぞれ 135px は、見る環境によって切り取られます
表示される場所ごとの切り取られ方
パソコン（Web）：横は全部見えますが、上下が切り取られます。ウィンドウが広いほど、また「全幅表示」レイアウトほど切り取りが大きくなります。
スマートフォン（Web）：上下は見えますが、左右が切り取られます。
アプリのホーム：左右の切り取りがいちばん大きく、中央の 60% ほどが表示されます。
自分の画像で確かめる
用意した画像を選ぶと、その場で各端末での見え方を確認できます。3 : 1 でない画像は、先に使う範囲を切り取ってください。
ヘッダー画像シミュレーター
画像を選ぶと、4 種類のヘッダーレイアウトそれぞれで、Web（パソコン・スマートフォン）とアプリでどう切り取られるかをその場で確認できます。 画像はお使いの端末の中だけで処理され、アップロードされません。
画像をここへドロップ、またはファイルを選んでください
デザインするときのコツ
ロゴ・文字・キャラクターの顔などの主役は、中央のセーフエリアに寄せて配置する。
背景（色・グラデーション・模様）は画像の端まで塗りきる。端に余白を残すと、切り取られたときに不自然な帯として残ります。
画像を囲む枠線やフチの装飾は避ける。環境によって片側だけが消え、崩れて見えます。
文字は小さくしすぎない。スマートフォンでは横幅 360px 程度まで縮んで表示されます。
ヘッダー画像の左下にはプロフィールアイコンが重なります。アプリのホームでは、右下にアーティストのロゴが表示される場合があります。この 2 か所には大事な情報を置かないでください。
アプリのホームに載るロゴ
アプリカスタマイズでロゴを入稿すると、アプリのホームでヘッダー画像の右下に重なって表示されます。ロゴは右下の横長の枠に収まるよう、縦横比を保ったまま拡大・縮小され、右下に寄せて置かれます。
背景を透過した横長の PNG で用意する。背景が塗られていると、ヘッダー画像の上に四角い板のように重なります。
枠は横：縦がおよそ 3 : 1 です。縦長や正方形のロゴは枠の高さに合わせて小さく表示されます。
ロゴの欄にヘッダー画像を入れない。ヘッダー画像はマイページ編集の「ヘッダー」タブから設定します。
上の「自分の画像で確かめる」のシミュレーターで、アプリのホームの枠にある「ロゴを重ねてみる」からロゴを選ぶと、ヘッダー画像と重ねた見え方を確認できます。アプリカスタマイズの画面でも、プレビューの「ホーム」で入稿済みのロゴの見え方を確認できます。
ヘッダーレイアウトを選ぶ
マイページ編集の「ヘッダー」タブでは、次の 4 種類からレイアウトを選べます。レイアウトによって、同じ画像でも切り取られ方が変わります。
上の「自分の画像で確かめる」のシミュレーターでも、レイアウトを切り替えて Web（パソコン・スマートフォン）とアプリのマイページでの見え方を確認できます。マイページ編集の「ヘッダー」タブのプレビューでも、パソコン・スマートフォン・アプリを切り替えられます。
デフォルト（背景）
パソコン：画面の横幅いっぱい・高さ 300px の枠に表示されます。上下が切り取られ（ウィンドウ幅 1440px で縦の約 6 割が見えます）、画像の下端はページの背景色へ溶けます。
スマートフォン（Web）：画面の横幅いっぱい・高さ 200px の枠に表示されます。左右がそれぞれ約 17% 切り取られます。
アプリのマイページ：2.2 : 1 の枠に表示されます。左右がそれぞれ約 13% 切り取られ、下端は背景色へ溶けます。
向いている画像：背景として敷く雰囲気重視の画像。下端に文字を置くと読みにくくなります。
全幅表示
パソコン：画面の横幅いっぱい・高さ 220px の枠に表示されます。上下の切り取りがいちばん大きく、ウィンドウ幅 1440px で縦の約 46%、1920px で約 34% だけが見えます。
スマートフォン（Web）：画面の横幅いっぱい・高さ 150px の枠に表示されます。左右がそれぞれ約 7% 切り取られます。
アプリのマイページ：画面の横幅いっぱいに 3 : 1 のまま表示され、切り取られません。
コンテナー幅
パソコン：ページの本文と同じ幅（最大 1152px）・高さ 220px の角丸の枠に表示されます。上下が切り取られ、縦の約 57% が見えます。
スマートフォン（Web）：左右に余白を取った高さ 150px の角丸の枠に表示されます。左右がそれぞれ約 10% 切り取られます。
アプリのマイページ：余白付きの角丸の枠に 3 : 1 のまま表示され、切り取られません。
ヘッダーを切り取らない
すべての環境：コンテナー幅と同じ角丸の枠で、枠の高さを画像に合わせるため、パソコン・スマートフォン・アプリのどれでも画像の全体が表示されます。
表示サイズの目安：1500 × 500px の画像は、パソコンでは最大 約 1152 × 384px、スマートフォンでは 約 358 × 119px で表示されます。
向いている画像：ロゴや文字を画像の端まで使ったデザインを、そのまま見せたいとき。
アプリのホームに出るヘッダーは、どのレイアウトを選んでも中央の約 60% が表示されます（左右が切り取られます）。アプリのホームでも見せたい要素は、中央のセーフエリアに収めてください。