どうも7noteです。テキストにするか画像にするかの線引きをいろいろなパターンで考えてみた
WEB制作を行う中で
「テキストにするか、画像にするか」
は非常に難解な問題です。
特に線引きが難しいこの問題を個人的見解で基準となる線引きをしてみました。
さまざまな場面に合わせてテキストか画像かを分けて行きます。
「テキスト」のほうが好ましい場面
・seo対策に重要なキーワード
重要なキーワードはできる限りテキストとしてgoogleのクローラー(サイトを巡回してるロボット)に認識してもらい評価を受ける必要があるので、できるだけテキストで作成します。
・見出し、ページタイトルなど
こちらもseo対策を行う場合はテキストのほうが好ましいので、できる限りテキストで作成します。
ただCSSで再現できないものは画像にします。
・今後更新することがある数値・テキスト
更新のたび画像を修正していると作業時間がとても増えてしまうので、できる限りテキストで作成します。
ただ、デザインを損なう場合は画像で作成します。
・ナンバリングはolのカウントで出来るだけ再現
1.ほげほげ
2.ふがふが
などの文字はcssの装飾で対応できる場合はcssだけで再現します。
もし新しく増えたり、順番が変更になってもHTMLの修正だけで済むので。
ただ、標準デバイスにないフォントで作成されている場合は画像で作ります。
・テーブル、表
HTMLでテーブルがあるので、できるだけtableタグを使って再現します。
ただtableタグだけで表現が難しいデザインの場合は画像で作ることもあります。
・コピペしてもらう用の文章
そんなにないとは思いますが、コピペしてもらいたい物、たとえばソースコードなんかは画像だとコピペできないのでテキストで書くようにしましょう。
「画像」のほうが好ましい場面
・標準デバイスにもWEBフォントにもないフォントが使われている文字
フォントが変わりデザインが変わってしまうので、画像を使うしかありません。webフォントで対応できる場合でもページの読み込み速度を考えるとページに1箇所2箇所程度であれば、画像のほうがいいかもしれません。ページスピードを計測しながら良い方を利用してください。
・CSSでは再現できないデザイン
これは諦めて画像にしましょう。
cssで再現できるかどうかはgoogleで検索して、方法が見つからなければという判断でいいと思います。
・文字の配置がcssではとても複雑になる
テキストだけでは説明が難しいですが、文字の大きさがバラバラでかつ位置もcssで調整が難しいものは画像にすることが多いです。
CSSで再現してもいいのですが、デザインが細かいとCSSで完璧に再現するのはとても難しいので画像にしてしまいます。
微調整しても全てのデバイスで完璧に同じ見え方にさせるにはテキストでは限界があるので、凝ったデザイン配置のテキストは画像にします。
・グラフや時間軸付きの図など
グラフ系は複雑になりやすいので基本的に文字ごと画像にすることが多いです。
注釈は一緒に画像にしたり、テキストのみにしたりと場面に応じて変えてますね。
ただデータベースと連携してリアルタイムでグラフを生成する場合は画像では作れないのでcssやｓｖgを使って作成をしなければなりません。
まとめ
いかがでしたでしょうか。思いつく限りを書きましたが、まだ他にも具体例があるかもしれません。
web制作をする上では気をつけなければ行けないポイントや悩むポイントが多くあると思います。
そんなときに自分なりの指標をもって取り組むことでムダな考える時間を省くことができるので、マイルールに従って作成していくといいかなと思います。
また「本来テキストでないといけないところを画像にしてしまった！」となっても、1箇所2箇所程度であればそこまで大きな影響はありません。
作成する人によってもそれくらいの誤差がでるものなので、あまり気にしすぎずどんどん作って自分なりにこういう作りにしようと考えて取り組んでみてください。
そうやって考えて取り組んできたものが最も正解に近いのかなと思います。
【フロントエンド強化月間に参加中↓↓】
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ