• ベストアンサー

ジャギーと解像度とピクセル

フォントについて質問させていただきます。Windowsに内蔵のMS明朝をWeb上で表示させると、文字の大きさによってジャギーが生じ、輪郭がギザギザし見た目が汚くなります。これは「MS明朝の解像度が低く、かつピクセル数値が小さいから」と理解しているのですが、この理解の仕方は間違っているでしょうか? ホームページでのみ(web上でのみ)使用するために、大きさを変えてもジャギーが生じず文字が崩れないフォントを探しています。この場合、何を目安にフォントを選択すればよいでしょうか?フォント販売サイトでは解像度やピクセルに関する記述もなく、選択基準が分からず少々困っています。

質問者が選んだベストアンサー

  • ベストアンサー
  • dezimac
  • ベストアンサー率56% (2365/4208)
回答No.2

webページでの書体(フォント)の指定は無意味です。 どんな書体を指定しても、閲覧する側にその書体が入っていなければ、他の書体で表示されます。 だから貴方がどんな高価な書体を購入しても意味ありません。 どうしてもその書体で見せたいなら画像にするくらいしかありません。 修正等の手間を考えればタイトルや小見出し等の一部だけにした方がいいでしょう。 同時に文字サイズをあまりにも小さくするのも迷惑です。 小さいのや背景と同化したようなのをクールだと勘違いしている人いますが、読みにくいくて格好悪いだけ。 契約書等の重要事項かって突っ込みたくなります。 前置き長くなったけど、 WindowsやMac/Linuxで使われているTrueTypeフォントは、基本的に2次Bスプライン曲線とビットマップフォントで構成されていて、拡大縮小しても滑らかに表現できるようになっています。 ただ、2次Bスプライン曲線は複雑な計算をするので表示に時間がかかります。 それで一定サイズ以下はより高速に処理できる、ビットマップフォント(ドット絵)で表示するようになっています。 小さいサイズでガタガタになりやすいのはこの為です。 OSやブラウザ(ソフト)の設定によっては、アンチエイリアス処理で文字を滑らかにする事もできます。 例えばSafariならWindows版でも文字を綺麗に表示します。 書体もブラウザも閲覧者側の問題で、貴方(作成者)がどうにかできるものではありません。 http://tomtia.plala.jp/PC/ttfont/ http://mozilla.gr.jp/standards/webtips0007.html

ffke3sei
質問者

お礼

回答いただいてありがとうございました。 「見せたい書体は画像にする」という発想は自分には無かったので、とても助かりました。ご紹介のページも参照させていただきます。

その他の回答 (1)

回答No.1

FONT-FAMILYで、何個か設定していますか? 和文ですよね。 モリサワ・ダイナフォントなどいかがでしょう。 結構な値段がするみたいなので、慎重にえらんでくださいね。 文字化けの概論とか。ちょっと小難しいですが見てみてください。 http://www.shtml.jp/mojibake/ もうちょっと、わかりやすいサイト紹介できればよかったのですが。 私も勉強中でして・・・どうぞ参考に♪

ffke3sei
質問者

お礼

回答をありがとうございます! 早速URLのほうを参照させていただきます。

関連するQ&A

  • 解像度の違いについて質問

    たとえば、1024×768の解像度のモニターと、 1280×1000の解像度のモニターでは、 標準の文字の大きさが違うんでしょうか? font-size;normalの標準の大きさです。 ピクセル数が、標準で違うんでしょうか? だとすると、1024×768の解像度のモニタで とあるサイトを見た場合、150pxのメニューバーに ギリギリ文字列(font-size:normal)が一列で収まっていたとしても、 その同じサイトを1280×1000の解像度のモニタで そのサイトを見た場合、150pxのメニューバーに 文字列(font-size:normal)が1列で収まらずに 2段になっちゃったりしてるってことでしょうか? 解像度が高いと、標準の文字の大きさのピクセル数もあがりますよね?たぶん。画面で見た場合の文字の大きさは、どの解像度でも5ミリぐらいっぽいですし。

  • 解像度が800×600ピクセルを変えたい

    新しくPC(イーマシーンJ2612)を購入し、 以前使っていたモニターをつなげました。 それで解像度を変えようとしましたが 800×600ピクセルしか選択出来ません。 何かドライバをインストールするのでしょうか? ちなみに モニターは日立フローラ330ST20Eの 13.3インチスーパーTFTカラー液晶モニターです。

  • MacBookProRetinaの解像度

    MacBookProRetinaの13インチですが、内蔵ディスプレイの画面解像度を変更で、文字を拡大、最適、ー、スペースを拡大があり、疑似解像度がそれぞれ、1024×640、1280×800、1440×900、1680×1050となっています。 単純に文字サイズ等をこの解像度のサイズにしているのではないようです 実際にスクリーンショットを取ると、Retina最適で、2560×1600となります。これは理解できるのですが、疑似解像度1440×900の場合のスクリーンショットのサイズが、2880×1800となります。ここからが意味がよくわかりません。 実際のディスプレイの解像度以上のサイズのスクリーンショットになるのはどうしてでしょうか? また、retina最適時には4つのドットで1つのピクセルを表現するのだと思いますが、疑似解像度1440×900時には、どの様に表示しているのでしょうか? よろしくお願いいたします。

    • 締切済み
    • Mac
  • 画面解像度の設定とピクセル数との関係

     Win XPです。  画面のプロパティの設定から画面の解像度を選択出来るようになっています。  これは、ピクセル数を選択出来るようになっていますが、モニター(画面)にセットされているピクセル数を どのような仕組みで変えることが出来るのでしょう。  ピクセル数を変えるということはピクセル自体の大きさを変えるということでしょうか。  どのような仕組みになっているのでしょうか。

  • 詳しい方:dpiをpixelに変換した場合の解像度

    Illustratorを持っていなかったのでFireworks2004MXでB6版のチラシの原稿を作る場合、どのようにして原稿を作って提出すればよいか印刷業者さんに聞くと、Jpg形式で300~350dpiの解像度で作ってくださいと言われました。 以下のサイトで「左右ミリ128」「天地ミリ182」「dpi 350」でpixelへ変換すると「左右pixel 1763」「天地pixel 2507」だとわかりました。 http://www.geocities.co.jp/SiliconValley/3443/pixel.html ここで質問ですが、上記の場合、Fireworksの「pixelの解像度」は、どのように設定すればよいでしょうか? Fireworksの場合、解像度の単位は「ピクセル/インチ」と「ピクセル/センチ」が選択可能 です。 ちなみに、「ピクセル/インチ」は「dpi」のこと(同じ)ですか? この場合、Fireworksで「幅12.8センチ」「高さ18.2センチ」にして、解像度を「350ピクセル/インチ」にすればよいように思いますが。 印刷業者さんはピクセルに関しては全くの無知で、分かりませんでした。 よろしくお願いします。

  • 解像度について

    フォトショップエレメンツ4.0を使用しています。ここで何度も質問しているのですが、解像度の概念についていまいち理解出来ていません。画像を編集して別のDTPソフトに読み込むのですが、きれいな画質で広報紙を印刷したいのです。(昔ワードで広報紙を制作した時に画質が荒れて苦労しました)エレメンツで編集するときに解像度350に設定、必要な幅と高さ(mm)に設定、そうすると最高画質になると理解してました。でもそれだとピクセル数が変更されますよね。その画像の持っているピクセル数を変えてしまうと画像が荒れるのではないでしょうか?ピクセル数を変えずに、必要な幅と高さを設定すると解像度は350になりません。この場合、ピクセル数を変えず、必要な幅と高さ(mm)にして解像度はおまかせにするのが画質がきれいな広報紙の出来上がりということにるのでしょうか?

  • 大きいモニター程、同じ解像度なら文字は粗く見える?

    画面のサイズと解像度について http://www.iwane-web.jp/pc/gamen-kaizoudo.html ↓は↑から抜粋したものです。 > 解像度が同じ場合、モニターのインチ数が大きくなるほど文字は大きく、 小さくなるほど文字も小さくなります。 > これは単純に点の大きさが大きくなったり小さくなったりするからです。 > つまり、解像度が同じ1920×1080であるなら、21.5インチのモニターより、23インチのモニターの方が文字が大きくなります。 5インチのスマホ 12.5インチのモバイルPC 15.5インチのノートパソコン 17.3インチのノートパソコン 21インチのデスクトップパソコン 42インチのテレビ 60インチのテレビ 上記いずれの解像度も 【 1920×1080 】 だった場合、 大きいサイズの画面のドット程、1ドット(ピクセル)のサイズが大きくなるということですよね? そこに文字や絵を表示させると 【 小さいサイズの画面より、大きいサイズの画面の方が、汚く(粗く)見えるんじゃないですか? 】 例えば、【 A 】という文字を12ピクセルで描画したとしましょう。 仮に5インチのスマホ(解像度1920×1080)の 1ピクセルあたりのサイズが 2×3 ミリ 60インチのテレビ(解像度1920×1080)の 1ピクセルあたりのサイズが 24×36 ミリだとして、 3×4=12 ピクセル上に A を描画すると、 5インチスマホだと、6×12 ミリ=★72m2★ 60インチのテレビだと、72×144 ミリ=★10368m2★ 上に【 A 】が描かれる訳でしょ? 1つのピクセルが大きい程、文字はカクカクして、その分粗く見えるんじゃないですか? そう考えると、画面が大きいほど高解像度にしないと、(同じ解像度だった時の)小さい画面の文字と★同等な綺麗さの文字★として見えないのではないでしょうか? スマホで 1920×1080 というのと、 パソコンで 1920×1080 というのと、 テレビで 1920×1080 というの、 画面のサイズが違うのにどれも【フルハイビジョン】と言われても、上記の疑問があって、一概に良いとは思えないんですよねー おかしいと思いませんか? 画面サイズが大きい程、解像度が同じなら、汚く見えるんじゃないですか? 画面サイズが大きい程、解像度を高いものにしないと、見やすいとは言えないのではないでしょうか? よろしくお願い致します。

  • 画像解像度について。

    いろいろ他の質問を見ていたのですが、分かるようで分からないので教えてください。 フォトショップ7を使用しています。 デジカメが500万画素ですが、 ピクセル数の縦と横の意味は理解できるのですが、 ドキュメントサイズの解像度が180から上に上がりません。 デジカメの解像度を上げてもピクセル数が上がるだけです。 350の解像度でほしいといわれているのですが、どうすればよろしいでしょうか。 また画素と解像度の違いは何でしょうか? 教えてください。お願いします。

  • 画面のサイズとピクセルと解像度の関係について教えてください。

    はじめまして。 illustratorとphotoshopを勉強中のものです。 今まで、解像度などについて深く考えずいろいろ作ってきましたが、時折、解像度についてまったく理解していないことから問題が起き、こちらに質問させていただいていました。 今回は、問題というより、疑問なんですが・・・ 携帯電話の画面は機種ごとにサイズ(ピクセル)が決められていますが、(例:「SO902i 横240×縦256」「D902i 横230×縦320」)これはただの画面サイズで、解像度とは関係ありませんよね? でも、実寸の画面サイズはD902i>>>SO902iです。 今まで、ピクセル=画面のサイズだと思っていましたが(ピクセルをmmに変換できるなどから…)、ピクセルというものがそもそもわからなくなってきてしまいました・・・ ちなみに240×240で画像を作成し、上の例にある2台の携帯電話でブラウザから見た場合、D902iの方が画像が粗く見えました・・・これも逆のような気がするのですが・・・ 正直頭がこんがらがってきました・・・ピクセルとはいったいなんのなのでしょうか? 携帯電話の解像度とは=ピクセル? ピクセル=画面のサイズというわけではないのでしょうか? また、以前問題が発生した際に質問したときは http://oshiete1.goo.ne.jp/qa3508653.html こちらで320×240を『一番小さい』と回答いただきました。 しかし、上の2台を見てもこの数字が最少ではないような気がするのですが・・・ 何か大きな勘違いをしているかもしれません・・・どなたかお答えをいただけないでしょうか? どうかよろしくお願いいたします。

  • フォントについて

    MS明朝とMSP明朝の違いって何なんでしょうか? それと役所の書類や広報誌に使われているフォントと比べてみると 印刷したときに、MS明朝は少し輪郭が太く感じるのですが、 明朝体でもう少し輪郭がすっきりしたフォントってあるでしょうか?