- 締切済み
小さいフォントでWEBデザイン制作
初心者でスイマセン・・ お客のウェブを制作しているのですが、 最近はいろんなサイトで利用されている小さいフォントでも読みやすいテキスト素材を作りたいのですが、どういうフォントを利用すればいいのかわかりません。。 いろいろ調べているのですが、ビットマップフォントや小さいフォント・・とか、思いつくキーワードで検索しても、自分の思った答えがあるサイトにいきつきません・・ なんか言い答えがあるのでしょうか? というか、こんなにたくさんのサイトで小さいのにくっきりしたフォントで制作されているのに、自分がその「作り方」を見つけられないのが悔しいです・・・
- みんなの回答 (3)
- 専門家の回答
みんなの回答
- ponta_777
- ベストアンサー率55% (29/52)
WEBの仕事をしているものです。 masamayuさんのおっしゃることは くっきりしたフォント、というより くっきりした画像という判断で良いかと思います。 文字をボタンにするのなら、色の使い方も影響します。 フォトショップなら色数を指定してgifにする、 これだけでもかなり良いかと思いますよ。 フォントは普通のゴシック体が見やすいかと思います。 蛇足ですが、ボタンなどのWEB素材を作成するならば アドビのイラストレーターを使うと便利です。 マクロメディアのファイヤーワークスもなかなか使えます。
小さいフォント? どんなものを指しているのか、掴めないので、想像でアドバイスします。 まず、どんなフォントを利用すべきか。 閲覧者が見やすいのは、システムフォントではないかと思います。 フォント指定していない場合、Windowsでは、MSゴシックや、MS明朝、 Macintoshでは、Osakaや、ヒラギノでテキストを表示します。 一番見慣れているものが、一番見やすいとは限らないかもしれませんが、 見慣れているというのは一つのポイントです。 > 小さいのにくっきりしたフォントで制作されている これは素材に使用されているフォントということでしょうか? 例えば、Yahoo!JAPANの、トップのメニューは画像で作成されており、 「Yahoo!BB」や「新着情報」といったテキストも画像になっています。 これをイメージされていますか? この画像のフォントの場合は、アンチエイリアスをオフにして作成されています。 四角いドットで、一色で描かれています(ドット絵の表現)。 サイズでは、9pxくらいまでが、はっきりときれいにレンダリング出来る限界のサイズじゃないかな?と思います。 もっと小さくてもアンチエイリアスと、フォント、サイズの組み合わせによってはきれいに見せることは可能です。 もう一つ大切なのは、言葉を選ぶこと。 「写真」と「Photos」は同じ意味だけど、小さな文字にした時は、漢字はつぶれやすくなるので、 アルファベットの方が見やすいことが多いです。 しかし、横のサイズの制限がある時には、アルファベットよりも漢字の方が文字を大きくすることが出来ます。 こんなことがヒントになりますでしょうか?
- jakarta
- ベストアンサー率38% (607/1597)
具体的な素材が使われているURLを例に出してもらって、これといってもらうほうがわかりやすいですが…。 フォントの種類としてはビットマップフォントを使用し、そのフォントの対応しているサイズを使用すればよいと思います。 使用する画像ソフトでアンチエイリアスなしにしておく必要があります。
補足
早速のアドバイスありがとうございます。 例えば、このページの、"この回答は参考になった!や"運営スタッフに連絡"のボタンのテキストです。。 それらに対応したビットマップフォントはどういったものがありますか??それはmacのosakaとかでもアンチエイリアスなしにすれば、okなのでしょうか?ちなみに、もうおひとかたから頂いたお答えにも補足させた頂いたのですが、フォトショップで、テキストに対して、アンチエイリアスなしにする方法って、どうすれば良いのでしょうか?
補足
すいません。皆様。。早速のアドバイス誠にありがとうございます!! とはいいつつ、掴みづらい質問でスイマセンでした・・ えー。まさしく、yahooのヘッダー部分の"新着情報"や""メッセンジャー"等の小さい文字(画像として・・)のことなのです。 アンチエイリアスに関しても、どういったものかという知識はあるのですが、、 ちなみに画像加工・編集はフォトショップを利用しています。 僕自身のこれまでの勘違いだったと思うのですが、フォトショップでテキストを入力し、"なし""シャープ""鮮明""強く"・・"滑らかに"などの設定がありますが、その設定で"なし"にすると、今回僕が疑問に思っていることが実現できるのかと思ってました。。で、また、あるいみそれが「アンチエイリアス」的な設定なのかな・・と思ってました。 でも、いろんなフォントで"それ"を試してみましたが、見やすくなってくれるフォントがありませんでした。 では実際に、そのドットで漢字や平仮名等和文を、所謂YAHOOのヘッダーテキスト画像のように制作するには、PHOTOSHOPを利用して、アンチエイリアスの設定等、どのようにすれば良いのでしょうか?(もしくは、"そのような文字専用のフォントをどこからか入手する必要があるのか・・?) えー。 本当に、知っている方にとってはバカバカしい質問のようで申し訳ございません・・・ 目からウロコてきなこと・・かもしれませんが(僕にとっては)ご教授頂けますようお願い致します。。