日本人が好きなフォントは?:CSS入門

ブログが作りたい!CSS入門 > 日本人が好きなフォントは?:CSS入門

日本人が好きなフォントは?:CSS入門

日本人が好きなフォントは?:CSS入門

CSS入門(14)

日本で愛されているフォント、いわゆるよく利用されているフォントを調べてみました。日本人が好きなフォントって、何なのかしら?

お話は、次の順番で進みます。


有名サイトで指定されているフォントは?

有名サイト、大手新聞社、IT系サイトなど、フォントにまで綿密に配慮していそうなサイトを調べてみました。

ちょっと、サンプルデータが少なく(16サイト)、探し当てることができなかったサイトもあり、十分とは言えませんが、よかったらご覧くださいませ。

1:第一候補が多いフォント

調査結果から書いていきます。まずは、第一候補に選ばれることが多いフォントです。「ヒラギノ角ゴ Pro W3」と「MS Pゴシック」の人気が高いようです。

16票のうち10票を、「ヒラギノ角ゴ Pro W3」と「MS Pゴシック」がもっているのだから、ツートップといったところでしょうか。

1位(5票)

ヒラギノ角ゴ Pro W3

MS Pゴシック

3位(2票)

Osaka

4位(1票)

arial

sans-serif

MS UI Gothic

verdana

そういえば以前、「"ヒラギノ角ゴ Pro W3"が読みやすく、人気がある」旨を、おそらく『プロとして恥ずかしくない~』本で読んだ記憶があります。

現状、安定した人気があると言えそうです。

2:登場回数の多いフォント

次は、必ずしも上位にくるわけではないかもしれないけれど、指定しておくサイトが多いフォントです。

つまり、各サイトで指定されているフォントを、加算集計してみました。

1位(14票)

sans-serif

2位(11票)

MS Pゴシック

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)検索エンジン、ポータル

Google

arial,sans-serif

Yahoo!

"Osaka", "MS Pゴシック", Arial, sans-serif

FC2

"MS Pゴシック", "Osaka"

goo

"Hiragino Kaku Gothic Pro",Osaka ,Arial, Helvetica, sans-serif

mixi

見付かりませんでした。

はてな

見付かりませんでした。

Allabout

見付かりませんでした。

(2)通信

NTT

"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, "MS Pゴシック", sans-serif

NTTdocomo

"MS Pゴシック", Osaka, Arial, Helvetica, sans-serif

*:NTTdocomoさんは、"MS Pゴシック"を、実際は"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF"と書いていました。

(3)IT情報

ITmedia

'MS UI Gothic',"MS Pゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Lucida Grande",sans-serif

ITpro

'MS Pゴシック', 'Osaka', sans-serif

CNET Japan

"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS Pゴシック", sans-serif(WinIE用は、"MS Pゴシック", sans-serif)

GIGAZINE

sans-serif, verdana, arial, helvetica

(4)物販・情報

Amazon

osaka,MS Pゴシック,arial,helvetica,sans-serif

価格.com

"MS Pゴシック",Osaka ,arial ,verdana ,sans-serif

楽天市場

あれ?CSSを使っていない?

(5)デザイン

CREAMU

"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica

DesignWalker

'verdana', 'trebuchet ms', sans-serif

(6)新聞社

日経新聞社

見付かりませんでした。

朝日新聞社

見付かりませんでした。

読売新聞社

見付かりませんでした。

(7)その他

SONY

"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "MS Pゴシック", sans-serif

技術評論社

"ヒラギノ角ゴ Pro W3", sans-serif(WinIE用は、"メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif、もしくは、"MS Pゴシック", sans-serif)

Wiki

見付かりませんでした。

ニコニコ動画

見付かりませんでした。

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』」で紹介されて知りました。


このブログのフォント

ちなみに、当ブログ(「ブログが作りたい!」)は、次のように指定していました。(順当過ぎるよ)

各ブラウザのことを考えると、「ヒラギノ角ゴ Pro W3」と「MS Pゴシック」は、次のように書いておいた方が良さそうです。

あるいは、「\30D2\30E9\30AE\30CE\20Pro\20W3」、「"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF"」でも良いのでしょうね。

特にこだわりのない人は、上述のコードを、コピーして使っていただくとよろしいかと思います。

前の記事へ
次の記事へ

次回予告

次回は、文字の大きさを変えてみようかと思います。


関連記事

CSSに関連する記事を、ご紹介します。

作成日:2008/04/21 更新日:2008/04/21

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

すごーい!

kumacrowさん。こんばんは。

すごいですね。 沢山調べられたんですね。 沢山お時間かかるでしょう?
お疲れ様でした。 FC2ブログも出てました(^^♪ 何故か嬉しい(^^)v
ハイパーさん『くるちい』って。 ムニューは、優しいの!?  
いつも、楽しいです。

ありがとうございます

tearful rinkoさん、こんばんは。
コメントありがとうございます。

沢山お時間かかっちゃいました。
もっと効率良くできるといいなぁ。(・∀・)フガー

FC2ブログも出てました???
よく分からないけれど、嬉しいのなら、良かった、良かった。

ハイパーさんも、殴られるよりは優しいかなと・・・

こんばんは!
すごーい!これはほんとすごい!
即効はてぶしてしまいました!
興奮!

フォントの指定、しない理由はなんだろう・・・
自分はフォントの指定を知らずに指定をしていなかった時期があるのですが、
そうすると、Firefoxとかだとちょっと違ったフォントになっていたけど
指定するようになってからそれもなくなりました。
作った人が自分みたいにフォント指定を知らない、とか・・・・は
さすがになかろう・・・

なんでだろう?

フォント指定のコピー、使わせていただきます^^
イエー うれしい
ところで、ヒラギノ角ゴ Pro W3ってwindowsXPに初めから入ってるのでしょうか?
自分のフォントみたけど、入ってにゃい・・・

再びすみません

すみません、前の書き込み、タイトル忘れましたorz
あと、最後の方で、自分のブログを出していただいて、恐縮してます、
ありがとうございます^^

不思議

ひろこさん、こんにちは。

コメントありがとうございます。
また、即行はてぶ、ありがとうございます。(・∀・)/39

単に探し当てられなかっただけかもしれませんけどもねー。
けっこう@importが繰り返されると、厳しい・・・。(´Д`;)
font-familyで指定している場合、fontで指定している場合など、
検索も十分でなかったかもしれません。

それでも、いくつかは指定していないサイトもあるのでしょうね。
なぜか?不思議???

知らないってことは・・・さすがにないよねぇ。
いくつも仕事をこなしているプロだもの。(みつを)

ヒラギノ角ゴ Pro W3って、XPに標準で入っていないんだ。がびーん。
入っているものと思って見いました。

私は、ヒラギノ見たことないんじゃん。orz

かっこ悪い。(;´・ω・)(・ω・`;)ねー

すみません。タイトル入っていないときは、
「No title」とか表示するようにしないといけないよね。
んー、見出しタグにはしない方が良いですかね?

隙あらば、ブログや新しいサイトをご紹介させていただきます。
よろしくお願いしまっす。(o゚ω゚o)

メイリオ+ヒラギノ

ぼくが最近、他のサイトで見かけ気になっていたフォントが、上のリストのNTTと技術評論社のサイトで表示されるフォントで、

「ほー、『ヒラギノ角ゴ Pro W3』というのか、すげー名前だなぁ、でもついに突き止めたぞ」と自分のブログに採用してみるも、「なんだ!ぜんぜん変わらんじゃないか!」

とイラついてるんか、参考として紹介されている、ナナメガキさんの記事に「メイリオ」がどーのと書いてあり、NTTと技術評論社のフォントをもう一度みると、両方に入ってた。「メイリオ」

そーか、こいつだったか!

でもMACでは違う風に見えてるんだろうか???

まぁ、いいや。

今回も、ありがとう。kumacrowさん。ほしいものが見つかった。

メイリオ

清音さん、こんにちは。
コメントありがとうございます。

清音さんが目を付けるくらいだから、
やはり、「メイリオ」は、注目株なのですねぇ。(・∀・)

んー見てみたいなぁ。何かおいしそうな名前だし。

スイーツとかにありそうだわ、
「メイリオ、2つください」みたいな。

Macは、Osakaが標準なのかしら。

「メイリオ」入れてみようかな。(o゚ω゚o)

フォント選びは悩みます

フォントには毎度悩まされるので参考になりました。
ありがとうございます。

#以下、蛇足ですが。
#「登場回数の多いフォント」の説明に「だんとつトップ」という記述がありますが、これは誤りです。
#「だんとつ」とは"断然トップ"の略であるため、「だんとつトップ」という表記は「トップ」を2度並べていることになります。

断然トップトップ

KOBA789さん、こんにちは!( ・∀・)ノぐもに
コメントありがとうございます。

なるほど、
「断然トップトップ」と書いていることになるのですね。

売れない漫才師のコンビ名みたい・・・。(´Д`;)

ご指摘ありがとうございます。
修正いたしました。(´▽`)♪

Pのお話

本文の終わりにあるCSSコード(便利ですぅー)
"MS Pゴシック"の’P'が半角になってます。
全角でなければ。。って思うのですけど。
私もよく解ってないので。(半角で大丈夫ならごめんなさい)
デバッグツールはフォント名の間違いには反応しないと思いますし。私はメモ帳のフォント選択ダイアログからコピペするようにしてますが。

いろんなサイトや本も読みましたが
ここのCSS入門!わかり易く、実践的だし、すごくいいです。
私の中でだんとつトップです!(だんとつトップでいいんじゃないかなって)HP作りにとっても参考になってます。

海賊女帝ボア・ハンカック

ヒロ子さん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

あー、半角になってましたねー。(´Д`;)あらー
これって半角だとダメなのかしら。

よく分かりませんが、
たいてい全角になっているみたいですね。一般的に。

間のスペースは、半角でいいんですよね?
・・・ということで、右倣えで直しました。

ご指摘ありがとうございました。 (´▽`)♪

フォント無指定

フォントって環境依存だから必要なければ指定しないのがユニバーサルデザインでは基本とされてます。
指定はフォント種別だけ(ゴシックや明朝など)というのも次に良いとされています。
要するにフォント指定しているページはWindowsや特定メーカのフォントに依存しているし、そうでない環境では良くない表示になるかもです。
『ヒラギノ角ゴ Pro W3』って、そんなフォント入れてるわけなかろうがって気もしますが。
※入れている人は多いですが、入れてない人はもっと多いのでは。
見つかりませんでしたのサイトがユニバーサルデザインという面では得点高そうです。

フォントについて

偏さん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

おそらく、学校の試験とかなら、それで正解なのだと思います。

ただ私は、可読性を極端に損じない範囲のフォントであれば、
指定するかしないかは、どちらでも良いと思います。

それは、ユニバーサルデザインというより、
趣味嗜好のレベルだと感じます。

ユーザにこだわりがあっていいように、
制作側にもこだわりがあってもいいように思います。

指定したフォントがユーザのパソコンになければ、
ユーザが設定しているフォントで表示されるだけですよね?

違ったかしら。


環境依存が問題になるというなら、よく知りませんが、
Webフォントとかにする方法もありますよね。

そこまでする意味があるのかは分かりませんけど。


また、公共的なサイトならば話しはちょっと違いますが、
ユニバーサルデザインの特点が高いことよりも、

よほどコンバージョンとして結果につながるかどうかを、
模索することに力を割くことの方が、より意味を感じます。

どうするのが良いかは、
そのサイトの方向性によって違うのではないでしょうか。

公共的なサイトでない場合は、
しっかりマーケティングして判断するのが良いように思います。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/278-bd15bf10

-

管理人の承認後に表示されます
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて