デザイナー歴0年のエンジニアがLINEスタンプを制作した話

Published: 2017年12月5日 by tomsato

概要

LINEのスタンプを自作する

イラストを作成してから公開するまでの流れをまとめる

そもそもイラストなんて描いたことが無かったのでイラストの描き方からまとめていく

→ LINEスタンプ「イカソクくん」販売中!!

良かったら是非!

LINEスタンプを作成するまでの流れ

  1. ガイドライン調査
  2. スタンプ作成
  3. 出来上がったスタンプを審査に出す

これだけ、しかしイラスト制作が鬼大変

審査も数週間程度時間がかかる

後に紹介するガイドラインに反しているとリジェクトされてしまいまた数日から数週間待たなくてはならなくなるので極力リジェクトされないように心がける

準備

ガイドラインについて

スタンプを作成する人はここは絶対読む必要のあるページ

どういう画像が必要なのかや、どういうスタンプでないといけないかなどが記載されている

例えばでいうと

  • 横長な画像や、8頭身キャラクターの全身など視認性が悪いものはダメ
  • ある程度は統一性が必要で、説明文やタイトルと矛盾しているスタンプはダメ

こういったことは意外と漏れがちなので必ず目を通しておくようにする

LINE Creators Marketに登録する

LINE Creators Marketのページから登録を行う

マイページでは制作したスタンプの登録をしたり実際に売り始めた後に確認する売上のレポートをみれたりできる

イラスト制作について

イラスト制作の基本

そもそもイラストの作成方法としてざっくりと方法を掲げると

① ペンタブレットで描く↓

  • さらさらと描きやすい
  • 液晶ペンタブレットよりは安い
  • 描く場所は手元だが書かれる場所はディスプレイのため慣れてないと描きづらい

② 液晶ペンタブレットで描く↓

  • 高い
  • ペンタブとは違って紙を描くように書ける
  • 20インチ以上の大きい液タブもある

③ スタイラスペン

  • タブレットと合わせて使う(別途iPadなどタブレットが必要)
  • 既にタブレットを持っていれば出費は一番安く済む
  • iPad ProがあればiPad Pro+Apple Pencil一択という噂

今回自分が作成した環境としてiPad(mini)にスタイラスペン(Bamboo Sketch)で描いていくことにした

今回試したイラスト制作の流れ

① iPad miniアプリである「MediBangPaint」とスタイラスペンを使って色無しのイラストを制作する

MediBangPaintで描いている様子

制作した画像たち

ペイントアプリはお好みで選ぶべきだが、MediBangPaintは無料で手ブレ補正機能があるのと曲線ツールがあるという点で今回選択をした
(Procreateには曲線ツールがない、Adobe Illustrator Drawが手ブレ補正も曲線ツールもない)

またアプリの使い方やそもそもの絵の書き方(レイヤーの話とか)を動画を通して学べることができる点も嬉しい

② 絵を滑らかにしたい場合は「Adobe Capture CC」というアプリを使ってシェイプさせる

before

after

写真だとわかりづらいがafterだと滑らかな曲線になっている

この「Adobe Capture CC」は、ペンと紙で描いたイラストを読み込ませてベクター画像にすることができる

またシェイプさせた画像をそのままIllustratorに送れるので、リアルタイムでIllustorator上で編集をすることができる

③ Adobe Illustrator CCを使って細かい修正や色つけをして完成

Illustratorを学ぶ方法としては公式でチュートリアル動画を配信しているのでそれを見て、あとは触りながら慣れていった
Illustratorチュートリアル

ちなみに世の中にはLINEスタンプ制作用 Illustratorという凄く便利なテンプレートがある
LINEスタンプ用 Illustrator テンプレートと書き出しスクリプト

このテンプレート上にスタンプ画像を並べて作業を行うことで余白10pxがわかりやすく表示されるので間違いを起こしづらくなる(画像の外側に余白10pxを残さないと審査時にリジェクトされる)

また書き出し用のスクリプトもあってW370×H320で画像を書き出してくれるのは凄く便利、こういったものはどんどん活用して行く

審査

最終的にできたスタンプ画像をLINE Creators Marketで登録をして審査依頼を行う
イカソクくんは審査に10日ほどかかった

→ LINEスタンプ「イカソクくん」販売中!!

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

TypeScriptの入門の入門チートシート 型の種類や使い方についてまとめていくだけでなく、 TypeScriptについてや必要性などについてもまとめることでこのページでTypeScriptをざっくり理解できる程度の内容を目指す

カテゴリ一覧

タグ一覧