こんなあなたにおススメです

ライン着せかえつくってみたいんだよ
どうも、ライン着せ替もついに3作目リリースしました!ぺろおじさん( @peroojisan1126)です。


全部シーズーで作ったんだよ~
「ライン着替え」を、いざ作ろうと「公式サイトから仕様書」を見てみると、なんかよくわからなくて「挫折」しがちなんですが…
大きく分けると2つの工程で作れるんです。
- カラースキンを選んで、デザインを考える
- 必要な画像(絵)を覚えて、画像(絵)を描く

簡単でしょ?

これだけならね!
そこで、本記事では、ライン着せかえの作り方を「簡単」に「効率良く」作る方法をお届けします!
目次
ライン着せ替え作り方
①カラースキンを選び、デザインを考えよう
①カラースキンを選び、デザインを考えよう
まずは、「カラースキン」の選定です。「カラースキン」とは、以下のLINE画面のフレームの部分


シーズーサマーさまーはBLUEの03を使ってる~
カラースキンの種類は「全50種類」しかないので
カラースキン先行で「ライン着せかえのデザイン」を考えるのが、とても大事なんです。

スキンに縛りがあるから、個性的すぎるものは作れないのよね~

カラースキンまとめサイトを見て、デザインを考えましょう!
ライン着せ替え作り方
②必要な画像を覚えて、絵を描く
②必要な画像を覚えて、絵を描く
カラースキンを見て、おおよそのデザインを考えたら、ライン着せ替えのパーツを描いていきます。

ライン着せ替えに使う、絵を描いていく工程です。

主の作業だね
ライン着せ替えに必要な画像(絵を描く部分)は全部で「61個」
この画像数の多さが、ライン着せ替えの敷居を高く感じさせる理由です。
- Android用の必要画像が31個
- iOS用の必要画像が29個
- LINE Storeの画像が1個

多すぎてげろでちゃうよね
げろが出ちゃいそうな、必要画像数ですが…
Android・iOSは「同じ絵(デザイン)」でOK
なので、いきなり、描かなければならない、画像数は61個から半分の30個へ削減できちゃいます!

おー
そして、「ライン着替え」に必要な画像を「パーツ毎」に、分けると「7種類」に分けられ
- メニューボタン8種ON・OFF「32個」
- パスコードボタン4種ON・OFF「16個」
- メニュー背景「2個」
- トークルームの背景「2個」
- プロフィール画面の個人、友達「4個」
- メイン画像「3個
- スプラッシュ画像「2個」
この順番で描き進めて、流用できる部分を流用すると…
実際描く必要のある画像数は約20個まで減少します。

ラインスタンプより楽じゃん!

実は、そうなんですよ‼
次項から、効率の良く描く為の「パーツ毎の描き方」ご紹介していきます。
- メニューボタン
- パスコードボタン
- メニュー背景
- トークルームの背景
- プロフィール画面の個人、友達
- メイン画像
- スプラッシュ画像
ライン着せ替え ①メニューボタンとは?
まず最初は、ライン着せ替えのメイン「メニューボタン」から描きましょう
メニューボタンとは、この黄色枠のキャラクター部分のコト

メニューボタン画像サイズはこの通り
- Android「横128px × 縦112px」
- iOS「横128px × 縦150px」
メニューボタンの種類は、以下の合計8パターンです。
- 友だち
- ホーム
- トーク
- タイムライン
- 通話
- ニュース
- その他
- ウォレット
ON・OFFで合計16種類で、iOS・Androidで×2なので、必要画像数は32個です。

かなり多い・・・
8パターンで32画像、必要な「メニューボタン」ですが…
実際に「ライン上で、使われるボタンは5パターンだけ」
その理由は「日本と外国でラインの仕様が違う」ので「8パターンの絵(デザイン)を求められている」のです。申請する際は、同じ絵(デザイン)にしても問題ない部分なんです。

仕様違いの重複分は、まとめるのと楽ですよね
まとめられる「重複している3パターン」は以下の通り
- 日本版「ホーム」=外国版「友だち」
- 日本版「ウォレット」=外国版「その他」
- 日本版「ニュース」=外国版「通話」

5パターンのON・OFFで×2「10種類」絵を描いて、iOSとAndroidとサイズ調整すれば、メニューボタンはさくっと終了です。

描くのは10種って楽だよね

でしょ~
メニューボタンの作り方
メニューボタンの仕様を理解したら、描く!
描く際は、余白を十分に気持ち「小さめ」に描く事がとても大事です。
「大きく」描きすぎるとリテイクになりやすいので気を付けましょう!
効率の良い。描き方は以下の通り
- Android用画像を描く
- OFF画像を描き、ON画像に動きを付ける
- Android用画像を拡大しiOS画像を出力する

この作り方がベストです!
iOSに比べ、Androidのほうが「画像サイズ」が小さいので先に描く!
余白は以下の画像ぐらい取るイメージです。


OFFから画像を描き、完成したらOFF画像を複製、ON画像様にファイル名修正、OFFの絵を下地にON画像を描く!
位置がズレないので、この方法がベストです。大きく動きを意識して描くと可愛くなりますよ~
Aindroid用画像を描いたら、コピーし複製します。ファイル名をiOS用に変更して、キャンバスサイズを拡大するだけ!

大きく描くとライン画面上で見栄えが悪くなりがち、気持ち小さめがとても大事なんです。

小さめだね!
ライン着せ替え ②パスコードボタンとは?
パスコードボタンは「パスコード入力」の下の部分の4つの画像です。

「パスコード画像」のサイズ
- Android用サイズ「横116px × 縦116px」
- iOS用サイズ横「120px × 縦120px」
パスコードボタンの種類は以下の4パターン
- パスコード1
- パスコード2
- パスコード3
- パスコード4
ON、OFFで8個必要となり、iOS・Android用が必要なので×2で合計16個

これも多いよね・・・

パスコートはメニューより簡単に作れます
パスコードボタンの作り方
「パスコードボタン」は「メニューボタン」をそのままリメイクが簡単です。OFF画像は全部同じ、ON画像は少し動きがあればいい感じに仕上がります。

全部寝てる(OFF)⇒起きる(ON)
描き方は以下の通り
- メニューボタンをリメイクする
- Android用、OFF画像を作る
- Android用、ON画像を作る
- iOS用にキャンバスサイズを変更する

「寝てたのが起きる」みたいな簡単な感じ
案外、いいんです!
「パスコードボタン」と「メニューボタン」はサイズが近いので、「メニューボタン」が小さめに書いてあれば、そのまま流用も可能です。
パスコードボタンOFFの画像は4つ同じでもOKです。同じ小さい画像が4つ並ぶと結構可愛いのでオススメ!
ほかのクリエイターさん達も「OFFはキャラクター不在」から「ONを押すとキャラクターが出現」のように実際、手抜きをしている部分なんですよね。

OFF画像を複製、ON画像用にファイル名修正したらリメイク開始
私の場合は「OFFでシーズーが寝てて」「ONで少しづつ目が覚める」そんな感じでOFF画像を修正していきました!
メニューボタンに比べると「かなり手抜き」です!

Aindroid用画像を描いたら、コピーし複製します。ファイル名をiOS用に変更して、キャンバスサイズを拡大して出力しましょう!

少し簡単になったね~

メニューボタンと比べてパスコードボタンは多くのクリエイターさんも良い意味で手抜きしてる部分ですね
ライン着せ替え ③メニュー背景とは?
「メニュー背景」は「メニューボタンの背景部分」です。
「コレ」です。

実際のライン画面で見てみると「メニューボタン」が上に乗るので、メニューボタンを意識しつつ描かなければなりません。

背景のサイズ
- iOSのサイズ「横1472px × 縦150px」
- Androidサイズ「横640px × 縦112px」

iOSのほうが大きいって珍しいね!

iOSのほうが簡単に描けるんです!
メニュー背景の作り方
メニュー背景は、シンプルにすると効率UP、そしてAndroid画像作成が簡単になるので非常にオススメなんですが、私の様に「なみなみ」デザインにする場合は、左右のつながり部分がとても大事!
描き方は以下の通り
- iOSは、上部を塗らず「透過」出力
- Androidは左右の端のつながりを意識して描く

iOSはササッと簡単!

Androidは少し大変
画像のつながりを意識です!
iOSのほうが簡単なので、iOSから作成します。背景を描いたら、背景の上の部分は「色塗り無し」で「透過で出力」すればOKです。

「透過で出力」すると勝手に、背景となじんでくれるのでとても楽チン!

Androidは画像が繰り返し連続画像として使われるので「端の画像が連続してつながらないとリジェクト確定」なので要注意
まず、両端を描き「繰り返し画像」になっているか確認しましょう

そして、真ん中を埋める

更に、Androidは上部の透過出力がNGなので、塗りつぶししておきましょう!


仕様が違うとかメンドクサイね

繰り返し画像が案外大変で、何度もリジェクトもらいました…
ライン着せ替え ④トークルームの背景とは?
トーク画面の「文字が乗る部分」の背景です。
見やすさを考えて主張を弱く「薄めに描く事」が大事です。他のクリエイターさんは、ワンポイントなどのシンプルな物が非常に多いんです。

トークルーム背景画像サイズ
- Androidのサイズ「横1300px × 縦1300px」
- iOSのサイズ「横1482px × 縦1334px」
トークルーム背景を作る前に
「トークルーム背景」は指定サイズに合わせて、端から端まで絵を描いてしまうと、実際のライン画面上では「拡大表示」のように表示されてしまいます。
画像自体の使われ方が、表示する端末の「画面サイズ」または「横にして仕様する場合」を考えてトークルーム背景を要求されているみたいで…
スマホでラインを開いてみると、黒枠線の部分しか表示されていませんでした。

トークルーム背景を描く前に、表示される部分は「中央下揃え」の部分だけという事を覚えておきましょう!

がっつり絵を描くと結構凹んじゃうよ…

シンプルな連続画像なら気にしなくてOKなんですけどね~
修正前のトークルーム背景はこんな感じに描いていました。

修正後はここまで小さく修正しています!


これは実際リリースしてから分かった事なので、先に知っておくと「がっかり」防止になりますよ
トークルーム背景の作り方
「トークルーム背景」はシンプルな「連続画像」にするととても簡単!例えば「ドット」「肉球」などのアイコンを繰り返し配置がとても簡単なのでオススメです。
私の様に絵を描く場合は、小さい画像のAndroidから描き、iOSは足らない部分を描き足しで終了!「使われる部分」を把握して描いていきましょう!
- Androidのサイズ「横1300px × 縦1300px」で作成する
- iOSサイズ「横1482px × 縦1334px」にコピー書き足し

絵を描く場合は「使われる部分」を覚えておくことがとても大切!

がっかり防止だよ~
ライン着せ替え ⑤プロフィール画像とは?
プロフィール画像とは、以下の画像の「友達」「グループ」黄色枠部分です。

プロフィール画像のサイズ
- iOS 「横240px × 縦240px」
- Android 「横247px × 縦247px」

Androidのほうが大きいんだね~!
プロフィール画像の作り方
- 〇の中に納まるようにiOS用画像を描く
- iOS画像をAndroid用にキャンバスサイズを拡大する
〇をフレームに入るように描いて、収まるように絵をかきましょ~〇以外の部分かカットされますよ

iOS用画像を描いたら、コピーし複製します。ファイル名をAindroid用に変更して、キャンバスサイズを拡大して出力しましょう!

〇は書き出す前に「非表示」にして出力してね

〇非表示忘れがちなので注意です!
ライン着せ替え ⑥⑦メイン画像とスプラッシュ画像とは?
「メイン画像」と「スプラッシュ画像」は同じ「絵」で用途が違うだけ、なのでまとめて説明しちゃいます。
メイン画像は「LINEストア」販売用の画像です。

メイン画像のサイズ
- iOS 「横200px × 縦284px」
- Android 「横136px × 縦202px」
- LINE STORE 「横198px × 縦278px」

必要画像数は3個!LINE STORE用も必要になるんだよね~
「スプラッシュ画像」はAndroid端末でLINEを立ち上げると表示される画像です。「メイン画像」とサイズが違うだけなんです。
スプラッシュ画像のサイズ
- Android画像 背景「横1300px × 縦1300px」
- Android画像 ロゴとキャラクター「横480px × 縦720px」

必要画像は2個「キャラ」と「背景」を別々に出力!
「メイン画像」「スプラッシュ画像」の作り方
- メイン画像を作成
- メイン画像をスプラッシュ画像サイズに拡大
- 画像背景を出力
- ロゴとキャラクターを出力
メイン画像とスプラッシュ画像は同じデザインでOK
絵を描く際に「背景」「キャラ」「ロゴ」と分けておけば「サイズ変更」して出力するだけで終了です!

ここは1個だけ絵をかくだけだよね~

これで終了!
まとめ
ライン着せ替えは、ラインスタンプより「ネタ」が少なくて済むので、画像加工さえ効率よく進めればとても簡単なんです。
1回目は少しメンドクサイですが、2回目以降はサクサク作れます。
しかもライバルが少ないのでラインスタンプより「売れる」のもいい所なんですよ~

着せ替えは「ネタ」より「デザイン」って感じだよね~

一度作ってみてくださいね
ライン着せ替え「シーズーさまーさまー」絶賛発売中!宜しくお願いします。
