はじめに：PCで見ると完璧なのに、スマホで見ると文字が潰れて読めない問題に直面した話
「ワダイバ」の記事が増えてきて、アイキャッチ画像にもこだわりたいと思うようになった頃、ちょっとした違和感に気づきました。PCの大きな画面でデザインツールを見ながら作業しているときは、文字もきれいに配置できて我ながら満足のいく仕上がりに見えるのに、いざスマホの画面で確認してみると、タイトル文字が潰れて読みづらくなっていたのです。
考えてみれば当たり前のことですが、アイキャッチ画像の実物大の表示サイズはPCとスマホでまったく違います。編集画面の大きなプレビューだけで「良し」としてしまい、実際に読者の大半が使っているであろうスマホでの見え方を確認していなかったことに、今さらながら気づかされました。今回は、スマホでの可読性を高めるために試行錯誤した検証の記録と、その過程でやってしまった失敗についてまとめます。
検証したポイント1：フォントサイズと太さ
ゴシック系と明朝系を比較してみる
まず見直したのが、タイトル文字に使うフォントの種類です。それまでは雰囲気重視で細めの明朝系フォントを使っていたのですが、試しに太めのゴシック系フォントに変更して、同じサイズでスマホ表示を比較してみました。結果は一目瞭然で、ゴシック系のほうが小さいサイズでもくっきりと文字の形が認識でき、圧倒的に読みやすいことが分かりました。明朝系の繊細な線は、縮小されるスマホの表示サイズだと潰れてしまいやすいのだと実感しました。
文字数を削ってサイズを確保する
フォントの種類を変えるだけでなく、タイトルに入れる文字数そのものも見直しました。記事タイトルをそのまま画像に詰め込もうとすると、どうしても文字サイズを小さくせざるを得ません。そこで、アイキャッチに載せる文言は記事タイトルの要点だけに絞り込み、文字数を減らした分、1文字あたりのサイズを大きく確保するようにしました。太字設定とあわせて、スマホの一覧表示でもタイトルの内容がひと目で伝わるようになったのは、この工夫の効果が大きかったと感じています。
検証したポイント2：構図と背景色
背景と文字のコントラストを意識する
次に見直したのが、背景色と文字色の組み合わせです。おしゃれに見せたい気持ちから、背景も文字も同系色でまとめてしまったことがあったのですが、これがスマホの小さな画面ではコントラストが弱く、文字が背景に溶け込んでしまう原因になっていました。背景を濃い色にしたら文字は白系に、逆に背景を薄い色にしたら文字は濃い色にと、明暗のコントラストをはっきりさせることを基本ルールとして意識するようにしました。
余白を持たせ、情報を詰め込みすぎない
もうひとつ気をつけたのが、余白の取り方です。アイキャッチに入れられる情報が多いと、つい装飾やサブテキストを詰め込みたくなってしまうのですが、要素を増やすほど1つひとつの視認性は下がってしまいます。タイトル文字の周りには十分な余白を残し、あえて情報量を絞ることで、スマホの小さな表示でも視線が迷わず文字に集中できる構図を心がけるようにしました。
【失敗談】デザイン性を凝りすぎて「何のサイトか伝わらないアイキャッチ」を作ってしまった体験と改善策
ここまでの検証を踏まえてデザインの精度が上がってきたことに気を良くし、あるとき凝ったデザインに挑戦してみたことがありました。斜めに配置したタイトル文字に、装飾的なイラストや複数のフォントを組み合わせ、見た目のインパクトを重視したアイキャッチを作ってみたのです。
ところが、完成したものをスマホの一覧画面で他の記事と並べて見てみると、デザインに凝りすぎたせいで、パッと見ただけでは何のサイトの、どんな内容の記事なのかがまったく伝わらないものになっていました。凝った演出に気を取られるあまり、本来伝えるべき「これは何の記事なのか」という一番大事な情報が、デザインの中に埋もれてしまっていたのです。
この反省を踏まえ、装飾はあくまで文字の可読性を邪魔しない範囲にとどめ、斜め配置や複数フォントの組み合わせはやめて、シンプルに「太めのゴシック体・コントラストのはっきりした背景・十分な余白」という基本形に立ち返ることにしました。地味に見えるかもしれませんが、結果的にこちらのほうがスマホの一覧でも記事の内容が伝わりやすく、実用性は高いと感じています。
まとめ：スマホユーザーを意識したアイキャッチ作成で押さえておくべき3つのルール
一連の検証を通して見えてきたのは、次の3つのルールでした。1つ目は、太めのゴシック系フォントを選び、文字数を絞ってサイズを大きく確保すること。2つ目は、背景と文字の色にはっきりとしたコントラストをつけ、余白を十分に持たせること。3つ目は、デザイン性よりも「何の記事か一目で伝わるか」を優先することです。
PCの編集画面できれいに見えることと、スマホで実際に読みやすいことは、必ずしもイコールではありません。「ワダイバ」もこれからアイキャッチを作るたびに、必ずスマホでの見え方を確認する習慣を続けていきたいと思っています。同じように可読性で悩んでいる方の参考に、少しでもなれば嬉しいです。
コメント