LPの文章を1枚画像で貼る前に。文字で残したい部分はどこ？

完成したLPデザインを画像にして並べると、見た目を揃えやすい場合があります。ただ、画像の中に入った文章は、文字だけ大きくしたり、後から一文だけ直したりする時に扱いが変わります。実装を頼む前に「写真や図として見せたい部分」と「文章として読んでもらいたい部分」を分けてみましょう。

たとえば、講座を紹介する架空のLPです。会場写真や制作手順の図は、見た目そのものが情報になります。一方、「開催日時」「参加料金」「持ち物」「申込前の注意」は、読み間違いなく確認してほしい文章です。こうした本文をHTMLの文字で置くと、表示幅に合わせて改行や文字の大きさを調整する実装ができます。

写真や図を使わない、という話ではありません。ロゴや装飾的な見出しなど、画像で表現する理由がある部分もあります。画像と本文を組み合わせ、どこを文字にするかを完成デザインと原稿に沿って決めます。図にしか載っていない重要な条件は、近くに文章でも示せないか確認するとよいでしょう。

後から直す場面も想像してみる

「開催日が10月20日から27日へ変わった」とします。日付を画像に埋め込んでいる場合は、元のデザインを直し、画像を書き出して差し替える作業が必要です。HTMLの文字なら、該当する文言を変更する形になります。ただし、納品されたHTMLを自分で編集できるか、誰が更新するかは別の確認事項です。コーディングを頼んだだけで、管理画面や継続更新が付くとは限りません。

スマホで確かめる、最初の一歩

今あるページを普段のスマホで開き、料金と注意事項を一つずつ探してみてください。読みにくい時は、文字サイズの設定を変えた場合と、画面全体を拡大した場合を比べます。文字だけ大きくなるか、左右に動かさないと読めないか、重要な条件が途切れないかを見ます。端末やブラウザーで動作は異なるため、一度の確認で全環境に対応したとは判断できません。

W3Cの解説では、同じ表現を文字で実現できる場合、文字の画像よりテキストを使う考え方が示されています。文字をHTMLにするだけで、すべての読みやすさやアクセシビリティが完成するわけではありません。

完成デザインからの実装が必要な方へ

当方は完成デザイン支給の静的HTMLを1ページ、本文最大8セクション、設定価格20,000円で制作し、HTML・CSS等をZIPで納品します。購入前の見積り相談が必須で、同時受注は1件。本番公開やフォームの送信処理は含みません。制作にはAI補助を利用します。購入者手数料は別途かかります。文字と画像の扱いも事前に確認します。最新の条件は商品ページをご確認ください。

https://coconala.com/services/4443673

参考：W3C WCAG 2.2 達成基準1.4.5「Images of Text」の解説