ScalenutがG2 Fall Leader 2022 - Content Creation部門に

公開: 2022-11-29

第一印象を与えるチャンスは二度とありません。

これは、私たちの生活のほぼすべての面で人々が繰り返し、申請しているのを聞いたことがあります。これには、当社の Web サイトも含まれます。

SaaS ブランドであろうと E コマースブランドであろうと関係ありませんが、訪問者が最初に Web サイトを訪れたときに最初に気付くのは、レイアウトとフォントです。そのため、ウェブサイトをデザインする際に的を射ることが重要になります。

設計は、相互に連携して機能する一連の側面を包含するため、集中的で面倒な作業です。

Google フォントを好む人もいれば、タイポグラフィや筆記体を選ぶ人もいます。しかし、それが機能するかどうかは、設計プロセスに含まれる他の要因によって異なります。ナビゲーション、フォント、レイアウト、カラースキーマ、読みやすさなどがあります。

フォントに関しては、それらは Web ページに遍在しています。それらは、ヘッダー、本文、その他あらゆる場所で見つかります。したがって、適切なフォントを選択することで、Web サイト全体の見通しを活用できます。

今日は、Web サイトのフォントを選択する方法について説明します。

ウェブサイトに最適なフォントを選択することの重要性

あなたのフォントはあなたのブランドアンバサダーです

訪問者があなたのウェブサイトとフォントの選択について肯定的な意見を持っていることを確認するのに 0.5 秒しかありません。その大部分、94% は設計要素に依存しています。

各フォントには固有の特性セットがあることを理解することが不可欠です。そのため、訪問者に自分の専門知識を納得させたい場合は、Web サイトのデザイン言語とフォントの選択を通じてそれを行うことが不可欠になります。

全体的なユーザーエクスペリエンスを向上させるのに役立ちます

Web サイトの構築に時間とリソースを費やすのはなぜですか? お客様に快適に使っていただきたいからです。

申し分のないユーザーエクスペリエンスを構築するには、細部にまで気を配る必要があります。また、訪問者の立場に立って、特定のデザインの選択が彼らに適しているかどうかを判断することも意味します.

Web デザインに適したフォントを選択することは、すべてにおいて不可欠です。より多くの訪問者を生み出し、コンバージョンを高め、全体的な満足度を向上させるのに役立ちます.

Webページのフォント分類

‍

すべてのフォントスタイルには独自のストーリーと特徴があることは既に述べました。つまり、それらをいくつかのグループに分類できます。また、多数の有料および無料のフォントから選択して Web ページに追加することもできます。

Web サイトのフォントを次のカテゴリに分類できます。

セリフ

例 – Times New Roman、Garamond、MS Serif、Merriweather、Abril Fatface、Playfair Display、Georgia

Serif フォントは、人類が知っている最も古いフォントタイプの 1 つです。ルネサンス風のフォントは、昔は読みやすさで有名でした。

現代のセリフフォントは、デジタル化されていますが、同じ遺産を受け継いでいます。横線または斜め線の終点に注目することで、それらを認識することができます。デザイン言語に優雅さを加え、本や公式のウェブサイトに最適です。

ほとんどのデザイナーは、これらのフォントを追加のコンテンツ要素や Web ページに表示する要素に利用しています。そのため、見出し、サブタイトル、ロゴ、および同様のテキストとしてそれらを見つける可能性が高くなります.

サンセリフ

例 – Arial、Alegreya、Open Sans、Montserrat、Comic Sans、Verdana、Oswald、Roboto、Lato、Helvetica

サンセリフ書体は、セリフ体の現代版です。名前が示すように、これらはセリフなしで提供され、ミニマルな雰囲気を高めています。最初の数日間、コンピューターのディスプレイは、セリフを元の形で表示できるほど高度ではありませんでした。そのため、デザイナーは、デジタルで読むのにより便利に表示できるフォントを発見しました。

また、サンセリフは読者を飽きさせず、より幅広い読者に対応することでデザイナーに柔軟性を提供します. これらのフォントの最も一般的なユーザーは、若い世代を対象としており、そのアプローチにおいて現代的でプロフェッショナルであると認識されたいと考えています.

Windows オペレーティングシステムの既定のフォントである Segoe UI は、サンセリフフォントスタイルです。 Base 9 & 12 は、Adobe で最もよく見かけるフォントタイプの 1 つで、Sans-serif カテゴリに属します。 Apple プラットフォームで最も人気のある書体の 1 つである SF Pro も、このカテゴリに属します。

スラブセリフ

例 - Sentinel、Clarendon、Adelle、Arvo

セリフフォントの一種で、エジプトフォントとしてスラブセリフとも呼ばれます。これらは、従来のセリフよりもコントラスト比が低い、ブロック状で頑丈なフォントスタイルです。

選択したフォントスタイルに応じて、昔ながらのレトロなものからより現代的なものまでさまざまです。通常、スラブセリフは表示テキストの一部として使用されますが、これらは本文テキストの設定にも使用できます。

脚本

例 –アリゾニア、タンジェリン、グレートバイブス

名前が示すように、スクリプトフォントは人間の手書きに最も近いものです。それらは装飾的であり、Web サイトの見出し、ロゴ、および同様の短いフレーズを飾ることがよくあります。

また、これらは非公式と見なすことができます。スクリプトフォントに関する最もエキサイティングな事実は、その高い感情的なチャージです。これらは（ほとんどの場合、特定の）反応を呼び起こし、訪問者から多くの注目を集めることができます.

それらは複雑であるため、使用が制限されています。ただし、適切に設計された Web サイトのほとんどは、全体的な雰囲気を高めるためにそれらを使用しています。

装飾的

例 – Helios、Casandra、Cherie Bomb、Countryside

表示フォントとも呼ばれる装飾フォントは、必ずしも共通の特性を共有していない多様なフォントを指します。それらを識別する唯一の一般的な方法は、精巧な形状と高い装飾に注目することです。

これらは 19 世紀に人気を博し、それ以来、Web デザインや広告目的で常に使用されてきました。

さまざまな状況に溶け込むことができる他のフォントタイプとは異なり、装飾フォントには制限があります。つまり、それぞれが特定の感情 (幸福、恐怖、またはその他) を発します。表現力豊かでわかりやすいオリジナルフォントです。

これらはヘッダーでのみ使用できる太字のフォントであり、Web サイトの本文には使用しないことをお勧めします。ウェブデザインに最小限の方法でそれらを吸収することで、ウェブサイトが目立ち、訪問者に永続的な印象を与えることができます.

書体とフォントの違い

一般に、書体とフォントは同じ意味を持つと考えられていますが、これらは同義語ではありません。前者は共通の特性と機能を持つフォントのファミリーを指し、後者は個々のフォントを指します。

たとえば、 Arial は書体で、16pt Arial Bold はフォントです。

Web サイトのデフォルトフォントを選択する際の注意事項

世の中には申し分のない有料および無料のフォントがたくさんあることは誰もが知っています。しかし、ウェブサイトをデザインしている間は、他にも多くのことが行われており、気に入ったものを 1 つ選ぶことはできません。 Web サイトに最適なフォントを選択することは総合的な作業であり、他の要素を徹底的に調査して理解する必要があります。

Web サイトに最適なフォントを選択する際に考慮すべき点は次のとおりです。

基本を正しく理解する

Web サイトに適したフォントを探す前に、関連する他の要素を分類する必要があります。これらには以下が含まれます。

ターゲットオーディエンスを理解する
ウェブサイトの目的
ブランドの存在理由
それがもたらす個性

Amazon のようなブランドは、ホラーフォントを使用しません (ハロウィーンなどの特定の機会を除きます)。使用するフォントの種類は、主にターゲットユーザーと生成したい感情によって異なります。

たとえば、サンセリフフォントはミニマリズムとシンプルさを表します。それらはまた、伝統的な価値観と柔軟性へのあなたの傾向をもたらします。セリフ書体には、正式な表現を表す装飾的なストロークがあります。

選択がデザインの目的と一致していることを確認してください

すべての背後には目的があり、ウェブサイトのデザインにも目的があります。どちらを選択するかは、最終的には、ターゲットユーザーと、Web サイトで呼び起こしたい全体的なムードによって異なります。また、いくつかのデザイン要素は、Web ページの全体的なプレゼンテーションにおいて重要な役割を果たします。

だからここにあなたが心に留めておく必要がある要素があります -

カーニング、リーディング、トラッキング

これら 3 つの用語は、Web サイト内のスペース要素を指します。カーニングは、隣接する 2 つの文字の間のスペースを表します。リーディングはテキストの行間のスペースを定義し、文字グループ間のスペースはトラッキングとして知られています。選択した間隔によって、書体の外観を確認できます。

対比

コントラストとは、ウェブサイトに関しては、テキストの表示を指します。ウェブサイトのデザイナーは、いくつかの要素を目立たせるためにさまざまな巧妙なテクニックを使用しています。これらには、重要な領域を補強するための色、形、サイズ、構造、および重量が含まれます。

アライメント

配置とは、ウェブサイト上でテキストを配置する方法を指します。左でも右でも中央でも構いません。完全に正当化されたテキストは、よりフォーマルなアプローチを提示しますが、不規則な方法は、より非公式で親しみやすい Web サイトに適しています。

通常、左揃えのテキストが最も読みやすいです。留意すべきもう 1 つの側面は、テキストブロックの辺間の距離です。最大 80 文字 (スペースを含む) の平均文字数を設定することで、最適な行の長さを設定できます。

よりフォーマルな外観を探している場合は、完全に両端揃えのテキストを使用できます。書体を両面均等に並べ、見当識障害をなくします。

書体を慎重に使用する

数多くの書体とフォントが提供されていることを考えると、デザインを選択する際に迷ってしまう可能性が高くなります。したがって、一歩下がって、作成したい最終製品を理解する必要があります。

次のステップは、それに応じて書体のスタイルを設定することです。これらのデザインの選択は、対象とするオーディエンスを反映し、ブランドのアプローチの基本的な理解に役立ちます。

書体を慎重に使用する — Pexels の Brett Jordan による写真

したがって、デザイン要素を完成させるときは、次のような質問を自問してください -

あなたのブランドの性質は何ですか？
実用性を重視したいですか、それとも目立ちたいですか？
あなたのウェブサイトにはどんな種類のグラフィックが含まれていますか? グラフィックが多い場合は、フロント部分をトーンダウンして、残りの部分に話させることができます. 逆の場合は、フォントの選択が必要な感情を呼び起こすようにしてください。
プロジェクトベースですか？はいの場合、それはどのような種類の割り当てで、関連する要件は何ですか?

ロード時間を考慮することを忘れないでください

サイトが遅いということは、トラフィックが少ないということです。ウェブサイトが次々と要素をロードするのを待つだけの帯域幅を持っている人は多くありません。デザイン要素を間違えたり、デザインの選択をやりすぎたりすると、サイトが遅くなり、エンゲージメントが低下する可能性があります.

読み込み時間が長い場合は、採用している書体とスタイルの数を調べる必要があります。必要なものだけを選択してください。

Web セーフフォントを選択する

Web サイトのフォントの選択は、多くの場合、ブランドをどのように表現するかを表しています。たとえば、Amazon、Microsoft、Disney などのグローバルブランドは、独自のフォントを使用しており、それらは同義語になっています。

自分で同じことを行うことができない場合でも、選択が Web セーフと見なされることを確認することが不可欠です。この用語は、さまざまな環境に適応できるダイナミックフォントのセットを表します。簡単に言えば、これらの書体は、デバイスにインストールされていなくても、読者の画面に表示できます。

それらのいずれかを使用しない場合、ブラウザーはバックアップとして保持されている汎用フォントに戻り、Web コンテンツを表示します。機能やデザインの問題が発生し、メッセージが不完全になり、ブランドに悩まされる可能性があります。

数年前までは、十分な数の Web セーフフォントを見つけるのは困難でしたが、現在では、選択して吸収できる有料および無料のフォントが数多くあります。

たとえば、Times New Roman と Arial は、それぞれセリフとサンセリフのカテゴリに属する Web セーフフォントです。装飾的なものを探している場合、Script MT と Luminari は、それぞれ Cursive と Fantasy のカテゴリに属する適応可能なフォントです。

最良の結果を得るには、さまざまなフォントを使用する必要があります

Web サイトに最適な Web フォントを選択するには、計算された混合とマッチングが重要です。それぞれのフォントに特徴があるため、最終的にクラスと存在理由を醸し出す方法で、最大 3 つの異なるフォント (プライマリ、セカンダリ、およびターシャリ) を選択することをお勧めします。

これにカーニングや行送りなどの要素を追加すると、適切な処理を行うための十分なスペースが確保されます。また、ペアでうまく機能するフォントとそうでないフォントがあることを理解することも重要です。したがって、選択肢が不足することはありませんが、それがブランドのビジョンと同期していることを確認する必要があります.

また、今日のインターネットユーザーの動的な使用パターンを考えると、Web セーフフォントを使用して画面サイズを動的に調整することが不可欠です。特定のフォントがインストールされていなくても、エンドユーザーが意図したとおりに Web ページを表示できるようにします。

最終的に、フォントの選択は多くの要因に依存するため、最適な結果を得るには適切なバランスを取る必要があります。