こんにちは!あんすみす(@ansmith_blog)です。
本記事では、初心者の方向けにアイキャッチ画像の作り方をご紹介します。
アイキャッチ画像は、あなたのブログを彩るものです。目を引くようなアイキャッチ画像が作れれば、記事を読んでもらえる機会も増えます。
簡単に作成できますので、是非ご覧ください。
目次
アイキャッチ画像を作る前の「準備」
アイキャッチ画像をつくるためには、下記の準備が必要になります。
その①Canvaに無料登録
その②無料画像を集める
上記のとおり。
1つずつ見ていきましょう。
その①Canvaに無料登録
アイキャッチ画像をつくるときは『Canva』を使用しています。
☑️Canvaとは?
無料で利用できるグラフィックデザインツール。誰でも簡単に綺麗なデザインを作ることができます。
有料プランもありますが、無料で十分使用できます。まず無料登録しておきましょう。
・サイト:Canva公式ページ↗️
・参 考:Canvaの登録方法と基本的な画面の見方↗️
その②:無料画像を集める
アイキャッチ画像をつくるときには素材が必要になります。
僕が利用している無料素材サイトは、下記のとおりです。
・Unsplash 写真
・FLAT ICON DESIGNイラストアイコン
・いらすとやイラスト
・Linustock シンプルなイラスト
有名なフリー素材サイトで、無料かつ商用利用可能となっています。
簡単にダウンロードできますので、参考にしてみてください。
アイキャッチ画像を作ってみよう!
はい、それでは作っていきましょう!
デザインペースを作成する
まずCanvaを開き、「デザイン作成」をクリックします。
![とは](https://ansmith-blog.com/wp-content/uploads/2019/06/1.png)
そしたら「カスタムサイズ」を選びましょう。
![作り方](https://ansmith-blog.com/wp-content/uploads/2019/06/2-640x360.png)
続いて、画像のサイズを入力します。
![文字](https://ansmith-blog.com/wp-content/uploads/2019/06/3-640x360.png)
☑️WordPressテーマ「JIN」の場合
・アイキャッチ画像:760×428
・記事内の挿入画像:760×560
記事内の挿入の場合は、760×560がオススメです。
すると下記のようなデザインスペースが現れます。
![表示されない](https://ansmith-blog.com/wp-content/uploads/2019/06/4-640x360.png)
左のメニューから、画像、テキスト、素材などを挿入する感じになります。
画像をアップロードする
まず「アップロード」のメニューを選び「画像をアップロード」をクリックします。
そしたら自分の好みの画像を選びましょう。
![英語](https://ansmith-blog.com/wp-content/uploads/2019/06/5-640x360.png)
すると選択した画像が出てくるので、クリックするとキャンパスに挿入されます。
![加工](https://ansmith-blog.com/wp-content/uploads/2019/06/6-640x360.png)
○の箇所を引っ張り、点線の枠に画像の大きさを調整しましょう。
![canvas](https://ansmith-blog.com/wp-content/uploads/2019/06/7-640x360.png)
下記のように、白いキャンパス内に収まればOKです。
![大きさ](https://ansmith-blog.com/wp-content/uploads/2019/06/8-640x360.png)
テキストを追加する
左のメニューから「テキスト」を選び「テキストボックスの追加」をクリックします。
画面中央にボックスが現れるので、書きたい文字を書きましょう。
![選び方](https://ansmith-blog.com/wp-content/uploads/2019/06/9-640x360.png)
画像上のメニューにある「A」で文字色変更、その左で字体を変更できます。
![位置](https://ansmith-blog.com/wp-content/uploads/2019/06/10-640x360.png)
シンプルですが、これで完成です。
もう少しデザインを加えたい場合は、左メニューにある「素材」などを利用してレイアウトしましょう。
![人生が変わる](https://ansmith-blog.com/wp-content/uploads/2019/06/%E8%AA%AD%E3%82%93%E3%81%A0%E3%82%82%E3%81%AE%E3%81%AF-%E5%85%A8%E3%81%A6%E5%BD%A2%E3%81%AB%E3%81%97%E3%81%A6%E3%81%8D%E3%81%9F-2.png)
日本語の下に英語を書いたりすると、少しオシャレに見えますよね。
どんどん作ってると、だんだんと慣れてきますよ。
できあがった画像を保存する
画面右上の「↓」のボタンをクリックすると、ダウンロードが出てきます。
ファイルの種類を選びましょう。
![おしゃれ](https://ansmith-blog.com/wp-content/uploads/2019/06/1-1-640x360.jpg)
そしたら「JPG」をクリックします。
![フリー](https://ansmith-blog.com/wp-content/uploads/2019/06/2-1-640x360.jpg)
☑️PNGとJPGの違い
・PNG:イラスト向き(※容量重め)
・JPG:写真向き
・参考:PNGとJPEGどっちがいいのか?「画像のベストな保存形式」↗️
どちらでも可能ですが、画像によって使い分けましょう。僕は容量が小さい「JPG」を選ぶ機会多めです。
最後に「ダウンロード」をクリックで、画像が保存されます。
![サイズ](https://ansmith-blog.com/wp-content/uploads/2019/06/3-1-640x360.jpg)
以上がアイキャッチ画像作成の流れになります。
素材を利用してみる
今度はイラストを使って作成します。
下記の画像をつくってみます。
![イラスト](https://ansmith-blog.com/wp-content/uploads/2019/06/11-640x360.png)
まず白いキャンパスを開きましょう。
次に、左メニューの「素材」から四角のイラストをクリックします。
![引用](https://ansmith-blog.com/wp-content/uploads/2019/06/12-640x360.png)
そしたら四角の大きさを調整し、画面の半分を埋めつくします。
![意味](https://ansmith-blog.com/wp-content/uploads/2019/06/13-640x360.png)
そしたら左上の四角の「カラー」をクリックして、好みの色を選びます。
![アプリ](https://ansmith-blog.com/wp-content/uploads/2019/06/14-640x360.png)
今度は背景の色も変えましょう。
「一度背景をクリック→カラー」で色を変更します。
![効果](https://ansmith-blog.com/wp-content/uploads/2019/06/15-640x360.png)
そしたら「Linustock(イラストサイト)」でダウンロードしたイラストをCanva内にアップロードして、画像に挿入します。
![自動](https://ansmith-blog.com/wp-content/uploads/2019/06/16-640x360.png)
さらに「イラスト」と「文字」を追加すれば、下記のように簡単にアイキャッチ画像を作ることができます。
![確認](https://ansmith-blog.com/wp-content/uploads/2019/06/17-640x360.png)
このように簡単に作れますので、ぜひ色々チャレンジしてみて下さい。
「いいな」と思ったアイキャッチ画像を真似よう
「自分では上手く作れないよ、、、。」と思う方は、アイキャッチ画像の上手な人を真似ちゃいましょう。
僕のアイキャッチ画像は、ほぼ真似です。素敵なアイキャッチ画像を作る方はたくさん居ます。「いいな!」と思ったらまず真似てみましょう。
真似るとこんな感じになります
初めて真似させていただいた画像がこちらになります。
![](https://ansmith-blog.com/wp-content/uploads/2019/06/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E5%96%B6%E5%A0%B1%E5%91%8A1-640x360.png)
シンプルかつ可愛い、とても素敵なアイキャッチ画像ですよね。僕は背景の「やわらかいクリーム色」に惹かれました。
この「クリーム色の画像を探そう!」と、2時間以上ムダに探しまくった過去があります、、、。≫【カラーコード取得】画像の色のコードを調べる簡単な方法
そして僕が真似した画像がこちら。
![](https://ansmith-blog.com/wp-content/uploads/2019/04/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E5%96%B6%E5%A0%B1%E5%91%8A-640x360.png)
ほぼ一緒やないかーい。
えぬてぃーさん(@jiyujinNT)スイマセン、、、。
ただ僕はリスペクトを込めて、真似させていただいております。単に丸パクリしているわけではありませんので、なにとぞお許しを、、、。
ちなみに
この画像のイラストは「FLAT ICON DESIGN」からダウンロードしたものになります。
☑️アイコン名
・折れ線グラフ
・ブタ
・カバ
シンプルで可愛いアイコンが揃っているので、ぜひ活用してみてください。
アイキャッチ画像が素敵なブログをご紹介
「すごいッ…!この人センスある!」と思ったブログをご紹介します。
スケボーに乗った猫
『スケボーに乗った猫』
デザイナー歴10年あるemiki(@emiki73)のアイキャッチ画像になります。
引用元:デザイナーが教える!どこよりも目を引くブログアイキャッチ画像を作る方法
色の使い方がとても上手で、めちゃめちゃ可愛いですよね。
この記事では「アイキャッチ画像の必要性、注意する6つのポイント」が解説されていますので、是非ご覧ください。
ぽんひろ.com
『ぽんひろ.com』
Webデザイナー経験がある、ぽんひろさん(@ponhiroo)のアイキャッチ画像になります。
引用元:アイキャッチ画像の簡単な作り方!プロっぽくおしゃれに作る方法を紹介!【写真編】
はい、すごすぎます(笑)ぽんひろさんは、本物です。
ぜひ一度ブログを見に行って下さい。デザインのセンス、技術、どれも最高です。
この記事では「アイキャッチ画像をプロっぽく作る方法」がわかりやすく紹介されていますので、ぜひチェックしてご覧ください。
そんな感じで今回は以上になります。
最後まで読んでいただき、ありがとうございました。
![運営報告](https://ansmith-blog.com/wp-content/uploads/2019/06/BLOG-2-2-320x180.png)