about

sogo  
fukidasi

  social

Count per Day

  • 1482現在の記事:
  • 436今日の閲覧数:
  • 3現在オンライン中の人数:

日本語フォントを上手く使いこなす事こそが直帰率低下とPV向上につながる



いろいろなWebサイトを覗いてみるとさまざまなフォントが使われていますが、読みやすいフォントもあれば意味のわからないフォントまでさまざまです。そこで、今回はユーザー視点から見たフォントについて考えてみました。


フォントの基本

見た目重視か、読みやすさ重視か

高齢者やPC初心者にとって「英語」は拒否反応を示す場合が多い

使う場所によってフォントを変えてみるのも有効

マウスオーバーを上手く利用する

私がよく使う、読みやすいと思うフォントファミリー

一般的に言われる読みづらいフォントとは?

CSSを駆使し、さらに読みやすいフォントに仕上げる



フォントの基本


フォント(font)にはそれぞれ固有の属性があり、大まかに挙げると以下のようになります。

● family …… フォントの種類を指定できます。
● size …… フォントのサイズを指定できます。
● style …… 標準(normal)、イタリック体(italic)、斜体(oblique)を指定できます。

それぞれの説明は、とてもここでは書ききれないくらい長くなってしまいますので省略しますが、今回はこの上記三つの属性について注目してみました。


これらの属性は、数値や種類を変える事によってさまざまな形で表現する事ができますが、ここで忘れてはならないのが、サイトを見る側からすれば、Webサイト製作者の思い通りには見る事ができないという事です。

例えば、font-familyに関して言えば、Webサイト製作者が「ヒラギノ角ゴ」が好きだからといって、最優先で指定をしてもWindowsユーザーでは表現されないのです。人気のあるfont-familyですが、MacユーザーかWindowsユーザーの中でも任意でこのfontをPC内に導入している人しか見る事が出来ません。もちろんこれは「ヒラギノ角ゴ」に限った事ではなく、いろいろなフォントでOSによっては見れないという物が存在します。


また、日本語を手書き風に表現したフォントも数多く公開、配布されていますが、これらも同じで画像として表示するのは問題ありませんが、テキストとして使いますと上記と同様、ほんのごく一部の同じフォントを導入している人しか見る事ができないのです。

最近では、これらの問題を解消するかのようにWebフォントという物も多く公開されており、Webフォントでしたら全てのユーザーに対し同じ表示が可能となりますが、表示速度やSEOの観点から考えても私的には完全に賛同ができませんので、まだ使用はしておりません。

これらfont-familyに関しては、意外と知らない方も多いようですので、いちど、専門に説明しているサイト等を参考にされると宜しいかと思います。



見た目重視か、読みやすさ重視か


極論となってしまいますが、Web上で表現するフォントは、どちらかの選択肢になると思います。


見た目重視のフォント

英語フォントを多用しているサイト/ブログもかなり多く見た目的にはかっこいいですね….
特にWordPressなどのような海外製のサービスを利用して構築されたサイトには、特に英語フォントで表現する事が多いようにも思います。確かに見た目はいいのですが、なんでもかんでも英語というのは疑念を抱きます。

たとえば、Webデザインに関係したコンテンツでまとまられたサイトには良い表現方法かとも思います。そもそもWebデザインをしていく上での専門用語は基本的に英語になりますので、英語を多用するほうが正当にあたるのかもしれません。

しかし、一般的な日記ブログなどで英語を多用された場合はどうでしょう?わたしが思うに、そのようなブログは、単に英語で表示されているWeb関連のサイトを見て「かっこいい!」と思ったから真似をしているだけの類ではないでしょうか?そうでなければ、日本人の管理者が日本人ユーザー向けに、日本の無料ブログサービスを利用している意義はなんだろうか?とも思ってしまうのです。

私的な結論をいうと、見た目重視で英語フォントを多く取り入れているWeb関連のサイトには、それなりの意味があるわけで、すべてのサイト/ブログにおいて英語を多用することで見た目がかっこよくなるわけではないという事です。


読みやすさ重視のフォント

日本人が日本人ユーザーの為に情報を伝達していくサイトである以上、端的に言えば「日本語フォント」がユーザー視点から見た場合に一番読みやすいということになると思いますが、なんでもかんでも「日本語フォント」が良いというつもりはありません、前項で説明したようにWeb関連の専門的な情報でしたら逆に英語フォントを使わなくては、まともに伝わることも伝わらなくなってしまう場合も多いと思うのです。

つまり、日本語だからすべてが読みやすいかというと実際にはそうでもなく、読みやすいフォントとはあくまでもサイトコンテンツによって大きく異なるという事が言えるのではないかと思います。



高齢者やPC初心者にとって「英語」は拒否反応を示す場合が多い



すべてがそうとは言い切れませんが、少なくとも私の母親は「英語」で書かれている部分を絶対にクリックしませんし、必ずスルーしているようです。自論として「危険を回避するには危険と思われるところに立ち入らぬ事」というのが私の母のポリシーのようで、このような変な?考え方を持っている初心者、高齢者の方はけっこう多いというのが現実のようです。





これは、PCの操作を教える側にも問題があって、私自身がPC初心者の頃は今のように強固なセキュリティが整備されていなかった事もあって、教えられる立場だった私は、よく「海外のサイトは危険」という事を脳裏に植え付けられたものです。

そのような事が影響しているのか、現在、母親にPCの操作を教える場合でも、飲み込みの悪い母親にはつい、「自分がわからないと思ったサイトには入らないように……」と、本当は教えるのが面倒だったりして、そういう括りで片付けてしまう場合も多いのです。つまり、高齢者、初心者で「英語」は危険と思ってしまうのも、教える側にも責任の一旦はあるという事になると思います。

そこで、初心者や高齢の方にも安心してサイトを訪問してもらえるように考えてみました。



使う場所によってフォントを変えてみるのも有効


使う場所によってフォントのサイズを変える事はあたりまえでもあり、皆さんそうされている事と思います。まさか見出しのh1と記事コンテンツが同じsizeなんて事は有り得ないと思いますし、仮に同じだったとしたら大なり小なり非常に読みづらいサイトになってしまうと思います。

私の書いている当ブログを例に挙げてみますと、以前はメニューやナビ、見出しに至るまで「英語フォント」を多用していました。しかし、当ブログの記事内容がつまらない事も相まってか、訪問者数の割りにページビューが少なかったのです、つまり直帰率が大きかったという事です。

ブログ記事を真剣に書いている者として、直帰率が大きいという事は、ブログ記事の内容がつまらない、もう読みたくないというバロメータにもなりますので、これは悲しい事でもあります。


そもそも記事の構成が下手な私が、如何にサイトに留まってもらえるようにと考えたのが「内部リンク」の充実でした。トップページに書かれた記事がたとえ参考にならなかったとしても「こっちにはもっと参考になる記事が書いてあるよ」なんて声を出すわけにもいきませんので、それを少しでも多くわかってもらう為には「内部リンク」が重要であり、その内部リンクの場所を示す物が「メニュー」なり「ナビ」なのです。

しかし、いくら内部リンクを付けたメニューやナビを置いたとしても、それが「英語」だったら…….

という事で、誰でもわかるようにメニュー、ナビ部分は大きめな日本語フォントを使ってみました。

すると……

たまたまなのかもしれませんが、ここのところページビュー数が増え、直帰率が半分以下に下がってきているのです。

もしかしたら、せっかくリンクで誘導しても中身がつまらなくガッカリした方も多いのかもしれませんが、メニューやナビのフォントをわかり易く大きめの「日本語フォント」にしてみるというのは効果があるなぁというのは実感しました。


Google Analyticsで新しく導入された「ページ解析」を見てみれば、どの部分がどの割合でクリックされているかが一目瞭然ですので、チェックしてみる事をお勧めします。





マウスオーバーを上手く利用する


当ブログを見てもらえばわかると思いますが、いろいろな所にマウスオーバーのアクションを多用しています。これはそもそも、ユーザーに意外性や面白さを味わってもらうために、jQuery等でいろいろな仕掛けをしているのですが、見た目だけではなくユーザー視点での読みやすさという点でも一応は考えているつもりです。

ほんの一例ですが、トップにあるナビメニューボタンを挙げてみますと、

トップページ | コンタクトフォーム | サイトマップ と、あえて日本語にしてあります。
しかし、いくら日本語でも本当にすべての方に意味が通じているでしょうか?

そこで、マウスを乗せるとさらに噛み砕いてわかり易く表示させるようにしているつもりです。

● コンタクトフォーム → お問い合わせ、メール
● サイトマップ → タイトル一覧

contact sitemap フォローする

というふうに、誰でもわかるようにアクションを付けてみました。

さらに、サイドカラムにあるメニューは、あえて大き目の日本語でかつ、大胆なカラーで目立つようにしています。でも、通常では中身が見えないのですが、これにマウスをあわせる事で一つの仕掛けを作り、さらにクリックする事でアコーディオンのように伸び縮みさせるという意外性と楽しさという点も加味しているつもりです。

他にも多数の仕掛けがありますが、このような表示方法がすべて良いかというと、あくまでも私の自己満足という域なのかもしれませんが、私がこのように見やすさ+ユーモアのある表示方法を用いているサイトに遭遇した場合は、「他にもなにかあるんじゃないか?」「隠れてるんじゃないか?」と、余計にサイトの隅まで見たくなるのです。

これらはあくまで、私の感覚ですが、このような表現方法もユーザーを楽しませる、興味を持ってもらうという意味では有効な手段ではないかと考えております。



私がよく使う、読みやすいと思うフォントファミリー


当ブログでは、基本「gulim」と「Verdana」というfont-familyをよく使いますが、理由として、


「gulim」 (基本的に韓国語フォントとして作られたようです)



○ gulimのここが良い

1. Windows Vista以降のPCに標準装備されており、ほとんどのPCで表示される。
(XPには標準ではないようですがフリーで配布されています)

2. 明朝体のような読みやすい日本語がスッキリとして表現される。
3. あまり利用しているサイトが多くないようで、個性が出せる。
4. 文字間が適度に保たれ、とても読みやすい(個人主観)

△ gulimのここが駄目

1. 韓国語が基本となっている為、漢字によってはまれに変な表示になるものがある。


「Verdana」



○ Verdanaのここが良い

1. XP以降のWindows及びMacに標準装備の為、ほぼ全てのPCで表示される。

2. 適度な丸みがあって、可愛らしさと読みやすさを兼ね備えている(個人主観)

△ Verdanaのここが駄目

1. 日本語で表示した場合、フォントサイズを小さくすると横間隔が小さくなる。
(これは後にCSSで調整しますので以降で説明します)

という感じで、私は見出しやメニューに「gulim」、記事コンテンツ部分に「Verdana」というふうに使い分けています。
私個人的には気に入っているフォントなのですが、それぞれ一長一短がありますので、CSSを使い克服しています。



一般的に言われる読みづらいフォントとは?


ユーザー視点から見て、逆に「読みづらいフォント」の代表例として、

フォントサイズが小さい(記事部分が10px以下とか酷いのになると8pxとか)




フォントスタイルが斜体(せめて記事部分は標準normalを使いましょ)




背景が黒(#000)に対しフォントが真っ白(#fff) 目が痛くなります。




等々、いろいろありますが、その中でフォントサイズを取り上げてみますと、これはユーザーの使うPCの解像度や液晶サイズによっても表示されるサイズが大きく異なりますが、一般的に多くつかわれている横1200~1600pxの解像度PCの場合ですと、最低でも12px以上のフォントにしておかないと、とても小さくて見辛くなってしまいます。
もしも、サイト製作者のPCが1024pxとか古い800pxとかの低解像度だった場合は、一般的なサイズのPCで見直して調整する必要があると思います。

14インチ液晶、1024ドットの古いPCで調度良いと思っても、最新のPCでは小さすぎるのです。



CSSを駆使し、さらに読みやすいフォントに仕上げる


先にも書きましたように、当ブログでは記事コンテンツ部分に「Verdana」を使い14pxで表示させているのですが、どうしても文字の横間隔が短くなってしまい読みづらさが出てしまいますのでCSSで編集して工夫しています。

フォントの横間隔をCSSで調整する



letter-spacing: 1px;/* 文字間隔を少し広くする */

上の画像と見比べてみればわかると思いますが、ほんの1pxを広げる指定をしただけで見た目はこれだけ変わるのです(もちろん1pxではなく2px等任意の数値でもOKです)






フォントの縦間隔(行間)をCSSで調整する

line-height:155%;/* 行間を少し広くする */

当ブログでは行間を155%で指定しておりますが、この数値を簡単に説明すると、

100% → フォントとフォントがくっつき、行の隙間が無くなります。




200% → フォントサイズを14pxで指定した場合ですと、同じ14pxの行間が出来るという事で、line-height:28pxというのと同じ意味になります。




155% → フォントサイズを14pxで指定した場合ですと、約8pxの行間が出来るという事で、line-height:22pxというのとほぼ同じ意味になります。




他にもいろいろな調整方法はありますが、気に入ったfontであっても文字間に違和感がある場合には、このようにCSSを触ればそれなりに読みやすいように調整は可能ですので、いろいろ試してみるのも有りでしょう….



個人的にまだまだ勉強不足


いろいろと書いてみましたが、正直、わたし自身がまだまだ未熟な部分があって、頭ではわかっていてもなかなか実践では途方に暮れるという毎日です。これからもっともっと勉強をして、よりわかり易く、求められている情報を適格に記事にしていける日が早く来る事を目標に邁進していくつもりです。

そういう面でも、私がいろいろと参考にしているサイト様で、技術的な事はもちろん、メンタル的な部分までわかり易く記事にされていて、わたしが勝手にお世話になっているサイト様です。


 Webクリエイターボックス さま
 Webデザインレシピ さま
 Parkn’ Park さま
 ナチュラルクリエーション(あなたらしいデザインを表現する方法) さま



最後に、ユーザーから絶大な支持を得て、多くのブックマークをされているサイトは、より日本語フォントを多く使っているという事を付け加えておきます。


デザインに効く! 標準 フリーフォントスーパーセレクション (IJデジタルBOOK)


Pocket

  • Mろぐ, 日本語フォントを上手く使いこなす事こそが直帰率低下とPV向上につながる – http://tinyurl.com/3gaxl7w

  • なるほど

  • 日本語フォントを上手く使いこなす事こそが直帰率低下とPV向上につながる | Mlog(エムログ): http://t.co/DEZGXLQ0 via @AddThis

Trackback URL


この記事を共有していただければ嬉しく思います。コメントもお待ちしておりますのでお気軽にどうぞ!
※ドメインを移行しましたら共有数が0にリセットされてしまいましたので、ご協力お願い致します。