ブログ運営

スマホで簡単に出来る!アイキャッチ画像の作り方【ibisPaint(アイビスペイント)・メイキング】

スマホで簡単に出来る!アイキャッチ画像の作り方【ibisPaint(アイビスペイント)・メイキング】

こんにちは、ねこかん(@yowakuikiru)です。

ブログ記事の顔となる「アイキャッチ画像」。皆さんどのように作成していますか?

魅力的なアイキャッチ画像を作ることができれば、「記事を読んでみたい!」と思ってもらえる可能性も高くなりますし、意外と手を抜けないところです。

とは言っても、アイキャッチ画像の作成に時間をかけすぎてしまうのは勿体ないですよね。

そこで今回は、「ibisPaint(アイビスペイント)」を使った、スマホだけで出来るアイキャッチ画像の作り方を説明します。

スマホさえあればできるので、すきま時間で簡単に作成することができますよ。

  • スマホでアイキャッチ画像を簡単に作りたい
  • アイキャッチ画像にイラストも入れてみたい

という方は、是非読んでみてくださいね。

ねこかん
ねこかん
イラストを描くのが苦手な方でも、無料素材を活用して簡単に作れるので安心してください!

今回作成するアイキャッチ画像

今回作成するアイキャッチ画像は、こちらです。

今回ibisPaint(アイビスペイント)で作成するアイキャッチ画像

こちらのアイキャッチ画像のメイキングとともに、作成方法を解説していきますね。

準備するもの:ibisPaint(アイビスペイント)+タッチペンがあると便利

まずはスマホアプリ「ibisPaint(アイビスペイント)」をダウンロードしましょう。

アイビスペイントX

アイビスペイントX

ibis inc.無料posted withアプリーチ

無料で使える、優秀なお絵描きアプリです。

そして細かい作業もあるので、スマホ用のタッチペンが1本あると便利です。

▲Amazonだと、799円で購入できます。(2019/6/14現在)

スマホに最適なaibowタッチペン
私はこのaibowタッチペンで、イラストも描いています。描きやすくて重宝してます!

写真素材を用意する

まずは、背景に使用したい写真素材を用意します。

私は「写真AC」という、フリー写真素材サイトを活用しています。フリー写真素材サイトであればまず問題ありませんが、写真の著作権には注意しましょう。

今回は写真ACでダウンロードした、こちらの写真を使用します。

アイキャッチ画像作成に使用する、画材の写真
▲「アイキャッチ画像の作り方」なので、画材の写真にしました。

記事の内容と関連のある写真にしておくと、パッと見た時に何となく記事内容が分かるので、おすすめです。

ibisPaint(アイビスペイント)を起動し、新規キャンバスを作成する

写真の準備が出来たら、早速ibisPaintを起動しましょう。

一番左の「マイギャラリー」を選択します。

ibisPaint(アイビスペイント)でマイギャラリーを選択 ibisPaint(アイビスペイント)で+を選択
▲マイギャラリーを選択したら、左下の「+」を選択します。

キャンバスサイズを設定します。

ibisPaint(アイビスペイント)でキャンバスサイズを選択
▲アイキャッチ画像に適したサイズにする

ブログテーマによって丁度良い比率が異なるので、お使いのテーマに合わせたサイズにしましょう。

ちなみにWordPress有料テーマ「JIN」を使用している私は「1920×1080」で設定しています。

ねこかん
ねこかん
JINでは「760×428以上」の「16:9」の比率が推奨されています

背景を作成する

写真素材サイトで用意した写真や手持ちの写真など、背景に使用したい画像をアップロードしていきます。

右下の「1」という数字が書いてあるアイコンを選択し、続いてカメラマークのアイコンを選択します。

ibisPaint(アイビスペイント)で「レイヤー」アイコンを選択 ibisPaint(アイビスペイント)でカメラアイコンを選択

画像を選ぶと、真っ白のキャンバスに写真が出てきます。

※なお、「~線画抽出を行いますか?」というメッセージが出てきますが、ここではキャンセルでOKです。

ibisPaint(アイビスペイント)で画像の大きさと位置を調整 ibisPaint(アイビスペイント)で背景画像をバランスよく配置
▲画像の大きさと位置を調整し、バランスよく配置させます

配置が完了したら、右下の「チェック」を選択しましょう。

この後文字入れやイラストを挿入するので、背景を少し薄くしておきます。背景がそのままだと、ごちゃごちゃした印象になってしまうからです。

右下の「2」と書いてあるアイコンを選択し、(先ほどは「1」だったアイコンです)スライダーを左に動かして、画像を薄くしていきます。

ibisPaint(アイビスペイント)で背景画像を薄くする ibisPaint(アイビスペイント)で背景画像が完成
▲スライダーで画像の濃さを調整し、背景画像を薄くしていく

これで背景は完成です。

文字入れをする

続いて、アイキャッチ画像に入れたいテキストを「文字入れ」で入れていきましょう。

右下の「ブラシ」アイコンを選択し、「文字入れ」を選択します

ibisPaint(アイビスペイント)でブラシを選択 ibisPaint(アイビスペイント)で文字入れを選択

すると左下のブラシアイコンが「T」の文字入れアイコンに変化します。

キャンバスをタッチし「文字追加」を選択すると、文字入れモードになります。

ibisPaint(アイビスペイント)で文字追加を選択
▲出てきた「文字追加」をタッチして選択します

そして入れたい文字を入力すると、キャンバスに反映されます。

ibisPaint(アイビスペイント)で文字を入力

なお、キャンバスは2本指ドラッグで動かすことができます。

見やすい位置にキャンバスを動かして、バランスを見ながら文字を入力していきましょう。

文字の大きさを変更する

デフォルトでは適当な文字サイズとなっているので、文字サイズを変更していきます。

左から2番目の「サイズ」アイコンをタッチし、スライダーで文字サイズを変更しましょう。

ibisPaint(アイビスペイント)で文字サイズを変更

「サイズ」右の「チェック」をタッチすると、文字全体の配置を変えたり、「⇔」ドラッグで、文字入力のスペースを広げることができます。

文字のフォントを選ぶ

ibisPaintには、豊富な文字フォントがあります。雰囲気に合ったフォントを選びましょう。

キャンバスモードになっている場合は、鉛筆のアイコンをタッチしてから、「文字」→「フォント」を選択します。

ibisPaint(アイビスペイント)で鉛筆アイコンを選択 ibisPaint(アイビスペイント)でフォントを選択

そして、好きなフォントを選択します。

ibisPaint(アイビスペイント)でフォントを選び、文字入れ完了
▲今回は「M+2p bold」というフォントを選択しました。

ねこかん
ねこかん
フォントがありすぎて、いつも選ぶのに時間がかかってしまいます…

文字色・ふちどりを選ぶ

次に、文字の色を選びましょう。

「スタイル」→「文字色」を選択します。

ibisPaint(アイビスペイント)で文字色を選択

カラーパレットから、好きな色を選びます。

ibisPaint(アイビスペイント)でカラーパレットから好きな色を選択
▲今回はオレンジ系の色にしてみました。

ついでにふちどりも設定しておきます。文字の周りを白でふちどります。

スライダーでふちどりの太さを変更することができます。

ibisPaint(アイビスペイント)で文字のふちどりを設定
▲ちょっと見にくいですが、「!」が白でふちどりされているのが分かると思います。

このように文字を白色でふちどりしておくと、背景に文字が埋もれなくなるのでおすすめです。

文字の背景を設定

ibisPaintでは、文字に背景を付けることができます。

「背景」→「背景色」を選択し、好きな色を選びましょう。

ibisPaint(アイビスペイント)で文字の背景色を選択
▲スライダーで背景の濃さを調整できます。

また、背景の縦・横幅の変更もできます。バランスを見ながら調整しましょう。

ibisPaint(アイビスペイント)で文字の背景の幅を変更

完成に近づいてきました!

ibisPaint(アイビスペイント)でアイキャッチ画像がもうすぐ完成

追加の文字を入れる

先ほど入れた文字とは別の部分をタッチすることで、追加の文字を入れることができます。

ibisPaint(アイビスペイント)で文字を追加する

先ほどと同じ要領で、文字を入れていきましょう。

ibisPaint(アイビスペイント)でさらに文字を追加しました
▲「アイビスペイント使用」という文字を入れました。

追加で文字を入れる場合は、以下のような工夫をすると良いです。

追加文字のポイント
  • メインのタイトルよりも細いフォントを選ぶ(ごちゃごちゃしない)
  • 吹き出しのような「\/」を活用する

この辺は好みの問題でもあるので、自分に合ったスタイルを見つけましょう。

背景透過済みのイラストを入れてみよう

イラストを入れることで、オリジナリティがアップ

仕上げとして、背景透過済のイラストを入れることで、よりオリジナリティのあるアイキャッチ画像になります。

「イラストAC」などのフリーの背景透過イラストサイトから、好きなイラストをダウンロードしても良いですし、イラストが描ける方は自分で作成してみるのも良いです。

ちなみにibisPaintでは、描いたイラストを簡単に背景透過で保存することができます。

「オリジナルのイラストをアイキャッチ画像に入れたい!」という人は是非イラストにも挑戦してみてくださいね。

デジタルイラスト初心者がibisPaint(アイビスペイント)でアイコン描いてみた【メイキング】ブログ/Twitter用のアイコンを、お絵かきアプリ「ibisPaint(アイビスペイント)」で作成しました!デジタルイラスト完全未経験の私ですが、ネットや本を参考にしながら、何とか完成させることができました。今回は、その制作過程を記事にしていきたいと思います。同じく初心者の方の参考になれば嬉しいです。...

背景透過ってどういうこと?

ちなみに「背景透過ってどういうこと?」という方のために、簡単に背景透過について説明しておきます。

背景透過とは、イラスト以外の部分を透明にすることです。

文字ではなかなか伝わらないと思うので、実際に水色のキャンバスに、

  • 背景透過済のイラスト
  • 背景透過していないイラスト

を、それぞれ挿入してみました。

背景透過とは?詳しく説明します

背景透過をしていないと、右のように白い背景ごと保存されてしまうので、水色のキャンバスに馴染ませることができないんです。

アイキャッチ画像にイラストを挿入し、完成!

前置きが長くなってしまいましたが、ibisPaintに戻りますね。

イラストを入れるには、「レイヤー」→「カメラ」のアイコンを選択します。

ibisPaint(アイビスペイント)でレイヤーアイコンを選択

ibisPaint(アイビスペイント)でカメラアイコンを選択し、イラストを選ぶ
▲使用したいイラストを選びます

最初に背景画像を設定した時のように、拡大縮小を使って好きな位置にイラストを配置して、完成です!

ibisPaint(アイビスペイント)でイラスト入りアイキャッチ画像が完成しました
▲キャラクターの右余白が気になったので、追加で「Let’s try!」の文字を入れました。

まとめ ~ibisPaint(アイビスペイント)で色々なパターンのアイキャッチ画像が簡単に作れます~

以上、ibisPaintを使ったアイキャッチ作成方法をお伝えしました。

なお今回は写真やイラストを入れましたが、文字だけのシンプルなアイキャッチも簡単に作れます。

ibisPaint(アイビスペイント)で作成したシンプルなアイキャッチ画像
▲文字だけのシンプルなアイキャッチ

また、吹き出し素材も豊富なので、吹き出しを使ったアイキャッチ画像も作成可能です。

ibisPaint(アイビスペイント)で作成した、吹き出し入りアイキャッチ画像
▲吹き出しを使ったアイキャッチ

どちらもやっつけ感満載ですが…(苦笑)「バリエーション豊富なアイキャッチ画像が作成できる!」ということが分かっていただけたら何よりです。

皆さんも是非スマホアプリ「ibisPaint」を使って、アイキャッチ画像を作ってみてくださいね。