画面上で見やすいフォント

質問

「QNo.2684210 メニュー制作　画面上で見やすいフォント」で質問させていただいた者です。　あれからいろいろと検索してみたのですが、いまだ未解決ですので質問させてください。

http://www5b.biglobe.ne.jp/~tripper/
http://www.imagedive.co.jp/​
これらのサイトのフォントのように、ビッドマットフォントを用いてメニューの文字をはっきり見せたいのですが、やりかたがわかりません。

たとえば上記のサイトのうち、前者のメニューの文字はカクカクとはっきり見えますが、タイトル部分は滑らかなカーブのあるフォントなので、すこし周囲がぼんやりして見えますよね。　自分でビッドマットフォントをダウンロードしてきて画像にすると、せっかくビッドマットなのにもかかわらず、このようにぼやけた感じになってしまいます。　このサイトのソースを見ると、当該部分はgif画像らしいので、なにかやり方があるはずなのですが・・・。

ちなみに、前回質問時はビルダーを使用していましたが、基本的な構造について知りたがりなので性に合わず、いったんEmEditorに切り替えました。　（いずれ慣れてきたらまた使おうと思っています）　　illustrator、photoshop、ビルダー付属のウエブアートデザイナーのどれを使ってもぼやけてしまいまうので、なにか根本的な勘違いをしているのだと思います。　ご指摘いただけないでしょうか？

回答No.2

Hoyat · ベストアンサー

>たとえば上記のサイトのうち、前者のメニューの文字はカクカクとはっきり見えますが、タイトル部分は滑らかなカーブのあるフォントなので、すこし周囲がぼんやりして見えますよね。

これが「アンチエイリアス」効果です。
輪郭の部分が背景色と混じった色にすることによって
輪郭をやわらかくします。
例えばPhotoshopをお持ちなら
RGBモードで256px×10px位（縦横自由）の空ファイルを用意し
画像の長辺に沿って赤から青へのグラデーションを
全面に敷いたもの画像を作って
インデックスカラーに置き換えてみてください
そうするとグラデーションは256階調で分かれると思います。
拡大して見ると良く解ると思います。
しかし縮小するとグラデーション（っぽく）見える筈です。
これがアンチエイリアスの原理です。

これを理解すると答えは見えてくると思いますが
はっきりした文字を出そうと思った場合には
アンチエイリアスをオフにしてやれば良い訳です。
じゃぁどうするかと言えば
基本的にドット絵の要領で
文字を書けるようにしてやればいいのです。
つまり
最初から表示される解像度で
ビットマップフォントで
書いてやれば良いのです。
Photoshopで表示される解像度で書くと
おそらくギザギザのグジャっとした感じになると思いますが
それはフォントのラインが画像のドットと合っていないからです。
ずらして可能な限り適正になるようにして
あとはアウトライン（ラスタライズ）して修正してください。

蛇足ながらビットマットフォントではなくビットマップフォントです。

回答No.1

Muller3

前のご回答に書いてあった、アンチエイリアスだと思いますが？
フォトショップお使いなんですよね。
だったらフォトショの文字パレットの一番下にアンチエイリアスを制御するプルダウンメニューがあるので、それを「なし」にすればビットマップになってくれると思います。
でもってそれをWEBで書き出すときはgifにする。
という感じでできないでしょうか。

ただし、ビットマップフォントはそれぞれのフォントに確か推奨サイズがあったはずなので（推奨サイズの倍掛けで使う）、それだけご注意下さい。要はフォントがキレイに見えるサイズで使う、ということです。