工場から 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個
わんこ
わんこ

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

げろが出ちゃいそうな、必要画像数ですが…

Android・iOSは「同じ絵(デザイン)」でOK

なので、いきなり、描かなければならない、画像数は61個から半分の30個へ削減できちゃいます!

わんこ
わんこ

おー

そして、「ライン着替え」に必要な画像を「パーツ毎」に、分けると「7種類」に分けられ

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

この順番で描き進めて、流用できる部分を流用すると…

実際描く必要のある画像数は約20個まで減少します。

わんこ
わんこ

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

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

実は、そうなんですよ‼

次項から、効率の良く描く為の「パーツ毎の描き方」ご紹介していきます。

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

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

まず最初は、ライン着せ替えのメイン「メニューボタン」から描きましょう

メニューボタンとは、この黄色枠のキャラクター部分のコト

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

メニューボタン画像サイズはこの通り

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

メニューボタンの種類は、以下の合計8パターンです。

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

ON・OFFで合計16種類で、iOS・Androidで×2なので、必要画像数は32個です。

わんこ
わんこ

かなり多い・・・

8パターンで32画像、必要な「メニューボタン」ですが…

実際に「ライン上で、使われるボタンは5パターンだけ」

その理由は「日本と外国でラインの仕様が違う」ので「8パターンの絵(デザイン)を求められている」のです。申請する際は、同じ絵(デザイン)にしても問題ない部分なんです。

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

仕様違いの重複分は、まとめるのと楽ですよね

まとめられる「重複している3パターン」は以下の通り

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

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

わんこ
わんこ

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

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

でしょ~

メニューボタンの作り方

メニューボタンの仕様を理解したら、描く!

描く際は、余白を十分に気持ち「小さめ」に描く事がとても大事です。

「大きく」描きすぎるとリテイクになりやすいので気を付けましょう!

効率の良い。描き方は以下の通り

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

この作り方がベストです!

1. 先に「Android用画像」から描く

iOSに比べ、Androidのほうが「画像サイズ」が小さいので先に描く!

余白は以下の画像ぐらい取るイメージです。

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

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

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

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

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

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