WordPressでサイトを運営していて、どのようなフォントを使えばよいのか迷ったことのある人も多いのではないでしょうか。サイトを運営するうえで、どのようなフォントを使用するかは、とても重要なことです。フォントが読みにくければユーザーがページを離脱する原因にもなりますし、女性らしさを伝えたいのに力強いフォントを使ったのでは、イメージにギャップを感じてしまうでしょう。この記事では、フォントを決める4つの基準とおすすめプラグインを紹介します。
目次
フォントが重要な理由
サイトの目的は、ユーザーに情報を伝え、こちらが期待するようなイメージを抱いてもらうことにあります。企業に対する親近感、商品への信頼など、期待どおりのイメージを持ってもらうことができれば、ブランディングや販売、集客に大きな効果を発揮します。見た目のイメージというと、どうしても画像を中心に考えがちですが、フォントから受ける印象も大きいのです。使用するフォントを変えることで、ユーザーが抱くイメージも大きく違ってきます。
たとえば、しなやかなイメージを伝えたいのであれば、それに合ったフォントを使用することで、メッセージが伝わる力は増幅されます。逆にイメージにそぐわないフォントを使ったのでは、メッセージはうまく伝わらなくなってしまうでしょう。読みやすいフォントを使用するのはもちろんですが、フォントを最適化すればユーザーに効果的にアピールできます。当然、コンバージョンにも大きく影響しますので、たかがフォントと思わずに慎重に選ぶことが大切です。
フォントはどのような印象を与える？
一般的に使う機会が多いフォントは、ゴシック体と明朝体でしょう。ゴシック体は、縦横の線の太さがほぼ均一なのが特徴で、文字のサイズが小さくなっても読みやすいというメリットがあります。ゴシック体は馴染みもあり、親近感や安定感、信頼感を感じるフォントです。同じゴシック体でも、文字の太さによって印象は違ってきます。太くなると男性的で力強いイメージになり、細くなると洗練された女性的なイメージになります。
明朝体は、縦の線に比べて横の線が細いのが特徴で、はねや払いなど動きがあるフォントです。明朝体は毛筆に通じるフォントなので、和の雰囲気や伝統を感じさせます。細い明朝体は上品さや高級感のあるイメージになり、太い明朝体は誠実さや硬めの印象を与えます。また、英字フォントが中心になりますが、文字を視覚化したインフォグラフィックを使うと個性的になり、より効果的にイメージを伝えることが可能です。ページタイトルや見出し、本文など、どのフォントを使えば、よりイメージをアピールできるのかを考えながら、使用するフォントを決めましょう。
フォントの種類
フォントには多くの種類があり、和文フォントだけでも1,000種類以上のフォントがあります。和文フォントは、大きく「明朝体」「ゴシック体」「特殊書体」の3つに分けられます。特殊書体のなかには、毛筆風の筆書体、手書き風書体などがあり、キャッチコピーなどで目にすることも多いでしょう。また、一口にゴシック体といっても、さまざまな種類があります。文字の線の端に飾りのある「セリフ系」、飾りのない「サンセリフ系」、角をラウンド処理した「丸ゴシック」などが代表的なものです。明朝体にも沢山の種類があり、Windowsでは「游明朝」、Macでは「ヒラギノ明朝」が一般的です。
筆書体の種類も多く、一般的な「楷書体」、はねや払いをはっきりさせた「教科書体」、線を続き書きにした「行書体」などが代表的なフォントとして挙げられます。この他にも、特殊書体の種類は多く、太くて軽快な「POP体」、女子中高生が手書きしたような「まる文字」、そのままロゴタイプに使える「ロゴ文字」などが人気です。フォントを入手する方法としては、有料のものを購入する、無料で公開されているものをダウンロードする、の2つの方法があります。無料フォントのなかには、商用利用を禁じているものもありますので、ダウンロードする際には、必ず利用規約を確認しましょう。
【基準】1.意思決定に影響する
どのようなフォントを使用するかで、それを読んだユーザーの印象は大きく変わります。別な言い方をすると、フォントはマインドコントロールパワーを持っていることになります。ニューヨーク・タイムズが4万5000人を対象にフォントが与える印象について調査を行ったところ、「Baskerville」というフォントが最も読者に信頼されやすいことがわかりました。逆に「Georgia」というフォントが、一番信頼を得にくいこともわかったのです。
たとえば、商品のメリットを訴求するための説明文を掲載する場合でも、どちらのフォントを使用するかで伝わり方は違ってくるでしょう。WordPressサイトを運営して利益につなげるためには、ユーザーの興味を惹きつけ、感情を動かす必要があります。フォントは、そのための重要なツールです。発信する情報に最適なフォントを選択すれば、ユーザーの共感や信頼を得ることができるでしょう。ユーザーは商品やサービスに対してポジティブなイメージを抱き、売上増や集客増の効果も期待できるのです。
【基準】2.ブランドイメージに直結する
どのようなサイトであっても、ユーザーに抱いてほしいブランドイメージがあるでしょう。フォントは、そのブランドイメージにも影響します。たとえば、信頼感や誠実さを伝えたいのに、ポップな印象を与えるフォントを使うようなことがあれば、正しいプランドイメージを伝えることができません。先進性を伝えたいのに、筆文字フォントを使ったら新しさは感じられないでしょう。これは極端な例ですが、これに近いことが起こりがちなのです。効果的にブランドイメージを伝えるためには、まず「誰に」「どのようなブランド価値を感じてもらうか」を明確にすることが大切です。
どのような人ならブランド価値を魅力的に感じてもらえるのかを具体的にイメージし、ターゲット像を絞り込むことがポイントになります。そのうえで、そのターゲットに届けたいイメージに沿ったフォントをいくつかピックアップしましょう。さらに、どのフォントがブランドイメージを表しているかを検討しながら、使用するフォントを絞り込んでいきます。自分が伝えたいブランドイメージに合ったフォントが決まったら、サイトタイトルやキャッチコピーにそのフォントを使うと、より効果的なブランディングが行えるようになります。
【基準】3.読者に与えたい感情
どのようなフォントを使用するかで、サイトを見たユーザーに与える感情も違ってきます。サイトを開いて最初に目にするもののなかには、文字が含まれます。サイトのタイトルやキャッチコピーには、必ず文字が入っているものです。その言葉の意味はもちろんですが、フォントからもユーザーはイメージを受け取り、何らかの感情を抱いています。たとえば、丸みのあるフォントは幸福感を抱きやすく、シャープなフォントは怒りを引き起こしやすいことが知られています。
太いフォントからは力強さを、シンプルなフォントからは信頼感を引き出しやすいのです。また、不規則な間隔で並ぶフォントは攻撃性を刺激しやすく、等間隔で並ぶフォントは退屈さを感じさせやすいこともわかっています。華美なフォントを使用すると、高級感や贅沢さを感じるので、宝石や香水を売るのに効果的だとも言われています。ユーザーにどのような感情を持ってほしいのかを明確にしたうえで、それに沿ったフォントを使用すると、ユーザーの感情を引き出し、メッセージをより効率的に伝えることができるのです。
【基準】4.読みやすさ
使用するフォントを決めるうえで何よりも重要になるのが、記事本文の読みやすさです。ユーザーが読みにくいフォントだと感じてしまえば、すぐに他のサイトに移ってしまうでしょう。逆に読みやすいフォントを使えば、ユーザーの満足度を高めるだけでなく、サイト内の回遊率を高めることができます。読みやすいページにするためには、まずきれいなフォントを選ぶことが大切です。かつてはパソコンの解像度が低かったこともあり、太めのMSゴシックなどがサイトには用いられていました。
しかし、直線的すぎたり、アンバランスな部分があったりと、決して美しいフォントとはいえませんでした。パソコンの性能が上がった現在では、よりきれいに見えるフォントが主流になっています。きれいに見せるためには、クリアタイプのフォントを使用するのもポイントです。クリアタイプのフォントとは、文字の輪郭をグレーの濃淡で表現するタイプのフォントです。クリアタイプでない一般的なフォントは、黒か白かで文字の輪郭を表現しています。そのため、文字のサイズによっては輪郭がガクガクして読みにくくなってしまうのです。
代表的なクリアタイプのフォントとしては、メイリオや游ゴシックなどが挙げられます。また、太字に対応したフォントを選ぶことも大切です。ページのなかで、特に目立たせたい箇所を太字にするのは、よくあるでしょう。もし太字に対応していないフォントを使うと、別の太いフォントを使わなければなりません。すると、前後との統一性がなくなり、印象も違ってしまいます。メイリオや游ゴシックなどであれば、太字にも対応しているので、安心して使用することができます。
サイトの2種類のフォント
サイトにフォントを表示させる方法は、大きく2つの種類にわけることができます。1つは、サイトを閲覧するユーザーのパソコンやスマートフォンにインストールされているフォントを表示させる方法です。もう1つの方法は、Webフォントと呼ばれます。Webフォントとは、サイトのあるサーバーやインターネット上で提供しているフォントを読み込んで表示させる方法です。たとえば、ページを制作する際に明朝体のフォントを指定しても、ユーザーのパソコンやスマートフォンに明朝体のフォントがインストールされていなければ、別の代用フォントで表示されます。これでは、制作した意図通りにページを表示させることができません。
また、OSによってインストールされているフォントが異なることもあって、デバイスによっては見え方が違ってしまうこともあります。このような問題を解決するために、生まれたのがWebフォントです。Webフォントは、インターネット上からフォントを読み込むため、OSやデバイスが違っても同じように表示されます。Webフォントの方法が生まれてまだ時間が経っていないこともあり、デバイス内のフォントを読み込んで表示させる方法がまだ一般的です。どちらの方法を利用しても問題ありませんが、フォントの見え方にこだわって統一した印象を与えたいのであれば、Webフォントを使って制作するのがよいでしょう。
Webフォントを使用する2つの方法
Webフォントを使用する方法としては、CSSを用いる方法とプラグインを利用する方法の2つがあります。CSSを用いる際には、CSSファイル内に下記のように記載して、フォントを読み込む指定をします。
@font-face {
font-family: 使いたいフォント名;
src: url(フォントファイルのある場所/フォント名.拡張子) format(“フォント形式”);
}
さらに、ページにフォント表示を反映させるためには、CSSファイル内に下記のコードを記載することが必要です。
body {
font-family: フォント名;
}
Webフォントは、サイトと同じサーバーにフォントをアップロードして指定できますし、Googleが提供している「Google Web Fonts」を利用することも可能です。Webフォントは、プラグイン「Custom Fonts」を使っても表示させることができます。Custom Fontsは、WordPressサイトにカスタムフォントファイル（woff2、woff、ttf、svg、eot）を簡単に埋め込むことができるのが特徴です。Custom Fontsを設定する手順は次のとおりです。Custom Fontsをインストールして有効化すると、WordPress管理画面の「外観」に「Custom Fonts」が追加されます。
これをクリックするとフォントを追加する画面が開きますので、使用したいフォントを指定してアップロードする手順です。ブラウザの種類によっては、表示できるフォント形式が異なります。ブラウザの互換性を高めるためにも、できるだけ多くの形式でフォントファイルをアップロードするのがポイントです。日本語は英語と比べて文字の数が多いので、Webフォントを使うと読み込むのに時間がかかることがあります。そのため、日本語のWebフォントを使用する際は、サイトが重くならないか、細心の注意を払うことが大切です。
まとめ
どのようなフォントを使用するかで、サイトを閲覧したユーザーが抱くイメージは違ってきます。ターゲットにどのようなイメージを抱いてほしいのかを明確にしたうえで、使用するフォントを選択しましょう。サイトのイメージが統一され、ブランドイメージを効果的にアピールできるようになれば、コンバージョンアップも期待できます。この記事でも紹介したように、プラグインを使って簡単に機能拡張できるのもWordPressの魅力です。
コメントを残す