【2021年最新】LINE着せ替えの作成手順完全ガイド

てちこ

こんにちわ。てちこです!!

Twitterの企画で、

オーダーメイドLINE着せ替えを無料でつくります!!

というものをやりました。

10個くらいLINE着せ替えを作らせていただき、
LINE着せ替えのつくりかたについて詳しくなったので、
解説していこうと思います!

今回はillustratorを使って画像データをつくることを想定した記事ですが、
画像データ作成以外のところは、全員同じなので
Photoshopや別のソフトを使って画像データをつくる人も
読んでみてください。

はじめてつくるよ!!

という人を想定して詳しく書いていきます!

それではいきましょーー!!!

目次

LINEクリエイターズマーケットに登録する

まず、LINEクリエイターズマーケットに会員登録しましょう。

登録したらマイページに進みます。

マイページ左上の【新規登録】をクリックします。

その後【着せ替え】をクリックすると、下の画面になります。

ひとつひとつ項目を埋めていきましょう。

てちこ

簡単なので安心してね!

はじめの【タイトル】は英語で入力します。
海外で販売される時に表示されるものですね。

私は海外で売れてくれー!
と思ってないので、日本語のタイトルをGoogle翻訳かけたものにしてしまっています。

その下の【着せ替え説明文】もタイトルと同じもののコピペです。笑

着せ替え説明文は10文字以上という制限があります。

その下の【言語を追加】という項目から【japanese】を選びます。

すると、【タイトル】【着せ替え説明文】という項目が増えます。

今度は日本語で好きなタイトル、文章を入力していきましょう。

これらは後から何回でも修正できるため、そこまで真剣に考えなくても大丈夫です。

さっと打って次いきましょ!

次は【コピーライト】という項目です。

コピーライトは

  • 著作権の保持者明確化
  • 無断転載の防止
  • 著作物発行年の明確化

のためのものです。

詳しい書き方など興味ある方は、調べてみてください。

私は「copyright©Techiko23」としています。

Techiko23 のところを変えればそのまま使えますので、参考までに!

次の【ライセンス証明】の項目ですが、
既存のキャラクターを使いたい場合に入力することになります。

今回新しくキャラクターをつくる場合やキャラクターを使わない場合は入力しなくても大丈夫です。

既にあるキャラクターを使う場合、

自分の著作物だよー
自分が使う権利のあるものだよー

ということが分かるURLを
作品が確認できるURL】のところに入力してください。

参考ですが、
私がフォロワーさんに販売したTwitterのアイコンのキャラクターを元に
LINE着せ替えをつくったのですが、

アイコン作成のことを書いたブログ記事のURLと

その他、補足事項】のところに

アイコンの販売はしましたが、著作権は私に帰属し、販売先の方からの許可も得ています。

と記載したところ、無事販売できました。


これでこの画面の入力終わりです!
お疲れ様でした。

つぎは、画像データについて詳しくみていきます。

てちこ

ここからが本番!頑張りましょうね!笑

illustratorのテンプレートを使う

illustratorでの説明です。

Photoshopを使用して画像データをつくる場合、
公式からテンプレートが配布されていますので、それを使いましょう!
下記リンクからダウンロードできます。

illustratorのテンプレートは、配布してくださってる親切な方がいますので
使わせてもらいます。

このテンプレート使いやすくとてもありがたいのですが、

メニューボタン画像の
【HOME用のONのの時の画像と、OFFの時の画像】
のアートボードが、iPhone用、android用共に足りないので

メニューボタン画像のアートボードをコピーして
それぞれのアートボードに

  • i_29 (iPhone用OFFの時の画像)
  • i_30 (iPhone用ONの時の画像)
  • a_29 (android用OFFの時の画像)
  • a_30 (android用ONの時の画像)

とタイトルをつけます。

参考までに
iPhone用のアートボードのサイズは
W128×H150
android用のアートボードのサイズは
W128×H112

です。

てちこ

準備OK!!ではつくりはじめましょう!!

メニューボタン画像からつくる

なんの画像から作り始めてもいいのですが、私は
【メニューボタン画像】
からつくり始めます。

下の5匹の猫ちゃんのところですね。

  • 友達
  • トーク
  • タイムライン
  • 通話
  • その他
  • NEWS
  • ウォレット
  • ホーム

の計8種類を

ONとOFF
android用とiPhone用

と計32個つくります。
android用とiPhone用 は若干サイズを調整するだけのコピペなので
実際にデザインするのは16個だけです!

背景は無くて大丈夫です。

てちこ

国によって表示されるメニューが違うんですって!

下のカタカナの文字とかぶらないように、少し上の方につくるのがポイントです。

あとから調整できるので、位置はざっくりで大丈夫です!

メニュー背景画像をつくる

次に先ほど作った、メニューボタン画像の背景となる
メニュー背景画像をつくります。

ここは透過させることができないため、
アートボード全体に何かしらデータを置いてください。

iPhone用画像の上部〇ピクセルだけ透過にできるなどありますが、
ややこしくなるため色を置いちゃえば間違いないです。

そして左右のデザインをまったく同じにしないと、
申請に通らないので注意しましょう。

上は公式サイトからの画像です。
赤い四角の中の【リピート部分】というところの、
高さや色などをピタッと合わせます。

ランダムなギザギザでつくった芝や、波などの背景は使えません。

カラースキンという全体の色味を見てから、
ここの色を決定してもいいと思うので、
適当に灰色を全体に置いておき、次に進んじゃうのもオススメです。

メニュー背景画像はいらない場合つくらなくてもいいです。
その場合、カラースキンの色か背景色が適用されます。

パスコード画像をつくる

ON用の画像とOFF用の画像を、
iPhone用とandroid用の計16個つくります。

シルエット→イラスト
と表示されるようにしたり

パスコードを押すたびにストーリーが進むようにしたり

考えるのが楽しいですね。笑

私の作ったスコティッシュフォールド着せ替えでは、
ねずみのシルエット→イラスト
にしました。

パスコード画像では透過してもいいので、
全体に色をつけたりする必要はありません。

プロフィール画像

プロフィールの画像を設定していない人のところは、
この画像が表示されます。

個人用、グループ用の画像を
iPhone用、android用と計4個つくります。

丸く表示されますが、タップされると四角く表示されるため
四隅までデータをつくりましょう。

ここでも透過できるので、
必ず全体的に何かデータを置かなくてはいけないわけではありません。

スコティッシュフォールド着せ替えでは、
シンプルに〇のデザインにしました。

オレンジの丸のところです。

トークルーム画像

ここがちょっとややこしいです。

いろんな端末があってそれぞれサイズがあるので、

iPhoneだと
最大:横1482px × 縦1334px
最小:横60px × 縦60px

androidだと
最大:横1300px × 縦1300px
最小:横60px × 縦60px

のサイズで作ります。
テンプレートでは最小のサイズのアートボードになっていますが、
私は最大に合わせてつくりました。

画像は、中央下揃えで表示されるみたいです。

私は、iPhoneは左下がだいたいこの辺
とうガイドをひきました。笑



透過できるので、背景色はカラースキンに任せたい
ということだったら、それでも大丈夫です!

スプラッシュ画像

スプラッシュ画像は、LINEを起動したときに表示される画像です。

【背景】と【その他】
を別々につくらなくてはなりません。
使う端末によって画面の大きさが違うからですね。

背景は、
完全に透過か(何も色を置かない)
全体に色を置くか
の2択です。

ここでは、背景色以外のイラストなどは何も載せません。

デザインは右のアートボードの
スプラッシュ画像(ロゴ+イラスト)
の方にすべて載せましょう。

メイン画像

メイン画像は、販売される時に表示される画像です。

  • iPhone用
  • android用
  • LINE STORE用

の3種類を用意します。

メイン画像は、スプラッシュ画像をそのまま縮小したものしか使えません。

コピペしてサイズのみ整えましょう。

スプラッシュ画像の背景を透過にしている場合は、
ここでは色を置きましょう。

メイン画像は背景透過にできません。

データをアップロードする

てちこ

データ作成お疲れ様でした!

早速アップロードしていきましょう。

png形式で書き出して、全部まとめてzipファイルにします。

LINEクリエイターズマーケットの【マイページ】から

【アイテム管理】

【着せ替え画像】

【編集】

と進みます。
すると下の画面になります。

【ZIPファイルアップロード】というところから、
つくったZIPファイルを突っ込みます。

すると自動的に画像が入るので、ラクチンです。

ファイル名が決められたものでなかったり(i_01.png i_02.pngなど)
PNG形式でなかったりしたらエラーになってしまいます。

エラー表示のところにカーソルを合わせると、
エラーの理由が表示されるので、
直すところがあれば直しましょう。

エラー表示が消えたら【次へ】を押します。

手こずるとしたらココかもしれません。笑
もし分からなくてどうしても困ったら、連絡くだされば一緒に考えます!笑

私は数時間悩んで、アートボードの位置を整数にしたら、
エラー表示が消えたということがありました。笑

カラースキン選択

  • ヘッダー部分
  • パスコード画面の背景
  • トークルームの吹き出しの中

などの色は、決められたカラースキンという配色パターンの中から選ばなくてはいけません。

好きなものを選びましょう。
選ぶと下の方で実際に自分のつくったデータと合わせた画面が表示されるので、
見ながら決められます。

たとえば茶色いカラースキンを合わせたらこうなります。

トークルーム背景のイラストの位置や
メニューボタンの背景の色などをここで確定させます。

わたしは、この画面をスクショしたものをillustratorに貼り付けて
メニューボタン背景の色をカラースキンと合わせたりしています。

訂正したら、もう一度書き出して、
ZIPファイルをアップロードしなおして再度確認。

オッケーならば、晴れて右上の
【リクエスト】
をクリックし、審査へと進みます。

ネコちゃんのカラースキンは下のものにしました。

審査

だいたい2日以内には、

リリースできますよー!

リジェクトです! 訂正してください!

のどちらかのメッセージが、
LINE公式から来ます。

リジェクトの場合でも、理由をしっかり教えてくれるので
そこを直せば大丈夫です。

サッと直して、すぐ再申請しましょう。

審査が通れば【リクエスト】と同じ場所のボタンから【リリース】できます。

自分のつくったものがLINE STOREに並んでいるのを見ると、

嬉しい気持ちになりますよ!笑

まとめ

どうでしたか?

LINEスタンプと比べると、

画像のサイズがたくさんあったり、
ここは透過できてーとかルールがあったりして、

ちょっとめんどくさく感じるかもしれません。

ですが、用意するイラストの種類自体はLINEスタンプよりも少ないので
私はLINE着せ替えの方がつくりやすいです。

LINEスタンプより、分母が少ないので見てもらえる可能性も高いです。

例に使った【スコティッシュフォールド シンプル】の着せ替えリンクを
下に貼ります。
企画でいろいろ作ったので、他の着せ替えも是非みてみてください。

みなさんのオーダーメイドでのこだわりが詰まっています。笑


この記事を見てLINE着せ替えつくったよー!という方いましたら見に行きたいので、
Twitterでも、お問い合わせでも、なんでもいいので教えてくださればと思いますっ

ここまで読んでいただき、ありがとうございました!

この記事が気に入ったら
フォローしてね!

わたし、Twitterやってるよ!
  • URL Copied!
目次
閉じる