初めてLINE着せ替えを作ってみて感じた事、次に生かしたい事
こんにちは！
イラストレーターのみきとみなもです。
この度LINEさんにて着せ替えを作りました。
「ハートの女王着せ替え」
発売中です！よろしければ見てってくださいね～！
（作者名みなもで販売しております。ほかにもありますのでよければご覧ください）
憧れのライン着せ替えを作ってみた！
絵描きなら憧れるのではないでしょうか？自分の絵を生かしたグッズやUIに。という事で今回はLINEさんの着せ替えを作らせて頂きました！
LINEの着せ替えはスタンプとは違い、26枚の画像を用意し、あとはその画像をアップロードすれば完成という、比較的簡単（？）なものです。
頭の中にあったのは大好きなアリスのキャラクター「ハートの女王」でした。今回私はこれをテーマにして制作を行いました。
まずテーマを決める
ハートの女王をテーマに決めた私は早速画像サイズを調べてイラストを描きました。
まず初めに作った画像が「メイン画像」と言われる、商品を紹介するための画像です。サイズは機種によって違いますが合計３枚用意すれば完成です。
（Androidの場合、横136px × 縦202px）
pxに聡い人ならお気づきかとおもいますが小さいです。大体いつもイラストを描くサイズが3000px×3000pxの私はその小ささにどうすればいいんだ？とそれなりに悩みました。何が問題だったかというと、絵がつぶれるという問題です。大体作る画像の２倍のサイズで絵を描き始めるのが私のこれまでの経験だったので、今回も例にもれず、２倍にして描いていこうと思いましたがなにせ小さい…ドット絵を描いている気分です。こんなでは絵が描けません。なんと私はここで挫折しかけました。
つまり、画像は小さいのだ
「これそもそも小さくていいんじゃないんですか？確かに画像は多少潰れますけど、着せ替えの商品ページを見たらアップにするわけでもないみたいだし」
これは当時ディスコでお話していたせんせー（同業者のあさくらさん）のセリフです。そうです、このメイン画像は商品を紹介するためのものでつまり、パッケージの様なものでした。つまるところ小さくて問題なしという事です。これに気付くのに30分かかり、その間私は自分の頭の悪さに暗澹とした思いをしていたところでした。本当に着せ替え作るのやめるところだった…。
という事で私はトークルーム背景のサイズで一度絵を描き、背景透過したそのイラストをメイン画像のサイズに合わせることでなんとか３枚完成させることができました。（LINEさんのガイドラインのページを何度もみたはずでしたが、理解できないアホウドリィ…）
メニューボタン画像を作る
これはもう簡単でしたね。テーマはもう決まってましたので、ハートの女王に関するモチーフを絵にするだけでした。（例えば、ハートの女王なので、薔薇、ハート、王冠、白兎などですね）
画像はボタンが押された時と押されてない時で画像が違うのでその際のちょっとした絵の違いを出すのが制作者の手腕だなあと思いました。
こんな感じにちょこっと違う絵を用意しました。色を変えただけで簡単ですね。こんな感じの画像をLINEのメニュー全部に当てはめて作ります。
それをオンの場合とオフの場合で作っていきました。
ここまでで、１８枚の画像を作成しました。もう半分まできましたね！
パスコード画像を作る。プロフィール画像を作る
本当はこの前に「メニュー背景画像」を作る工程がありますが、メニュー背景画像は上で書いたボタンを配置するバーの様なものなので基本は一色をバーン！と塗って完成ですので飛ばします。
と、いう訳でパスコード画像を作っていきましょう。私はLINEのパスコード使ってないのですが（不用心）ようは４つの画像があってそこに数字（パスコード）を入れていくと正解なら絵が変わる仕組みになっているようです。
私は女王さまのエピソード、兵士が赤いバラと間違って白いバラを植えてしまいペンキで赤く塗るという話を使って、何も文字がない時は白いバラの絵にし、数字をいれると段々赤くなっていくように制作しました。
いや～やっぱりこういうモチーフがあると制作が楽ですね。スタンプでもいえる話かと思いますが、「テーマ」「モチーフ」はしっかり決めて制作した方がいいなと改めて思いました。
次はプロフィール画像です。こちらはアイコンの事ですね。私はアイコンは自分の絵を使っているので、見た事はないのですがなにも画像を使っていないとアイコンがLINE専用のアイコン（それがデフォルト）になるようです。ということで、そのデフォルトの画像を制作していきます。こちらは個人の場合とグループの場合の２種類の画像を用意します。他の方の制作した着せ替えを見ると、この部分はトークルーム背景に使った画像を再利用している方が多い気がしました。なので、私もそれに倣って女王の顔をアイコン用のサイズに修正して作成しました。完成！
トークルーム背景の仕上げをしよう
仕上げもなにもこの段階で絵はもうできているのであとは規定の画像サイズに落とし込むだけですよ簡単ね！……と、それがそうもいきませんでした。背景画像は２種類（IOSとAndroid）用意しなければならないのですが、機種によって絵を配置する場所が違います（例えばIOSの場合、配置場所はメッセージ入力欄より上になり、Androidの場合はメッセージ入力欄の下になります）
まあ、プレビュー画面を見ればずれていることには気づけるのでそこで微調整をしていきました。完成！全部完成！やったね！！そう思っていた時期が私にもありました……。
カラースキンについて
これが一番重要。カラースキンについて。私は読み損ねていたのですが（あんなに丁寧に書いてあったのに）背景の色は用意した画像サイズでは機種によって（？）表示されない領域ができてしまいます。つまりそう、余白！！マージン！！
これを回避することができるのがこのカラースキンです。自分で用意したものではなく、LINEさん側で用意された背景の事ですね。色はいっぱいありおしゃれな色に変える事ができます。これに任せておけば余白ができてしまう問題を解決することができます。つまり、絵は独立したものにし、PNG（透過）で作るのが望ましいという事です。
最後に
という訳で私の初めてのLINE着せ替え制作記録でした。作ってみた感想は確かにスタンプより簡単！という事ですね！あと描きたい絵が描けるのもポイント高いと思います。これで売り上げが伸びたらいう事なしですね！（そこが問題）この後オリジナルイラストを使った（アリスは原作がありますのでね）着せ替えをもう一つ作成したのですが、使うモチーフがしっかりと決まっていない状態で制作したので途中でいらん時間を使ってしまいました。
「テーマを決める」って大事ですね。
そんな感じです！LINE着せ替え作りたいけど、よくわからないところがあるなーどうしようかなーという方にこの記事が後押しになれる事を願って終わりといたします。ここわかりづらいよ！ってところがありましたらコメント頂ければ私のこたえられる範囲でしたらお答えします。
ここまで読んでくださりありがとうございました！そんなあなたによきLINEライフを！！自作はやっぱりいいですよぉ……！！
この記事が気に入ったらサポートをしてみませんか？