日本人が好きなフォントは？：CSS入門
CSS入門（14）
日本で愛されているフォント、いわゆるよく利用されているフォントを調べてみました。日本人が好きなフォントって、何なのかしら？
お話は、次の順番で進みます。
有名サイトで指定されているフォントは？
有名サイト、大手新聞社、IT系サイトなど、フォントにまで綿密に配慮していそうなサイトを調べてみました。
ちょっと、サンプルデータが少なく（16サイト）、探し当てることができなかったサイトもあり、十分とは言えませんが、よかったらご覧くださいませ。
1：第一候補が多いフォント
調査結果から書いていきます。まずは、第一候補に選ばれることが多いフォントです。「ヒラギノ角ゴ Pro W3」と「ＭＳ Ｐゴシック」の人気が高いようです。
16票のうち10票を、「ヒラギノ角ゴ Pro W3」と「ＭＳ Ｐゴシック」がもっているのだから、ツートップといったところでしょうか。
1位（5票） | ヒラギノ角ゴ Pro W3 |
|---|---|
ＭＳ Ｐゴシック | |
3位（2票） | Osaka |
4位（1票） | arial |
sans-serif | |
MS UI Gothic | |
verdana |
そういえば以前、「"ヒラギノ角ゴ Pro W3"が読みやすく、人気がある」旨を、おそらく『プロとして恥ずかしくない〜』本で読んだ記憶があります。
現状、安定した人気があると言えそうです。
2：登場回数の多いフォント
次は、必ずしも上位にくるわけではないかもしれないけれど、指定しておくサイトが多いフォントです。
つまり、各サイトで指定されているフォントを、加算集計してみました。
1位（14票） | sans-serif |
|---|---|
2位（11票） | ＭＳ Ｐゴシック |
3位（10票） | Osaka |
4位（8票） | arial |
5位（7票） | ヒラギノ角ゴ Pro W3 |
6位（5票） | helvetica |
7位（3票） | verdana |
8位（2票） | メイリオ |
9位（1票） | MS UI Gothic |
Lucida Grande | |
trebuchet ms |
sans-serifが、だんとつトップです。積極的に選ぶフォントではないけれど、「保険的に入れておく」みたいな感覚なのでしょうか。
ちょっと気になる存在が、「メイリオ」です。Windows Vistaがらみでしょうか？注目株？
3：各サイトのフォント一覧
各サイトが使用しているフォントの一覧です。CSSファイルに検索をかけるなどして探しても、見付けられないサイトもありました。（無念）
（1）検索エンジン、ポータル
arial,sans-serif | |
"Osaka", "ＭＳ Ｐゴシック", Arial, sans-serif | |
"ＭＳ Ｐゴシック", "Osaka" | |
"Hiragino Kaku Gothic Pro",Osaka ,Arial, Helvetica, sans-serif | |
見付かりませんでした。 | |
見付かりませんでした。 | |
見付かりませんでした。 |
（2）通信
"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif | |
"ＭＳ Ｐゴシック", Osaka, Arial, Helvetica, sans-serif |
＊：NTTdocomoさんは、"ＭＳ Ｐゴシック"を、実際は"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF"と書いていました。
（3）IT情報
'MS UI Gothic',"ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Lucida Grande",sans-serif | |
'ＭＳ Ｐゴシック', 'Osaka', sans-serif | |
"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "ＭＳ Ｐゴシック", sans-serif（WinIE用は、"ＭＳ Ｐゴシック", sans-serif） | |
sans-serif, verdana, arial, helvetica |
（4）物販・情報
osaka,MS Pゴシック,arial,helvetica,sans-serif | |
"ＭＳ Ｐゴシック",Osaka ,arial ,verdana ,sans-serif | |
あれ？CSSを使っていない？ |
（5）デザイン
"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica | |
'verdana', 'trebuchet ms', sans-serif |
（6）新聞社
見付かりませんでした。 | |
見付かりませんでした。 | |
見付かりませんでした。 |
（7）その他
"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif | |
"ヒラギノ角ゴ Pro W3", sans-serif（WinIE用は、"メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif、もしくは、"ＭＳ Ｐゴシック", sans-serif） | |
見付かりませんでした。 | |
見付かりませんでした。 |
4：「ヒラギノ角ゴ Pro W3」の書き方
ちなみに、「ヒラギノ角ゴ Pro W3」は、"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3"と、両方書いた方が良いようです。
理由は、safariでは日本語が含まれていると無効になり、Firefoxでは、日本語フォントのアルファベット表記を無効にするからだそうです。
「ヒラギノ角ゴ Pro W3」の表記法については、webデザイナーのナナメガキさんを参考にさせていただきました。ありがとうございました。
5：調査の感想
25のサイトを調べてみたのですが、9サイトは何のフォントを指定しているのか発見できませんでした。
おそらく、漏れもあると思いますが、もしかすると、わざと指定しないということもあるのかもしれません。
つまり、「ユーザがブラウザで設定しているフォントを優先していただいて結構です」ということ。
しかし、ブラウザのフォントをわざわざ変更しているユーザばかりではないだろうし・・・ん〜指定しないことの意味は、何なのでしょう？
海外で好まれているフォント
Inspiration Bitさんが、記事「16 Best-Loved Font Bits In Web Design」で、愛されるフォントのベスト16を紹介しています。
海外用なので、日本語であっても同じことがいえるかは分かりませんが、あわせてご紹介しておきます。
1 | Helvetica, Helvetica Neue, Arial | ABC | いろは |
|---|---|---|---|
2 | Verdana | ABC | いろは |
3 | Georgia | ABC | いろは |
4 | Trebuchet MS | ABC | いろは |
5 | Century Gothic | ABC | いろは |
6 | Lucida Sans Unicode, Lucida Grande | ABC | いろは |
7 | Palatino | ABC | いろは |
8 | Garamond, Baskerville, Caslon | ABC | いろは |
9 | Univers Condensed, Linotype Univers | ABC | いろは |
10 | Myriad Pro | ABC | いろは |
11 | Rockwell | ABC | いろは |
12 | Warnock Pro | ABC | いろは |
13 | FF DIN | ABC | いろは |
14 | Gotham | ABC | いろは |
15 | Frutiger | ABC | いろは |
16 | Dax Regular | ABC | いろは |
この情報は、CREAMUさんの「Webデザインで最も愛されているフォント16選『16 Best-Loved Font Bits In Web Design』」で紹介されて知りました。
その後、margheさんの「フォントの使いどころ？」で思い出しました。ありがとうございました。
このブログのフォント
ちなみに、当ブログ（「ブログが作りたい！」）は、次のように指定していました。（順当過ぎるよ）
各ブラウザのことを考えると、「ヒラギノ角ゴ Pro W3」と「ＭＳ Ｐゴシック」は、次のように書いておいた方が良さそうです。
あるいは、「\30D2\30E9\30AE\30CE\20Pro\20W3」、「"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF"」でも良いのでしょうね。
特にこだわりのない人は、上述のコードを、コピーして使っていただくとよろしいかと思います。
次回予告
次回は、文字の大きさを変えてみようかと思います。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/21 更新日：2008/04/21
« 「フォントの指定【font-family】」｜「文字サイズの変更【font-size】（1）」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
すごーい！
ありがとうございます
コメントありがとうございます。
沢山お時間かかっちゃいました。
もっと効率良くできるといいなぁ。(・∀・)フガー
FC2ブログも出てました？？？
よく分からないけれど、嬉しいのなら、良かった、良かった。
ハイパーさんも、殴られるよりは優しいかなと・・・
すごーい！これはほんとすごい！
即効はてぶしてしまいました！
興奮！
フォントの指定、しない理由はなんだろう・・・
自分はフォントの指定を知らずに指定をしていなかった時期があるのですが、
そうすると、Firefoxとかだとちょっと違ったフォントになっていたけど
指定するようになってからそれもなくなりました。
作った人が自分みたいにフォント指定を知らない、とか・・・・は
さすがになかろう・・・
なんでだろう？
フォント指定のコピー、使わせていただきます＾＾
ｲｴｰ うれしい
ところで、ヒラギノ角ゴ Pro W3ってwindowsXPに初めから入ってるのでしょうか？
自分のフォントみたけど、入ってにゃい・・・
不思議
コメントありがとうございます。
また、即行はてぶ、ありがとうございます。(・∀・)/39
単に探し当てられなかっただけかもしれませんけどもねー。
けっこう@importが繰り返されると、厳しい・・・。(´Д｀;)
font-familyで指定している場合、fontで指定している場合など、
検索も十分でなかったかもしれません。
それでも、いくつかは指定していないサイトもあるのでしょうね。
なぜか？不思議？？？
知らないってことは・・・さすがにないよねぇ。
いくつも仕事をこなしているプロだもの。（みつを）
ヒラギノ角ゴ Pro W3って、XPに標準で入っていないんだ。がびーん。
入っているものと思って見いました。
私は、ヒラギノ見たことないんじゃん。orz
かっこ悪い。(;´・ω・)(・ω・`;)ねー
すみません。タイトル入っていないときは、
「No title」とか表示するようにしないといけないよね。
んー、見出しタグにはしない方が良いですかね？
隙あらば、ブログや新しいサイトをご紹介させていただきます。
よろしくお願いしまっす。(oﾟωﾟo)
メイリオ＋ヒラギノ
「ほー、『ヒラギノ角ゴ Pro W3』というのか、すげー名前だなぁ、でもついに突き止めたぞ」と自分のブログに採用してみるも、「なんだ！ぜんぜん変わらんじゃないか！」
とイラついてるんか、参考として紹介されている、ナナメガキさんの記事に「メイリオ」がどーのと書いてあり、NTTと技術評論社のフォントをもう一度みると、両方に入ってた。「メイリオ」
そーか、こいつだったか！
でもMACでは違う風に見えてるんだろうか？？？
まぁ、いいや。
今回も、ありがとう。kumacrowさん。ほしいものが見つかった。
メイリオ
コメントありがとうございます。
清音さんが目を付けるくらいだから、
やはり、「メイリオ」は、注目株なのですねぇ。(・∀・)
んー見てみたいなぁ。何かおいしそうな名前だし。
スイーツとかにありそうだわ、
「メイリオ、2つください」みたいな。
Macは、Osakaが標準なのかしら。
「メイリオ」入れてみようかな。(oﾟωﾟo)
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/278-bd15bf10
すごいですね。 沢山調べられたんですね。 沢山お時間かかるでしょう？
お疲れ様でした。 FC2ブログも出てました(^^♪ 何故か嬉しい(^^)v
ハイパーさん『くるちい』って。 ムニューは、優しいの!?
いつも、楽しいです。