匿名質問者

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


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

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

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

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

よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2018/06/21 08:16:12
匿名質問者

質問者から

匿名質問者2018/06/21 04:49:35

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

少し検索すればぼやけなくする方法がみつかるのに、

デザイン事務所はぼやけた画像をポートフォリオに載せているのでしょうか?

そのデザイン事務所の技術や知識が足りないだけなのか、

それとも技術や知識があるためにあえてそうしているのか知りたいのです。

軽量化・高速化などのためかとも考えたのですが、

CDNを用いて高速化しているようなサイトでもありませんでした。

あまりにもたくさんのサイトがそうなっていますので、

何かのテクニックなのかとも考えたのですが・・・

デザイン事務所のサイト自体がぼやけた画像だらけですので、

デザインを依頼するところがないと困ってしまっています・・・

ベストアンサー

匿名回答2号 No.1

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

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

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

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

他1件のコメントを見る
匿名回答2号

> Retinaではあるのですが、13インチで疑似解像度は1680x1050程度です

それが原因です。
私が言ったのは、ディスプレイが高解像度であるために、実解像度と疑似解像度に乖離がある状態を指しています。
実解像度に対して疑似解像度が低ければ低いほどぼやけて見えます。
実解像度=疑似解像度の環境で確認してみてください。おそらくぼやけないでしょう。

2018/06/21 20:58:48
匿名質問者

なるほど。ありがとうございました。

一部のデザイン事務所さんからは、高解像度対策や
SVGについてのご回答をいただけました。

過去に請け負ったものについては、対応できていないものもあるそうで、
ポートフォリオのものがぼやけていても、対応できるところもある
ということが判りました。

この辺りは問い合わせていくしかないようですね・・・

2018/06/21 21:32:25

その他の回答0件)

匿名回答2号 No.1

ここでベストアンサー

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

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

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

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

他1件のコメントを見る
匿名回答2号

> Retinaではあるのですが、13インチで疑似解像度は1680x1050程度です

それが原因です。
私が言ったのは、ディスプレイが高解像度であるために、実解像度と疑似解像度に乖離がある状態を指しています。
実解像度に対して疑似解像度が低ければ低いほどぼやけて見えます。
実解像度=疑似解像度の環境で確認してみてください。おそらくぼやけないでしょう。

2018/06/21 20:58:48
匿名質問者

なるほど。ありがとうございました。

一部のデザイン事務所さんからは、高解像度対策や
SVGについてのご回答をいただけました。

過去に請け負ったものについては、対応できていないものもあるそうで、
ポートフォリオのものがぼやけていても、対応できるところもある
ということが判りました。

この辺りは問い合わせていくしかないようですね・・・

2018/06/21 21:32:25
  • 匿名回答1号
    匿名回答1号 2018/06/20 22:28:45
    http://creativememomemo.com/chrome_image_blur/
  • 匿名質問者
    匿名質問者 2018/06/20 22:52:29
    ご回答ありがとうございます。
    そちらのサイトは既に確認済みです。

    Chrome(Windowsの)でのみ起きている問題と
    書かれていましたが、Mac OSのChromeでもぼやけていますね・・・
  • 匿名回答3号
    匿名回答3号 2018/06/21 19:23:50
    SVG使えってこと
  • 匿名質問者
    匿名質問者 2018/06/21 19:30:53
    確かにSVG使えば済みますよね。

    それならデザイン事務所は何故
    そうしないのかという疑問が湧いてきます。
    Illustratorがあれば出力できますよね?

    何件かのデザイン事務所に問い合わせてみましたが、
    回答がありません。

    聞いてはいけない質問だったのかなぁ・・・

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません