アカウント
ヘッダー画像の推奨サイズと表示範囲
マイページのヘッダー画像を、パソコン・スマートフォン・アプリのどれで見ても崩れないように用意するためのサイズと注意点
マイページのヘッダー画像は、パソコン・スマートフォン・アプリで表示される枠の比率が違うため、同じ画像でも切り取られる範囲が変わります。どの環境で見ても見せたいものが残るように、画像を用意するときのサイズと注意点を説明します。
入稿サイズは 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 でない画像は、先に使う範囲を切り取ってください。
ヘッダー画像シミュレーター
画像を選ぶと、パソコン・スマートフォン・アプリでどう切り取られるかをその場で確認できます。 画像はお使いの端末の中だけで処理され、アップロードされません。
画像をここへドロップ、またはファイルを選んでください
デザインするときのコツ
ロゴ・文字・キャラクターの顔などの主役は、中央のセーフエリアに寄せて配置する。
背景（色・グラデーション・模様）は画像の端まで塗りきる。端に余白を残すと、切り取られたときに不自然な帯として残ります。
画像を囲む枠線やフチの装飾は避ける。環境によって片側だけが消え、崩れて見えます。
文字は小さくしすぎない。スマートフォンでは横幅 360px 程度まで縮んで表示されます。
ヘッダー画像の左下にはプロフィールアイコンが重なります。アプリのホームでは、右下にアーティストのロゴが表示される場合があります。この 2 か所には大事な情報を置かないでください。
ヘッダーレイアウトを選ぶ
マイページ編集の「ヘッダー」タブでは、デフォルト（背景）・全幅表示・コンテナー幅の 3 種類からレイアウトを選べます。「デフォルト（背景）」は画像の下端がページの背景色へ溶けるため、下端に文字を置くと読みにくくなります。「全幅表示」は画面の横幅いっぱいに広がるぶん、上下の切り取りがいちばん大きくなります。
マイページを編集する