人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Webサイトのぼやけた文字の画像について質問です。

デザイン事務所にデザインをお願いしようと思い、
各社のポートフォリオを確認しています。

ところが、ほとんどのヘッダやフッタにある画像の文字がぼやけています。
# 「人力検索はてな」や「Hatena」の画像もぼやけています。
# そのようなサイトでも、画像の上にテキストを重ねている
# (マウスで一文字ずつ選択できる)場合は、文字は綺麗に表示できています。

Googleのトップ画像のように画像でも、ぼやけずに表示されているものもあるので、
技術的には可能だと思いますが、何故でしょう?

ポートフォリオとして掲載しているくらいなので、
そのデザイン事務所の自信作なのだと思いますが、
それでもぼやけているというのは技術が足りないのでしょうか?
それとも高速化などのために仕方が無いのでしょうか?

よろしくお願いします。

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

質問が解りづらく申し訳ありません。

少し検索すればぼやけなくする方法がみつかるのに、
デザイン事務所はぼやけた画像をポートフォリオに載せているのでしょうか?

そのデザイン事務所の技術や知識が足りないだけなのか、
それとも技術や知識があるためにあえてそうしているのか知りたいのです。

軽量化・高速化などのためかとも考えたのですが、
CDNを用いて高速化しているようなサイトでもありませんでした。

あまりにもたくさんのサイトがそうなっていますので、
何かのテクニックなのかとも考えたのですが・・・

デザイン事務所のサイト自体がぼやけた画像だらけですので、
デザインを依頼するところがないと困ってしまっています・・・


1 ● 匿名回答2号
ベストアンサー

あなたは高解像度なディスプレイを使われているのではありませんか?
(Windows では HiDPI 環境… Apple デバイスでは Retina と呼ばれているものです)
高解像度ディスプレイを想定した Web ページ制作においては、画像は標準解像度版に加えて高解像度版の素材を用意しておかないと、高解像度が活かされず結果としてぼやけた印象になることがあります。
(ディスプレイが標準解像度であってもブラウザの設定で 100% ではないサイズに拡大表示している場合も同様です)
一方、標準解像度ディスプレイではぼやけません。(ある意味「全てが常にぼやけた状態」に近いので、違いを認知できません)
高解像度ではない PC 環境でも一度比較してみてください。
これに関する詳細は「srcset」でググってください。

> それでもぼやけているというのは技術が足りないのでしょうか?
> それとも高速化などのために仕方が無いのでしょうか?

つまり、「当該 Web サイトが高解像度ディスプレイ向けに最適化されていない」ということです。
結果的に「高速化」となる効果も0ではありませんが、意図的にそれを狙ってやることはまずないでしょう。(デザイン事務所なら尚更です)
考えようによっては「手抜き」「技術不足・知識不足 (高解像度時代への配慮が不十分である)」と捉えられなくもありませんが、この1点のみを持ってそこまで判断するは行き過ぎかと思います。
デザイン力と、Web サイトでの情報発信における配慮は必ずしもイコールではないでしょう。

特に Web ページ作成に CMS を利用している場合、その CMS が srcset に対応していなかったらいくらコンテンツ制作者が綺麗な素材を作ってもこの問題は避けようがありません。


匿名質問者さんのコメント
はい。私もその点を最初に疑い、送信前の質問文には解像度を含めていました。 確かにRetinaではあるのですが、13インチで疑似解像度は1680x1050程度です。 デザイン事務所さんで使われているような 27インチiMacなどと比較すると遥かに解像度は低く、 他の可能性を疑っていました。 デザイン事務所さんはデザインの専門家なので、 デザインの問題であれば解決していただけると 期待しすぎていたのかもしれません・・・ システム開発側では、できるだけ多くの環境で 動作検証を行うため遅くともテスト段階では気がつくのですが・・・ デザイン事務所さんのサイトや製作例を拝見させていただいても、 表示に何秒もかかるサイトや、どれをどう操作すれば良いか判らないものが多く がっかりしてしまいました。 CDNやUXなどのキーワードを含めて、検索し直してみます。 > 特に Web ページ作成に CMS を利用している場合、 > その CMS が srcset に対応していなかったら > いくらコンテンツ制作者が綺麗な素材を作っても > この問題は避けようがありません。 逆に言えば、srcset に対応したCMSを使用するか、 CMSを使わずにsrcset に対応した出力を行い、 「高解像度ディスプレイ向けに最適化してください」 とお伝えすればご対応いただけそうということですね。 とても参考になりました。ありがとうございました。

匿名回答2号さんのコメント
> Retinaではあるのですが、13インチで疑似解像度は1680x1050程度です それが原因です。 私が言ったのは、ディスプレイが高解像度であるために、実解像度と疑似解像度に乖離がある状態を指しています。 実解像度に対して疑似解像度が低ければ低いほどぼやけて見えます。 実解像度=疑似解像度の環境で確認してみてください。おそらくぼやけないでしょう。

匿名質問者さんのコメント
なるほど。ありがとうございました。 一部のデザイン事務所さんからは、高解像度対策や SVGについてのご回答をいただけました。 過去に請け負ったものについては、対応できていないものもあるそうで、 ポートフォリオのものがぼやけていても、対応できるところもある ということが判りました。 この辺りは問い合わせていくしかないようですね・・・
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ