こんなあなたにおススメです
LINE着せかえ作りたい人ライン着せかえつくってみたいんだよ
どうも、ライン着せ替もついに３作目リリースしました！ぺろおじさん( @peroojisan1126）です。
全部シーズーで作ったんだよ～
「ライン着替え」って、いざ作ろうと「公式の仕様書」を見ると、なんかよくわからなくて「気持ち悪く」なりがちなんですが…
大きく分けると2工程だけなんです。
- カラースキンを選んで、デザインを考える
- 必要な画像（絵）を覚えて、画像（絵）を描く
簡単でしょ？
これだけならね！
そこで、本記事では、ライン着せかえの作り方を「簡単」に「効率良く」作る方法をお届けします！
目次
ライン着せ替え作り方
①カラースキンを選び、デザインを考えよう
①カラースキンを選び、デザインを考えよう
「カラースキン」とは、以下のLINE画面のフレームの部分です。
シーズーサマーさまーはＢＬＵＥの03を使ってるよ～
カラースキンの種類は「全50種類」しかないので
カラースキン先行で「デザイン」を考える事がとても大事です！
個性的すぎるものは作れないの～
カラースキンまとめサイトを見て、デザインを考えましょ～！
ライン着せ替え作り方
②必要な画像を覚えて、絵を描く
②必要な画像を覚えて、絵を描く
デザインを考えたら、絵を描きましょう！
ライン着せ替えに必要な画像は全部で「61個」です。
- Android用の必要画像が31個
- iOS用の必要画像が29個
- LINE Storeの画像が1個
必要な画像数が多い！というのが、ライン着せ替えがスタンプより敷居が高く感じてしまう理由なんですよね。
多すぎてげろでちゃうよね
げろが出ちゃいそうな、ライン着せ替えですが…
必要な画像をパーツ毎に、大きく分けると「７種類」
- メニューボタン8種ON・OFF「32個」
- パスコードボタン4種ON・OFF「16個」
- メニュー背景「2個」
- トークルームの背景「2個」
- プロフィール画面の個人、友達「4個」
- メイン画像「3個
- スプラッシュ画像「2個」
Android・iOSは絵自体は同じなので、描く画像は61個から半分の30個へ
この順番で描き進め、流用できる部分は流用すると～実際描く必要のある画像数は約20個ぐらいまで減少します。
ラインスタンプより楽じゃん！
実は、そうなんす！
ライン着せ替え ①メニューボタンとは？
まずはライン着せ替えのメイン「メニューボタン」から始めましょう。
メニューボタンはこの黄色枠のキャラクター部分です。
メニューボタン画像サイズ
- Android「横128px × 縦112px」
- iOS「横128px × 縦150px」
メニューボタンの種類は合計８パターン
- 友だち
- ホーム
- トーク
- タイムライン
- 通話
- ニュース
- その他
- ウォレット
ＯＮ・ＯＦＦで16個、iOS・Androidで×２となり、必要画像数は32個必要です。
かなり多いよね・・・
減るので大丈夫！
メニューボタンの重複パターン
作る数が多くて頭を抱えがちなメニューボタンですが、日本版と外国版でLINEの仕様が違うので８パターンのボタンが必要なんです。
実際に「日本版でも海外版でも使うボタンは５パターンのみ」
なので作成は５パターンだけでOKです！
５パターンでいいんだね！
そうなんです！
以下の「3パターン」は重複している部分なので、流用してしまえばＯＫです。
- 日本語版「ホーム」＝外国版「友だち」
- 日本語版「ウォレット」＝外国版「その他」
- 日本語版「ニュース」＝外国版「通話」
重複部分は以下の通りなので、同じ絵にして申請すればOKです。
- 友だち＝ホーム
- トーク
- タイムライン
- ニュース＝通話
- ウォレット＝その他
５パターンのON・OFFで×２「10個」絵を描いて、iOSとAndroidとサイズ調整すれば、メニューボタンは終了です。
気分が楽になったね～
でしょ～
メニューボタンの作り方
メニューボタンを作る際は、余白を十分に気持ち「小さめ」に描く事がとても大事です。「大きく」描きすぎるとリテイクになりやすいんです。
描き方は以下の通り
- Android用画像を描く
- OFF画像を描き、ON画像に動きを付ける
- Android用画像を拡大し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着せ替え「シーズーさまーさまー」絶賛発売中です～
