画面を縮小しても画像中の文字がはっきりと見えるようにしたい

Question

ランディングページなどでよく見かけるのですが、画像中にテキストが含まれているものは、画面幅を小さくしてもそのテキストがあまり小さくなりすぎないように設計されているものをよく見かけます。それがどういった手法なのか分からずに作業が止まっております。
そういったサイトのソースコードを見るとwidth:100% や max-width:100% と指定されているのですが、果たして画面幅いっぱいに画像を配置しているから文字が小さくならないようになるのかというのはあまり合点がいきません。例えば画面幅が小さくなるにつれて可変の値（パーセントやvw）を用いることが多いとは思うのですが、1000pxから500pxの画面幅に縮小したら、可変の場合、単純に画像中の文字も半分になるかと思います。事実、デザインツールで試したところ、30pxほどあった文字サイズを2分の1以下のサイズまで小さくしたところ13pxにも満たない状態になってしまいました。しかし、見本となる画像中の文字サイズは、どうみてもそこまで縮小されることなく文字がはっきりと適度な大きさに見えます。ブレークポイントを多用して、同じ画像に対していくつものパターンを用意しているようにも見えませんでした。
それがcssの設定か、javascriptの設定なのか、デザインカンプ作成時点での設定なのか、何かヒントがありましたら教えていただきたいです。
よろしくお願いします。

Comments

[maisumakun]

> しかし、見本となる画像中の文字サイズは、どうみてもそこまで縮小されることなく文字がはっきりと適度な大きさに見えます。

その「文字」についてもDeveloper Toolsなどで状況を確認してみたりはしましたか？

[Lhankor_Mhy]

具体的に、そのような設計をしているLPをひとつ例示していただけますか？

[of_the_Europa]

ありがとうございます。

そうですね、見本を掲示すべきですね。
例えばこちらのLPになります。
https://cp.glico.com/panapp-2023pado/
https://www.misterdonut.jp/m_menu/new/230705_sumikko/

Developer Toolsで320pxほどの幅で見ても、文章として成している小さなテキストでも12px~14pxくらいはあるような気がします。画像の一部なので正確な数値は分からないのですが。

Answer 1

補足欄コメント、ひとつ目のLPは、source 要素でリソースを切り替えているようです。

<picture>
    <source media="(min-width: 768px)" srcset="assets/img/end_kv.png" width="1500" height="664">
    <img src="assets/img/end_kv_sp.png" alt="パナップ ＃ソースで極めるパ道Twitterキャンペーン 抽選で45名様に当たる！「パナップ マルチパック 2個」&amp;「パナップ 追いかけソース(グレープソース 100g)」セット キャンペーン期間 2023年6月16日～6月30日" class="kv__img" width="375" height="455">
</picture>

<source>: メディアまたは画像のソース要素 - HTML: HyperText Markup Language | MDN

---

補足欄コメント、ふたつ目のLPは、ブレークポイントで表示する要素を切り替えているようです。

<div class="mv_area">
    <div class="mv"><img src="/m_menu/new/230705_sumikko/images/mv.jpg" alt="すみっコぐらし ミニドーナツ" class="pc_only"></div>
    <img src="/m_menu/new/230705_sumikko/images/mv_sp.jpg" alt="すみっコぐらし ミニドーナツ" class="sp_only">

Comments

[of_the_Europa]

お世話になります。

PC版やSP版と画像のパターンを切り替える術は知っていたのですが、私が自作したものをブレークポイントとして設定した744pxから320px（最小値として考えています）で検証すると、どうしても最後の320pxの時には文字が小さくなりすぎて違和感がありました。どうせなら744pxから320pxの間にもう一つブレークポイントを設置してもっと文字が大きく見えるパターンの画像をそのポイントで挿入するしかないのかなとも考えるのですが、実際にブレークポイントが増えすぎるのも（それを含めると3つ目になります）旨くないなとも思いました。
元々のコンテンツ幅を考慮した結果ではあるのですが、ブレークポイントの設定位置が悪かったのかなとも考えています。

[Lhankor_Mhy]

ご質問は「どういう方法を使っているか」だと読んだので、使われている方法を提示しました。知っている方法だったのであれば、質問は不要だったのでは？　何か不明な点があるのであれば、ご質問に追記を願います。不明な点がなくすでにご解決でしたら、質問のクローズをお願いします。

ブレークポイントについてはお好みでしょうけれど、Bootstrapに比べたらブレークポイントは全然少ないと思いますよ。
https://getbootstrap.jp/docs/5.0/layout/breakpoints/

[of_the_Europa]

失礼いたしました。
ちょっと配慮が足りなかったです。

ブレークポイントの追加も含めて検証したいと思います。

ありがとうございます。

[Lhankor_Mhy]

いえ、こちらこそ問題を読み違えており、失礼しました。
ブレークポイントを使わない方法をお求めなのであれば、object-fit と object-position を使って画像を切り取る方法とかはすでにお試しですか？

[of_the_Europa]

いえ、とんでもないです（汗）

そうですね、試してはいないです。
デザインカンプ作成時点で可能な限り余白や不要な部分をそぎ落としてから書き出しているので、コーディングするときはobject-fit: coverするくらいですね。

Answer 2

恐らく、CSSではないかと思います。
min-widthやmin-heightを指定するか、width自体に関数maxを使用して最小の値を設定します。

.text-img {
    width: max(1rem, 10vh);
}

SVGでも同様の指定ができるかと思います。

Comments

[of_the_Europa]

ご対応ありがとうございます。

確かにmax関数も要素によっては有効ではないかと感じます。
width: 80.6%で試していた画像があり、width:max(80.6%, 320px)としたら、画面を縮小する段階で今までよりも390pxあたりから大きさに違いが出て若干見やすくなったように感じました。
しかし、上記のパナップやミスドのLPを見ると画像のサイズ感に変化はなく、それでも260pxあたりでも比較的見やすいので（視力が低い私でも）、それが不思議です。

[of_the_Europa]

すいません、訂正します。
サイズ感に変化はあります。しかし文字は見やすいですm(__)m