ねこひいきをどうぞごひいきに

ハンドメイドやデザインを制作する「ねこひいき」がお届けするハンドメイド・デザイン・子育てに関するお役立ち情報をまとめた雑記ブログです。ものづくり好きな夫婦二人とニコニコの息子くん、そしてねこひいきの社長であるねこのコタローさんの3人と一匹で絶賛営業中。

プロのデザイナー直伝!無料のサービスを使って子供のLINEスタンプを簡単に作ろう!

 

トップ_LINEスタンプの作り方

 

こんにちは!ねこひいきデザイン部です。

 

息子くんが生まれてからというものフォトアルバムを作ったり、ポストカードを作ったりとデザインの技術や知識をプライベートにフル活用していますが、今回目をつけたのが、

 

LINEスタンプ!」

 

もちろんLINEスタンプで一発当てて稼ごう!といった無粋なものではなく母ちゃんや両家のじじばばたちみんなで息子くんLINEスタンプを送りあってワイワイしたいという可愛い理由です。

 

ということで、

今回はデザイナーじゃなくても使える、でもとても精度が高い無料のデザインツールやサービスを使って

 

「簡単にクオリティの高いLINEスタンプを作っちゃおう!!!」

 

というエントリーになります。

 

LINEスタンプの作り方(一般的な作り方)

まずはLINEスタンプの作り方を確認しましょう。

 

 LINEスタンプの作り方は先人達がいろんなサイトでまとめてくれています。

creator.line.me

 

appli-world.jp

 

公式のものをはじめ、とても丁寧に作り方がまとめられていますね。

 

LINEスタンプを作ろうと思っている方はまず1度これらのページを見ておくと全体像がつかめるので良いかなと思います。

 

「そんなのめんどくさい!とりあえずざっくりと説明してよ」という人向けに簡単にまとめると、

 

①スタンプにしたい画像を用意する

 

②画像のスタンプにしたいところ(子どもの部分)以外を消して背景を透明にする

 

③文字を載せたりデコレーションをする。

 

というおおまかな3ステップで出来上がります。(その後、登録と審査などはありますが・・・)

 

 

スタンプ作成に使うサービス 

remove.bg

www.remove.bg

②画像のスタンプにしたいところ(子どもの部分)以外を消して背景を透明にする

 ための背景の消去をカンタン、キレイにできるサービス

 

 

Canva

www.canva.com

③文字を載せたりデコレーションをする。

通常のLINE Creators Studioよりも幅広い表現ができるデザインツール。こちらは無料で使えていい感じにデザインができちゃうオススメのデザインツール。簡単なものならこのCanvaで作れちゃいます。

 

PEKO-STEP

www.peko-step.com

最後にCanvaでデザインしたスタンプを透過画像(背景が透明の画像)として書き出すためにPEKO STEPというサービスを使います。こちら後ほど詳しく書きますが、Canvaは無料ユーザーで使っていると背景を透明にして書き出せないためにこのPEKO STEPを使うことになります。

 

 

具体的なラインスタンプ作りの手順

 それでは実際のラインスタンプの作成ステップに入ります。

 

今回は、先ほどご紹介したURLで一般的なスタンプの作り方をご覧いただいていることを前提にお話ししていきますので②のステップから進めていきます。

 

②画像のスタンプにしたいところ(子どもの部分)以外を消して背景を透明にする

まずはスタンプにしたい画像を用意し、その画像の背景を消していきます。

 

「背景を消す」というのは一般的な手順としてはLINE Creators Studioの消しゴムツールを使って人物の部分以外を消していく、ということになります。

 

やってみるとわかりますが、 この作業

 

ヒジョーーーにめんどくさい!

 

そして地味!!!

 

とはいえこの作業、仕上がりに大きく影響するのでなかなか手を抜けない。

 

私もLINE Creators Studioでスタンプを使ってみていましたが、この作業はなかなかキレイに切り抜けず苦労しました。キレイに切り抜くにはなにかコツがいるのかもしれないという印象です。。。

 

でもこんな切り抜き作業も簡単に、そしてあっという間に終わらせられるんです。

 

そう、このremove.bgならね

www.remove.bg

 

 

remove.bgで画像の切り抜きが激ラクに!

このremove.bgというサービスは画像をアップロードするだけで

 

オリジナルの画像から人物などのメインのものだけを抜き出し、背景を除去することができる

 

という便利なヤツ。

 

学習済みのAIが画像内のメインとなるもの(今回でいえば人)を認識し、それ以外の要素を「背景」として透明にすることができるというとても便利なものなんです。

 

文章だけだとわかりにくいので、まずこの動画をご覧ください。


How to Remove Background in 5 seconds without any Software and Skill

 

このように画像をドラッグアンドドロップするだけで、キレイに切り抜くことができるのです。

 

びっくりするほど早く!そして

 

めちゃくちゃキレイ!に

 

このスゴさはLINE Creators Studioの消しゴムツールで背景を消してみないとわからないかもしれないので、ぜひ一度消しゴムツールで背景を消してみてください。

 

その手間の大変さとともにこのサービスの偉大さがわかることでしょう。

 

remove.bgの注意点

無料で使えるサービスは500pxまで

このremove.bgですが無料で使うことができるのはサイズが500pxまでになります。

 

アップロード自体はそれ以上のサイズで行えますが、最終的に幅500px × 高さ500pxのサイズまで自動で縮小されます。これ以上のサイズの画像として切り抜きをするには有料の登録が必要になってきます。

 

しかし、今回作成するラインスタンプは横幅370px、高さ320pxなので500px以内に収まります。

 

スタンプ用途であれば幅、高さが500px以内というのは十分なサイズなので、問題なく使うことができますね。

 

remove.bgのビフォア&アフター

ということで、無料の画像素材を探せるODANを使って実際画像を切り抜いた際のビフォア&アフターを見ていきましょう。実際のremove.bgでのサービス画面をキャプチャしました。

(左がオリジナル画像、右がremove.bgで背景を削除した画像。比較画像の下に元画像へのリンクがあります。)

f:id:toraneko-design:20191021155648j:plain

Toddler in White and Pink Jacket Standing Beside Wood Log · Free Stock Photo

 

f:id:toraneko-design:20191021155715j:plain

Closeup Photo of Woman With Brown Coat and Gray Top · Free Stock Photo

 

f:id:toraneko-design:20191021155804j:plain

Man Holding White Teacup in Front of Gray Laptop · Free Stock Photo

 

f:id:toraneko-design:20191021155807j:plain

Woman Wearing White Dress Shirt and Blue Pants · Free Stock Photo

 

 

f:id:toraneko-design:20191021155812j:plain

 

Man in White V-neck T-shirt and Black Pants · Free Stock Photo

 

 

この精度には驚きです。髪の毛や背景と近い色の服までかなり細かく切り抜かれていることがわかります。

 

ちなみに画像を見てみるとわかりますが、時々、小さい切り残しが発生することもあります。切り抜く背景によってそのようなエラーもありますが、その際は最終的に画像の登録を行う時に、LINE Creators Studioの消しゴムツールで手動でチョチョイっと消すこともできますのでご心配なく。

 

ということで、これで②の

 

スタンプにしたいところ以外を消して背景を透明にする

 

はクリア!この項目、通常通りの方法でやると結構時間がかかるのでかなりの時短効果にもなったかなと思います。

 

 

続いて、

 

③文字を載せたりデコレーションをする。

 

工程に入っていきます。

 

この工程も一般的にはvのアプリ内で文字を入れたりデコレーションしていくのが普通。

 

けどこのLINE Creators Studioのデコレーション、実際にやってみると

 

なんか物足りない。。。

 

LINE Creators Studioだとある程度のことは問題なくできるのですが、やはりみんなが使い易いアプリだけあってできるデコレーションや文字のバリエーションがかなり限られています。

 

これでは、足りない。

もっとオリジナリティが欲しい!

 

そう、そんなあなたに!

 

あるんです、オリジナリティに溢れ、かつ簡単なデコレーションが、無料で使えるサービスが!

 

そう、Canvaならね。

 

・・・

 

 

 

Canvaはオシャレなデザインを作ることができるWEBサービス

Canvaを使えばポスターやフライヤーカード、名刺などの紙の印刷物からバナーやWEBのメディア用画像まであらゆるデザインをweb上で作ることができます。

 

しかも無料で!

 

このサービスはプロユースではないのでサービスの使いやすさもバッチリ。

 

Canvaに関してはこちらのサルワカさんのサイトがわかりやすいかと思います。

 

saruwakakun.com

 

プロが使うイラストレーターなどのツールに比べたら自由度は低いですが、このCanvaはノンデザイナー(デザイナーではない人)でも使いやすい工夫がいっぱい!

 

子ども関係のデザインや家庭用のデザインなんかを作るには十分な機能を持ち合わせています。

 

またCanvaの特徴としてテンプレートとしてすでにオシャレなデザインが組んであるのでそれを適用することで自分のデザインも簡単にオシャレに作ることができるんです。

 

Canvaを使って、スタンプのデータを作る

それでは、具体的にCanvaでデザインを作っていきます。

 

f:id:toraneko-design:20191018180536j:plain

 

まずは「デザインを作成」をクリック!

 

 

f:id:toraneko-design:20191018180702p:plain

「カスタムサイズ」でスタンプのサイズ、幅370px 高さ320pxを入力します。

 

 

f:id:toraneko-design:20191018180814j:plain

できたこの白いキャンバスがスタンプのデザイン領域になります。

 

続けて先ほど②で切り抜いた画像を配置します。

 

f:id:toraneko-design:20191018182353j:plain

左のサイドバーの「画像」から「画像または動画をアップロード」をクリック、該当する画像を配置します。

 

この画像を配置したい場所へ配置します。(もちろんあとから配置の調整可能)

 

 

さらに、テキストや素材を配置してデコレーションをしていきましょう。

 

f:id:toraneko-design:20191018181201j:plain

素材は、かなりたくさん用意されています!これだけあるととても心強い!

 

また、有料素材としてお金を払えばプレミアム素材というものも使うことができます。

 

もちろん素材を自分で用意して画像としてアップロードすることだって可能。

 

 

f:id:toraneko-design:20191018181255j:plain

続いてテキストを入力。

 

見出し、小見出し、本文としてテキストをクリックしてデザインに追加したり、

 

下にあるテンプレートから選んで、テンプレをベースに文字のみを打ち直したりすることもできます。

 

このCanvaはテンプレートのデザインがきちんとバランスが取れていてカッコイイので

選んで文字を打ち換えるだけでいい感じに仕上がります。

 

f:id:toraneko-design:20191018181622j:plain

(テンプレート例)

 

f:id:toraneko-design:20191018181640j:plain

(文字のテンプレート例)

 

このようにすでにキレイに作られているデザインを使える点もデザインがあまり得意ではない方には嬉しいポイントです。

 

さらにスタンプを作る点でうれしいのは

 

日本語のフォント(文字)の種類がとても多いところ!

 

太めで個性のある文字が多いのでスタンプ向きです。

 

 

フォントがスタンプで伝えたい感情にマッチしているとより伝わりやすくなるので、文字の種類が多くたくさんの中から選べるというのはホントにありがたいですね。Canvaで使える日本語対応フォントはここに一覧で書いてありました。

 

www.canva.com

 

 

 

今回は写真と素材、そしてテキストを組み合わせてこのようなスタンプを作りました。

 

ありがとう

 

ちなみにCanvaでは作業するキャンパスを一枚のWEBページの中で複数作ることができます。

 

登録したいすべてのスタンプを一枚のページの中で作ることも出来るんです。

 

 

他のスタンプのバランスも見ながら作っていけるのでとても効率的ですね。

 

 

さて出来上がったこのスタンプ画像ですがこの状態だと、背景が白になっています。

 

Canvaでは無料のユーザーでの利用では背景が透明で書き出しができないんですね。

 

 

透明で書き出せないというのがどういうことか、というと

 

スタンプを使うと

 

 

linesample

 

こうなっちゃうんです。背景の白が邪魔ですね。。。

 

このため背景を透明にする必要があるのですが、先ほども書いた通りCanvaは無料ユーザーでは、画像を透明に書き出すことができません。

 

そこで3つ目のサービスの登場!

 

できちゃうんです、白い背景を透明に。

 

そうPEKO STEPならね。(くどい)

 

www.peko-step.com

 

 

PEKO STEP

 

今回使うのはPEKO STEPの中の中のひとつで、背景を透明にして書き出す無料のサービス。

 

読み込んだ画像に透過色を設定してアルファチャンネル付きPNG画像にするシンプルな画像加工ツールです。

 

まあ簡単に言うと読み込んだ画像の背景を簡単に透明にすることができるというサービスなのです。

 

使い方もいたって簡単で今回ならドラッグアンドドロップとクリック、そして画像をダウンロードという3ステップで完了します。

 

 

先ほどCanvaにて作成したスタンプの画像(PNG形式にて書き出し)をドロップ。

 

 

この「透過対象」をクリックした色に。

 

 

そして背景の白い部分をクリックすれば背景が透明の画像になります。

 

 

先ほどの画像と比べると背景の白が消えていることがわかります。

 

 

これを右クリック(cintrolを押してクリック)で保存すればOKです!

 

これにて、スタンプの元となるPNG画像が出来上がりました。(ドラッグアンドドロップでデスクトップにダウンロードしてみると背景が透明になっているのがわかります)

 

 

これで素材が用意できたので、あとはこちらの記事にあるようにLINE Creators StudioのスタンプとしてPNG画像を登録していけばOK。

 

 

アプリ上に置いてみるとこんな感じ。

 

今回は画像的にちょっとフチの白が残ってしまったみたいですね。これも最終的にはスマホのLINE Creators Studioのアプリ上で消すこともできます。

 

これでかなり簡単に、かつキレイにスタンプを作ることができました。

 

LINEのスタンプは最低8個のスタンプが必要なので同様にあと7個を作ればOKです!

 

 

まとめ

 

今回は簡単キレイに子供のLINEスタンプを作ろうというエントリーでした。

 

ご興味を持っていただけたらぜひこれらのサービスを使ってスタンプを作ってみてください。

 

 子供のスタンプを使うと、夫婦間やじじばばたちとのLINEがもっともっと楽しくなりますよ~!

 

それでは、今回はこのへんで。

 

引き続き、ねこひいきをどうぞごひいきに。