【2026年5月28日更新】内容を見直し、Canvaの使い方など画面案内を最新化しました。よくある質問を追加しました。
この記事のレベル
| 初心者 | （4.0） |
| 重要度 | （4.0） |
| 難しさ | （2.0） |
こんにちは、T部長です！
「アイキャッチ画像ってどうやって作るの？」「アイキャッチ画像ってどうやって設定するの？」とお悩みではないでしょうか？
この記事では、アイキャッチ画像の作り方から作るときのポイント、WordPressブログでの設定手順まで解説します！
T部長
この記事は以下のような人におすすめ！
- アイキャッチ画像の作り方が知りたい人
- アイキャッチ画像の設定手順が知りたい人
- アイキャッチ画像の作り方のポイントが知りたい人
アイキャッチ画像を設定するとSNSでブログをシェアしたときや、ブログ内でも記事の一覧などにアイキャッチ画像が表示されます。
画像でわかりやすく内容を伝えることができるため、SNSからのアクセスアップや、ブログ内の回遊による滞在時間アップが期待できますので、ぜひ作っていきましょう！
それでは、どうぞ！
アイキャッチとは？
アイキャッチとは、ブログ記事のタイトルや内容を視覚的に伝えるために使う画像のことです。
アイキャッチは、このように記事のトップに表示されるのが一般的です。
また、ブログの記事一覧にも表示されます。
アイキャッチ画像って必要？
アイキャッチ画像はただの飾りではありません。
読者の目を引き、ブログ全体の印象や回遊率にも影響を与える要素です。
ここでは、初心者にもわかりやすく、なぜアイキャッチ画像が必要なのかを3つの観点から解説します。
1. 記事の内容を直感的に伝え、記憶に残りやすくする
人間は文字よりも画像のほうが、情報を素早く直感的に理解できます。
たとえば「絶品カルボナーラの作り方」を紹介する記事に、美味しそうなカルボナーラの写真があると、読者は一瞬で記事のテーマを把握できます。
2. SNSや一覧ページからのクリック率を高める
ブログの記事一覧ページや、X（旧Twitter）・FacebookなどのSNSでシェアされたときに、魅力的なアイキャッチ画像は読者の目を引きます。
タイムラインや一覧に並ぶ多くの情報の中から「この記事、読んでみようかな」と思ってもらいやすくなり、クリック率の向上が期待できます。
3. ブログの印象を向上させ、回遊を促す
デザイン性の高いアイキャッチ画像は、ブログ全体の専門性や信頼感を高めることにも繋がります。
記事を読み終えた後の関連記事一覧でも、アイキャッチ画像が魅力的であれば、読者は「次の記事も読んでみよう」という気持ちになりやすくなります。
これにより、ブログ内を回遊するきっかけが生まれ、サイトからの離脱を防ぐ効果が期待できます。
アイキャッチ画像の簡単な作り方は？「Canva」で作る手順を紹介
今回はPC版の「Canva（キャンバ）」でアイキャッチ画像を作る方法を紹介します！
「Canva」はテンプレートを選んで文字を入れるだけで、とても簡単にアイキャッチ画像が作れるツールです。
「Canva」は、誰でも簡単にデザインを作成できるオンラインツールです。
Webブラウザやスマホアプリで利用でき、特別なデザインスキルがなくても、直感的な操作で美しいデザインを作成できます。
ブログのアイキャッチ画像、SNS投稿、プレゼン資料、チラシ、ロゴなど多様な用途に対応しており、豊富なテンプレートや素材が用意されています。
無料プランでも基本的な機能を利用できますが、有料プランではより多くのプレミアム素材や高度な編集機能が使えます。
ドラッグ＆ドロップ操作で簡単にカスタマイズできるため、初心者からプロまで幅広く活用されています。
画像編集を行ったことがない人でも慣れたら5分で作れるのでおすすめです！
まずは、Canvaのテンプレ－トを編集して作る手順を紹介します。
アイキャッチ画像でよく使われるサイズ（幅1200px、高さ630px）のテンプレートを使って、以下のような画像を作ってみましょう。
アイキャッチ画像のサイズについては、あとの「よくある質問」でも解説しています。ぜひご覧ください。
よくある質問：３．アイキャッチ画像のサイズはどれくらいがいいですか？
１．Canvaにログインする
GoogleやYahooなど既存のサービスと連携をすれば、スムーズに会員登録が可能です。
メールアドレスで登録したい場合は「メールアドレスで続行」を選択し、会員登録へ進みます。
お好きな方法でログインします。
ログインが完了すると、左上に＋作成というボタンがあるマイページへと移行します。
２．テンプレートを選ぶ
次に、アイキャッチ画像のテンプレートを選びます。
左サイドメニューバーのテンプレートをクリックします。
検索ボックスから探したいイメージを検索します。今回は「アイキャッチ」と検索しました。
テンプレートをクリックすると、サイズを確認できます。
「アイキャッチ」と検索したあとで「カテゴリー」から「はてなブログ アイキャッチ画像」をクリックすると、2026年5月時点では幅1200px・高さ630pxのテンプレートに絞り込めました。
効率よく探したい方はお試しください。
検索窓の下部にある「スタイル」から「カラフル」や「モノクロ」などを選ぶと、イメージに近いものが表示されやすくなります。
T部長
「ビジネス」や「レトロ」など作りたいイメージが決まっている場合はそちらを検索してもよいですね！
気に入ったテンプレートを見つけたら、画像の右上にマウスを持っていき、星マークをクリックしてお気に入りに追加しましょう。後からまとめて見れるので便利です。
お気に入りを確認するには、左メニューでテンプレートを選択している状態でメニューを開くをクリックします。
「お気に入りコンテンツ」をクリックすると一覧が表示されます。
この画面が表示されたら、このテンプレートをカスタマイズをクリックします。
編集画面にテンプレートが読み込まれます。
これでテンプレートの設定は完了です！
３．文字を変更する
変更したい文字をダブルクリックし、文字が青色で選択されている状態にします。
文字を変更します。
文字をクリックすると、白いハンドルが表示されます。
ハンドルをクリックしてマウスを左右に移動させるとフォントサイズが可変するので、文字の幅を調整できます。
もしくは、フォントサイズを「-」「+」で変更して調整します。
まわりの灰色の空白をクリックすると、選択を解除できます。
文字の幅に応じて、テキストを囲む飾りの「＼」「／」の位置を調整しましょう。
これらの線はそれぞれ別のレイヤーで配置されています。選択すると自由に動かせます。
レイヤーとは「重ねられた紙」のような仕組みです。
Canvaでは、配置をクリックすると「レイヤー」を確認できます。
一番下に背景があり、その上に透明の紙を重ねて、図形や画像、文字などを配置していくイメージです。
このようにレイヤーで管理されていると、特定の要素だけ編集や削除が可能です。前後の順番入れ替えといった操作もドラック＆ドロップで簡単にできます。
今回は「の」のレイヤーは削除します。選択してゴミ箱マークをクリックします。
ほかのテキストも編集します。
文字を装飾したい場合は、文字を選択して、上側にある装飾ボタンから装飾してください。下記は装飾ボタンの説明です。
黄色の線をテキストの長さに合うように調整します。
線が文字のうしろにあってクリックしにくいため、配置からレイヤーを表示して選択し、長さを調整してください。
４．素材を変更する
イラストを変更してみましょう。
イラストを選択してゴミ箱をクリックして削除します。
素材をクリックして、検索窓にキーワードを入れて探します。
「イラスト」をクリックするとイラストが一覧で表示されます。
イメージに合う画像が見つかったら、その画像をクリックしたまま、入れたい位置へドラッグします。
大きさは白いハンドルで適宜調整してください。
回転ハンドルをドラッグして好きな方向に回転させます。
同様に右下のイラストも変更してみましょう。
5．色を変更する
文字の色を変更します。
上部のメニューにある「テキストの色」をクリックします。
ダークグレーから、「このデザインの色」のくすみブラウンをクリックして変更します。
同様に、その下のテキストも色を変更してください。
シンプルなイラストなら色を変更できます。
素材を選択し、上部のメニューにあるカラータイルをクリックします。
紙の部分はライトグレー、ペンの部分はくすみブラウンに変更します。
背景の色も変更できます。
背景を選択して、上部メニューのカラータイルから色を変更してください。
T部長
このように色を合わせると、統一感のある印象に仕上げられます！
6．フォントを変更する
フォントを変更してみましょう。
テキストをクリックして選択し、画面上部のツールバーにある現在の「フォント名」をクリックします。
お好きなフォントを選び、「すべて変更」をクリックします。
すべてのテキストに反映されます。
フォントに合わせて飾りの「＼」「／」の角も丸くしたい場合は、上部のメニューのストロークスタイルを選んで「終点（丸）」を有効にします。
7．保存する
右上の「共有」ボタンを選択し、ダウンロードをクリックします。
PNGまたはJPGを選んでダウンロードをクリックします。
右下にダウンロードの表示がでるので、ダウンロードが終われば完了です！
編集したテンプレートは自動的に保存されます。ホーム画面のプロジェクトから編集したテンプレートを確認できます。
写真を使ってアイキャッチ画像を作ろう
さきほどは、Canvaのテンプレートを使ったアイキャッチ画像の作り方をご紹介しました。
ここからは、応用編として、サイズを自由に設定し、写真を使って簡単にアイキャッチ画像を作る手順を紹介します。
T部長
自分で撮った写真を使えば、よりオリジナリティを出せます！
今回は、以下の3つのポイントを意識しながら、読者の目を引くアイキャッチ画像を作っていきます。
- 記事のテーマに合った写真を選ぶ（今回は背景として使用）
- タイトルやメインテーマがわかる文言を読みやすく配置する
- 文字のうしろに色を敷いたり枠をつけたりして、文字を目立たせる
それでは、アイキャッチ画像を一から作成してみましょう！
１．カスタムサイズを指定する
＋作成を選択して、カスタムサイズをクリックします。
アイキャッチ画像のサイズを入力します。
ここでは当ブログのアイキャッチサイズである横710px、縦420pxと入力しました。
※ご自身のブログのアイキャッチ画像のサイズがわかる場合は、そちらの数値を入力してください。
2．画像をアップロードする
背景として使用する画像をアップロードしましょう。
左側メニューのアップロードを選択します。
ファイルをアップロードをクリックして、画像をアップロードします。
アップロードされた画像をクリックすると、白紙のデザインに配置されます。
…をクリックして「画像を背景として設定」をクリックします。
画像を背景として簡単に配置できます。
3．図形を追加する
あとで載せる文字を見やすくするために、写真の上に色付きの四角形を敷きます。
そのままだと背景の写真が見えなくなってしまうので、半透明とする設定を行いましょう。
ツールをクリックして図形の四角形をクリックします。
背景画像の上に四角形が配置されます。
白いハンドルをドラッグすると、図形の大きさを変更できます。背景と同じ大きさに調整します。
図形の色と透明度を編集します。
今回は黒に変更して、透明度を40にしてみました。
背景画像が透けて表示されます。
続いて、文字を目立たせるための四角い白い枠をつくります。
図形を選択した状態で…をクリックして「複製」をクリックします。
複製された図形が上にかさなって配置されます。
その図形を以下のように編集し、白の枠線のみの四角形にします。
- 塗り：カラーなし
- ストロークの色：白
- ストロークスタイル：直線
- ストロークの太さ：8
- 透明度：100
ハンドルをドラッグして図形の大きさを調整します。
配置から図形を中央揃えにします。
4．文字を追加する
テキストをクリックしてテキストボックスを追加をクリックします。
テキストを入力して、フォント、色、文字サイズ、文字の配置などを適宜変更します。
Canvaでは、図形に直接テキストを追加する方法もあります。
図形をダブルクリックするとカーソルが点滅します。
テキストを入力し、上部のメニューからテキストの中央寄せを選びます。
上下は自動的に中央揃えになるので、初心者の方には便利な機能です。
この方法では図形とテキストで1つのレイヤーになるため、シンプルにまとめたいときにおすすめです。セットで管理すると、図形とテキストを一緒に移動できるメリットもあります。
図形とテキストのバランスを細かく調整して配置にこだわりたいときは、別々のレイヤーで管理する方法を選ぶとよいでしょう。
5．保存する
右上の共有をクリックし、ダウンロードをクリックします。
PNGまたはJPGでダウンロードして完成です！
T部長
「Googleスライド」や「PowerPoint」などでもアイキャッチ画像は作れるので、使い慣れたツールがある人はそちらで作るのもよいですね。
ちなみにボクは「Googleスライド」でX（旧Twitter）の図解を作成しています！
WordPressブログでアイキャッチ画像を設定しよう
次に、先ほど作ったアイキャッチ画像を実際にWordPressブログで設定する手順を紹介していきます！
投稿画面の右側のメニューから「投稿」を選択し、「アイキャッチ画像を設定」をクリックします。
左上の「ファイルをアップロード」を選択し、ファイルを選択からアイキャッチ画像をアップロードします。
アイキャッチ画像が選択されていることを確認し、右下のアイキャッチ画像を設定をクリックします。
アイキャッチ画像が設定されていることを確認し、下書き保存や更新などをクリックして保存したら完了です！
T部長
これでアイキャッチ画像作りから設定まで完了です。お疲れ様でした！
アイキャッチ画像を作るときのポイント4つ
ここからはアイキャッチ画像を作るときのポイントを紹介します。
１．記事の内容がひと目で分かるようにする
「記事の内容」や「読者の求めている情報」がひと目で分かるようにしましょう！
アイキャッチ画像は読者の目を引くとともに、読者の求めている記事をひと目で理解してもらえるメリットがあります。
下記はすべて同じ記事から作ったアイキャッチ画像の例ですが、①のアイキャッチ画像が一番クリックしたくなりませんか？
他の2つに比べて、①は注目してほしい「記事の内容」が目立っていて、「この記事はブログの書き方を説明しているんだな」とすぐに記事の内容を把握することができます。
そのため、①のように記事の内容がひと目で分かるように作っていきましょう！
２．文字を読みやすくする
文字は読みやすくなるように入れましょう！
なぜなら、文字が読みにくいと記事の内容が把握しづらいため、アイキャッチ画像の意味をなさないからです。
左側のように文字が読みにくいとひと目で記事の内容が把握しづらくないでしょうか？
せっかく文字を入れても左側のように、背景と文字が同化していたり、文字の色が読みにくかったり、文字が細すぎたりすると記事の内容が把握しづらいですよね。
- 背景と同化しないように文字の色や背景に気をつける
- 文字は大きく、はっきり読める太さにする
写真の場合、文字のうしろに濃い背景色を敷くと読みやすくなります。
敷く背景色を半透明にすると、さらにうしろの背景写真も活かしやすくなります。
文字の入れ方に気を付けて見やすくなるように心がけましょう！
T部長
背景色を敷く方法は先に紹介したので参考にしてください！
３．記事の内容に合った質のよい画像を使う
画像を入れる場合は、記事の内容にあった画像を使いましょう！
たとえば、プログラミングの記事なのにペットの写真が入っていると何の記事かわかりにくいですよね…
アイキャッチ画像は見た人に記事の内容を想像させる役割もあるので、記事の内容にあった画像を入れた方がよいです。
また、写真やイラストなどの画像は、質のよいキレイなものを使いましょう！
たとえば、画質が悪い写真や、見た目が汚い写真がアイキャッチ画像の場合、記事を読みたくなくなりますよね…
見た目の悪い画像を使うと逆にアクセスダウンにも繋がることがあるので、「アイキャッチ画像の質＝記事の質」として質のよい画像を使いましょう！
フリー素材を使えば、無料でキレイな画像をダウンロードすることもできます。
キレイな画像が無料でほしい人はフリー素材についてまとめましたので、下記からご覧ください！
T部長
スマホでもきれいな写真が撮れるので、自分でオリジナルの写真を撮るのもおすすめです！
４．いろいろな端末から見え方を確認する
アイキャッチ画像はスマホやタブレットなどいろいろな端末から確認しましょう！
「せっかく作ったけどスマホから見たら文字が小さかった…」など、想定していない表示になることも多いためです。
とくにSNSなど、モバイル端末から利用する人も多いと思いますので、自分の環境だけでなく、見る人の環境を想像して確認してみるとよいですよ。
また、WordPressブログの場合は、使用しているテーマの設定によって、アイキャッチ画像の表示される大きさが違うので、自分のブログに合ったアイキャッチ画像を作成しましょう！
アイキャッチ画像に関するよくある質問
１．アイキャッチ画像はスマホでも作れますか？
はい、アイキャッチ画像はスマホでも作れます。
この記事で紹介したCanvaはスマホアプリもあるので、スマホだけでアイキャッチ画像を作ることも可能です。
また、スマホアプリとPC版は連携できるため、「スマホで途中までデザインを作って、PCで仕上げる」といったこともできます。
通勤時間や家事の合間などのスキマ時間を有効活用できますので、ぜひお試しください。
▼アプリをこちらからダウンロード▼
２．スマホからWordPressにアイキャッチ画像を設定できますか？
スマホからWordPressにログインすれば、アイキャッチ画像を設定できます。
ブラウザでWordPressにログインするか、アプリを利用するとよいでしょう。
たとえば、以下の記事で紹介しているWordPressアプリの場合、「投稿設定」からアイキャッチ画像を設定できます。
スマホからブログの執筆や編集を手軽にやってみたい方は、ぜひ参考にしてください。
３．アイキャッチ画像のサイズはどれくらいがいいですか？
アイキャッチ画像の表示サイズで言うと、一般的に横1200px、 縦630px前後のサイズが使われていることが多いです。比率で表すと「16:9」や「1.91:1」です。
SNSでシェアされたときにも見切れずに表示されやすいためです。
また、記事一覧でアイキャッチ画像が並んだときに、大きなスペースを占めずバランスよく見えます。
ただし、使用しているWordPressテーマによって最適なサイズは異なる場合があります。
そのため、テーマの公式マニュアルや実際の表示でご確認ください。
なお、画像のファイルサイズについても大きくなりすぎないように注意しましょう。表示速度の低下を防ぐため、画像は適度に圧縮して使うと安心です。
以下の記事では、ブログに適した画像サイズについて解説しています。
画像最適化におすすめのツールやプラグインも紹介しているので、ぜひご覧ください。
まとめ
この記事ではアイキャッチ画像について解説しました。
内容をおさらいします！
- アイキャッチ画像はメリットが多い
- ひと目で内容が分かるように文字の入れ方に気をつける
- いろいろな端末から見え方を確認する
- 「Canva」は慣れたら5分でアイキャッチ画像が作れる
アイキャッチ画像にはたくさんのメリットがあることを知っていただけたと思います。
ぜひ、アイキャッチ画像を作ってみてくださいね。
最後まで読んでいただき、ありがとうございました！
ブログの始め方を知りたい！実際に始めたい方へ
国内シェアNo.1※レンタルサーバー「エックスサーバー」では2026年7月6日(月) 17:00まで、サーバー利用料金が最大30％オフになる期間限定キャンペーンを開催中です！
今なら月額693円～とお得にWordPressブログが始められます！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にWordPressブログをご検討ください！
※ 2025年12月時点、W3Techs調べ。
当メディア「初心者のためのブログ始め方講座」では、
初心者の方に分かりやすく簡単にブログを始められる方法を紹介しています！
WordPressに使用される国内シェアNo.1サービス「エックスサーバー」の中の人が確実で信頼性の高い情報をお届けしています！
ブログをこれから始める方はこちらの完全ガイドをぜひご覧ください！
また、初心者の方向けにWordPressでのブログ立ち上げがたった10分できる方法も紹介しています！
ブログの始め方・立ち上げに関する、ご質問・ご相談はX（旧Twitter）DM（ @tbcho_xsv ）までお気軽にどうぞ！
