工場から F I R E を目指したいそんなブログ

LINE着せかえの作り方【簡単に説明します】

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

https://www.koujyou-fire.com/wp-content/uploads/2020/05/setuko05.pngLINE着せかえ作りたい人

ライン着せかえつくってみたいんだよ

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

ライン着せ替え ぺろおじさん
わんこ
わんこ

全部シーズーで作ったんだよ~

「ライン着替え」って、いざ作ろうと「公式の仕様書」を見ると、なんかよくわからなくて「気持ち悪く」なりがちなんですが…

大きく分けると2工程だけなんです。

  1. カラースキンを選んで、デザインを考える
  2. 必要な画像(絵)を覚えて、画像(絵)を描く
ぺろおじさん
ぺろおじさん

簡単でしょ?

わんこ
わんこ

これだけならね!

そこで、本記事では、ライン着せかえの作り方を「簡単」に「効率良く」作る方法をお届けします!

ライン着せ替え作り方
①カラースキンを選び、デザインを考えよう

「カラースキン」とは、以下のLINE画面のフレームの部分です。

トークルーム背景
わんこ
わんこ

シーズーサマーさまーはBLUEの03を使ってるよ~

カラースキンの種類は「全50種類」しかないので

カラースキン先行で「デザイン」を考える事がとても大事です!

わんこ
わんこ

個性的すぎるものは作れないの~

ぺろおじさん
ぺろおじさん

カラースキンまとめサイトを見て、デザインを考えましょ~!

ライン着せ替え作り方
②必要な画像を覚えて、絵を描く

デザインを考えたら、絵を描きましょう!

ライン着せ替えに必要な画像は全部で「61個」です。

  • Android用の必要画像が31個
  • iOS用の必要画像が29個
  • LINE Storeの画像が1個

必要な画像数が多い!というのが、ライン着せ替えがスタンプより敷居が高く感じてしまう理由なんですよね。

わんこ
わんこ

多すぎてげろでちゃうよね

げろが出ちゃいそうな、ライン着せ替えですが…

必要な画像をパーツ毎に、大きく分けると「7種類」

  1. メニューボタン8種ON・OFF「32個」
  2. パスコードボタン4種ON・OFF「16個」
  3. メニュー背景「2個」
  4. トークルームの背景「2個」
  5. プロフィール画面の個人、友達「4個」
  6. メイン画像「3個
  7. スプラッシュ画像「2個」

Android・iOSは絵自体は同じなので、描く画像は61個から半分の30個へ

この順番で描き進め、流用できる部分は流用すると~実際描く必要のある画像数は約20個ぐらいまで減少します。

わんこ
わんこ

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

ぺろおじさん
ぺろおじさん

実は、そうなんす!

ライン着せ替え ①メニューボタンとは?

まずはライン着せ替えのメイン「メニューボタン」から始めましょう。

メニューボタンはこの黄色枠のキャラクター部分です。

ライン着せ替え メニューボタン

メニューボタン画像サイズ

  • Android「横128px × 縦112px」
  • iOS「横128px × 縦150px」

メニューボタンの種類は合計8パターン

  • 友だち
  • ホーム
  • トーク
  • タイムライン
  • 通話
  • ニュース
  • その他
  • ウォレット

ON・OFFで16個、iOS・Androidで×2となり、必要画像数は32個必要です。

わんこ
わんこ

かなり多いよね・・・

ぺろおじさん
ぺろおじさん

減るので大丈夫!

メニューボタンの重複パターン

作る数が多くて頭を抱えがちなメニューボタンですが、日本版と外国版でLINEの仕様が違うので8パターンのボタンが必要なんです。

実際に「日本版でも海外版でも使うボタンは5パターンのみ」

なので作成は5パターンだけでOKです!

わんこ
わんこ

5パターンでいいんだね!

ぺろおじさん
ぺろおじさん

そうなんです!

以下の「3パターン」は重複している部分なので、流用してしまえばOKです。

  • 日本語版「ホーム」=外国版「友だち」
  • 日本語版「ウォレット」=外国版「その他」
  • 日本語版「ニュース」=外国版「通話」
メニューボタン画像 3パターン仕様が違う部分

重複部分は以下の通りなので、同じ絵にして申請すればOKです。

  1. 友だち=ホーム
  2. トーク
  3. タイムライン
  4. ニュース=通話
  5. ウォレット=その他

5パターンのON・OFFで×210個」絵を描いて、iOSとAndroidとサイズ調整すれば、メニューボタンは終了です。

わんこ
わんこ

気分が楽になったね~

ぺろおじさん
ぺろおじさん

でしょ~

メニューボタンの作り方

メニューボタンを作る際は、余白を十分に気持ち「小さめ」に描く事がとても大事です。「大きく」描きすぎるとリテイクになりやすいんです。

描き方は以下の通り

  1. Android用画像を描く
  2. OFF画像を描き、ON画像に動きを付ける
  3. Android用画像を拡大しiOS画像を出力する
ぺろおじさん
ぺろおじさん

この作り方が「間違いなし」ですよ

1. まずAndroid用画像から描く

Androidのほうが「画像サイズ」が小さいので先に描いていきましょう!

注意する事は、余白は以下の画像ぐらい取る事が大事です。

ライン着せ替え メニューボタン 注意点1

2. OFF画像を先に書き、ON画像に動きを付ける

OFFから画像を描き、完成したらOFF画像を複製、ON画像様にファイル名修正、OFFの絵を下地にON画像を描く!

位置がズレないので、この方法がベストです。大きく動きを意識して描くと可愛くなる~

ライン着せ替え メニューボタン 注意点2

3. Android用画像を拡大しiOS画像を出力する

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)

描き方は以下の通り

  1. メニューボタンをリメイクする
  2. Android用、OFF画像を作る
  3. Android用、ON画像を作る
  4. iOS用にキャンバスサイズを変更する
ぺろおじさん
ぺろおじさん

「寝てたのが起きる」みたいな簡単な感じ

案外、いいんです!

1. メニューボタンをリメイクする

「パスコードボタン」と「メニューボタン」はサイズが近いので、「メニューボタン」が小さめに書いてあれば、そのまま流用も可能です。

2. Android用、OFF画像を作る

パスコードボタンOFFの画像は4つ同じでもOKです。同じ小さい画像が4つ並ぶと結構可愛いのでオススメ!

ほかのクリエイターさん達も「OFFはキャラクター不在」から「ONを押すとキャラクターが出現」のように実際、手抜きをしている部分なんですよね。

ライン着せ替え パスコードボタン 注意点1

3. Android用、ON画像を作る

OFF画像を複製、ON画像用にファイル名修正したらリメイク開始

私の場合は「OFFでシーズーが寝てて」「ONで少しづつ目が覚める」そんな感じでOFF画像を修正していきました!

メニューボタンに比べると「かなり手抜き」です!

ライン着せ替え パスコードボタン 注意点2

4. Android用画像を拡大しiOS画像を出力する

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

わんこ
わんこ

少し簡単になったね~

ぺろおじさん
ぺろおじさん

メニューボタンと比べてパスコードボタンは多くのクリエイターさんも良い意味で手抜きしてる部分ですね

ライン着せ替え ③メニュー背景とは?

「メニュー背景」は「メニューボタンの背景部分」です。

「コレ」です。

ライン着せ替え メインボタンの背景画像2

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

ライン着せ替え メインボタンの背景画像1

背景のサイズ

  • iOSのサイズ「横1472px × 縦150px」
  • Androidサイズ「横640px × 縦112px」
わんこ
わんこ

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

ぺろおじさん
ぺろおじさん

iOSのほうが簡単に描けるんです!

メニュー背景の作り方

メニュー背景は、シンプルにすると効率UP、そしてAndroid画像作成が簡単になるので非常にオススメなんですが、私の様に「なみなみ」デザインにする場合は、左右のつながり部分がとても大事!

描き方は以下の通り

  1. iOSは、上部を塗らず「透過」出力
  2. Androidは左右の端のつながりを意識して描く
わんこ
わんこ

iOSはササッと簡単!

ぺろおじさん
ぺろおじさん

Androidは少し大変

画像のつながりを意識です!

1. iOSは、上部を塗らず「透過」出力

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

メニューボタン背景 アイフォン

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

メニューボタン背景 境界線

2. Androidは左右の端のつながりを意識して描く

Androidは画像が繰り返し連続画像として使われるので「端の画像が連続してつながらないとリジェクト確定」なので要注意

まず、両端を描き「繰り返し画像」になっているか確認しましょう

メニューボタン背景 繰り返し背景1

そして、真ん中を埋める

メニューボタン背景 繰り返し背景2

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

メメニューボタン背景 アンドロイド
わんこ
わんこ

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

ぺろおじさん
ぺろおじさん

繰り返し画像が案外大変で、何度もリジェクトもらいました…

ライン着せ替え ④トークルームの背景とは?

トーク画面の「文字が乗る部分」の背景です。

見やすさを考えて主張を弱く「薄めに描く事」が大事です。他のクリエイターさんは、ワンポイントなどのシンプルな物が非常に多いんです。

ライン着せ替え トークルーム

トークルーム背景画像サイズ

  • Androidのサイズ「横1300px × 縦1300px」
  • iOSのサイズ「横1482px × 縦1334px」

トークルーム背景を作る前に

「トークルーム背景」は指定サイズに合わせて、端から端まで絵を描いてしまうと、実際のライン画面上では「拡大表示」のように表示されてしまいます。

画像自体の使われ方が、表示する端末の「画面サイズ」または「横にして仕様する場合」を考えてトークルーム背景を要求されているみたいで…

スマホでラインを開いてみると、黒枠線の部分しか表示されていませんでした。

ライン着せ替え トークルーム背景3

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

わんこ
わんこ

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

ぺろおじさん
ぺろおじさん

シンプルな連続画像なら気にしなくてOKなんですけどね~

修正前のトークルーム背景はこんな感じに描いていました。

ライン着せ替え トークルーム背景1

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

ライン着せ替え トークルーム背景2
ぺろおじさん
ぺろおじさん

これは実際リリースしてから分かった事なので、先に知っておくと「がっかり」防止になりますよ

トークルーム背景の作り方

「トークルーム背景」はシンプルな「連続画像」にするととても簡単!例えば「ドット」「肉球」などのアイコンを繰り返し配置がとても簡単なのでオススメです。

私の様に絵を描く場合は、小さい画像のAndroidから描き、iOSは足らない部分を描き足しで終了!「使われる部分」を把握して描いていきましょう!

  1. Androidのサイズ「横1300px × 縦1300px」で作成する
  2. iOSサイズ「横1482px × 縦1334px」にコピー書き足し
ぺろおじさん
ぺろおじさん

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

わんこ
わんこ

がっかり防止だよ~

ライン着せ替え ⑤プロフィール画像とは?

プロフィール画像とは、以下の画像の「友達」「グループ」黄色枠部分です。

ライン着せ替え プロフィール画像

プロフィール画像のサイズ

  • iOS 「横240px × 縦240px」
  • Android 「横247px × 縦247px」
わんこ
わんこ

Androidのほうが大きいんだね~!

プロフィール画像の作り方

  1. 〇の中に納まるようにiOS用画像を描く
  2. iOS画像をAndroid用にキャンバスサイズを拡大する

1. 〇の中に納まるようにiOS用画像を描く

〇をフレームに入るように描いて、収まるように絵をかきましょ~〇以外の部分かカットされますよ

ライン着せ替え プロフィール画像 注意点1

2. 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個「キャラ」と「背景」を別々に出力!

「メイン画像」「スプラッシュ画像」の作り方

  1. メイン画像を作成
  2. メイン画像をスプラッシュ画像サイズに拡大
  3. 画像背景を出力
  4. ロゴとキャラクターを出力

メイン画像とスプラッシュ画像は同じデザインでOK

絵を描く際に「背景」「キャラ」「ロゴ」と分けておけば「サイズ変更」して出力するだけで終了です!

わんこ
わんこ

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

ぺろおじさん
ぺろおじさん

これで終了!

まとめ

ライン着せ替えは、ラインスタンプより「ネタ」が少なくて済むので、画像加工さえ効率よく進めればとても簡単なんです。

1回目は少しメンドクサイですが、2回目以降はサクサク作れます。

しかもライバルが少ないのでラインスタンプより「売れる」のもいい所なんですよ~

わんこ
わんこ

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

ぺろおじさん
ぺろおじさん

一度作ってみてくださいね

ライン着せ替え「シーズーさまーさまー」絶賛発売中!宜しくお願いします。

シーズーのかわいいイラスト!LINE着せ替え「シーズーさまーさまー」絶賛発売中です~

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA