スポンサーリンク

LINE 着せかえの作成手順例

本日無事申請していた着せかえが承認されました。
LINE STORE「夜カエル」 20160503-01.png
※現在はまだアプリ上からのクリエーター着せ替え購入は対応されていなく、LINE STOREからの購入のみとなっています。

開始直後で参考にならないと思いますが、期間的は下記となります。
4/20 申請(審査開始初日)
4/26 クリエーター着せかえ公開開始
4/29 審査開始(ステータスが審査中に変更)
5/03 承認
初日に申請したにも関わらず初回公開から1週間程度遅くなっているのでかなりの申請数が予想されますね・・



また今回承認された事で作り方としては問題なかったと思われますので、
以前書いた記事の内容を本登録に合わせて微修正をしました。


「line 着せ替えの作成手順例2016.05版」

関連公式サイト
制作ガイドライン
制作ガイドライン(詳細)
着せかえ審査ガイドライン
スタンプ同様、上記は必読です。



まず大きく分けると下記のような5種類の素材を作成していく事になります。
(クリックすると各メニューに移動します)
メイン・ロゴ関係:5枚
メニュー関係:22枚
パスコード関係:16枚
プロフィール関係:4枚
トークルーム背景:2枚
(おまけ)カラースキンの指定

※用意する画像はiOSとandroidで分かれている為、合計49枚と数が多いですが
実際はサイズが異なるだけで使いまわしが可能なので、一つ画像を作り、縮小する事で対応が可能なものが多々あります。
(ガイドライン「1.8.OSにより同アイコンのイラストが著しく異なるもの」とあるので、むしろ使いまわし想定の方が安全だと思います)


細かい説明の前に・・・
「出来るだけ早く作成したい」という方向けに私なりの最短作成の早見表を作ってみました。
流れに沿って画像を作成して、青字のファイルを用意すれば必要な画像が揃います!
20160420-01さっくり作成早見表.png


以下からは具体的な作成例と説明になります。以降の説明では下記色を参考にして下さい。
青字:ガイドライン規定のサイズやファイル名
緑字:作成例
緑太字:作成例にてベース画像として使用するもの(描く必要がある画像)
※:注意点




スプラッシュ(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桁に適用する場合のファイルの用意の仕方は同じ画像をファイル名変更でOKでした
・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枚)
トークルーム背景:2枚(内ベース画像1~2枚) ※作成しない場合は0枚
となりますので、用意する画像が最小33枚~最大49枚
内、ベースとなる画像(描く必要がある画像)が最小16枚~最大25枚という感じですね。

作成した画像の種類やファイル名の確認作業は
制作ガイドライン(詳細)必要なもの(メイン画像、着せかえ画像)の表が分かりやすいと思います。


○カラースキンの指定
20160417-04-image.png
上のような感じで、全体背景やバー背景、文字の色の組み合わせのセットから選択する感じです。
※私が登録したときはサンプル画像の表示の都合かと思いますが、登録画像を設定するまではカラースキンの指定画面に移動できませんでしたので注意
また選択したカラースキンに合わせて下のようなサンプル画像が出てきますので作成した画像との親和性や全体の色合いもその場で確認できます。
20160417-03-image.png

以上で一通りの対応が完了です。
やはりスタンプに比べると作る手間が大幅に少ない印象ですね。





※下記スタンプ販売中
2016-04-11-01.png


※以下、イラスト作成に関する商品の紹介になります。


スポンサーリンク
スポンサーリンク

この記事へのコメント


この記事へのトラックバック