制作ガイドライン(詳細)
必要な画像と制作ポイント
着せかえの販売をそのまま続けることもできますが、新機能に対応していない着せかえにはデフォルト画像が自動的に適用されます。そのため、新機能に対応した新しい画像を追加することをお勧めします。
新機能に対応した画像のつくり方については、制作ガイドラインを確認してください。
LINEの最新バージョンで着せかえの仕様が変更されると、制作ガイドラインも一緒に変更されます。
A メイン画像
| iOS | Android | LINE STORE | |
|---|---|---|---|
| 必要数 | 1個 | 1個 | 1個 |
| サイズ(pixel) | 横200px × 縦284px | 横136px × 縦202px | 横198px × 縦278px |
| ファイル名 | ios_thumbnail.png | android_thumbnail.png | store_thumbnail.png |
制作ポイント
スプラッシュ画像（背景・ロゴ+イラスト）をそれぞれのサイズに合わせて縮小してください。
※背景を透過にすることはできません。必ず非透過でつくってください。
B メニューボタン画像
※赤枠エリアのメニューは、サービス、国によって表示されるメニューが異なります。
| 必要数 | メニュー8種類 | タイプ | iOS | Android | ||||
|---|---|---|---|---|---|---|---|---|
| 画像 | ファイル名 | サイズ(pixel) | 画像 | ファイル名 | サイズ(pixel) | |||
| 32個 |  |
友だち OFF (未選択時) |
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="68"><rect fill-opacity="0"/></svg>) |
i_01.png | 横128px × 縦150px | |
a_01.png | 横128px × 縦112px |
| 友だち ON (選択時) |
|
i_02.png | |
a_02.png | ||||
 |
ホーム OFF |
|
i_29.png | |
a_29.png | |||
| ホーム ON |
|
i_30.png | |
a_30.png | ||||
 |
トーク OFF |
 |
i_03.png | |
a_03.png | |||
| トーク ON |
 |
i_04.png | |
a_04.png | ||||
 |
タイムライン OFF |
 |
i_05.png | |
a_05.png | |||
| タイムライン ON |
 |
i_06.png | |
a_06.png | ||||
 |
通話 OFF |
 |
i_07.png | |
a_07.png | |||
| 通話 ON |
 |
i_08.png | |
a_08.png | ||||
 |
ニュース OFF |
 |
i_25.png |  |
a_25.png | |||
| ニュース ON |
 |
i_26.png |  |
a_26.png | ||||
 |
その他 OFF |
|
i_09.png | |
a_09.png | |||
| その他 ON |
|
i_10.png | |
a_10.png | ||||
 |
ウォレット OFF |
|
i_27.png | |
a_27.png | |||
| ウォレット ON |
|
i_28.png | |
a_28.png | ||||
制作ポイント
「友だち」 「ホーム」 「トーク」「タイムライン」「通話」「ニュース」「その他」「ウォレット」の8種類のメニュー画像を準備してください。 ※国によって表示されるメニューが異なります。
友だち
トーク
タイムライン
通話
その他
ホーム
トーク
タイムライン
ニュース
ウォレット
未選択時(OFF)と選択時(ON)の2パターンが必要です。
トリミングされた画像の外枠とコンテンツの間には10pxぐらいの余白が必要です。画像をつくるときは上下左右のバランスに注意してください。
OFF
ON
メニューボタン画像上に表示されるバッジについて
バッジ（数字や「N」のアイコン）は、メニューボタン画像の上に表示されます。
バッジが表示される位置は変更できません。
バッジはLINEアプリで自動的に表示されるため、つくる必要はありません。
すべてのメニューにバッジが表示されます。
iOS
横128px × 縦150px
Android
横128px × 縦112px
バッジサイズ（ios/Android共通）
横33px × 縦33px
メニューボタン画像サイズに対し、下記の位置に表示されます。
・上から49px
・右から21px
C メニュー背景画像
| 必要数 | iOS | Android | ||||
|---|---|---|---|---|---|---|
| 画像 | ファイル名 | サイズ(pixel) | 画像 | ファイル名 | サイズ(pixel) | |
| 2個 |  |
i_11.png | 横1472px × 縦150px |  |
a_11.png | 横640px × 縦112px |
制作ポイント
メニュー背景画像は任意で制作してください。画像の準備がない場合は指定したカラースキン、または背景色が適用されます。
iOS/Androidとも左揃えで配置します。
iOS
画像サイズは、たて101〜150pxで設定してください。たて0～100pxの背景画像は透過にできません（101～150pxの画像は透過にできます）。 以下の画像では、イラスト部分が130pxで、透過部分は20pxになります。
背景画像は繰り返しで表示されるため、画像の両端の絵柄がつながるようにしてください。
※背景を透過にすると、透過させた部分が黒く表示されることがあります。そのため、プレビュー画面で必ず確認してから審査をリクエストしてください。
イラスト部分 130px 透過部分 20pxリピート部分たて150px
Android
画像サイズは、横640px × 縦112pxです。 背景画像は繰り返しで表示されるため、画像の両端の絵柄がつながるようにしてください。
Androidの一部の端末では背景を透過にできません。
リピート部分たて112px
【ご注意】
上記のAndroid画像は、LINEバージョン9.6.0未満に適用された画像です。背景は透過に対応されません。
9.6.0以降のバージョンは、システムの都合上、メニュー背景画像はios画像が適用されます。背景画像は透過になります。
クリエイターの皆さまにご用意いただく画像ファイルに変更はございません。
※システムの都合上、Androidの一部の端末において、画像の両端の絵柄部分に境界線が表示される場合があります。また、画像が見切れる場合があります。
※着せかえのプレビュー画像と実際に表示される画像は異なることがあります。
D パスコード画像
| 必要数 | パスコード | タイプ | iOS | Android | ||||
|---|---|---|---|---|---|---|---|---|
| 画像 | ファイル名 | サイズ(pixel) | 画像 | ファイル名 | サイズ(pixel) | |||
| 16個 | 1 | OFF |  |
i_12.png | 横120px × 縦120px | |
a_12.png | 横116px × 縦116px |
| ON |  |
i_13.png |  |
a_13.png | ||||
| 2 | OFF | |
i_14.png | |
a_14.png | |||
| ON |  |
i_15.png | |
a_15.png | ||||
| 3 | OFF | |
i_16.png | |
a_16.png | |||
| ON |  |
i_17.png | |
a_17.png | ||||
| 4 | OFF |  |
i_18.png |  |
a_18.png | |||
| ON |  |
i_19.png |  |
a_19.png | ||||
制作ポイント
4桁を1種類の画像で表示、または4種類の画像で表示する方法があります。
未選択時(OFF)と選択時(ON)の2パターンが必要です。
1種類の画像で表示した場合
4種類の画像で表示した場合
E プロフィール画像
| 名称 | 必要数 | iOS | Android | ||||
|---|---|---|---|---|---|---|---|
| 画像 | ファイル名 | サイズ(pixel) | 画像 | ファイル名 | サイズ(pixel) | ||
| プロフィール画像 (個人) |
2個 |  |
i_20.png | 横240px × 縦240px |  |
a_20.png | 横247px × 縦247px |
| プロフィール画像 (グループ) |
2個 |  |
i_21.png | |
a_21.png | ||
制作ポイント
プロフィール画像が設定されていないときの、個人用とグループ用の画像です。
プロフィール画像は自動的に丸くトリミングされますが、
LINEアプリでプロフィール画像がタップされると画像の四隅まで表示されるため、プロフィール画像は外側まで丁寧につくってください。
個人ユーザー用の画像とグループ用の画像は別々につくってください。
個人用
グループ用
F トークルーム背景画像
| 名称 | 必要数 | iOS | Android | ||||
|---|---|---|---|---|---|---|---|
| 画像 | ファイル名 | サイズ(pixel) | 画像 | ファイル名 | サイズ(pixel) | ||
| トークルーム背景画像 | 2個 |  |
i_22.png | 横1482px × 縦1334px |  |
a_22.png | 横1300px × 縦1300px |
制作ポイント
トークルーム背景画像は任意で制作してください。画像の準備がない場合は、指定したカラースキン、または背景色が適用されます。
iOS
最大：横1482px × 縦1334px
最小：横60px × 縦60px
※端末が縦向きのときのサイズは、横640px × 縦1334pxです。
Android
最大：横1300px × 縦1300px
最小：横60px × 縦60px
画像は、端末の向きに関係なく中央下揃えで表示されます。
iOS端末の場合は、メッセージ入力欄の上に合わせて画像が配置されます。
Android端末の場合は、メッセージ入力欄の下に合わせて画像が配置されます。そのため、画像の下の部分がメッセージ入力欄と重なるので、メッセージ入力欄の高さを考慮した画像を使ってください。
※着せかえのプレビュー画像と実際に表示される画像は異なることがあります。
画像サイズは、最小値～最大値の間であればどのサイズでも大丈夫です。また、透過と非透過のどちらの画像も使えます。
※透過の画像を使うと、カラースキンと重なって画像が表示されます。
画像の容量は1MB以下にしてください。
透過背景
トークルーム画面
トークルーム背景色について
トークルーム背景画像を登録した場合、画面サイズが大きい一部の端末では画像の上部が切れ、カラースキンが表示されます。画像が切れて見えるのを防ぐため、下記のいずれかの方法を推奨しています。
・トークルーム背景画像に合わせて、背景色を指定する
・カラースキンの色に合わせて、トークルーム背景画像を制作する
・トークルーム背景画像は透過し、背景色 or カラースキンに重ねる
| 画像が切れて見える | 背景色を指定 | カラースキンに合わせる | 背景画像を透過で作成 |
|---|---|---|---|
カラースキン トークルーム背景画像 |
 |
 |
 |
画像上部が切れ、カラースキンの背景色が表示される |
トークルーム背景画像に合わせて、背景色を指定する |
カラースキンの色に合わせて、トークルーム背景画像を制作する |
トークルーム背景画像は透過し、背景色 or カラースキンに重ねる |
G スプラッシュ画像
| 名称 | 必要数 | iOS | Android | ||||
|---|---|---|---|---|---|---|---|
| 画像 | ファイル名 | サイズ(pixel) | 画像 | ファイル名 | サイズ(pixel) | ||
| スプラッシュ画像 (背景) |
1個 | - | - | - |  |
a_23.png | 横1300px × 縦1300px |
| スプラッシュ画像 (ロゴ+イラスト) |
1個 | - | - | - |  |
a_24.png | 横480px × 縦720px |
- · サイズの単位はすべてpixelです。
- · フォーマットはすべてPNG形式です。
- · 画像の解像度は72dpi以上、カラーモードはRGBにしてください。
- · 画像のサイズは、1個あたり1MB以下にしてください。
- · すべての画像をZIPファイルにまとめてアップロードするには、ZIPファイルを30MB以下にしてください。
- · イラストなどの背景は透過にしてください。
- · メニュー背景画像、トークルーム背景画像は任意で制作してください。画像の準備がない場合は、指定したカラースキンのデザインが適用されます。
制作ポイント
プレビュー画面とLINE STOREでは、表示される範囲が異なり画像の一部が表示されないことがあります。また、端末の種類によっても画像の表示範囲が異なります。
背景
画面全体に適用されます。
ロゴ+イラスト
指定されたサイズ内で、上部にロゴ、中央にイラストを配置します。
ロゴ+イラストの画像は透過にしてください。
実際の画面では、ロゴ+イラストは背景の中央に表示されます。
背景とロゴ+イラスト
ロゴ+イラスト
スプラッシュ背景色について
スプラッシュ画像を登録した場合、画面サイズが大きい一部の端末では画像の上下部が切れ、カラースキンの背景色が表示されます。画像が切れて見えるのを防ぐため、下記のいずれかの方法を推奨しています。
・スプラッシュ背景画像に合わせて、背景色を指定する
・カラースキンの色に合わせて、スプラッシュ背景画像を制作する
| 画像が切れて見える | 背景色を指定 | カラースキンに合わせる |
|---|---|---|
カラースキン スプラッシュ背景画像 |
 |
 |
画像上下部が切れ、カラースキンの背景色が表示される |
スプラッシュ背景画像に合わせて、背景色を指定する |
カラースキンの色に合わせて、スプラッシュ背景画像を制作する |