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

LINE 入門の入門

Share

最近の投稿

概要はじめに2019年4月から新しいチームに配属されることになって、そこではScalaとPHPを使い分けて開発をおこなっていました4月5月では主に保守運用周り、並びにPHPでの開発を行いつつ、Scalaに慣れるために小さい修正を細々とおこなっていて、6月からついに本格的にScala開発に着手することになりました。レガシーな技術から新しい技術に乗り換えるということで、その中で開発言語はどうする......

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

概要フロントエンド開発における状態管理、データフローがなんで重要なのか、Fluxとは何かなど主にVue.js目線ですが忘備録的にまとめますデータフローの設計・状態管理についてアプリケーションの規模が大きくなるに連れて状態管理が重要となってくる状態とはアプリケーションが保持するデータのことで例えばECサイトのカートなど、最初は空の状態から始まり商品をカートに入れることによってカートの中身が増え......

概要前にDoxygenの入門についてまとめたが実際にサンプルを見た方が理解が早いかと思うのでサンプルを作ってみる Doxygen入門の入門 ↑前に書いた記事、そっちでは Doxygenについての簡単な説明 導入方法 書き方などを書いた今回は、まずサンプルを見て理解をしたい人向けにサンプルのアプリケーションをGitHubに用意して、ドキュメントもGitHub Pagesで見ら......

概要1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.cssというのがあって気になったので使ってみるTrashy.cssを使うとHTMLの構造が可視化されるのでheader,nav,main,article,selction,footerなどの要素が正しく実装されているかを確認することができる{% include google-a......

カテゴリ一覧

タグ一覧

MySQL Oracle Linux 資格 テスト CI Jenkins 入門の入門 Perl API その他 Fabric PHP PHPUnit Ruby JavaScript YAML CircleCI C言語 Docker フレームワーク Selenium Fluentd ab Vim React Vagrant Cinnamon 監視ツール postfix HTML Google Cloud Platform Codeception Watson Node-RED LINE Vue.js 入門の次 PCF Vegeta Azure Firebase モジロイ Sass クリーンアーキテクチャ CSS twitter Flexbox 筋トレ ドキュメント Vue Scala