メニュー
閉じる
サイトブログの文字(font)の大きさと書体を1クリックで調べる方法！Chrome拡張機能「WhatFont」が便利すぎる！
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/afi-takky/netbiz-world.com/public_html/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
人気のあるブロガーさんのブログや、おしゃれなサイトのデザインを見ていると、
『お、これ見やすいなー！！』
『ここで使ってるフォント、気になるなー。なんのフォントかなー？』
って気になることありますよね。
それを１クリックでカンタンに調べられるツールが、
Google Chrome 拡張機能「WhatFont」なんです。
▶︎Font Family：フォント書体の種類
▶︎Font Size：文字のサイズ
▶︎Line height：行間のサイズ（文字と文字の間隔）
▶︎Font Color：使用している色のwebカラーコード
が１クリックで分かっちゃいます！！
便利すぎて、色々なサイトに使われてるフォントサイズも調査しちゃいました♪
「WhatFont」のインストール手順と、
人気のあるサイトやブログによく使われる文字フォントのサイズは、
いったい【◯px】が多かったのか？？
を解説していきます。
Contents
Chrome拡張機能「WhatFont」のインストール方法
Google Chrome ブラウザ右上の拡張機能ボタンをクリックし、
メニューバー「その他のツール」→「機能拡張」をクリックする。
ページの下部にある「他の拡張機能を見る」をクリック
Chrome ウェブストア画面が出るので、
左上の【機能拡張】をクリックしてから、
検索窓に「whatfont」と入れてリターンキーを押す。
検索結果が並ぶので、その中から、画像と同じマークの「whatfont」を見つける。
「WhatFont」のページが出るので、右上にある青色の「＋ 無料」ボタンをクリックする。
「WhatFont」を追加しますか？と聞かれるので「追加」ボタンを押す。
ボタンが緑色になり「Chromeに追加済み」となれば、インストール終了。
Google Chrome ブラウザの右上にある、機能拡張ボタンが並んでるところに、
画像と同じマークが出ていれば、インストール成功です。
Chrome拡張機能「WhatFont」の使い方
Chrome拡張機能「WhatFont」の使い方をわかりやすく説明していきます。
「WhatFont」を起動する前です。
このボタンを押すと・・・
その下に「Exit WhatFont」という黒いボタンが出ます。
この黒いボタンが出ている間は、拡張機能「WhatFont」が起動しています。
調べたい文字にカーソルを重ねるだけで、そのサイトやブログで使われている
フォントスタイル（書体）の名前が黒ボタンで出てきます。
調べたい文字にカーソルを合わせてクリックすると、そのフォントの詳細データが黒い窓で出てきます。
詳細データの見方
▶︎Font Family：フォント書体の種類
▶︎Font Size：文字のサイズ
▶︎Line height：行間のサイズ（文字と文字の間隔）
▶︎Font Color：使用している色のwebカラーコード
ほんまに１クリックでカンタンに調べられるでしょ♪
終了する方法は、
・escキーを押す
・黒窓の右上のXを押す
・「WhatFont」アイコンを押す
だけです。
どんどん活用していってください。
( ´ ▽ ` )ﾉ
読みやすいブログは文字フォントへの気配りから
ブログやサイトは色々な要素が組み合わさって出来ているのですが、
作っていく上で一番意識すべきところは、
ユーザビリティ（見やすさ、使いやすさ）です。
サイトやブログが【読まれる媒体】なので、
・雰囲気を決めるデザイン
・おしゃれなフォント書体
・イメージの伝わるイラストや画像
も大事なのですが、
フォントの【大きさ（サイズ）】と【行間】がいちばん大事です。
自分のサイトやブログを作った後、読み直したりしていると、
『ん～、見にくいかな～？』
って思ったことありますか？
この時に、フォントを変えてしまうよりも、
文字サイズや行間を変えてしまう方が良いんです。
私が気に入っているサイトや人気ブログを見ていると、
記事がほんとうに読みやすいんですよ。
それらのサイトやブログに共通しているのが、
【文字の大きさと行間に最大限の気配りが行き届いている】
ことなんです。
役立つ情報を発信してくれるだけでなく、
見に来てくれるファンが負担なく読めるように、
さりげない気遣いをしているって、素敵ですよねー♪
ファンが多いのも納得です♪
( ´ ▽ ` )ﾉ
ベストなフォントサイズと行間のpxは？人気サイトの文字サイズと行間を大暴露！
じゃあ、
「ベストなフォントサイズと行間のpxはなんぼなんですか！？」
と聞かれそうなので、先に結論から。
【明確は答えはない。】
です。（笑）
例えば、Yahoo!みたいなニュースポータルサイトだと、
１画面に詰め込む情報量を多くしないとだめなので、
必然的に文字が小さくなっちゃうんですね。
Yahoo!（標準）
▶︎Font Size：12px・15px
▶︎Line height：18px・22px
＜左：記事・右：見出し＞
Yahoo!（ニュースサイト）
▶︎Font Size：15px・22px
▶︎Line height：24px・28px
＜左：記事・右：見出し＞
人気ブロガーさんのサイトを見てみると、
ブロガーAさん
▶︎Font Size：17px・24px
▶︎Line height：26px・24px
＜左：記事・右：見出し＞
ブロガーBさん
▶︎Font Size：16px・19px
▶︎Line height：28px・30px
＜左：記事・右：見出し＞
ブロガーCさん
▶︎Font Size：15px・26px
▶︎Line height：21px・28px
＜左：記事・右：見出し＞
ブロガーDさん
▶︎Font Size：15px・27px
▶︎Line height：30px・48px
＜左：記事・右：見出し＞
ブロガーEさん
▶︎Font Size：16px・34px
▶︎Line height：28px・48px
＜左：記事・右：見出し＞
ちなみに、このサイトの初期設定は、、、
※Macでも使える『エッジプラス１テンプレート・ブログタイプ』初期設定
▶︎Font Size：13px・16px
▶︎Line height：16px・19px
＜左：記事・右：見出し＞
で文字が小さくて見にくいなーという指摘があったので、
気に入ったブロガーさんのサイトの平均px値と比較しながら、
しっくりくるフォントサイズと文字行間をいろいろ設定してみました。
変更後（現在の設定）
▶︎Font Size：17px・24px
▶︎Line height：24px・24px
＜左：記事・右：見出し＞
見やすくなったので、しばらくはこの設定でやってみます。
テンプレートが変わったり、コンテンツ量やサイトコンセプトが変わったら、
その都度、サイトの雰囲気に合わせてサイズを変更していけば良いだけです。
もし初めてサイトやブログを構築して、
文字フォントの大きさなどで迷われているなら、
僕のこの設定と同じ数字でとりあえず試してみてください♪
( ´ ▽ ` )ﾉ
最後に
最近は日本語のサイトやブログでも、
魅力的なWEBフォントをつかっているテキストが増えているし、
今後もいろいろなスタイルの文字フォントが増えてきます。
サイトを見ていて『気になる！』フォントやサイト構成があれば、
設定しているフォントサイズや行間やカラーなどを知りたいというときのためにも、
「WhatFont」は絶対に入れておいたほうがいい拡張機能です！
色々なサイトやブログを研究して、
あなたらしい見やすいサイトやブログ作りに役立ててくださいね☆
( ´ ▽ ` )ﾉ