ブログの画像を探しているうちに、本文を書く時間より長くなってしまう。きれいなアイキャッチを作ったのに、記事一覧では文字が小さくて読めない。画像づくりで迷うときは、デザインを始める前に「何を伝える画像か」を決めると、選ぶ基準ができます。
この記事では、記事を開く前のアイキャッチと、本文の説明を助ける画像を分けて考えます。素材の選び方からCanvaでの作成、WordPressに載せた後の確認まで、作業の流れに沿って紹介します。
先に全体像：画像の役割を決めてから作る
- 記事の内容を知らせる画像か、操作や仕組みを説明する画像かを決める。
- 掲載場所の比率と、使える素材の条件を確認する。
- アイキャッチに載せる言葉を短くまとめる。
- Canvaなどで配置を作り、縮小して読めるか見る。
- 書き出してWordPressに設定し、実際の記事と一覧で確認する。
完成の基準は、編集画面でおしゃれに見えることだけではありません。読者が見る大きさでも記事の内容が伝わり、本文の説明を邪魔しないことです。
1．アイキャッチ・写真・操作画像の役割を分ける
アイキャッチは、記事一覧などで内容を見分ける手がかりになります。本文の写真は対象物の様子を伝え、操作画像は押す場所や確認する状態を示します。同じ画像で全部を果たそうとせず、必要な情報に合わせて選びます。
| 説明したいこと | 向いている画像 | 避けたい状態 |
|---|---|---|
| 記事のテーマ | 短い見出しと簡潔な図柄 | 本文の目次を全部詰め込む |
| 実物の大きさや使い方 | 自分で撮った写真 | 無関係な素材写真で代用する |
| どの場所を操作するか | 必要な部分を切り出した画面 | 画面全体を縮めて文字が読めない |
| 複数の選択肢の違い | 表や関係を示す図 | 装飾が多く比較軸が見えない |
見出しごとに写真を入れることを義務にする必要はありません。読者が理解するために役立つ画像を選びます。短い比較なら、画像化した表より本文の表の方が、文字を読みやすく直しやすい場合もあります。
2．素材は、入手先と利用条件をセットで残す
素材を見つけたら、作品名や配布ページのURL、確認した日、利用条件のメモを残します。後から別の記事やSNSに使いたくなったとき、元の条件を見返せるようにするためです。
例えばUnsplashのライセンスでは、写真を商用・非商用で利用できる範囲が示される一方、無加工での販売などに制限があります。「無料」と表示されていることだけで、どんな使い方でもできると判断しません。利用する素材の種類と、現在の条件を確認してください。
Canvaの素材も、使用する素材や利用方法に応じた確認が必要です。Canva公式の利用ガイドなどから、自分の用途に合う案内をたどります。有料素材が含まれていないか、書き出す段階で追加の支払いが表示されないかも確認します。
画面の説明に使うスクリーンショットは、自分で操作した必要な範囲を中心にします。メールアドレス、通知、顧客情報、認証情報などが映っていないか確認し、読者に不要な部分を切り取ります。元の画面と加工後の画像を分けて保存しておくと、修正が必要なときに作り直せます。
3．画像の寸法は、掲載する場所から決める
アイキャッチのサイズを一つだけ覚えるより、自分のテーマがどんな比率で表示するかを先に見ます。記事ページでは横長でも、一覧カードでは別の比率で切り取られることがあるためです。
まだ基準がない場合は、例えば1200×630ピクセルの横長画像を試作し、記事ページと一覧の両方で確かめる方法があります。これは試作の一例で、すべてのテーマに共通する必須サイズではありません。表示が合わなければ、そのテーマの推奨寸法や実際の表示に合わせて調整します。
重要な文字や顔を端へ寄せると、切り取りで欠けやすくなります。中央寄りに主要な情報を置き、上下左右に余白を残します。SNSでも共有するなら、ブログ内の見え方とは別に確認する項目として考えましょう。
4．Canvaでは、まず言葉と配置の型を決める
Canvaで新しいデザインを作り、掲載先に合わせた寸法を用意します。画面の表示や機能は変わるため、ボタンの位置を覚えるより、サイズ設定、文字、素材、書き出しという作業の順番を押さえます。
テンプレートを選ぶ前に、画像に載せる短い見出しを書きます。記事タイトルが「ブログ記事の書き方｜タイトル・リード文・見出しを一つの流れで作る」なら、画像には「ブログ記事の書き方」「構成から本文まで」くらいに絞れます。画像の中に記事タイトルを一字一句詰め込む必要はありません。
配置は、上に小さな分類名、中央に主題、下に短い補足、といった一つの型から始めると整えやすくなります。文字の種類や色を増やしすぎず、主題と補足に強弱を付けます。背景写真が細かい場合は、文字の後ろに単色の面を置く方法もあります。
「どいやさんぽ。」のように落ち着いた記事一覧に合わせるなら、白・黒を基本にして、一色だけ目印を使う案が考えられます。これは制作案であり、必ずこの配色にするという決まりではありません。既存のカードと並べて読みにくくないかを優先します。
5．縮小テストで、情報を足すより減らす
編集画面で大きく表示したまま完成にせず、一覧カード程度の小さな大きさで見ます。主題が読めない場合は、まず文字量を減らし、主題以外の装飾を整理します。すべての文字を大きくすると、今度は余白がなくなって窮屈になります。
試作を二つ比べるなら、一度にすべてを変えないのがコツです。文字量だけ違う案を比べ、次に背景の濃さを比べれば、何が読みやすさに影響したかを判断できます。
- 記事のテーマが、短い視線の移動で分かるか。
- 細い文字や淡い色が背景に埋もれていないか。
- 端が少し切れても、重要な意味が残るか。
- 本文の内容と違う写真や言葉で誤解させていないか。
操作画像も同じです。矢印を大量に足すより、いま説明している場所だけを示します。一枚で操作の前後が分からなければ、無理に詰め込まず二枚に分け、本文で順番を説明します。
6．書き出しは、画質と容量を両方見る
写真中心ならJPEG、文字や図形の輪郭を残したいならPNGなどを候補にし、実際に書き出した画像で判断します。形式の名前だけで必ず軽くなる、必ずきれいになると決めず、同じ画像で読みやすさとファイル容量を見比べます。
高画質の元画像をそのまま何枚も載せると、ページを開くときの負担が増えます。一方で圧縮を強くしすぎると、小さな文字や線が読みにくくなります。掲載に必要な寸法へ調整し、圧縮後の画像を開いて確認します。
ファイル名は後で探せる名前にします。例えば「blog-writing-cover」のように、内容と用途が分かる形です。修正前後を保存するなら、末尾に日付や版を付け、どれを公開したかメモします。
7．WordPressでは設定と公開表示を別々に確認する
記事のアイキャッチ画像に設定したら、本文に同じ画像を重ねて入れる必要があるかを確認します。テーマが先頭へ自動表示する場合、本文にも追加すると同じ画像が続くことがあります。
画像が内容の理解に必要なら、その意味が伝わる説明を用意します。代替テキストには、記事との関係が分かる短い説明を入れ、検索語の羅列にしません。操作の重要な手順は画像だけに閉じ込めず、本文にも書きます。
最後に、パソコンとスマートフォンで記事と一覧を開きます。切り取り、文字の読みやすさ、表示の重さ、本文との重複を確認して完了です。サイト全体の見た目の決め方は、ブログデザインを整えた記録でも紹介しています。
まとめ：伝える役割と、小さくしたときの読みやすさを優先する
ブログ画像は、役割を決め、利用条件を確かめ、掲載場所に合わせて作ります。Canvaでは短い言葉と配置の型を用意し、書き出した後に実際のブログで確認すると、作り直しを減らせます。
最初から毎回別のデザインを考えず、一つの型で主題だけを差し替えてみてください。記事一覧で区別しやすく、本文の説明にも合う画像が作れれば、日々の更新を続けやすくなります。
画像に載せる言葉が決まらないときは、記事タイトルと構成の作り方に戻り、読者へ伝える答えを絞ってみてください。画像以外の作業環境は、運営ツールの選び方で整理できます。
参考にした記事：ヒトデブログのフリー素材の紹介、Canvaによるアイキャッチ作成。
コメント