ぶるーすくりーん

ぽんこつプログラマ日記

エンジニア向け LINEスタンプ うず丸さん 作成しました

LINEスタンプ

先日LINEスタンプを初リリースしました。
もともとデザインとかお絵描きとかの経験はなかったのですが、無事リリースすることができました。

リリースしたスタンプはこちらです。
エンジニアやプログラマー向けのスタンプを盛り込んでいます。 よろしければ使ってやってください。

うず丸さん 〜エンジニア編〜
https://store.line.me/stickershop/product/1372618

f:id:tajima0111185:20170115130409p:plain

LINEスタンプ作成時の注意点

スタンプ作成方法や申請の流れについて書いているページはたくさんあるので、自分でつくるときに注意した点やリリースされたものを見て感じた注意点について書きます。

これからつくる人の参考になるとよいです。

LINE 公式ガイドラインを読むべし

LINE スタンプ作成にあたり公式のガイドラインがきちんと公開されています。
https://creator.line.me/ja/guideline/sticker/

「LINE スタンプ 承認 期間」とかでググると多くの記事で申請をリジェクトされて再申請しています。
その多くの理由が公式ガイドラインに書いてあるのに「背景を透過していない」などになっています。

せっかくできたと思って申請して、リジェクトされて再度画像編集なんてもったいないので、最初からガイドラインを読むことをオススメします。

ガイドライン自体は 5分程度で読める内容だと思います。

シュミレーターを使おう

LINE スタンプができたらシュミレーターで確認しましょう。
色塗りの忘れなどに気づくことができます。

今回は以下のサイトを利用させていただきました。

自作ラインスタンプ作成支援サイト LINEスタンプシュミレーター
http://line.g-at.net/

画像サイズが小さくなりすぎないように注意

上記LINEスタンプシュミレーターで画像を見た際に、ちょっとキャラが大きすぎるかなと思って小さくして申請しました。

小さくしてシュミレーター使った結果がこんな感じ。
f:id:tajima0111185:20170115132156p:plain

でも、実際にリリースされて使用してみたところ

  • 他のスタンプと比べてキャラのサイズが小さい
  • 相手が送信した再の左側の余白が気になる
    • ↑の画像の中だと「さすが俺」スタンプの余白がとくに気になりました

など違和感を感じました。

スタンプサイズは規定の画像サイズ、推奨余白サイズいっぱいにするぐらいの方がスマホで見たときにいい感じになると思いました。

アイデア出し

今回はエンジニア向けというしばりをつけたので、以下のような流れでキャラ化していきました。

  • 通勤時間
    • エンジニアの使用する特徴的なセリフを洗い出してメモ
    • エンジニア関係なく使いやすそうな日常セリフをメモ
  • お家で
    • 紙に適当にキャラクターっぽいものをいくつか描く
    • さらにこうしたらかわいいとかオリジナリティが出そうみたいな派生系を描く
      アイデアソンとかと似てて派生のやつをどんどん描いていくと結構キャラっぽくなっていきます。
    • セリフに合わせてキャラを動かした絵を描く
      よりキャラクターとして固まっていきます。
    • 動きがあまり思いつかない場合は小道具を配置してみる
      PC とかお菓子とかエナジードリンクとかを置いたり持たせたりすると絵の表情が広がります。

LINEスタンプ作成で参考にしたサイト

申請〜承認までの記録

  • 2017/01/04 7:18
    • 審査申請
  • 2017/01/09 夜
    • 審査中なった！
  • 2017/01/11 ??
    • 審査処理中に変わった！
  • 2017/01/12 ??
    • あれまた審査中に戻った！？
  • 2017/01/13 15:32
    • 承認された！
  • 2017/01/13 16:27 くらい
    • リリースボタンぽちっと
    • 30 分くらいでストアに反映完了

スタンプ紹介ページ作成

第２段とかも作成していきたい、slack や mattermost でも使いたい！
と思い、スタンプ紹介ページもつくってみました。

https://mid0111.github.io/stickers/
f:id:tajima0111185:20170115140447p:plain

第２段を公開したときに通知できるといいなと思い、プッシュ通知機能も実装しています（chrome ユーザーのみ対象）
ブラウザ向けのプッシュ通知はじめて実装してお勉強になったので、今度その技術ネタ記事も書こうと思います。

LINEスタンプつくってみてよかったこと

職業趣味ともにプログラマーで、ときどき個人でサービスを作成したりしています。
その時にアイコンや favicon 背景などの絵を描く能力がなく、とても苦労していました。そもそも「自分にはできない」という抵抗感も大きかったです。

それが、今回LINEスタンプを作成したおかげでちょっとした絵であればすぐに画像に起こすことができるようになりました。

また、お絵描きソフトっていうと Illustrator か無償なら Gimp ？ハードル高いなーと思っていたのですが、無償の Firealpaca というソフトと出会えて使い方もマスターすることができ、よい勉強になりました。

最後に

スタンプを購入して戴いた心優しき親戚、お知り合いの方々、お知り合いでもないのに興味を持って購入してくださった方々、心から感謝いたします。

第２段も作成していきたいと思っているので、これからもうず丸さんをよろしくお願いいたします。

f:id:tajima0111185:20170115140319p:plain