デザイナー歴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スタンプ「イカソクくん」販売中!!

Share

最近の投稿

NetlifyのSplit TestingとFunctionsについて使い方をまとめる Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

NetlifyとはHTMLなどの静的コンテンツのみで構成されたWebサイトを閲覧できる形で配信するWebサービス GitHubやBitbucket、GitLabなどと連携して使うことができて、リポジトリにプッシュすることで自動でCI/CDを行うことができる、無料枠が豊富で独自ドメインを設定可能

WordPressからJekyll(GitHub Pages)に移行した手順をまとめる。 お金的な事情や使いやすさなどの理由で無料のJekyll+GitHub Pagesに移行した。JekyllとはMarkdown等から静的ページを生成する静的サイトジェネレータ

Scala開発のためにScalaらしさをまとめる 言語設計者の設計思想を元にScalaらしさについてまとめる オブジェクト指向と関数型の融合について

StorybookとはUI開発環境を提供するツール React、React Native、Angular、Vueなどをサポートしている ユーザーは独立した開発環境でコンポーネントを個別に作成して挙動の確認をテストできたり、コンポーネントを一覧にしてカタログ化できるので他の人に紹介する時に使えたりする

カテゴリ一覧

タグ一覧