アイキャッチ画像

誰でもすぐにできる!アイキャッチ画像の簡単な作り方

どうも、夕日です。

今回は、

誰でもすぐにできる!アイキャッチ画像の簡単な作り方

というテーマでアイキャッチ画像の簡単な作り方をご紹介します。

本記事は、

・ ブログ初心者で、アイキャッチ画像の作り方が分からない

・ アイキャッチ画像の簡単な作り方を知りたい

という方向けの記事です。

準備

はじめに、準備をしていきましょう。

やることとしては、以下の2つです。

アイビスペイントをダウンロードする

やることの1つ目は、アイビスペイントをスマートフォンにインストールすることです。

アイビスペイントは、アイキャッチ画像を作るのに僕が使っているアプリです。

直感操作で簡単にアイキャッチ画像が作れる

のでとってもおすすめなアプリです!

アイビスペイントは、こちらからインストールできます。

フリー素材をダウンロードする

やることの2つ目は、アイキャッチ画像に使用するフリー素材をフリー素材サイトからダウンロードすることです。

フリー素材サイトは、

無料で使える画像

が共有されているサイトのことです。

僕がおすすめするフリー素材サイトは以下の2つです。

写真素材なら「写真AC」無料(フリー)ダウンロードOK

かわいいフリー素材集 いらすとや

他にもフリー素材サイトは沢山ありますが、

基本的にはこの2サイトだけで十分対応できる

と思います。

フリー素材サイトには、サイト内専用の検索窓があるため、

自分の記事テーマに合うようなキーワードを検索窓に入力して画像を検索しましょう。

夕日直人
夕日直人
例えば猫の餌についての記事であれば【猫 餌】と調べてみましょう。

誰でもすぐにできる!アイキャッチ画像の簡単な作り方

ここからは、誰でもすぐにできる簡単なアイキャッチ画像の作り方を説明していきます。

基本的な流れは以下のとおりです。

・ アイキャッチ画像のサイズを決める

・ フリー素材を貼り付ける

・ 背景を設定する

・ 文字を入力する

この手順に沿っていけば

簡単なアイキャッチ画像

を作ることができます。

それでは、説明していきます。

アイキャッチ画像のサイズを決める

はじめに、アイビスペイントのアプリを開き、マイギャラリーを選択します。

アプリを開いたら、下のメニューにあるプラスマーク(赤丸部分)を押してファイルを新規作成していきます。

新規作成を押すと、

これから作成する画像の大きさを縦横の比率か自分で指定することができる

ので、お好みで選択します。

アイキャッチ画像のサイズは、

僕のブログの場合762×410で作成していますので762×410で作成していきます。

夕日直人
夕日直人
画像サイズはブログのテンプレートによって異なるため、

アイキャッチ画像のサイズをいくつに設定すればいいか分からない

という方は、Google検索で

自サイトで使ってるテーマでは、アイキャッチ画像のサイズをいくつに設定すればいいか

を調べてみましょう。

フリー素材を貼り付ける

新規作成を終えたら、右下の端にある編集を押します。

すると、メニューが出てくるので左にあるカメラアイコンをします。

選択すると、スマホ内の画像を選ぶことができるので、冒頭でダウンロードしておいたフリー素材を選択します。

選択後、ダウンロードしたフリー素材を白い部分の上で動かせるようになるので、以下の手順でセッティングします。

① 移動拡大縮小アイコンを選択する

② 指で矢印の方向に動かして自分が適当だと思う範囲内に画像が収まるようにする

自分が適当だと思う大きさに画像を首相できたら、指を離しチェックマークを押します。

線画抽出を行いますか?という警告が出てくるのでキャンセルを選択します。

完成すると以下のようになります。

これだけだと物足りないので次は背景を付け加えていきましょう。

背景を設定する

背景を設定する場合は、右上のアイコンを選択します。

背景に設定する素材を選択する一覧が現れるので、その中から好みの背景を選びます。

今回は、

パターン(カラー)の中にあるカラフル水玉N

という素材を使います。

先ほどフリー素材を貼ったときと同様の操作で、自分が適当だと思うサイズにお好みで変更します。

素材を貼り付ける終えると

本来背景になるはずの水玉の素材が前に出ている

のが分かります(以下の図参照)。

今回は、退職届という写真の後ろに背景を置きたいので、

素材が退職届という画像の後ろに回るように設定する

必要があります。

設定方法としては、まず右下にあるボタンを選択します。

すると、以下のようなメニューが現れるので、*レイヤー構造(以下で説明してます)の仕組みを考慮して、3番の背景素材を2番の方に移動させます。

レイヤー構造とは

以下の写真にある1、2、3という数字は、上記メニュー画像の番号(1、2、3)と対応しています。

アイビスペイントでは、

この数字が大きい画像ほど前に来て、数字が小さいほど後ろに回る

と言う特徴を持っています。このような構造をレイヤー構造といいます。

今回は、

3番の位置にある背景素材を2番(ダウンロードしたフリー素材)の後ろの位置に回すため

背景素材を2番の後ろに移動させます。

文字を入力する

次は文字入れをするために、下にあるペンキのアイコンを押します。

するとメニューが表示されるので、その中の文字入れを押します。

文字入れを押したら、下のペンキのアイコンがTマークのアイコンに変わります。

以下の手順で文字入力フォームを表示します。

① 画像の範囲内で文字を入力したい場所を適当に押します。

② 文字追加という選択画面が現れるので押します。

文字入力フォームが表示されるので、入力したい文字を入力していきます。

夕日直人
夕日直人
余談ですが、今回の記事は

“新卒入社一年足らずで会社を退職しました”

という記事に設定するアイキャッチ画像を例に書いてます。

そのため、画像内では

“新卒入社一年足らずで”

の文字が入力されてます。

入力を終えたら、チェックマークを押します。

お好みに合わせて、入力した文字を指で動かすことによって好きな位置に移動させることもできます。

また、もし文字のサイズが小さいと思った場合は、

入力するフォームの画面から、

サイズの項目(以下の画像を参照)

を選択することによって文字サイズを変更することができます。

サイズの項目を押すと、以下の画像のような画面が出てきます。

バーを左にスライドさせるほど文字サイズは小さくなり、右にスライドさせるほど文字サイズは大きくなります。

これもお好みに合わせてサイズを変えていきます。

文字サイズの調整を終えたら、チェックマークを押します。

文字サイズの調整を終えると、以下の図のようになります。

このままだと、

“新卒入社一年足らずで”

という文字が退職届の後ろに回り込んでしまっているのため、文字が一部見えなくなっています。

そのため、

見えなくなっている文字列が見えるように

レイヤーを上に移動させます。

文字が画像および背景の上にきていることを確認します。

アイコンが完成したら、右下にある左向き矢印のアイコンを押してアイキャッチ画像をPNG保存します。

保存を終えたら、マイギャラリーに戻ってアプリを一旦閉じます。

ブログ記事にアイキャッチ画像を設定する

続いて、ブログ記事にアイキャッチ画像を設定していきます。

WordPressのアプリを起動させます。

WordPressのアプリを起動させたら、ホームにあるメディアボタン(赤丸部分)を押します。

メディアボタン、を押したら右上にある+ボタンを押します。

端末から写真を選択を選択します。

先ほど作成したpng画像をクリックすると、画像がメディアライブラリにアップロードされます。

アイキャッチ画像を設定したい記事に、アイキャッチ画像の設定をしていきます。

まず、ワードプレスの設定画面から投稿一覧を選択します。

その後、アイキャッチ画像を適用させたい記事の編集ボタンをクリックします。

右のアイキャッチ画像の枠から、アイキャッチ画像を選択します。

もし、下の画像のように既存のアイキャッチ画像がある場合は、アイキャッチ画像を削除してからアイキャッチ画像を設定をしてください。

メディアを追加ボタンをクリックして、先ほどアップロードしたPNG画像を選択後、アイキャッチ画像設定を押します。

アイキャッチ画像が先ほどのPNG画像に設定されていることを確認します。

そしたら変更をプレビューを押して、作成したアイキャッチ画像を記事に反映したときどんな感じになるかを確認しましょう。

セリフ<気に入らなければ、修正、これでいいと思えば更新を押します。

まとめ

いかがでしたでしょうか。

今回の記事では、

ブログのアイキャッチ画像を誰でも簡単に作成する上で最低限必要な知識

をお伝えしました。

アイビスペイントは工夫次第でこれ以外にももっと複雑な画像を作ることができるアプリです。

今後も機会があれば、より複雑なアイキャッチ画像の作成の仕方を記事としてお伝えしていこうと思います。

今回の記事はここまでです。

最後までお読みいただきありがとうございました。

ABOUT ME
夕日直人
Webエンジニア/ライター/シンガーソングライター/ブロガーとして活動しています。Webプログラミング、ライティング、音楽、その他、有益な情報を発信していきます。