LINE着せかえのつくりかた - 毛のはえたようなもの

この春、LINE着せかえテーマをたくさん作りました。
作成時に溜まったノウハウを一挙公開！！
※本記事に掲載の画像は全てひよこのもり工房に著作権があります。転載や二次利用などはご遠慮ください。

想定する読者

ある程度画像作成ができて、LINE着せかえを作ってみたい方
LINE着せかえの審査がリジェクトされ、審査を通したい方

作り方の流れ

ひとまず１セット試しに作って大枠を理解する
カラースキンを決める
１セット審査に通す
【応用編】使いやすいLINE着せかえを作る
【応用編】色違いのLINE着せかえを作る

ひとまず１セット試しに作って大枠を理解する

テンプレートを入手して、手元にある有り物データを適当に突っ込んで、とりあえずLINEきせかえのデータセットを１つ作ります。
ここに時間をかけないでください！

LINE着せかえの作り方は公式サイトが詳しいです。PSDならテンプレートがあります。
creator.line.me

Illustratorのテンプレートはこちらの方のものを。現行版からすると足りない画像があるので、いくらか自分でアートボードを追加する必要があります。
pineray.jp

そしてLINEクリエーターズマーケット上でLINE着せかえの新規作成を行い、
creator.line.me

データをアップロードします。

作ってみるとわかるのですが、テーマ全体の印象はこの「カラースキン」に大きく影響されます。
カラースキンはLINE側に指定されているパターンから選ぶため、自分で作れません。また、サイトで新規作成後でないとデータセットと合わせて見ることができません。

ですから、とりあえず１つ作って、このカラースキンを最初に決めてから、絵を描き始めます。

また、色違いテーマを作りたい場合は、色が簡単に変更できる方法で絵を描いてください！（理由は後述）

カラースキンを決める

売れている着せかえをストアでいくらか見て、自分の作りたいテーマに似ているものを探し、カラースキンを決めます。
store.line.me

私は、最初は茶色系で一つ作ることにしました。カラーテーマが一番目に優しいからです。
合いそうなカラーテーマが他にも見つかった場合は、同じ柄の色違いテーマを作るのもよいでしょう。

使えるなと思うカラースキンは、色に偏りがあります。
黒・青・グリーン系は充実していますが、黄色～オレンジ～赤系は充実しておらず、カラーもイマイチ見づらいものもあります。
カラースキンによってはiOSとandroidでかなり違う印象のものもありますので、注意して見てみましょう。

１セット審査に通す！～審査に通すポイント～

ひとまず作ったデータセットを本審査に耐えるよう加筆修正していきます。気にするポイントを列挙します。

「メニューボタン画像」の絵が命！

メニューボタン画像が一番着せかえごとの差異が出しやすいところです。また、審査が一番厳しいです。
（逆に言うと他の画像はメニュー画面の画像の流用で作れる範囲のものばかりです。）

2022年５月現在の日本版LINEのUIでは「ホーム」「トーク」「VOOM」「ニュース」「ウォレット」がメニューに並びます。

国によって並ぶものが違いますし、頻繁に配列が変わるのですが、「ホーム」が左端、「VOOM」が中央、「ウォレット」右端に並びやすいので、最低限ここに置く絵を描きます。（キャラクターものなら主要キャラクターを置きます。）
その他、何種類か必須作成画像があるのですが、全て同時に使われるわけではないので、最低６種類ぐらい描いて並べていくと良いと思います。
各国の表示はLINEクリエーターズマーケット上のカラースキン画面で確認できます。

審査のポイントは下記です。

「メニューボタン画像」のON・OFF画像はOSによって色が変わらないこと
他のテーマの「メニューボタン画像」と同じでないこと（※ある程度色が変化していればOK、詳細後述）

「スプラッシュ画像」の絵（ロゴ部分）と背景色（単色）を分けて画像をつくる

「スプラッシュ画像のロゴ（右）」には絵を入れ、「スプラッシュ画像の背景（左）」は模様のない、単色の大きい画像にします。
なぜか。
「スプラッシュ画像の背景」にドットや模様などを入れて審査に出すと…

要するに「「メイン画像」は「スプラッシュ画像」のロゴと背景を縮小して作ってください」と言われて審査落ちします。「スプラッシュ画像の背景」に模様が入っているものを正しく縮小して作ってもなぜかだめなんです。機械判定されているようなので、何かが機械の納得しないポイントのようです。
初めから「スプラッシュ画像」絵と背景色（単色）を分けて作ると審査に落ちません。

【応用編】使いやすいLINE着せかえを作る

トーク画面の背景画像は薄く、邪魔にならないように

トーク画面の背景画像は、一番テーマをアピールできそうですが、案外難しいです。絵柄が複雑だったり、色が濃いと邪魔なのです。
＜邪魔な例＞

＜見やすい例＞

ある程度薄めて背景色に重ねる方式を採用しています。これでも邪魔といえば邪魔かも・・・
他のクリエータさんの画像も参考になります。いっそ単色にしている方もいました。
背景画像だけ書き出して、自分のトーク画面に適用することでお試しするのもおすすめです。

メニューボタン画像は思ったより小さめに

LINE着せかえで作者がキャラクターをアピールできるのは、ほとんどメニューボタン画像。
ついつい画像サイズ一杯で画像を大きくしたくなりますが、大きいと案外邪魔です。
＜邪魔な例（適切な例の120%）＞

＜適切な例＞

程々の大きさにしましょう。

また、売れている他の着せかえを見るとわかるのですが、キャラクターものの場合は特にアイコンの絵とメニュー名には関連性がないものが多いです。メニューボタン画像はあまり大きくないので、「キャラクター」＋「メニュー名を図案化したもの」を入れると絵が複雑になりすぎて適切でなくなることが多いです。
メニューボタン画像は案外自由に考えていいと思います。
ただし、シンプルを売りにしているテーマのアイコンの場合は別。メニュー名＝画像がほとんどです。（例：タイムラインは「時計のアイコン」など）

メニュー背景画像はシンプルがいちばん！？

メニュー背景も画像を入れたくなりますが、メニュー画像自体と被るのと、機種により位置がずれるので模様を入れると失敗しやすいです。柄を入れるならメニューボタン画像へ。
＜だめなメニュー背景画像例＞

＜だめなメニュー背景画像をアップロードした結果＞

個人的には、結局シンプルなのが一番…ということで、単色画像に落ち着きました。他のクリエータさんはうまく合成されているものもあるので、メニュー背景画像にこだわりたい人は他の方の着せかえを研究してから取り組むと良いと思います。

【応用編】色違いのテーマを作る

１つの柄で複数の色違いテーマを作る場合は、１データセット分先に審査に通ってからが◎

色違いを作る場合、１つのデータセットを色変更して作っていきます。
１つ審査に通ったデータセットをもとに作るほうが時短になります。（同じ箇所の全データ修正するのは大変！）

とにかく「メニューボタン画像」を審査に通す！

ここの審査が一番厳しいです。ただし、全く別のデータを用意する必要はなく、色さえ目視できるレベルで違っていればいいようです。

私が審査を通したところ、全体の流れとしては、「他の審査済み・審査中テーマと全く同じ色のデータだと機械的にリジェクト判定が来る。その後、人の手で審査をされて、少しの差異しかないと審査の人によってはリジェクトになる」です。（このあたりは審査挙動による私個人の推定ですので、正しくないかもしれません。）
Illustratorの「編集」＞「カラー編集」＞「オブジェクトを再配色」などを駆使して、テーマカラーに合うように再配色していきましょう。

例として、ダーク系テーマとホワイト系テーマの場合の画像を置いておきます。メニューボタン画像の色が違うのがわかるでしょうか。

ホワイト系は馴染むように色を薄く、ダーク系は暗くなどと編集すると馴染みやすく、なおかつ審査の判定をクリアできます。