（４／４ページ）　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　フォントについて　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　
　フォントについて

　　　フォント・・・つまり文字に対す指定はどうしているでしょうか？
　　　フォントの指定も色々ありますが、
　　　基本として、文字の種類・大きさ・色がまずあげられます。
　　　このほかに、強調・下線・斜体・縦書き・横書き等があります。

　　　さて、フォントの一番大切なことは、何でしょう？
　
　　　私が思うに、読みやすさではないかと思います。
　　　それから、そのＨＰのデザインとの統一感。

　　　そんなの当たり前・・・
　　　そう思われる方も多いと思います。
　　　でも、意外と当たり前のことのようで、
　　　そのままの指定や自分の好きな色にこだわってしまっていて
　　　読みにくくしてしまっているＨＰをよく見かけます。
　　　こんな初歩的なことで、訪問者を遠ざけてしまわぬように
　　　配慮したいものです。　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　
　

さて、具体的に表示してみましょう。


　　

　　　字体の種類

　　　　　＜　ゴシック　＞　あいうえお

　　　　　＜　明朝　＞　　　あいうえお　　　　　

　　　　　＜　行書　＞　　あいうえお

　　　　　＜　ＰＯＰ　＞　　　あいうえお
　　　　
　　　　　よく使われている書体は、以上の４種類です。
　　　　　こうして比べてみると、確かに違います。

　　　　　字体によって、受ける印象は違ってきます。

　　　　　それぞれの特徴としては、
　　　　　　
　　　　　＜　ゴシック　＞
　　　　　　　文字の太さが均一なフォント。
　　　　　　　モダンで力強く、はっきりしたイメージを与えます。

　　　　　＜　明朝　＞
　　　　　　　縦線が太く、横線が細いフォント。
　　　　　　　止めや跳ね・払いなどに、筆の名残が有り、
　　　　　　　穏やかで伝統的な印象や洗練された印象になります。

　　　　　＜　行書　＞　
　　　　　　　毛筆の流れが美しく、伝統的で和風な印象になります。

　　　　　＜　ＰＯＰ　＞
　　　　　　　にぎやかな印象のＰＯＰ体ｆは、軽快で楽しい雰囲気になります。

　　　　　
　　　　　これらの字体を単一に使うのではなく、
　　　　　例えば、タイトル部分のみ明朝体を使い、印象付け
　　　　　内容の記述部分には、ゴシック体を使用するというように
　　　　　使い分けも可能なわけです。

　
　　　　　皆さんのＨＰは、どんなイメージをお持ちでしょうか？
　　　　　それを壊さないよう、さらには、引き立たせるような字体を選びましょう。
　　　　　


　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ページトップへ


　
　　　文字の大きさ
　　
　　　　普通フォントサイズという言い方をします。

　　　　　　　　あいうえお　　あいうえお　　あいうえお　　あいうえお
　　　
　　　　　　　　以上の４文字は、HTMLの指定で
　　　　　　　　<font size="●">
　　　　　　　　この●の部分を１〜４まで指定して表示してみました。

　　　　　　　　さて、どの大きさが、読みやすいでしょう？
　　　　　　　　また、それぞれにどんな印象を受けるでしょう？

　　　　　　　　たぶん、読みやすい大きさという部分では、
　　　　　　　　２または３が読みやすく感じると思います。
　　　　　　　　ただ、私自身の事を言えば、
　　　　　　　　私は、近視がひどいため、２より３の方が、読みやすく感じます。
　　　　　　　　沢山の情報を載せようと思うと、自然に文字数も多くなり、
　　　　　　　　ページもかなり下部までとなってしまいます。
　　　　　　　　このあたりの配慮から、文字をやや小さめにするという
　　　　　　　　選択もあります。

　　　　　　　　さて、サイズ１の文字については、どんな印象を受けますか？
　　　　　　　　なんとなく、小声で話すときに似ていませんか？

　　　　　　　　逆にサイズ４などは、大きな声で話すときと同じような印象
　　　　　　　　つまり、強調的な感じがします。
　　　　　　　　しかし、すべてがこの文字の大きさだと、どうでしょう？
　　　　　　　　決められたウィンドの幅の中で、ちょっとスペースをとりすぎ
　　　　　　　　書かれている内容の重要さが薄れてしまう感じがしませんか？

　　　　　　　　これに、太さが加わることにより、
　　　　　　　　より強調されるべきものや、
　　　　　　　　各タイトルなどの印象付けという
　　　　　　　　メリハリのきいた表現がさらに可能になるわけです。
　　　　　　　　
　　　　　　　　　
　　　　　　　　　通常のサイズ指定では、３が標準になっていることが多いです。
　　　　　　　　　ただ、この場合、具体的な大きさが決まっているわけではない
　　　　　　　　　ため、実際に表示される大きさは、ブラウザによって異なる場合が
　　　　　　　　　あります。
　　　　　　　　　また、font要素は非奨励とされていて、
　　　　　　　　　新しいHTMLの標準仕様では使うことができなくなってきています。
　　　　　　　　　こういったことから、フォントサイズの指定には、
　　　　　　　　　できるだけスタイルシートを利用するようにしたほうが
　　　　　　　　　良いかも知れません。

　　　


　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ページトップへ



　　　文字の色

　　　　　　　通常一番多く使われているのが、黒です。
　　　　　　　これは、白地に対してはっきりと読みやすいからです。
　　　　　　　しかし、リンク色や既読リンクなどは、色が変わっているはずです。
　　　　　　　また、大切な言葉や印象付けたい言葉・強調したい言葉には、
　　　　　　　色をつけたりもします。

　　　　　　　さて、こうした文字の色ですが、
　　　　　　　読みやすいということが一番大切です。

　　　　　　　時々、印象付けるために色を変えていることが、
　　　　　　　マイナスになっているサイトを見かけます。

　　　　　　　背景色に対して読みやすい色でなく、
　　　　　　　単に好きな色や蛍光系の色といっただけで
　　　　　　　選んでいるのではないかと思います。

　　　　　　　逆に、背景色が黒っぽい色なのに、
　　　　　　　あえて、濃い色のものを選択してしまっている方もいます。

　　　　　　　ここで、少し背景色に対する色を見比べてみたいと思います。


　　　　　　　　　あいうえお　　　あいうえお　　　あいうえお　　　あいうえお

　　　　　　　　　あいうえお　　　あいうえお　　　あいうえお　　　あいうえお


　　　　　　以上の例は、すべて文字色を黒にして、背景色を変えてみました。
　　　　　　どれが、読みやすく、どれが読みにくいでしょうか？


　　　　　　　　　あいうえお　　　あいうえお　　　あいうえお　　　あいうえお

　　　　　　　　　あいうえお　　　あいうえお　　　あいうえお　　　あいうえお


　　　　　　今度は、白地に文字色をつけてみました。
　　　　　　読みやすや、印象は違いますよね。


　　　　　　　　　あいうえお　　　あいうえお　　　あいうえお　　あいうえお

　　　　　　　　　あいうえお　　　あいうえお　　　あいうえお　　　あいうえお


　　　　　　今度は、赤または青を、少しずつ濃淡を変えてみました。


　　　　　　　　　あいうえお　　　あいうえお　　　あいうえお　　　あいうえお


　　　　　　今度は、黒の背景に対しての文字色です。


　　　　　　こうして、実際を見てみると、
　　　　　　文字の色も大切なのだということがわかります。


　　　　　　例えば写真を背景にした場合は、どうでしょうか？
　　　　　　写真の場合は、沢山の色が使われています。
　　　　　　その場合は、どの色が一番強く出ているかを考えて色の選択をします。

　　　　　　
あいうえお　　　　あいうえお　　　あいうえお
　　
　　　　　　　空の青さに対して、黒い文字は、はっきりします。
　　　　　　　しかし、雪の白さに対してはどうでしょうか?
　　　　　　　普通に考えれば、白い背景に対して黒字は、目立つはずなのに
　　　　　　　わかりずらくなってしまいます。
　　　　　　　これは、写真の場合は、色が単一ではないからです。
　　　　　　　そして、最後の文字・・・
　　　　　　　これは、黒字に白枠をつけた文字です。
　　　　　　　このような飾り文字にするとはっきりとしてきます。

　　　　　　　この反対で、全体的に黒が多い場合は、
　　　　　　　文字を白くして、黒の縁をつけてあげるとはっきりします。


　　　　　　　背景の色と文字色・・・
　　　　　　　きちんと選択して、読む方にストレスを与えないような工夫をしましょう。
　


　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ページトップへ
Copyright (C) 2007 Herb-Wreath All rights reserved