下記記事にて公開後に分かったことを含めた修正版がありますので、そちらを参照下さい。
「LINE 着せかえの作成手順例」
今週~来週にかけて一般クリエーター向けのサービスの申請が開始されると予想されるので
具体的にどういう感じで作れば良いかをまとめてみました。
※あくまで公開されているガイドラインから私個人が判断した作り方になります。
下記手順に沿って作成してもリジェクトされる可能性が御座います事をご了承下さい
関連公式サイト
制作ガイドライン
制作ガイドライン(詳細)
着せかえ審査ガイドライン
まず大きく分けると下記のような5種類の素材を作成していく事になります。
(クリックすると各メニューに移動します)
※用意する画像はiOSとandroidで分かれている為、合計49枚と数が多いですが
実際はサイズが異なるだけで使いまわしが可能なので、一つ画像を作り、縮小する事で対応が可能なものが多々あります。
(ガイドライン「1.8.OSにより同アイコンのイラストが著しく異なるもの」とあるので、むしろ使いまわし想定の方が安全だと思います)
以下説明では下記色を参考にして下さい。
青字:ガイドライン規定のサイズやファイル名
緑字:作成例
緑太字:作成例にてベース画像として使用するもの(描く必要がある画像)
※:注意点
※2016.04.17追加(04.20修正版差し替え)
「必要最小限の労力で作りたい」という方向けに私が考えた最短作成の早見表を作ってみました。
流れに沿って画像を作成して、青字のファイルを用意すれば必要な画像が揃います!

○メイン・ロゴ関係
スプラッシュ(Android用の起動画面)とストア等で表示されるメイン画像です。
まずスプラッシュ画像の背景とロゴ+イラストの2つを作成し、それを元にしてメイン画像の作成します。
「スプラッシュ画像(背景)」
a_23.png
W 1300 × H 1300
・明記されていないので透過不可と考えたほうが良さそうです
作成例)
・拡大縮小の可能性があるのでベースカラーを決めて単色かグラデーションで作成
・※ロゴ、イラストが見辛くならないような色を選択する
・透過せずに1300x1300のサイズで作成する
「スプラッシュ画像(ロゴ+イラスト)」
a_24.png
W 480 x H 720
・※透過する
・※上部にロゴ、中央にイラストを配置(ガイドラインにて規定)
作成例)
上部1/4(480x180):ロゴ
下部3/4(480x540):イラスト
を目安に作成する
・※全体的に小さいとリジェクトの可能性がある為注意
・ガイドラインでは上部にロゴ、中央にイラストとなっていますが、
サンプル画像やバランスを考慮すると上記比率で作成で良いかと思います
「メイン画像」
ios_thumbnail.png
W 200 × H 284
android_thumbnail.png
W 136 × H 202
store_thumbnail.png
W 198 × H 278
・スプラッシュ画像の背景とロゴ+イラストをを元に各サイズを縮小して作成(ガイドラインにて規定)
作成例)
・スプラッシュ画像(背景)を3種類の規定サイズそのままにリサイズ
・スプラッシュ画像(ロゴ+イラスト)を
188x282にリサイズする(左右余白各6px、上部余白2pxの位置で背景と合成)
→ ios_thumbnail.pngとして保存
132x198にリサイズする(左右余白各2px、上部余白4pxの位置で背景と合成)
→ android_thumbnail.pngとして保存
184x276にリサイズする(左右余白各7px、上部余白2pxの位置で背景と合成)
→ store_thumbnail.pngとして保存
上部メニューへ
lineアプリ内で表示される各種アイコンです。
メニュー用のアイコン(選択時/未選択時)とメニュー背景の作成をします。
※メニュー背景に関しては必須ではありません
「メニューボタン画像」
タイプ | iOS(W 128 × H 150) | Android(W 128 x H 112) |
友だちOFF(未選択時) / ON(選択時) | i_01.png / i_02.png | a_01.png / a_02.png |
トーク(未選択) / (選択) | i_03.png / i_04.png | a_03.png / a_04.png |
タイムライン(未選択) / (選択) | i_05.png / i_06.png | a_05.png / a_06.png |
通話(未選択) / (選択) | i_07.png / i_07.png | a_08.png / a_08.png |
その他(未選択) / (選択) | i_09.png / i_09.png | a_10.png / a_10.png |
・※透過する
・※アイコンが並んだ際に10px程度の余白が必要
・それぞれ選択時、未選択時を作成します、画像名の連番がOFF→ONの順番である事に注意
・※ガイドラインには特に記載がありませんが、アイコンから(電話等の)機能が連想出来るようにしておいた方が安全だと思います
作成例)
各アイコンを112x112で作成する(10個)
キャンバスサイズを128x150にして上記アイコンを中央配置(左右余白各8px、上部余白38px)
→ i_01.png ~ i_10.png として保存
キャンバスサイズを128x112にして上記アイコンを中央配置(左右余白各8px)
→ a_01.png ~ a_10.png として保存
「メニュー背景画像」
i_11.png
W 1472 x H 150
a_11.png
W 640 x H 112
・縦の余白は透過可能、非透過も可
・※画像をループして表示する仕様の為、左端と右端が繋がっている必要あり
・表示時は画像左端を揃えた状態で画面サイズに合わせて右に伸びていく形となる
・※メニューボタンが見辛くならないような色を選択する
作成例)
ループをあまり意識しないで済むようにする(リジェクトの可能性を減らす)為に下記のような感じで作成
・1472x150(iOSのサイズ)にて単色orグラデーションで塗り潰した画像を用意
・上記と同系統かつ薄い色にて適当な間隔でアクセント用の画像を設置する
(ガイドラインサンプルの草原+草のイメージ、※左右の端には配置しないようにする)
→ i_11.png として保存
・上記画像を1100x112にリサイズ
・横幅が640pxになるようにトリミング(※トリミングの際に両端にアクセント画像が来ないようにする)
→ a_11.png として保存
上部メニューへ
○パスコード関係
パスコード4桁分の入力前と入力後の画像を作成します。
※1種類の入力前、入力後の組み合わせを4桁全てに使う事も可能です
「パスコード画像」
タイプ | iOS(W 120 × H 120) | Android(W 116 x H 116) |
1桁目(左端) OFF(未選択時) / ON(選択時) | i_12.png / i_13.png | a_12.png / a_13.png |
2桁目 OFF(未選択時) / ON(選択時) | i_14.png / i_15.png | a_14.png / a_15.png |
3桁目 OFF(未選択時) / ON(選択時) | i_16.png / i_17.png | a_16.png / a_17.png |
4桁目(右端) OFF(未選択時) / ON(選択時) | i_18.png / i_19.png | a_18.png / a_19.png |
・※透過する
・それぞれ選択時、未選択時を作成します、画像名の連番がOFF→ONの順番である事に注意
・※1種類を4桁に適用する場合のファイルの用意の仕方は現時点では不明
14~19の画像(2~4桁の画像)が必須となっていない可能性もありそうです
・1種類or4種類しか明記されていないので「奇数(1,3)桁を同じ画像&偶数(2,4)桁を同じ画像」というような登録は避けた方が良いと思います
作成例)
・120x120(iOSのサイズ)にてアイコンを作成する(2個 or 8個)
→ i_12.png ~ i_19.png として保存
・上記画像を116x116にリサイズする
→ a_12.png ~ a_19.png として保存
上部メニューへ
○プロフィール関係
個別にアイコンを設定していない個人とグループ用の画像です。
iOS(W 240 × H 240) | Android(W 247 × H 247) | |
個人 | i_20.png | a_20.png |
グループ | i_21.png | a_21.png |
・明記されていないので透過不可と考えたほうが良さそうです
・※個人とグループは別の画像にする必要あり
・※通常表示される形は円形になりますので4隅が見えなくても違和感がないように作成したほうが良さそうです
作成例)
・247x247(Androidのサイズ)にてアイコンを作成する(2個)
→ a_20.png、a_21.png として保存
・それぞれ240x240にリサイズする
→ i_20.png、i_21.png として保存
上部メニューへ
○トークルーム背景
トーク画面での背景です。これだけ画像サイズが固定でなかったりと少し例外的です。 ※トークルーム背景に関しては必須ではありません
i_22.png
最大:W 1482px x H 1334px
最小:W 60px x H 60px
※縦向き使用時の表示サイズはW 640px x H 1334px
a_22.png
最大:W 1300px x H 1300px
最小:W 60px x H 60px
少し特殊な扱いなので以下公式の説明文をそのまま引用
イラストは、端末の横向き、縦向きに関係なくセンター下揃えで配置されます。
サイズは最小値から最大値の中で、任意のサイズで制作可能です。
画像は、透過でも非透過でもどちらでもOKです。
背景を透過で制作した場合は、選択したカラースキンの基本背景に、制作したイラストがレイヤーで表示されます。
作成例)
画像サイズが可変なのは背景として作成するか、メイン(スプラッシュ)のイラストのような扱いとするか選択出来るようにする為と考えた方が良さそうですね。
なので作成する場合は下記3パターンのいずれかで作成する感じでしょうか。
1.透過しないで最大サイズで背景として作成
2.カラースキン+背景透過イラスト
3.1と2の複合(2のイラスト背景に1を使用する)
>「1.透過しないで最大サイズで背景として作成」の場合
1482x1334(iOSのサイズ)にて画像を作成する
→ i_22.png として保存
1300x1300にトリミングを行う(縮小ではないので注意)
→ a_22.png として保存
・※センター下揃えの仕様上、端末によっては上部と左右が切れますので
「単色」 or 「グラデーション」 or 「タイル上の繰り返し」が無難だと思います。
・※トーク画面の為、会話とスタンプが見辛くならない事が必須です。
→極端に明るい色(白に近い色)と暗い色(黒に近い色)は避けた方が良いと思います
>「2.カラースキン+背景透過イラスト」の場合
480x850以内にて画像を作成する
→ i_22.png、a_22.png として保存
・※背景を透過する
・※どこまで表示されるかは端末の解像度に依存しますので出来るだけ小さい画面に合わせて作成する必要があります
簡単に解像度を調べたところ、上記数値に収めれば切れる事はほぼないかなぁ・・・と。
これに関してはあまり自信がないので参考程度に考えて下さい。
・※1と同様に、会話とスタンプが見辛くならない事が必須です。
>「3.1と2の複合(2のイラスト背景に1を使用する)」の場合
上記1の画像2サイズとと2の画像を用意する。 1の画像(1482x1334)に対してセンター下揃えで2の画像を重ねる。
→ i_22.png として保存
1の画像(1300x1300)に対してセンター下揃えで2の画像を重ねる。
→ a_22.png として保存
上部メニューへ
以上で一通りの画像の作成が終了となります。
メイン・ロゴ関係:5枚(内ベース画像2枚)
メニュー関係:22枚(内ベース画像11枚) ※背景画像を作成しない場合は20枚(内ベース画像10枚)
パスコード関係:16枚(内ベース画像8枚) ※1種類でカバーする場合は4枚(内ベース画像2枚)
プロフィール関係:4枚(内ベース画像2枚)
トークルーム背景:1枚(内ベース画像1~2枚) ※作成しない場合は0枚
となりますので、用意する画像が最小33枚~最大48枚
内、ベースとなる画像(描く必要がある画像)が最小16枚~最大25枚という感じですね。
作成した画像の種類やファイル名の確認作業は
制作ガイドライン(詳細)の必要なもの(メイン画像、着せかえ画像)の表が分かりやすいと思います。
今は画像を用意して待つしかないですが、本開始時のガイドライン改定が少し怖いですね・・・
2016.04.20追記
申請受付が開始になったのでカラースキンの指定が分かりました。

↑のような感じで、全体背景やバー背景、文字の色の組み合わせのセットから選択する感じでした。
また選択したカラースキンに合わせて下のようなサンプル画面が出てきましたのでイメージしやすかったですね。

※下記スタンプ販売中

※以下、イラスト作成に関する商品の紹介になります。
この記事へのコメント