目次
クリエイターズ着せかえをつくってみよう！
今回は4月中旬リリースとアナウンスされている「LINEクリエイターズ着せかえ」をつくってみましょう。スタンプ同様クリエイターズ着せかえのガイドラインは既に発表されているので、以前制作したスタンプのキャラクターを利用してを制作していこうと思います。制作時間としてはスタンプより着せ替えの方が流用できる箇所があるので、スムーズにできるかと思います。では早速チャレンジしてみましょう！
※本チュートリアルはCC2015を使用しています。
※本記事は「クリエイターズ着せかえ」リリース前に作成されたものですので、ご了承ください。
まずは書き出しファイルを確認する
LINEクリエイターズ着せ替えは全部で46個のPNGファイルを生成する必要があるので、まずはillustratorでスライスを46個設定して、一括で書き出せるようなテンプレートファイルをつくります。ちなみに僕の環境では実際に書き出すをちょっと動作が重いです…。
クリエイターズ着せ替えのガイドラインは以下を参照してください。
ガイドラインを見ると分かると思いますが、書き出しファイルはiOSとAndroidの両サイズを生成しているので、実際のデザインボリュームは約半数で済みます。
メイン画像をつくろう
「メイン画像」はクリエイターズ着せかえの顔となるイメージ画像です。ガイドラインでは「スプラッシュ画像」を元にサイズ変更したものとありますので、今回の記事で最後に紹介するスプラッシュ画像のサイズ変更版で問題ないと思います。画像サイズはiOS、Android、LINE STORE用の3種が必要となります。
メニューボタン画像をつくろう
「メニューボタン画像」は「友だち」「トーク」「タイムライン」「通話」「その他」と5種に対して、ONとOFFの画像を制作しますが、ONとOFFではデザインがある程度統一されていた方がユーザーも混乱しませんので、すこし動きをつけるような感じで問題ないと思います。今回は各内容に合わせてキャラクターにイラストを追加し、さらにON時には動きがつくようなものにしてみました。
メニュー背景画像をつくろう
「メニュー背景画像」はiOSとAndroidで画像サイズが違い、両OSとも左揃えで配置されます。ただしAndroidの方はリピート画像になりますので、右端と左端がシームレスになるよう調整する必要があるので、注意しましょう。メニュー背景画像は先ほど制作した「メニューボタン画像」の背景となりますので、色調などを考えて控えめなもので問題ないと思います。
パスコード画像をつくろう
次に「パスコード画像」ですが、これも「メニューボタン画像」同様ON/OFFを制作する必要があります。基本的に1種類の画像でも問題ないのですが、ここはちょうど4コマあるので、おもしろいパスコード画像にしてみましょう。今回はメインキャラクターが変身する様子を左からアニメーションのようにパスコード画像にしてみました。パスコードのOFF画像はON画像のイラストをパスファインダーの「合体」で統合してシンプルな塗りにしました。
プロフィール画像をつくろう
「プロフィール画像」はアップ後に円形のマスクがかけられますので、Illustratorなどではあらかじめマスクを作成して確認しながら制作するのが良いでしょう。
個人とグループがありますので、キャラクターなどを使い一人と複数人のイラストでOKです。また、マスクがありますので、円形で収めてもトリミングしてもどちらでもいいと思います。
トークルーム背景画像をつくろう
「トークルーム背景画像」は画像を用意しなくても基本のカラースキンの色が適用されますので、つくらなくてもいいのですが、やはりここはキャラクターなどをデザインとして入れておいた方が全体的な着せかえとして統一感がでていいと思います。端末に対する配置はセンター下揃えなので、大きなデザイン要素を配置する場合はセンター下揃えにしましょう。
スプラッシュ画像をつくって完成！
最後は「スプラッシュ画像」です。これは最初に紹介した「メイン画像」と同様のデザインになると思います。キャラクターとタイトルをメインとしたシンプルな構成のデザインでOKだと思います。
LINEクリエイターズ着せかえは現時点でサービスがリリースされていないので、アップした画像パーツに対して着せかえ全体のチェックなどができないのでイメージが湧きにくいですが、リリース後に様子をみていこうと思います。また、今回の記事で制作したクリエイターズ着せかえ用のIllustratorテンプーレートファイルが以下からダウンロードしていただけますが、サービスリリース前という事で、動作を保証するものではありませんので、ご了承いただければと思います。
それでは皆さんも是非クリエイターズ着せかえにチャレンジしてみてください！
サンプルファイルダウンロード
※4/20に最新版にアップデートしました。4/20以前にダウンロードされた方は再ダウンロードをお願いいたします。
