フォントとそのサイズがWebサイトのブランディングをどのように改善できるか

公開: 2017-04-19

すべてのビジネスオーナーは、明確で適切に設計され、よく管理されたWebサイトの重要性を知っています。この時代では、顧客に本当に印象的なWebサイトを提供しなかった場合、信頼を得るのにかかった時間よりもはるかに早く顧客を失うことになります。

残念ながら、ほとんどの起業家は努力を惜しまず、開発に長けたデザイナーを雇っています。彼らはしばしば1つの重要な機能である書体を見落としています。

使用するフォントスタイルから、各内部Webサイトページのテキストのサイズまで、これは、クライアントが滞在し、対話し、最終的に変換するかどうかを決定する要因の1つです。

真実は、フォントは実際にはそれほど影響力があるようには見えませんが、ビジネスを上下に動かす力を持っているということです。それは本当に簡単です。あなたのウェブサイトの訪問者があなたが公開したコンテンツを読みたがらないか読めない場合、あなたのメッセージは彼らに伝わらないので、あなたは変換することができません。いくつかの調査によると、Webサイトで使用されているフォントの種類は、読みやすさだけでなく、ムード、ユーザーエクスペリエンス、さらには記事の長さにも影響します。そのため、デザイナーは、コンテンツが豊富なWebサイトを作成することと、読者の気分を向上させる、楽しくインパクトのあるデザインのWebサイトを開発することの違いを理解することが不可欠です。

「タイプは美しい文字のグループであり、美しい文字のグループではありません。」
-マシューカーター

フォントについて考えるとき、最初に頭に浮かぶことは何ですか？あなたが彼らの重要性をまだ理解していないほとんどの人のようなら、あなたはおそらくCalibri、Comic Sans、Arial、TimesNewRomanなどの書体を考えているでしょう。ただし、知っておく必要があるのは、これらは単なる基本であるということです。 Webサイトに実装する必要のあるタイポグラフィについて話すときは、書体だけでなく、サイズ、色、カーニング、間隔も考慮する必要があります。

この記事では、フォントの重要な機能の影響について説明するだけでなく、自分のWebサイトのコンバージョン率を上げるために使用できる実用的な提案を提供することを目標としています。ですから、鉛筆とメモ帳を用意してください。これは、見逃したくない種類の情報だからです。

書体とその影響

フォントとタイポグラフィに関するいくつかの記事を読んだことがあれば、オンラインで公開する価値があると思われる書体がいくつかあることをご存知でしょう。ジョージアが最も多くの結果をもたらすことに同意する人もいれば、バスカヴィルが勝利の栄光を手に入れると考える人もいます。ただし、その話を始める前に、書体がサイトのブランディングに与える全体的な影響について説明しましょう。つまりね; 文字が近すぎたり、サイズが小さすぎたりしてコンテンツが読みづらい場合は、すぐに離れるか、さらに数秒間読み込もうとしますが、それでも難しいと感じた場合は、最終的に離れます。時間をかけて実際にコピー全体を読んだ非常に忠実な顧客がいる場合でも、彼らは時間がかかりすぎたことを覚えており、あなたはそれらを失うことになります。

Webサイトに選択する書体は、メッセージを読み、理解し、理解するプロセス全体を簡単にするため、非常に重要です。読者に合ったフォントを選択した場合、読者は、読むのにかかった時間ではなく、提供している情報に注意を向け続けます。

実用的なヒント：すべてのフォントがすべてのWebサイトで機能するわけではありません。フォントにはさまざまな個性があり、決定するフォントは、ビジネス、対応する顧客の種類、および表現したいメッセージに完全に依存します。最善の方法は、広範囲にわたって調査し、同じ業界の他の人が使用している書体を調べることです。さまざまなプラットフォームでいくつかのタイプを試してみて、正しい決定を下していることを確認してください。適切なフォントを選択するには時間がかかることを忘れないでください。ただし、コンバージョン率が上がるのを見ると、それだけの価値があります。

フォントサイズとその影響

フォントのサイズについて話すとき、あなたが持つべき主な懸念の1つは、読みやすさです。メッセージが確実に伝わるようにしたいので、読みやすさが非常に重要になります。フォントの選択が完璧でなくても、適切なサイズのサイズを使用すると、表示しているコンテンツを読むために少なくとも訪問者が目を凝らす必要がないため、節約できます。あなたが適切なフォントサイズを持っている場合、あなたの顧客はあなたのメッセージを読んだり、対話したり、さらには言葉を広めたりする可能性がはるかに高くなります。あなたがあなたの顧客とよりよくコミュニケーションをとることができるとき、あなたのブランディングは前向きに影響され、そしてこれはあなたの会社の評判を高めるでしょう。

実用的なヒント：表示するフォントを選択するサイズは、Webサイトのデザインコンテキストによって異なります。名刺には非常に小さいサイズが必要な場合がありますが、イベントポスターにははるかに大きいサイズが必要になります。ただし、特にWebサイトのデザインについて話しているため、モバイルデバイス用に公開するのか一般的な画面用に公開するのかを検討する必要があります。経験則として、専門家は、本文のコンテンツに10pxから14pxを使用し、見出しまたはタイトルに16pxから20pxを使用することを推奨しています。最良の結果を得るには、自分に合ったサイズの練習チェックを実行し、パフォーマンスが良くないと思われる場合はそれに応じて調整することができます。さらに、さまざまな画面サイズに対応している場合（必要な場合）、モバイルデバイスでサイズを縮小したときにフォントも適切に機能することを確認してください。

フォントの色とあなたのウェブサイト

可能な限り最善の方法で訪問者にメッセージを伝えたい場合は、単語の選択だけでなく、それがどのように表示されるかを考慮する必要があります。さて、フォントの色はそれほど大したことではないように見えるかもしれませんが、特にあなたが特に派手なウェブサイトを持っている場合、それは大きな影響を与えるものです。色彩心理学は研究の全領域であり、そこからかなり多くを学ぶことができます。ただし、特にフォントで色を実装する場合は、見た目がおかしくなるだけなので、やりすぎないように注意してください。あなたが選ぶ色はあなたのビジネスのコアバリューを高めるだけでなく、顧客がつながる根底にある個性を後押しするべきです。フォントに間違った色を選択することになった場合、それらはあなたとあなたのビジネスに悪影響を及ぼします。

ここで言及する価値のあるもう1つの機能は、コントラストです。テキストまたはページのコントラストは、背景とテキストの間に存在する暗さの違いです。緑の背景に赤のテキストを配置するなどの古い手法は使用したくありませんが、テキストと背景のコントラストが良好であることを確認して、読みやすさを向上させる必要があります。

実用的なヒント：まず、フォントの色を決定する前に、ブランドとそのロゴに統合する必要がある、またはすでに統合されている色とフォントについて慎重に検討する必要があります。たとえば、コカ・コーラについて考えるとき、おそらく非常に特徴的なカーリーフォントと赤い色を思い起こさせます。色を選ぶとき、専門家はあなたがあなたの家の部屋を着色するようにそれを考えることを勧めます。ブログを読んでいる間、訪問者に暖かく居心地の良い気分を味わってもらいたい場合は、鈍い赤とオレンジを使用してください。これらは感覚をリラックスさせて落ち着かせるためのものです。ただし、背景色によっては、ほとんどのコンテンツが黒で見栄えがよく読みやすいため、やりすぎないように注意してください。

見出しフォントと知っておくべきこと

コンテンツに使用する見出しは、実際の単語だけでなく、それがどのように表示されるかという点でも非常に重要です。いくつかの調査によると、キャッチーで注目を集める見出しを使用しない限り、訪問者は先に進んで、もう少し面白いものを探すことになります。人間がWebを読み取る方法には特定のパターンがあり、これにより、ほとんどのコンテンツが単純にスキャンされていることがわかります。したがって、見出しで訪問者の注意を引き付けていなければ、訪問者が読む可能性はさらに低くなります。ここで、見出しに使用するフォントと色の両方によって、訪問者が見出しを読みたいかどうかが決まることに注意してください。したがって、単に注目を集めるためにComic Sansを使い始めたくはありませんが、読みやすくする必要があります。

実用的なヒント：フォントをペアリングする場合（一方を見出しに使用し、もう一方をメインコンテンツに使用する）、実際に一緒に見栄えがすることを確認してください。フォントのほとんどの要素が一致していることを確認して、互いに大きく異なって見えないようにする必要があるため、ペアリングが難しい場合があります。このような場合、見出しのフォントは本文のテキストを補完する必要があります。一方、同じ書体を使用している場合は、さまざまなサイズと行間隔を試して、見出しを強調することができます。同じ書体は、読者に視覚的な調和を提供するだけでなく、ロードする必要のあるフォントの数を減らし、全体的なロード時間とパフォーマンスを向上させます。

線の長さとその重要性

ウェブサイトを作成しているほとんどの人は、使用されているテキストのフォント、サイズ、色、コントラストを考慮します。しかし、彼らが見逃しているのは線の長さです。行の長さは、全体的な読みやすさの増減に関与し、各水平線に存在する単語または文字の数を指します。読みやすさに影響を与えるのは、文の短さまたは長さです。選択したフォントによって線が長く表示される場合は、訪問者の目が長距離を移動する必要があり、多くの労力がかかるため、訪問者の読書を妨げることになります。一方、行が短すぎると、文章の流れが途切れ、訪問者は興味を失ってしまいます。

実用的なヒント： Usability Institute Baymardによって提案された1つの理論は、最適な読みやすさを提供するため、1行あたり50〜75文字（スペースを含む）を使用するフォントを選択する必要があるというものです。黄金比タイポグラフィ計算機を使用して、コンテンツの読み取りに使用されている画面に応じて、完全な行の長さを決定することもできます。

カーニングとそれが重要な理由

ウィキペディアによると、「カーニングは、プロポーショナルフォントの文字間の間隔を調整するプロセスであり、通常、視覚的に心地よい結果を実現します。」優れたフォントを使用している場合、それは適切にカーニングされ、文字の各ペア間のスペースは類似しています。 Photoshopなどのグラフィックプログラムで書体を設定しているデザイナーがいる場合、フォントとカーニングが完璧に見えるまで、文字間のスペースを変更して調整することができます。カーニングに焦点を当てないことは、プロの仕事をアマチュアやデザイナー志望者によって行われたものと区別する唯一の最大のことであることが多いため、コストがかかります。

実用的なヒント： Webサイトをプロフェッショナルに見せたい場合は、各文字の間にあるスペースの量を等しくする必要があります。書体をデザインする場合は、文字間に空間的な連続性があると読みやすさが向上するため、カーニングを統合することを忘れないでください。一方、既存のフォントを使用している場合は、これらすべてのフォントに間隔に関する情報が含まれているため、これについて心配する必要はありません。

結論

ウェブサイトのブランディングを改善し、より多くの顧客を呼び込みたいビジネスオーナーにとって、覚えておくべき重要な側面は、コピーを補完する書体を使用することです。あなたが正しいことをしているなら、それはあなたの読者の感情、気分、行動にも影響を及ぼします。これにより、彼らが忠実な顧客に転向する可能性が高くなります。フォント、そのサイズ、色などをテストする最良の方法の1つは、フォントをテスト実行して、結果が何をもたらすかを確認することです。また、このプロセス全体に時間をかけ、細心の注意を払ってください。そのために働く必要があります。

最後に、スティーブ・ジョブズからのこの感動的な引用を残します。スティーブ・ジョブズは、今日私たちがフォントに非常に注意を払っている理由を主に担当しています。

「私は、ハウツー（書道を学ぶ）を学ぶために書道のクラスを受講することにしました。私は、セリフとサンセリフの書体について、異なる文字の組み合わせの間のスペースを変えることについて、素晴らしいタイポグラフィを素晴らしいものにするものについて学びました。美しかった。歴史的。科学が決して捉えることができない方法で芸術的に微妙です。」
-スティーブ・ジョブズ