読みやすいアイキャッチを見つけても、「文字が大きいから？」「写真の使い方が違うから？」と、どこを参考にすればいいか迷います。
私もブログのアイキャッチで、文字の後ろに暗い背景を付けたり、小さな説明を減らしたりしてきました。修正すると読みやすくなりましたが、次の画像では、また文字の配置や大きさに悩んでしまいます。
そこで今回は、過去の修正経験を手がかりに、見本の文字・背景との明暗差・余白・情報量を観察し、自分の画像の改善へつなげる方法を考えました。
流れは、①見本を集める、②惹かれた理由を書き出す、③作り方を確かめる、④違いと改善点を言葉にする、⑤次の制作に生かす、の５ステップです。
この流れを通して見本を比較する練習は、まだ行っていません。実際にアイキャッチを直した経験から、見本のどこを見て、何を試すかを具体的に整理していきます。
見本を見る目的は、自分の画像の改善点を見つけること
このブログでは、デジタルイラストの最初の一枚をどう決めるかや、好きな絵の模写から練習を始める方法を書いてきました。
今回扱うのは、ブログのアイキャッチです。見本を見て「読みやすい」と感じた理由を探し、自分の画像で直す場所を見つけるために使います。
私がブログ画像で困ったのは、ソフトの操作だけではありません。文字を入れられても、写真と重なって読みにくい。説明を加えても、スマホでは小さくて追いづらい。完成してから見えてきた課題がありました。
その制作経緯は、「デジタルで画像を作るなら何から？Canvaでアイキャッチを作って気づいたこと」にまとめています。
見本から自分の画像に使える工夫を見つけるために、過去の修正を「なぜ必要だったのか」まで振り返ります。例えば、写真と文字が重なって読みにくかったなら、次は文字を置く場所を先に決める。修正した理由を、次の制作で確認することにつなげます。
ステップ① 見本を集める
見本を使って練習するなら、まずは同じ用途の画像を２〜３枚ほど集めて比べたいと思っています。
私が選ぶのは、普段作っているブログのアイキャッチです。写真と文字を組み合わせた画像を並べれば、タイトルの大きさや配置、背景の使い方を比較できます。
以前、写真の上に置いた白文字が読みにくくなり、文字の後ろに暗い背景を追加したことがありました。その経験があるので、見本を見るときも、まず文字と写真の重なり方に注目したいです。
この方法で見本を集めて比較する練習は、まだ行っていません。最初は枚数を増やしすぎず、何を確かめたいのかを決めてから選ぶつもりです。
写真を大きく見せながら、タイトルも読める画像は、どう作られているのか。
写真の上へ文字を重ねているのか、文字専用の場所を設けているのか。文字の後ろに背景があるのか。過去に自分が困ったことを手がかりにすれば、見本を探す目的もはっきりします。
ステップ② 惹かれた理由を書き出す
見本を選んだら、「好き」「すっきりしている」で終わらせず、どの部分がそう感じさせたのかを書き出します。
例えば「タイトルが読みやすい」なら、文字が大きいのか、背景との明暗差があるのか、周囲に余白があるのか。見えている特徴まで分けて考えます。
複数の見本を比べるときは、画像ごとに感想を書くより、同じ項目で観察メモを揃えると、共通点や違いを探しやすくなります。
例として、どちらも「タイトルが読みやすい」と感じた２枚でも、一方は写真の上に大きな文字を重ね、もう一方は写真と文字の場所を分けているかもしれません。読みやすく見える理由を、文字の大きさ・配置・余白・背景との明暗差に分けて記録します。
| 観察する項目 | 記録する内容 |
|---|---|
| 文字の大きさ | タイトルが画像の中でどのくらいの面積を使っているか |
| 配置 | 写真に重ねているか、文字専用の場所があるか |
| 余白 | 文字と画像の端、文字と写真の主役がどのくらい離れているか |
| 背景との明暗差 | 文字の後ろが明るいか暗いか、帯や背景があるか |
メモを並べたら、共通点と違いを一つずつ探します。例えば「配置は違うが、どちらも文字の後ろに細かな模様が少ない」と気づいたら、それを読みやすさに関わる特徴の候補として残します。
最後に、その中で自分が最も惹かれた特徴に印を付けます。「すっきりしている」で終わらせず、「文字の周りに余白があり、写真の主役とも重なっていない」まで書くと、後で自分の画像と比べる項目になります。
この比較はまだ実践していませんが、次は同じ項目で観察メモを作り、自分が読みやすいと感じる画像の共通点を探したいと思います。
ステップ③ 作り方を確かめる
見本の中で気になる表現を見つけたら、次は使い慣れたソフトで再現する方法を探します。
ここで大切にしたいのは、操作の名前だけでなく、何を表現するために使うのかを覚えておくことです。
例えば、見本の文字が光っているなら、文字の周囲に淡く広がる光を再現したいのか、輪郭を明るく縁取る表現を再現したいのかを先に決めます。同じ「光る文字」でも、目指す見え方によって探す機能が変わるためです。
周囲に広がる光なら、ソフト名と「文字 発光」「文字 グロー」などを組み合わせて調べます。輪郭を光らせたい場合は、「文字 縁取り」も検索の候補になります。見つけた操作は短い文字で試し、光の色や広がり、強さを一つずつ調整します。
作ったものは見本と同じくらいの表示サイズで並べ、光が文字からどのくらい広がっているか、文字そのものの形が読めるか、背景に埋もれていないかを比べます。光が付いただけで完成にせず、強すぎて文字がぼやけた場合は、広がりや強さを抑えて再度確認します。
試したあとは、次の３点を短く記録します。
- 再現したかった表現
- 使った操作
- 思いどおりにならなかった部分
細かな手順をすべて書き残すより、「何をしたくて、どこまでできたか」が分かる記録にしたいところです。同じ作り方が見つからなくても、できなかった部分を残しておけば、次に調べることを絞れます。
ステップ④ 違いと改善点を言葉にする
作ったあとは、見本との違いを確認し、次に変えることを一つ決めます。
ステップ②では見本の魅力を書き出しました。ここでは、自分の制作物にその特徴が出ているかを比べます。
「見本より読みにくい」なら、文字の大きさ、背景との明暗差、周囲の余白などに分けて確認します。ステップ②の観察メモが、そのまま比較項目になります。
以前、「中山功太の実家はどこ？」という記事のアイキャッチを作ったとき、タイトルに加えて小さな説明やアイコンも入れていました。
そこで、小さな説明とアイコンを減らし、タイトルを見やすくする方向へ修正しました。修正前後の画像は、過去のCanvaでのアイキャッチ制作記事に載せています。
このときに気づいたのは、「文字が小さい」という問題を、文字の大きさだけで解決しようとしなくてもよいことです。
入れる情報を減らせば、その分タイトルに場所を使えます。次に似た画像を作るときは、文字を大きくする前に、不要な説明がないかも確認したいと思います。
| 気になったこと | 確認するところ | 次に試すこと |
|---|---|---|
| タイトルが目に入らない | 補足文や飾りの方が大きく、強く目立っていないか | 補足文を小さくするか、飾りを一つ外して比較する |
| 文字が背景に埋もれる | 文字と背景の明るさが近くないか、写真の模様が文字に重なっていないか | 文字の後ろに単色の帯を置いて比較する |
| スマホでは文字が読みにくい | スマホの表示サイズで、タイトル全文を無理なく読めるか | 小さな説明を一つ外し、空いた場所でタイトルを大きくする |
| 情報が詰まって見える | タイトル・補足文・アイコンに、内容の重複がないか | 優先度の低い説明や、同じ意味のアイコンを外して比較する |
| 文字が窮屈に見える | 文字が画像の端や、ほかの要素に近すぎないか | 文字を端から離すか、近くの要素を動かして余白を作る |
| 写真の主役が分かりにくい | 見せたい人物や物を、文字や飾りが隠していないか | 文字の位置を変え、写真の主役が見える範囲を広げる |
| 配置がばらばらに見える | タイトルや補足文の左端・中央など、揃える位置が決まっているか | 文字の揃え方を統一して比較する |
| 光る文字がぼやける | 光が広がりすぎて、文字同士の隙間を埋めていないか | 光の広がりか強さの一方を抑えて比較する |
自分の画像で気になった行から、一つ選んで試します。すべてを順番に直す必要はありません。修正前後を同じ表示サイズで並べ、最初に気になった点が改善したかを確かめます。
一度に全部変えると、何が効いたのか分からなくなります。まず一つ変え、変更前と並べて確かめる。「読みづらかった」で終わらせず、次に試すことまで決めておきます。
ステップ⑤ 次の制作に生かす
最後は、振り返りで残したことから、次の制作で試すことを一つ選びます。
私が次のアイキャッチで試したいのは、記事タイトルを読み取れる大きさで置き、そのための場所を先に確保することです。
以前は、小さな説明やアイコンも入れた結果、スマホではタイトルが読みづらくなり、情報を減らして直しました。この経験から、写真や飾りを配置してから残った場所へ文字を入れると、伝えたいタイトルに十分な場所を使えなくなると考えました。
次はタイトルを置いた段階でスマホの表示サイズに縮め、全文が読めるかを確認します。その後で写真や飾りを加えれば、完成後に配置を大きく直す手間も減らせそうです。
見本から学んだ特徴も、全部取り入れる必要はありません。例えば、文字と背景の明暗差が気になったなら、まずはその表現だけを試します。ほかの装飾は、必要になってから考えます。
そして完成後は、ステップ④で書き出した確認項目を見返します。次の制作でも同じ問題が出たのか、それとも別の部分で迷ったのか。そこまで残せれば、今回の振り返りを次の練習につなげられそうです。
まとめ
- ①見本を集める：確かめたいことを決め、同じジャンルで比較
- ②惹かれた理由を書き出す：色・文字・余白など、目に見える特徴へ具体化
- ③作り方を確かめる：表現したいことと、それを作る操作の組み合わせ
- ④違いと改善点を言葉にする：気になる見え方と、次に変える箇所の記録
- ⑤次の制作に生かす：優先する点を一つ選び、仕上がりを確認
これまでも、気になった画像を直すことはありました。ただ、「何を変えたか」に加えて「なぜ変えたか」まで残しておけば、次に似たことで迷ったときの手がかりになります。
見本を見るときは、まずタイトルの読みやすさに注目し、文字の大きさ、背景との明暗差、余白、情報量に分けて確かめる。そして、自分の画像と比べて、次に試す変更を一つ選ぶ。見本の見た目を取り入れるだけでなく、改善する理由を見つけるために活用していきたいと思います。
関連記事はこちら↓！
