トラストフォーマット（信頼される書式）は、ウェブデザインの心理技術です。以前、トラストフォーマットにおける色の重要性で、ウェブサイトにおける信頼(トラスト)に基づいた色の選択方法ついて説明しましたが、色だけでなく、そもそもウェブサイトを作成する際、どのようなフォントがいいのだろう？オススメのフォントは何だろう？と感じたことはないですか？
ウェブサイトを作成する上で、フォント選びは重要です。しかしフォントは膨大に種類があり、何を選んだら良いか迷うことも多いのではないでしょうか？
今回はトラストフォーマット的、信頼されるフォントの重要性について解説します。
目次
1.フォントとは？どんな種類があるのか？
フォント（英: font） は、本来「同じサイズで、書体デザインの同じ活字のひとそろい」を意味しますが、現在では画面に表示したり、書籍など紙面に印刷したりするためにコンピュータ上で利用できるようにした書体データを指します。
金属活字や手動写植機など先行する印刷技術の歴史を踏まえる場合、データとしてのフォントは特にデジタルフォント（digital font）として区別して呼びます。
引用元：Wikipedia
日本語（和文）のフォントは、大きく4種類あります。
- 明朝体 ：線には抑揚とともにウロコなどの装飾がある。上品な印象を受ける。
- ゴシック体 ：文字の線の太さが均等。視認性が高く、読みやすい。
- 筆書体 ：筆で描いたような書体。
- デザイン体 ：手書き風文字やデザイン性のある文字。
アルファベット（欧文）のフォントも、大きく次の4種類あります。
- セリフ体 ：文字の先端に、ウロコ（セリフ）がついている。縦線・横線の幅がバラバラである。
- サンセリフ体：ウロコ（セリフ）がついていない、縦線・横線の幅が同じである。
- 筆記体 ：一筆書で描いたような書体。
- デザイン体 ：手書き風文字やデザイン性のある文字。
2.ウェブサイトにおけるフォントの重要性
ウェブサイト内の文字をどのように伝えるか、という役割を担うのがフォントです。
それぞれのフォントが特徴を持っており、どのような印象を与えるのかを理解した上で使用しましょう。
ユーザーがフォントを意識することなく自然に読むことができる状態が理想とされています。
それはどういう状態の時でしょうか？
あなたのサイトに訪れたユーザーが、普段よく利用し、信頼（トラスト）ているサイトのフォントを参考にするのがトラストフォーマット的フォントの選び方です。
そうすればユーザーはあなたのサイトを信頼（トラスト）するでしょう。
3.ウェブサイトで使えるフォントの種類
ウェブ上でよく使用されるフォントにはデバイスフォントとウェブフォントの2種類あります。
それぞれの特徴とメリット・デメリットを理解した上で選びましょう。
デバイスフォント
デバイスフォントは、それぞれの端末にあらかじめOSにインストールされているフォント、もしくはユーザーが個別にインストールしたフォントのことです。
Windowsの「メイリオ」「MS明朝」、iOSの「ヒラギノ角ゴ」「ヒラギノ明朝」などが代表的です。
デバイスフォントのメリット
- 修正や更新が簡単。
- 表示速度がはやい。
- 無料で使える。
デバイスフォントのデメリット
- 同じフォントでもデバイスやOSのバージョンによって微妙に表示が異なる。
- 使えるフォントの種類が少なく、多彩な表現をすることが難しい。
- ユーザー側の環境に無いフォントだと表示されない。もしくは代替えフォントで表示されてしまう。
ウェブフォント
ウェブフォントは、サーバー上のフォントデータを呼び出すことで、そのフォントを表示させます。
外部のウェブフォントサービスが提供するものと、自身がサーバーにアップロードすることでウェブフォント化したものの2種類があります。
デバイスにフォントをインストールする必要はありません。
ウェブフォントのメリット
- 画像フォントを使わなくても特定のフォントを指定できる。
- ユーザー側の環境によらずに、全く同じフォントを表示することができる。
- デザイン性の高いフォントが使える。
ウェブフォントのデメリット
- 利用に費用がかかるものもある。
- データを読み込むため、文字表示に時間がかかる。
ウェブフォントありの方が、ウェブフォントなしより直帰率が若干高くなる、という検証結果があります。
デザイン性が高いフォントを使って目を引こうとしても、データを読み込むのに時間を要し、ユーザーが離脱してしまっては、本末転倒です。
ウェブフォントを選ぶ際は十分注意しましょう。
4.よく使われるフォント
①游明朝：可読性が高く上品なイメージを持つ
游明朝体は「時代小説が組めるような明朝体」をキーワードに、単行本や文庫などで小説を組むことを目的に開発されました。
文字の空間が均一に見えるような設計、丸みのあるウロコや柔らかな曲線が、明るく品のある雰囲気を演出します。
出典：字游工房
②ヒラギノ明朝：現代的であり伝統的なイメージを複合している
「ヒラギノ明朝」はビジュアル雑誌やパンフレット用に開発されました。
Mac OS Xに標準搭載されていることもあり、もっともよく知られた日本語書体のひとつと言えるでしょう。
フトコロを広めに、字面は大きめ、エレメントはやや単純な方向に、そして重心はやや高めに設定した、都会的でクールなイメージの書体デザインで、写真やイラストの強さに対応できるように濃度ムラを最小限におさえてあります。
出典：モリサワフォント
③リュウミン：メリハリがあり親しみやすい印象
「リュウミン」は、その名の元となった森川龍文堂明朝体をベースに開発した、スタンダードな明朝体です。
金属活字に由来する彫刻刀の冴えを、左右のハライや点の形に活かしながらも、縦画・横画の先端やウロコにはやわらかさをもたせており、親しみやすい雰囲気になっています。
特に、均整のとれた流れるような表情の美しさには定評があり、本文組みから見出しまでDTPの基本書体として幅広く使用されています。
出典：モリサワフォント
④游ゴシック：安定性が高い
「游ゴシック体」は、長文でも読みやすいスタンダードなゴシック体です。
字面を小さめに設計し文字間にゆとりを持たせることで、小サイズで組んでも文字同士が干渉せず、一字一字の識別性に優れた、読みやすい組版を実現します。Windowsとmacの双方のOSにインストールされています。
出典：モリサワフォント
⑤ヒラギノ角ゴ：視認性が高く汎用性に優れる
「ヒラギノ角ゴ」は「ヒラギノ明朝」との組合せを意識してデザインされた角ゴシック体です。
「ヒラギノ角ゴ」は、やや大きめの字面に対し、フトコロを少し締めることで、現代的な明るさを残しつつもオーソドックスな印象を与える書体です。
雑誌やパンフレット、ポスターなどあらゆる媒体で、本文から見出しまで幅広く活用でき、「ヒラギノ明朝」と組合せても違和感がないように設計されています。
出典：モリサワフォント
M+ FONTS
②源ノ角ゴシック
源ノ角ゴシック（げんのかくゴシック）はAdobeとGoogleが開発しました。Googleのブランド名は「Noto Sans Japanese」で、Adobeのブランド名は「源ノ角ゴシック（英名：Source Han Sans）」です。
「源ノ角ゴシック」は、日本・中国・韓国で使われている文字を網羅したフォント「Source Han Sans」のうち、日本語部分の名称のことです。
日中韓で使われている漢字を統一されたデザインで利用できるため、東アジア向け印刷物やウェブページなどで、イメージを変えることなく各国の文字を使えます。
視認性、可読性、ウェブとの親和性においても優れいます。
6.ウェブサイトで使用されているフォントの確認方法
ウェブサイトを見ていて、このフォントなんだろう？自分のサイトでも利用したい！と思ったことはありませんか？
ユーザーに信頼（トラスト）されているサイトのフォントを調べて、どのようなフォントがいいかチェックしましょう。
ウェブサイトに使用されているフォントを確認する方法を説明します。
デベロッパーツールを使用する
- 参考にしたいサイトを開き、調べたいフォント部分のテキストを選択、右クリック→「検証」
- デベロッパーツールが開き、サイト内のソースコードの情報が展開される。
- そのウィンドウから「Computed」を選択、下までスクロールする。
- 「Rendered Fonts」の項目に使用されているフォントが表示される。
Chromeの拡張機能を使用する
ウェブ上のフォントを調べることができるChromeの拡張機能として「WhatFont」「Fonts Ninja」などがあります。
使用する場合は、chrome ウェブストアからインストールしましょう。
テキスト上にマウスカーソルを合わせるだけで使われているフォントがわかります。
6.まとめ
フォントはユーザーに与える印象を大きく左右する要素です。
最適なフォント選びに重要なポイントが、顧客が何を信頼（トラスト）しているのかということです。
それを知るためには、本記事で紹介したフォントを使えばいいというわけではなく、顧客が信頼（トラスト）しているサイトがどんなフォントを使っているのかを調べる必要があります。
また、デバイスフォントとウェブフォントのどちらを選択するかは、メリットとデメリットを十分考慮しましょう。
是非リサーチし、サイトのデザイン・設計を改善してください。
そうすればまた一歩、顧客にとって信頼(トラスト)のおけるサイトに近づいていくでしょう。
トラストフォーマットを学べる1dayセミナーを開催します。
どんな感じかな？と気になる方は、以下からどうぞ！
