初めて作るLINEスタンプ

CLIP STUDIO PAINT PROによるLINEスタンプの作り方紹介

はてなブログのカスタマイズ

f:id:utsugiyukika:20180710110735j:plain

このブログは「はてなブログ」の「テーマストア」で人気No. 1だったcodomisuさんの「Minimalism」のテーマをもとに、デザインを自分好みにいろいろとカスタマイズしてあります。

この記事では、カスタマイズの際に、参考にさせて頂いたページを紹介しておきます。ありがとうございました。

 

タイトルのフォントサイズを変更する

タイトルの文字サイズを自分の好みの大きさに変更しました。

参考記事

kilinhuck.com

タイトルを画像にする

タイトルの部分を文字だけの表示から、画像を使ったものに変更しました。

イラストがメインのブログなので、どんな絵を描く人なのか、来た人に一目でわかるようにしたいと思いました。

参考記事

blog.minimal-green.com

タイトルの下にメニューバーを作る

タイトルの下に、カテゴリのメニューバーを作りました。

f:id:utsugiyukika:20180617220721j:plain

スマホから見る時にとても便利です。

参考記事

dagasorega-e.net

日付の前にアイコンをつける

記事の日付の前についているアイコンを好みのものに変更しました。

f:id:utsugiyukika:20180617215609j:plain

ただし、3行目の

font-family:"blogicon";

font-family:"FontAwesome";

に変更して「FontAwesome」のアイコンが使えるようにしました。アイコンは色も自由に変えられます。

参考記事

【はてなブログ】日付・タイトルのデザインを変更 | ダチョウのたまご。

 記事の文字サイズを変更する

記事の文字サイズを読みやすいように少し大きくしました。はてなブログは記事の文字サイズが小さいそうです。

.entry-title {
font-size: ◯◯pt;
}

を追加すると、記事のタイトルの文字サイズも自由に変えられます。

参考記事

www.tarappism.com

見出しのデザインをカスタマイズする

「中見出し」のデザインをカスタマイズしました。

参考記事

saruwakakun.com

目次に番号をつける

目次に番号をつけました。

参考記事

okane7.com

サイドバーのタイトルの横にアイコンを表示させる

「プロフィール」の左横にある、葉っぱのアイコンのつけ方です。

f:id:utsugiyukika:20180617215213j:plain


サイドバーを「FontAwesome」のアイコンでデザインできます。色も自由に変えられます。

参考記事

blog.mshimfujin.net

「上に戻る」ボタンを設置する

記事をスクロールさせた後、トップに戻れるボタンを設置しました。

f:id:utsugiyukika:20180617220213j:plain

長い記事を読んだ後、一気にタイトルまで戻れるのでとても便利です。

参考記事

azanaerunawano5to4.hatenablog.com

サイドバーに「スライドショー」をつける

サイドバーに自分の作品の紹介バナーをつけました。

f:id:utsugiyukika:20180618053327j:plain

クリックすると、購入ページにとべます、数が複数あったので、スライドショーにしてみました。下にオマケで、「LINE STORE」のリンクもつけました。

参考記事

english-apple-diy.hatenablog.com

記事に蛍光マーカーをつける

記事の中で強調したい箇所に、蛍光ペン風のマーカーが引けるようにしました。

参考記事

saitoumasami.com

LINEスタンプ制作③「LINE Creators Market」にスタンプを登録する

わたしが画像を作る前にスタンプを登録しておく理由

わたしの場合、アイデアの中から実際に作ろうと思うスタンプが決まったら、先に「LINE Creators Market」にスタンプの登録を済ませておきます。

スタンプを登録すると、スタンプ画像の編集ページが使えるようになるのですが、完成させたスタンプが、ちゃんと登録できるのかどうかを、そのページにアップロードすることよって、一つ一つ確認しながら作業が進められるからです。

登録できないスタンプは、エラーによってはねられるので(サイズ違い、ファイル形式違いなど)、その都度気がついて修正ができます。

他にも、アップロードしたスタンプは一覧表示されるので、画像を登録していきながら全体のバランスを見たり、アニメーションスタンプの場合だと、並べた状態で手軽に再生して次々と動きを確認したり、比較したりできます。

「プレビュー」も見れますし、アップロードすることで「一つ完成した!」とモチベーションがあがります。

背景色を変えて、画像の透過を確認できる機能もついており、制作する上でなかなか便利なのです。

「LINE Creators Market」への登録方法はこちら

先にスタンプの制作に取りかかる場合はこちら 

 スタンプの登録方法

LINE Creators Market」のマイページから、「新規登録」ボタンを押して、「スタンプ」を選択します。

新規登録画面で必要な項目を入力していきます。

f:id:utsugiyukika:20180616211155j:plain

 

「タイトル」や「スタンプ説明文」は後でいくらでも編集できるので、決まっていない場合はとりあえずなんでもいいので入力しておきます。ただし「タイトル」はすでに他の人に使われているものは却下されます。

基本は「English」なので、日本語を追加する時は、「言語を追加」項目でプルダウンメニューから「Japanese」を選んで「追加」し、英語と日本語両方の「タイトル」と「スタンプ説明文」を考えます。言語は他にもたくさんあります。

「クリエイター名」も同じように入力します。

「コピーライト」の表記方法を決め(©名前など)、「販売エリア」を選択し、全ての入力が終わったら「保存」ボタンを押します。無事に保存できたら「スタンプ画像」のタブを選んで、「編集」ボタンを押します。

スタンプの個数を設定する

f:id:utsugiyukika:20180616205230j:plain

「スタンプの編集」ページで制作するスタンプの個数を設定します。

静止画のスタンプでは8個/16個/24個/32個/40個の中から選べます。

スタンプ画像の制作がまだの場合は、ここでひとまず終了です。

続けてスタンプ画像を登録する場合はこちら

 

LINEスタンプ制作④イラストを描く

 

 

わたしが「CLIP STUDIO PAINT PRO」を使うようになった理由

CLIP STUDIO PAINT PROとは?

CLIP STUDIO PAINT PRO」とは、株式会社セルシスによる、イラストを描くことができるペイントソフトです。

 CLIP STUDIO PAINT PRO

アマゾンの商品説明のページよると

Amazonや量販店の売上を集計したBCNランキングのグラフィックスソフト部門で3年連続(2015/2016年/2017年)出荷数No.1を獲得」

「ユーザー数2,000万人を超える、世界最大級のイラストSNS「pixiv」での使用率トップ。*セルシス調べ(集計 2015/12~2016/11)」

ワコムペンタブレットや、大手PCメーカーのパソコンに同梱ソフトとして採用。純国内開発による信頼性と安心のサポート」

「クリエイティブ系の学科がある50校以上の大学や専門学校の授業で採用」

などと紹介されており、有名なソフトのようです。

 わたしがCLIP STUDIO PAINT PROを使うようになったきっかけ

CLIP STUDIO PAINT PROを使うようになる2017年の春まで、わたしは絵を描く時にはAppleの「Power Mac G4」で、Adobeの「Photoshop6」と「Illustrator8」とを使用していました。

 

ずいぶんと古い制作環境でしたが、買い換えるのは高額だし、自分がやりたいことをやる範囲では機能的に充分だったので、別に不満はありませんでした。

 

しかしながら、長年使い続けた G4についに寿命が訪れ、動作不良の末動かなくなってしまったため、2017年の6月に、パソコンをAppleの「21.5インチiMac Retina 4Kディスプレイモデル」に買い換えました。

f:id:utsugiyukika:20180614052351j:plain


新しいMac は以前のものに比べて音がものすごく静かだし(聞こえない)、タワー型と違って、ディスプレイのみで見た目もスッキリ、マウスとキーボードはなんとコードレス!「さっすが〜!」などと喜んでいたのですが、当然というか、それまで旧Macで使っていたソフトは、バージョンが古すぎて使えなくなりました。

Photoshop」の代わりとして

わたしにとって、パソコンとは「好きな絵を描くために使うためのもの」なので、パソコンが不調になった時点で、すぐに新しいソフトの検討に移りました。

 

調べてみると、これまで使い勝手のよかった「Photoshop」と「Illustrator」は時代が代わっていつの間にやら、買い切りソフトから月額制の「Creative Cloud」に!

 

使い続ける限り延々と料金を支払う必要があるというシステムに、なにか物を買う時代金は全額払い、完全に「自分のもの」として安心して使いたいわたしは、非常な抵抗を覚えました。

 

Photoshopは画像の加工や補正に優れたソフトですが、考えてみると、わたしがやりたいことは、写真の加工などではなく、一からイラストを描くことです。

そこまでたくさんの機能はいらないのではなかろうか???(実際あまり使ってなかったし)

 

などと、さんざん迷って検討した末、これまで使っていた「Photoshop」に代わるイラスト制作ソフトとして、2017年5月にアマゾンで6,872円(これを書いている現在は6,224円)で購入したのがCLIP STUDIO PAINT PRO 公式リファレンスブックモデル」です(ベクター画像の編集に使っていた「Illustrator」の方はとりあえず保留)。

f:id:utsugiyukika:20180621195855j:plain

CLIP STUDIO PAINT PRO

Photoshop CC」を使うために、一番安くても毎月980円を払い続けることを思うと、6,872円でずっと使えるソフトはとても安い!と感じました。

 

「公式リファレンスブック」がついていない「通常盤」の方がさらに安かったのですが、「CLIP STUDIO PAINT PRO」を使うのはまったくの初めてだったので、ちゃんと使えるようになれるのか不安があり、ガイド本付きの方を選びました。

 

ちなみにガイド本付きの方を買わなくても、商品にはあらかじめちゃんと厚めの「スタートアップガイド」がついていて、制作の基本はそれを読めばわかります(もちろん「リファレンスブック」があった方が、ツールの具体的な情報量が多くて参考になりますが)。

 

使い始めの頃はなにをするにもつまずいて、いちいち調べなければ先に進めなかったので、この2冊の本にはとても助けられました。

使ってみた感想

購入した当初は、正直、パッケージ版だった「Photoshop」に比べて価格もうんと安いし、以前ほどの制作環境は望めないだろうと覚悟していたのですが。。。

 

慣れてくるにしたがって、「これで十分?いや、ひょっとすると「Photoshop」より便利な点もあるのでは!」と、徐々に評価が改まりました(わたしが使っていたのは、ものすごく古いバージョンの「Photoshop6」なので、最新バージョンの機能がどれほどのものなのかは知りませんが)。

 

結局のところ、ソフトは自分がやりたい範囲のことさえできればそれで十分ですし、

わたしが現在一番やりたい「LINEスタンプを作ること」だけに関して言えば、今の所「CLIP STUDIO PAINT PRO」でとても満足しています。

CLIP STUDIO PAINT PRO

LINEスタンプ制作②アイデアを考える

ガイドラインを読んでおく

LINEスタンプには、ガイドラインがあります。

まずは「制作ガイドライン」の中から、アイデアを考える際に気をつけなければならないものを紹介しておきます。

推奨するスタンプ
  • 日常会話、コミュニケーションで使いやすいもの
  • 表情、メッセージ、イラストが分かりやすくシンプルなもの
NGなスタンプ
  • 日常会話で使用しにくいもの(例:物体、景色など)
  • 視認性が悪いもの(例:横長な画像や、8頭身キャラクターの全身など)
  • スタンプ全体のバランスを著しく欠いているもの(例:淡色ばかりのもの、単なる数字の羅列など)
  • 公序良俗に反するもの、未成年者の飲酒喫煙を想起するもの、性的表現、暴力的表現、ナショナリズムを煽るもの

制作ガイドライン」は、「LINE Creators Market」のトップページから確認できます。より詳しいガイドラインとして「スタンプ審査ガイドライン」などもありますので、一度目を通しておくことをおすすめします。

思いついたことをメモする

スタンプのアイデアをノートに書き留めておきます。

わたしの場合、リラックスして考えるのが好きなので、家でゆったり時間がとれる時に、ベッドにうつむけに寝転がってノートを広げ、思いついては書き、しばらく頭を落として考えながらごろごろし、また思いついては身を起こして書き。。。という具合にだらだらしながら少しずつイメージを固めていきます。

ふいに良いアイデアがヒラメイて、はやく書いてしまおうと焦りながら一気にバーっと書き殴る時もあれば、布団が心地よいので、気がついたらいつの間にか眠ってしまっていることも。

キチンと整理した文章で書くのではなく、短いメモのようなものを思いつくままに書き散らす感じです。

 

f:id:utsugiyukika:20180610061349j:plain

 

制作ガイドライン」によると、静止画のスタンプ画像の場合、8個/16個/24個/32個/40個の中から作る個数を選べますので、「日常に使えるあいさつスタンプ」「季節をテーマにしたスタンプ」「誰かを応援するためのスタンプ」。。。などなど、一つのテーマに沿って、自分が作りたいと思う個数の分だけ、アイデアを考えます。

その際、実際に送る相手を思い浮かべながら、その人にどんな言葉をかけてあげたいか、あるいは、自分ならどんな言葉をかけてもらいたいか、想像しながら考えると思いつきやすいです。

スタンプはイラストなので、アイデアを実際にはどんなキャラクターでどんな風に表現するのか、イメージがつかみやすいように簡単な絵をそえたりもします。

この時点ではただの案なので、採用するかどうかは後回しでひたすら気楽にいきます。

スタンプのラフを描く

イデアの中から、作るものが決まったら、出来上がりをイメージしてスタンプのラフ絵を描いておきます。

まず、ノートにスタンプの個数分の升目ができるように線を引きます。

そして、出来上がった升目の中に、一つ一つスタンプのイメージを描いていきます。

f:id:utsugiyukika:20180629051825j:plain

 

わたしはこのラフ画を完成図として、制作を進めていきます。

この時点で、できるだけしっかりとイメージを固めておくと後がラクです。

同じようなものがないか、全体のバランスが取れているかなど、後から困ることのないように気をつけながら、全ての升目を埋めていきます。

これで大丈夫だと思うものが出来たら、実際に作ってスタンプにしていきます。

 

LINEスタンプ制作③「LINE Creators Market」にスタンプを登録する

LINEスタンプ制作① Creators Marketに登録する

 LINEアカウントを取得しておこう

LINEスタンプを販売するためには「LINE Creators Market」への登録が必要です。 

登録前にLINEアプリをスマートフォンにインストールして、LINEアカウントを取得しておきます。

アプリで設定したメールアドレスとパスワードがLINE Creators Marketのログイン画面での入力情報となります。 

f:id:utsugiyukika:20180610183516j:plain

 トップページの「登録はこちら」ボタンをクリックし、ログイン画面でLINEアカウントのメールアドレスとパスワードを入力し、ログインします。

 登録の手順

f:id:utsugiyukika:20180610185636j:plain

1.「利用規約」にチェックを入れて同意をし、登録情報を入力したら「確認」ボタンをクリック。

2.情報を確認し、「登録する」ボタンをクリック。

3.申込完了ページが表示され、登録したメールアドレスに確認メールが届く。

4.メールのURLをクリックしたら登録完了。

という流れです。

 f:id:utsugiyukika:20180610191134j:plain

送金先情報の設定をする

 登録が終わったら、売り上げの分配金を受け取るために、「マイページ」の「アカウント設定」から「送金先情報」を設定しておきます。

f:id:utsugiyukika:20180610204105j:plain

ちなみにわたしは送金手段を「銀行振込」ではなく「LINE Pay」に設定しています。

金融機関への振込だと振込手数料が550円かかりますが、LINE Payを選ぶと無料です。ただし、LINE Payから銀行に出金して現金として使う場合には、出金手数料として220円がかかります。

LINE Payについてはこちらの記事が参考になります。

gaiax-socialmedialab.jp

 

LINEスタンプ制作②アイデアを考える

 

LINE制作目次

CLIP STUDIO PAINT PRO」による「LINEスタンプ」の作り方紹介記事の目次です。

LINEスタンプ制作

LINEスタンプ制作① Creators Marketに登録する

LINEスタンプ制作②アイデアを考える

LINEスタンプ制作③「LINE Creators Market」にスタンプを登録する

LINEスタンプ制作④イラストを描く

LINEスタンプ制作⑤イラストに色を塗る

LINEスタンプ制作⑥スタンプ画像を「LINE Creators Market」に登録する

LINEスタンプ制作⑦メイン画像を作る

LINEスタンプ制作⑧トークルームタブ画像を作る

LINEスタンプ制作⑨登録したスタンプ画像に「タグ」を設定する

LINEスタンプ制作⑩完成したスタンプを販売する 

LINEアニメーションスタンプ制作

LINEアニメーションスタンプ制作① イラストを用意する

LINEアニメーションスタンプ制作② アニメーションスタンプを立ち上げる

LINEアニメーションスタンプ制作③ イラストに動きをつける

LINEアニメーションスタンプ制作④タイムラインを整理する