着せかえを作るのって大変だと思ってませんか?
実は、2~3日で簡単に作れちゃうんです!

今回は「ふわふわプリンス」という人気着せかえを制作している、株式会社ねこのてカンパニーさんにおじゃまして、作り方のコツや、たくさんの着せかえの中から選んでもらう工夫などを教わりました!

78d31442.png

実はこの猫のもっぷくん、猫カフェ「てまりのおうち」のアイドル的存在なんだそう。

9bd0d1af.jpg
カフェのナンバーワン猫を決める総選挙で優勝!

さっそく、もっぷくんの写真がどのように着せかえになったのか見ていきましょう!

「着せかえ」って簡単に作れるの?


――着せかえって何日くらいで完成するのでしょうか?


ねこのてカンパニーの担当者さん:2~3日くらいですね! 画像数が多いので、ハードルが高いイメージがあるかもしれませんが結構簡単なんですよ。

――画像がたくさん必要なのに、そんなにすぐに作れるんですか?

担当者さん:制作ガイドラインには「メイン画像3個」「着せかえ画像50個」と書いてありますが、実際はその半数を用意できればいいんです。

着せかえ用に作った25個の画像を、Android用とiPhone用のサイズに分けるイメージですね。

それでは、必要なパーツと作成のコツをご紹介します!

IMG_0194補正済み


――よろしくお願いします!

A.メイン画像


必要画像枚数 iOS用の画像サイズ Android用 LINE STORE用
3枚 横:200×縦:284pix 横:136×縦:202pix 横:198×縦:278pix

担当者さん:
メイン画像は、LINE STOREに並んだときに表示される画像のことです。中身との違いがないように、着せかえ全体をイメージできる1枚にしたいですね。

メイン画像

あと、色味やイラスト、文字は濃いほうが目立ちます。

この「ふわふわプリンス」も、元のデザインはもっとパステル調だったのですが、販売ページに並んだときのことを考えて明暗をはっきりさせました。

c187e198.png

左が元画像。着せかえ用に猫や星を強調!

B.メニューボタン画像


必要画像枚数 iOS用 Android用
24枚 横:128×縦:150pix 横:128×縦:112pix

担当者さん:
メニューボタン画像は、見えやすいようにイラストと文字を大きめにしています。
それぞれ何のボタンなのか分かるようにマークを付けたり、タップしたときのONとOFFの違いが分かるように工夫しました。

b0a0abdd.png


ボタンとボタンの間隔がつまりすぎていると見栄えが悪いので、サイズ調整は大事ですね。

こんな感じで、編集画面にガイドを引いて大きさを揃えるとよさそうです。

ガイド線
Android用とiPhone用の比率が違うのでバランスに注意!

C.メニュー背景画像


必要画像枚数 iOS用 Android用
2枚 横:1472×縦:150pix 横:640×縦:112pix

担当者さん:
メニュー背景画像は、ボタンの後ろに表示される画像のことです。

リピートされるのでつなぎめが分かりにくいようなデザインがおすすめです。

iPhoneだと下に「友だち」「トーク」などの文字が表示されるので、そこの背景だけ薄い色にすると見えやすくなりますよ!

00a3518f.png

iPhone用の背景画像は透過を忘れずに!

D.パスコード画像


必要画像枚数 iOS用 Android用
16枚 横:120×縦:120pix 横:116×縦:116pix

担当者さん:
パスコード画像は、あまり目につかない場所だからこそ遊び心を持たせました!

もっぷが赤ちゃんの姿から、王子の姿に成長する様子を表現しています(笑)。

これも、パスワードを入力したときのONとOFFの違いを分かりやすくしました。

95ca50e6.jpg


E.プロフィール画像


必要画像枚数 iOS用 Android用
4枚 横:240×縦:240pix 横:247×縦:247pix

担当者さん:
プロフィール画像のもっぷですが、個人用は1匹、グループ用は2匹など、細かいところにもこだわってみました。

4

LINEのプロフィールアイコンは丸型なので、別のレイヤーで枠を作ってあてはめてみると、丸くなったときのイメージがつきやすいかもしれませんね!

アイコン

F.トークルーム背景画像


必要画像枚数 iOS用 Android用
2枚 横:1482×縦:1334pix 横:1300×縦:1300pix

担当者さん:
トークルーム背景画像は、もしかしたら一番苦戦したかもしれないです……。

スマホの機種によっては表示位置がずれてしまうので、着せかえの申請画面のプレビューを見ながら調整しました。

センター下揃えで配置されることを意識して作ってみてください!

f0ea9785.jpg

画像が重すぎるとアップロードできないので要注意!

G.スプラッシュ画像(Androidのみ)


必要画像枚数 Android用(1) Android用(2)
2枚 横:480×縦:720pix 横:1300×縦:1300pix

担当者さん:
スプラッシュ画像は、LINEアプリを起動したときに一瞬だけ表示される画像のことです。

背景に合わせるロゴやイラストは忘れずに透過してくださいね!

700a5db1.png

左が背景画像。右のイラストの黒い部分は透過済み。

審査の流れとポイント


――必要な画像が全て揃ったあとは、いよいよ審査ですか?

担当者さん
LINE Creators Marketのマイページにログインして、[新規登録]から着せかえの情報を登録します。

キャプチャ

販売情報を入力して、iPhone用とAndroid用の着せかえ画像をアップロードしてください。

そして50種類のカラースキンの中から、好みのパターンを選択します!

Photoshopを使っている方は、制作ガイドライン(詳細)の[着せかえテンプレート]にあるファイルをダウンロードして使ってみると、選びやすいと思います。

72192a1e.png


色の組み合わせによっては見えづらくなってしまうので注意!

――申請するときに注意したほうがいいポイントはありますか?

担当者さん:写真を切り抜いて使う場合、消し忘れがあるとリジェクトになりやすいです。

対象物と反対色に近い、暗めの色のレイヤーを背景にすると、消し忘れに気づくことができるのでおすすめです。

1
ゴミを残さずに透過しましょう!

――他に気をつけたほうがいいことはありますか?

担当者さん:iPhone用とAndroid用のデザインを変えすぎないことですね。

どの画像も見た目が違いすぎるとリジェクトされるので、統一感を持たせることを意識してみてください!

最後に


――ちなみに、今回の着せかえは何枚の写真を使ったんですか?

担当者さん:8枚くらいの写真を使いました。ピントが合っていて、可愛く写っていて、正面を向いている写真がおすすめです!

意外と簡単なので、ぜひ大切なお気に入りの写真で着せかえを作ってみてくださいね。

――ありがとうございました!


いかがでしたか?

9c14fe33.jpg


着せかえづくり、みなさんもぜひチャレンジしてみてくださいね!


▼こちらでも最新情報などを発信しています!
linecreators
tt