こんにちは！あんすみす(@ansmith_blog)です。
本記事では、初心者の方向けにアイキャッチ画像の作り方をご紹介します。
アイキャッチ画像は、あなたのブログを彩るものです。目を引くようなアイキャッチ画像が作れれば、記事を読んでもらえる機会も増えます。
簡単に作成できますので、是非ご覧ください。
目次
アイキャッチ画像を作る前の「準備」
アイキャッチ画像をつくるためには、下記の準備が必要になります。
その①Canvaに無料登録
その②無料画像を集める
上記のとおり。
１つずつ見ていきましょう。
その①Canvaに無料登録
アイキャッチ画像をつくるときは『Canva』を使用しています。
☑️Canvaとは？
無料で利用できるグラフィックデザインツール。誰でも簡単に綺麗なデザインを作ることができます。
有料プランもありますが、無料で十分使用できます。まず無料登録しておきましょう。
・サイト:Canva公式ページ↗️
・参 考：Canvaの登録方法と基本的な画面の見方↗️
その②：無料画像を集める
アイキャッチ画像をつくるときには素材が必要になります。
僕が利用している無料素材サイトは、下記のとおりです。
・Unsplash 写真
・FLAT ICON DESIGNイラストアイコン
・いらすとやイラスト
・Linustock シンプルなイラスト
有名なフリー素材サイトで、無料かつ商用利用可能となっています。
簡単にダウンロードできますので、参考にしてみてください。
アイキャッチ画像を作ってみよう！
はい、それでは作っていきましょう！
デザインペースを作成する
まずCanvaを開き、「デザイン作成」をクリックします。
そしたら「カスタムサイズ」を選びましょう。
続いて、画像のサイズを入力します。
☑️WordPressテーマ「JIN」の場合
・アイキャッチ画像：760×428
・記事内の挿入画像：760×560
記事内の挿入の場合は、760×560がオススメです。
すると下記のようなデザインスペースが現れます。
左のメニューから、画像、テキスト、素材などを挿入する感じになります。
画像をアップロードする
まず「アップロード」のメニューを選び「画像をアップロード」をクリックします。
そしたら自分の好みの画像を選びましょう。
すると選択した画像が出てくるので、クリックするとキャンパスに挿入されます。
○の箇所を引っ張り、点線の枠に画像の大きさを調整しましょう。
下記のように、白いキャンパス内に収まればOKです。
テキストを追加する
左のメニューから「テキスト」を選び「テキストボックスの追加」をクリックします。
画面中央にボックスが現れるので、書きたい文字を書きましょう。
画像上のメニューにある「A」で文字色変更、その左で字体を変更できます。
シンプルですが、これで完成です。
もう少しデザインを加えたい場合は、左メニューにある「素材」などを利用してレイアウトしましょう。
日本語の下に英語を書いたりすると、少しオシャレに見えますよね。
どんどん作ってると、だんだんと慣れてきますよ。
できあがった画像を保存する
画面右上の「↓」のボタンをクリックすると、ダウンロードが出てきます。
ファイルの種類を選びましょう。
そしたら「JPG」をクリックします。
☑️PNGとJPGの違い
・PNG：イラスト向き(※容量重め)
・JPG：写真向き
・参考：PNGとJPEGどっちがいいのか？「画像のベストな保存形式」↗️
どちらでも可能ですが、画像によって使い分けましょう。僕は容量が小さい「JPG」を選ぶ機会多めです。
最後に「ダウンロード」をクリックで、画像が保存されます。
以上がアイキャッチ画像作成の流れになります。
素材を利用してみる
今度はイラストを使って作成します。
下記の画像をつくってみます。
まず白いキャンパスを開きましょう。
次に、左メニューの「素材」から四角のイラストをクリックします。
そしたら四角の大きさを調整し、画面の半分を埋めつくします。
そしたら左上の四角の「カラー」をクリックして、好みの色を選びます。
今度は背景の色も変えましょう。
「一度背景をクリック→カラー」で色を変更します。
そしたら「Linustock(イラストサイト)」でダウンロードしたイラストをCanva内にアップロードして、画像に挿入します。
さらに「イラスト」と「文字」を追加すれば、下記のように簡単にアイキャッチ画像を作ることができます。
このように簡単に作れますので、ぜひ色々チャレンジしてみて下さい。
「いいな」と思ったアイキャッチ画像を真似よう
「自分では上手く作れないよ、、、。」と思う方は、アイキャッチ画像の上手な人を真似ちゃいましょう。
僕のアイキャッチ画像は、ほぼ真似です。素敵なアイキャッチ画像を作る方はたくさん居ます。「いいな！」と思ったらまず真似てみましょう。
真似るとこんな感じになります
初めて真似させていただいた画像がこちらになります。
シンプルかつ可愛い、とても素敵なアイキャッチ画像ですよね。僕は背景の「やわらかいクリーム色」に惹かれました。
この「クリーム色の画像を探そう！」と、2時間以上ムダに探しまくった過去があります、、、。≫【カラーコード取得】画像の色のコードを調べる簡単な方法
そして僕が真似した画像がこちら。
ほぼ一緒やないかーい。
えぬてぃーさん(@jiyujinNT)スイマセン、、、。
ただ僕はリスペクトを込めて、真似させていただいております。単に丸パクリしているわけではありませんので、なにとぞお許しを、、、。
ちなみに
この画像のイラストは「FLAT ICON DESIGN」からダウンロードしたものになります。
☑️アイコン名
・折れ線グラフ
・ブタ
・カバ
シンプルで可愛いアイコンが揃っているので、ぜひ活用してみてください。
アイキャッチ画像が素敵なブログをご紹介
「すごいッ…！この人センスある！」と思ったブログをご紹介します。
スケボーに乗った猫
『スケボーに乗った猫』
デザイナー歴10年あるemiki(@emiki73)のアイキャッチ画像になります。
引用元：デザイナーが教える！どこよりも目を引くブログアイキャッチ画像を作る方法
色の使い方がとても上手で、めちゃめちゃ可愛いですよね。
この記事では「アイキャッチ画像の必要性、注意する６つのポイント」が解説されていますので、是非ご覧ください。
ぽんひろ.com
『ぽんひろ.com』
Webデザイナー経験がある、ぽんひろさん(@ponhiroo)のアイキャッチ画像になります。
引用元：アイキャッチ画像の簡単な作り方！プロっぽくおしゃれに作る方法を紹介！【写真編】
はい、すごすぎます（笑）ぽんひろさんは、本物です。
ぜひ一度ブログを見に行って下さい。デザインのセンス、技術、どれも最高です。
この記事では「アイキャッチ画像をプロっぽく作る方法」がわかりやすく紹介されていますので、ぜひチェックしてご覧ください。
そんな感じで今回は以上になります。
最後まで読んでいただき、ありがとうございました。
