こんなあなたにおススメです
LINE着せかえ作りたい人ライン着せかえつくってみたいんだよ
どうも、ライン着せ替もついに３作目リリースしました！ぺろおじさん( @peroojisan1126）です。
全部シーズーで作ったんだよ～
「ライン着替え」を、いざ作ろうと「公式サイトから仕様書」を見てみると、なんかよくわからなくて「挫折」しがちなんですが…
大きく分けると2つの工程で作れるんです。
- カラースキンを選んで、デザインを考える
- 必要な画像（絵）を覚えて、画像（絵）を描く
簡単でしょ？
これだけならね！
そこで、本記事では、ライン着せかえの作り方を「簡単」に「効率良く」作る方法をお届けします！
目次
ライン着せ替え作り方
①カラースキンを選び、デザインを考えよう
①カラースキンを選び、デザインを考えよう
まずは、「カラースキン」の選定です。「カラースキン」とは、以下のLINE画面のフレームの部分
シーズーサマーさまーはＢＬＵＥの03を使ってる～
カラースキンの種類は「全50種類」しかないので
カラースキン先行で「ライン着せかえのデザイン」を考えるのが、とても大事なんです。
スキンに縛りがあるから、個性的すぎるものは作れないのよね～
カラースキンまとめサイトを見て、デザインを考えましょう！
ライン着せ替え作り方
②必要な画像を覚えて、絵を描く
②必要な画像を覚えて、絵を描く
カラースキンを見て、おおよそのデザインを考えたら、ライン着せ替えのパーツを描いていきます。
ライン着せ替えに使う、絵を描いていく工程です。
主の作業だね
ライン着せ替えに必要な画像（絵を描く部分）は全部で「61個」
この画像数の多さが、ライン着せ替えの敷居を高く感じさせる理由です。
- Android用の必要画像が31個
- iOS用の必要画像が29個
- LINE Storeの画像が1個
多すぎてげろでちゃうよね
げろが出ちゃいそうな、必要画像数ですが…
Android・iOSは「同じ絵（デザイン）」でOK
なので、いきなり、描かなければならない、画像数は61個から半分の30個へ削減できちゃいます！
おー
そして、「ライン着替え」に必要な画像を「パーツ毎」に、分けると「７種類」に分けられ
- メニューボタン8種ON・OFF「32個」
- パスコードボタン4種ON・OFF「16個」
- メニュー背景「2個」
- トークルームの背景「2個」
- プロフィール画面の個人、友達「4個」
- メイン画像「3個
- スプラッシュ画像「2個」
この順番で描き進めて、流用できる部分を流用すると…
実際描く必要のある画像数は約20個まで減少します。
ラインスタンプより楽じゃん！
実は、そうなんですよ‼
次項から、効率の良く描く為の「パーツ毎の描き方」ご紹介していきます。
- メニューボタン
- パスコードボタン
- メニュー背景
- トークルームの背景
- プロフィール画面の個人、友達
- メイン画像
- スプラッシュ画像
ライン着せ替え ①メニューボタンとは？
まず最初は、ライン着せ替えのメイン「メニューボタン」から描きましょう
メニューボタンとは、この黄色枠のキャラクター部分のコト
メニューボタン画像サイズはこの通り
- Android「横128px × 縦112px」
- iOS「横128px × 縦150px」
メニューボタンの種類は、以下の合計８パターンです。
- 友だち
- ホーム
- トーク
- タイムライン
- 通話
- ニュース
- その他
- ウォレット
ＯＮ・ＯＦＦで合計16種類で、iOS・Androidで×２なので、必要画像数は32個です。
かなり多い・・・
8パターンで32画像、必要な「メニューボタン」ですが…
実際に「ライン上で、使われるボタンは５パターンだけ」
その理由は「日本と外国でラインの仕様が違う」ので「８パターンの絵（デザイン）を求められている」のです。申請する際は、同じ絵（デザイン）にしても問題ない部分なんです。
仕様違いの重複分は、まとめるのと楽ですよね
まとめられる「重複している3パターン」は以下の通り
- 日本版「ホーム」＝外国版「友だち」
- 日本版「ウォレット」＝外国版「その他」
- 日本版「ニュース」＝外国版「通話」
５パターンのON・OFFで×２「10種類」絵を描いて、iOSとAndroidとサイズ調整すれば、メニューボタンはさくっと終了です。
描くのは１０種って楽だよね
でしょ～
メニューボタンの作り方
メニューボタンの仕様を理解したら、描く！
描く際は、余白を十分に気持ち「小さめ」に描く事がとても大事です。
「大きく」描きすぎるとリテイクになりやすいので気を付けましょう！
効率の良い。描き方は以下の通り
- Android用画像を描く
- OFF画像を描き、ON画像に動きを付ける
- Android用画像を拡大しiOS画像を出力する
この作り方がベストです！
iOSに比べ、Androidのほうが「画像サイズ」が小さいので先に描く！
余白は以下の画像ぐらい取るイメージです。
OFFから画像を描き、完成したらOFF画像を複製、ON画像様にファイル名修正、OFFの絵を下地にON画像を描く！
位置がズレないので、この方法がベストです。大きく動きを意識して描くと可愛くなりますよ～
Aindroid用画像を描いたら、コピーし複製します。ファイル名をiOS用に変更して、キャンバスサイズを拡大するだけ！
大きく描くとライン画面上で見栄えが悪くなりがち、気持ち小さめがとても大事なんです。
小さめだね！
ライン着せ替え ②パスコードボタンとは？
パスコードボタンは「パスコード入力」の下の部分の４つの画像です。
「パスコード画像」のサイズ
- Android用サイズ「横116px × 縦116px」
- iOS用サイズ横「120px × 縦120px」
パスコードボタンの種類は以下の４パターン
- パスコード１
- パスコード2
- パスコード3
- パスコード4
ON、OFFで8個必要となり、iOS・Android用が必要なので×２で合計16個
これも多いよね・・・
パスコートはメニューより簡単に作れます
パスコードボタンの作り方
「パスコードボタン」は「メニューボタン」をそのままリメイクが簡単です。ＯＦＦ画像は全部同じ、ＯＮ画像は少し動きがあればいい感じに仕上がります。
全部寝てる（OFF）⇒起きる(ON)
描き方は以下の通り
- メニューボタンをリメイクする
- Android用、OFF画像を作る
- Android用、ON画像を作る
- iOS用にキャンバスサイズを変更する
「寝てたのが起きる」みたいな簡単な感じ
案外、いいんです！
「パスコードボタン」と「メニューボタン」はサイズが近いので、「メニューボタン」が小さめに書いてあれば、そのまま流用も可能です。
パスコードボタンOFFの画像は４つ同じでもOKです。同じ小さい画像が４つ並ぶと結構可愛いのでオススメ！
ほかのクリエイターさん達も「OFFはキャラクター不在」から「ONを押すとキャラクターが出現」のように実際、手抜きをしている部分なんですよね。
OFF画像を複製、ON画像用にファイル名修正したらリメイク開始
私の場合は「ＯＦＦでシーズーが寝てて」「ＯＮで少しづつ目が覚める」そんな感じでＯＦＦ画像を修正していきました！
メニューボタンに比べると「かなり手抜き」です！
Aindroid用画像を描いたら、コピーし複製します。ファイル名をiOS用に変更して、キャンバスサイズを拡大して出力しましょう！
少し簡単になったね～
メニューボタンと比べてパスコードボタンは多くのクリエイターさんも良い意味で手抜きしてる部分ですね
ライン着せ替え ③メニュー背景とは？
「メニュー背景」は「メニューボタンの背景部分」です。
「コレ」です。
実際のライン画面で見てみると「メニューボタン」が上に乗るので、メニューボタンを意識しつつ描かなければなりません。
背景のサイズ
- iOSのサイズ「横1472px × 縦150px」
- Androidサイズ「横640px × 縦112px」
iOSのほうが大きいって珍しいね！
iOSのほうが簡単に描けるんです！
メニュー背景の作り方
メニュー背景は、シンプルにすると効率ＵＰ、そしてAndroid画像作成が簡単になるので非常にオススメなんですが、私の様に「なみなみ」デザインにする場合は、左右のつながり部分がとても大事！
描き方は以下の通り
- iOSは、上部を塗らず「透過」出力
- Androidは左右の端のつながりを意識して描く
iOSはササッと簡単！
Androidは少し大変
画像のつながりを意識です！
iOSのほうが簡単なので、iOSから作成します。背景を描いたら、背景の上の部分は「色塗り無し」で「透過で出力」すればＯＫです。
「透過で出力」すると勝手に、背景となじんでくれるのでとても楽チン！
Androidは画像が繰り返し連続画像として使われるので「端の画像が連続してつながらないとリジェクト確定」なので要注意
まず、両端を描き「繰り返し画像」になっているか確認しましょう
そして、真ん中を埋める
更に、Androidは上部の透過出力がＮＧなので、塗りつぶししておきましょう！
仕様が違うとかメンドクサイね
繰り返し画像が案外大変で、何度もリジェクトもらいました…
ライン着せ替え ④トークルームの背景とは？
トーク画面の「文字が乗る部分」の背景です。
見やすさを考えて主張を弱く「薄めに描く事」が大事です。他のクリエイターさんは、ワンポイントなどのシンプルな物が非常に多いんです。
トークルーム背景画像サイズ
- Androidのサイズ「横1300px × 縦1300px」
- iOSのサイズ「横1482px × 縦1334px」
トークルーム背景を作る前に
「トークルーム背景」は指定サイズに合わせて、端から端まで絵を描いてしまうと、実際のライン画面上では「拡大表示」のように表示されてしまいます。
画像自体の使われ方が、表示する端末の「画面サイズ」または「横にして仕様する場合」を考えてトークルーム背景を要求されているみたいで…
スマホでラインを開いてみると、黒枠線の部分しか表示されていませんでした。
トークルーム背景を描く前に、表示される部分は「中央下揃え」の部分だけという事を覚えておきましょう！
がっつり絵を描くと結構凹んじゃうよ…
シンプルな連続画像なら気にしなくてＯＫなんですけどね～
修正前のトークルーム背景はこんな感じに描いていました。
修正後はここまで小さく修正しています！
これは実際リリースしてから分かった事なので、先に知っておくと「がっかり」防止になりますよ
トークルーム背景の作り方
「トークルーム背景」はシンプルな「連続画像」にするととても簡単！例えば「ドット」「肉球」などのアイコンを繰り返し配置がとても簡単なのでオススメです。
私の様に絵を描く場合は、小さい画像の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
絵を描く際に「背景」「キャラ」「ロゴ」と分けておけば「サイズ変更」して出力するだけで終了です！
ここは１個だけ絵をかくだけだよね～
これで終了！
まとめ
ライン着せ替えは、ラインスタンプより「ネタ」が少なくて済むので、画像加工さえ効率よく進めればとても簡単なんです。
１回目は少しメンドクサイですが、２回目以降はサクサク作れます。
しかもライバルが少ないのでラインスタンプより「売れる」のもいい所なんですよ～
着せ替えは「ネタ」より「デザイン」って感じだよね～
一度作ってみてくださいね
ライン着せ替え「シーズーさまーさまー」絶賛発売中！宜しくお願いします。
シーズーのLINE着せ替え「シーズーさまーさまー」ご紹介‼
