LINE着せ替えの作り方とガイドラインでは分からないポイント

2018年5月24日 10:21

「LINE Creators Marketで稼げるようになるためにやったこと」内で割愛したLINE着せ替えの具体的な作り方についての記事です。が、まず前提として任意のサイズの画像や背景を透過させる方法が分からないという方にイチから教える記事ではないことだけご了承ください。そして作り方は自己流なので合わない部分は適宜読み替えてください。

【目次】
・必要な画像数は思ったより多くありません
・申請に必要な各画像の注意ポイント解説
・カラースキンと販売について
・橋本的LINE着せ替えの作り方

有料noteになっていますがおまけを付けているだけで情報は全編無料です。

LINE着せ替えはクリエイターの固定収入として結構オススメで、個人的にはスタンプより簡単に作れる割に堅実に儲けが出やすいコンテンツだと感じています。（その代わりスタンプには流行った時の爆発力があるのが魅力です）

前提としてAdobeのIllustratorを使う方法をご紹介します。LINE着せ替えは同じデザインの画像を拡大・縮小する機会が多いのでベクターデータで作るのがオススメです。

Illustratorを持っていない方はぜひ一ヶ月の無料体験版でスタートしてみてください。補足ですが『Inkscape』という無料ソフトでもベクターデータを使えます。

【はじめに】作る画像は思ったより多くありません

各画像のサイズなど細かいところはLINE着せ替えの制作ガイドラインをご覧ください。この記事ではガイドラインにあまり描いていないことを中心に解説していこうと思います。まず最初に知ってもらいたいのが申請に必要な画像数は58個ですが実質はそれほど多くないということです。たとえばLINEのパスコード画面の画像は16個も必要で、作るのが大変と思ってしまうかもしれませんが、画像はiOS/Androidで同じデザインが必要なだけですし、パスコードのONとOFFで同じ画像の色違いを流用すれば実質4個です。イラストを16個描くわけではありませんし、他の画像も流用できる部分が多いので、画像の総数だけ見て挫折しないでください。

次からは申請に必要な各画像について見ていきます。

メイン画像(3個)

LINEストアやアプリの着せ替えストアに並ぶ画像です。ある意味一番大事で、着せ替えの印象を一枚で伝えるまさに看板となる画像です。画像数は3個とありますがiOS用・Android用・LINE Store用の3種類ですべて同じデザインでなければなりません（iOSとAndroidで見せ方を変えるといったことはできません）

あと注意したいのが、後述するスプラッシュ画像(を拡大縮小したもの)と同じデザインでなければなりません。

メニューボタン画像(28個)

ストア上のプレビュー画像なので個人のLINEを晒してるわけではありませんw

現在は「友だち・トーク・タイムライン・通話・ニュース・その他・ウォレト」という7種類のメニューボタンがあり、それぞれのON/OFFをiOSとAndroid分用意する必要があります。要するに7(メニューボタンの数)×2(ボタンのONとOFF)×2(iOSとAndroid)=28画像という感じです。

ちなみに日本では5種類しか表示されていませんが海外用のLINEは「通話」や「その他」がメニューボタンに表示されています。

この画像はあくまでもボタンなので、ONとOFFの差をハッキリさせた方がいいと思います。OFF時に色を薄くしたり、ON時に画像を少し大きくするなどすればONとOFFで全く別のデザインを用意しなくても大丈夫です。でも、使っている立場からすると、画像の大きさや色味が変わるだけよりも、少しでも画像が変化した方が面白いですよね。他のボタンはどんな風に変化するんだろうという楽しみに変わりますから。

あと、友だちボタンなら人型・トークボタンなら吹き出しというデフォルトのアイコンがありますが、それに捉われなくていいと思います。僕はアイコンの意味とは関係ない画像ばかり作っています。「友だちなら人型アイコン」と考えていると幅が狭くなり、他の着せ替えと同じになってしまうからです。

メニュー背景画像(2点)

上記のメニューボタン画像が乗っかる背景の部分です。（参考画像だと草原と空の部分です）実はこの画像は作らなくても大丈夫です。作らなかった場合はデフォルトの色が乗ってくれるので、あまりに奇抜な画像を作るぐらいならなくてもいいです。

この画像の特徴が、画像の最下部から100pxより上であれば自由に透過させられること。言葉じゃわかりにくいので例↓を見ていただくと、一番左の恐竜の頭が友達一覧に飛び出ているのがお分かりかと思います。

メニューボタン画像より背景画像の高さを低くすればこのようにボタンが飛び出ているような表現ができて面白いです。100pxより上の透過可能な範囲であれば網状にしたり雲のようにモコモコにしたりと自由に透過させて遊ぶこともできます。ただし注意が必要なのは、画像の両端でループする形にしなければならないこと。たとえば右端と左端の高さが違っていたらリジェクトされます。

プロフィール画像(4個)

プロフィール画像が未設定のユーザーやグループに入るアイコンです。ほとんどのユーザーはプロフィール画像を設定していることが多いので着せ替えを使ってくれる人が見る機会は少ないと思います。とはいえ購入前のプレビュー画面ではしっかりと表示されて、購入するかどうかの判断材料の一つにはなってくるので適当に作るのはやめておきましょう。四角い画像を申請しますが、丸くトリミングされることに注意です。

トークルーム背景画像(2個)

トークルームの背景になる画像なので、使ってくれる人がもっとも長く目にする画像といってもいいかもしれません。しかしメニューボタン背景画像と同じく、作らなくても申請可能です。

最低制作範囲が60px×60pxと指定されておりワンポイントだけでの制作も可能です。個人的には大きめに作っておく方が使う側が楽しいかなと思っています。僕は横向きにしたときにもキャラクターが出てくるように意識してます。

あと、この画像は色を少し薄くしたりして、トークの邪魔にならないようにすべきです。（昔はゴチャゴチャさせすぎてトークにめっちゃ邪魔なの作ってました。買ってくれた方すみません）

パスコード画像(16個)

LINE自体にパスワードをかける人は少ないような気はしますが、LINE Storeのプレビュー画面では大きく表示される制作必須の画像です。プレビューでは1〜3番目がパスワードを解除した状態の画像、4番目はパスワードがロックされた状態の画像が表示されています。ちなみに当然ですが4番目のパスワードを解除した瞬間画面が切り替わるので4番目の解除後画像はほとんどユーザーの目に触れません。

スプラッシュ画像(2個)

スプラッシュ画像はAndroid端末利用時にしか表示されません。LINEを起動したときに最初に短時間だけ表示される画像です。スプラッシュ画面は背景とロゴ＋イラスト画像の2つを別に申請し、背景上にタイトル画像が重ねられた状態で表示されます。ちなみにガイドラインでは、タイトル画像は「上部に着せ替えのロゴと中央にイラストを配置したもの」とされていますがイラストだけでも問題ありません。

先ほども書きましたが、メイン画像はスプラッシュ画像とスプラッシュ画像の背景を拡大縮小して作ったものでなければなりません。

カラー選択について

こちらの画像をご覧ください。太い赤枠の部分は自分で制作して申請した画像ですが、それ以外の黄色や緑の部分はすでに用意してある色の組み合わせを利用するしかありません。カラースキンといって、50種類の色の組み合わせが用意されています。

カラースキンは白一色のものから比較的カラフルなものまで様々で、選ぶのは楽しいです。カラースキンはLINEに合うように公式で作られた配色なのでそれっぽいものが簡単に作れてしまいます。しかし既に数万を超える着せ替えのすべてが50種類の中からカラースキンを選んでいるので、カラースキンに依存した配色をすると簡単に他の着せ替えと似たり寄ったりになってしまいます。個人的なオススメはカラースキンは意識せずに作って、白や茶色のシンプルなカラースキンに乗せることです。

日本用と海外用は別で申請しましょう

販売価格について、日本国内では360/480/600円・海外では120/240/360/480/600円から価格帯を選択します（2018年5月現在・キャンペーン時を除く）。とはいえほとんどの着せ替えは下限の価格で売られているのでそれに合わせるのがいいでしょう。

海外で120円で販売するためには、日本だけの販売申請に加えて海外販売用にもうひとつ申請しなければなりません。ひとつ申請するだけでも海外で販売はされるのですが、国内外問わず360円での販売となってしまいます。それでは海外での分が悪くなってしまうので、日本"だけ"で360円で販売する着せ替えと、販売国から日本を外し価格を120円に設定した同デザインの着せ替えをもうひとつ申請しましょう。

申請時に販売エリアを設定することができ、日本からチェックを外した場合にのみ販売価格を120円にすることができます。注意していただきたいのが価格が違ったとしても同じデザインの着せ替えを同じ国では複数販売できないこと。「360円で販売するのは日本だけ、120円で販売するのは日本以外すべて」という分け方をしないと海外用の販売はできません。

【自己流】橋本的な作り方

前記事でご紹介しましたが僕はゴチャゴチャした着せ替えをよく作っているので、僕なりのゴチャゴチャ系LINE着せ替えの作り方をご紹介します

(1)テーマを決めます

「ポップなモンスター」とか「犬だらけ」とか「ゆるい恐竜」とか決めていきます。思いつかないときは自分の着せ替えの中で売り上げが上向いているものに乗っかります。今回は「POP LAND」というゴチャゴチャ系着せ替えの究極版が伸びてきていたので、そこに乗っかった「POP LAND〜モンスターバージョン〜」というテーマに決めました。

(2)テーマに沿ったキャラクターやパーツをたくさん描きます

シンプルなモンスターを思いつくままにたくさん描きました。これはiPadで描いたものですが、昔は紙に描いてAdobe Captureというアプリでトレースしていました。

(3)Illustratorで着色し、テンプレート上に並べます

着色後、テンプレートに並べる前に整列させて集合写真を撮りました。

まずメイン画像に並べます。

まとまりなくしようと思っていたのですが、整列した方がいい感じだったので採用しました。色や形が雑多なものが整列してるのっていいですよね。

その後、メニューボタン画像に使えそうなキャラクターを並べ・同じくプロフィール画像・パスコード画像と並べていきます。

「使えそうなもの」と描きましたが、大抵は「こいつプロフィール」「こいつメニューボタン」となんとなく決めながら描いています。

メイン画像と同じ並びを使ってトークルーム背景画像を作りました。こちらは上述した通りトークの邪魔にならないよう少し薄くしています。

(4)不足していたりサイズが合わないものは追加で描きます

メニューボタン画像がONのときの画像が足りないので、OFFで選んだキャラクターが手を上げて喜んでいるバージョンを新たに描きました。

(5)カラースキンに配置して微調整します

ここでいったん審査リクエスト前の状態まで登録し、プレビューを確認しながら微調整していきます。メニューボタン背景やパスコード画像を変更しました。

こちらが完成したプレビュー画面です。利用者の端末によって表示は若干異なるのですが、このプレビューのままストアに並ぶので、少なくともこの時点でおかしなところはないように気をつけます。

まとめ

いかがだったでしょうか。作り方や作風にもよるのですが、個人的にはLINE着せ替えはスタンプより作りやすい割に数が少ない、狙い目のコンテンツだと思っています。今回の記事で「思ったより難しくなさそう」と思っていただければ幸いです。

LINE着せ替えの作り方に関する部分は以上になります。今回はとことん自己流な作り方をご紹介したので、違う部分は読み替えていただければ幸いです。

もしこの記事が参考になったと思う方は有料部分の購入という形でサポートしていただければ幸いです。サポートしていただいた方には、LINE着せ替え制作に使える自作のIllustratorテンプレートをプレゼントします。着せ替えのテンプレートは公式がPhotoshop形式で配布していたり、Illustrator形式でも無料配布しているところはありますが自分で作ったやつが一番使いやすいです。

ひとまず無料部分はここまでとなります。最後まで読んでいただきありがとうございました！