BLOG スタッフブログ

こんにちは！AIコミュニケーションのコーダーのたけうちです。
ホームぺージのリニューアル作業でバタバタしておりましたが、今日からブログも更新再開しますので、今後ともAIブログをよろしくお願い致します！

テキストの画像化について

サイト制作でテキストを使用する際、テキストをそのまま入力するのではなく、時にテキストを画像化することがあるかと思います。
画像化することはデザインの幅も広がり、よりサイトのデザインを引き立てることができますが、あまり使用しすぎるのはよくありません。

今回はテキストのデメリットや気をつけるべきことをみなさまにお伝えします！

テキストの画像化のデメリット

必ずしも画像化することがいけないわけではありませんが、以下のデメリットがあります。

データサイズが増える

テキストを画像化するとファイルのサイズが大きくなってしまうため、サイトの読み込み時間に影響を与えます。
サイトの表示速度は離脱率やコンバージョン率にもっとも影響を与えるので、画像化しなくてもよい箇所はできるだけフォントファミリーやWebフォントを使用しましょう！

修正するのに手間がかかる

テキストの変更をしたい場合、画像は再度修正してサーバーにアップロードしなければなりません。
ソースを書き換えるだけで修正のできるよう、テキスト入力をしておけば変更も簡単です！

文字の大きさを変更することができない

テキスト入力であれば、デバイスによってテキストサイズを変更することが可能ですが、画像の場合、PCとスマートフォンで見たときの画像サイズによって読みにくいと感じる可能性があります。

PCとスマートフォンで別の画像を用意して表示することは可能ですが、データのサイズが大きくなってしまうため、おすすめはできません。

ユーザーがテキストを検索できない

画像化されたテキストは、テキストデータではないため検索ができません。
ユーザーが特定のテキストを検索したい場合もあるので、利便性も考えるとテキストデータの方が良いかもしれません。

テキストを画像化する場合に気をつけたいこと

サイトのロゴや見出し等でどうしてテキスト画像を使いたい時があると思います。
その場合はimg要素に必ずalt属性で代替文字を指定しておきましょう！

環境などの問題等で画像が表示されない場合はalt属性の代替文字が表示されたり、クローラーにも認識してもらえるため、SEOにも良いといわれています。

まとめ

画像の容量は思っている以上にサイトの容量を重くしてしまいます(´;ω;｀)
表示速度が遅いサイトやテキスト画像を多く使用しているサイトは一度見直してみましょう！

Twitter Facebook