UIUXデザインの改善、と言われても、非デザイナーの立場からではデザインだったりフォントだったり情報設計だったりとややこしいもの。
しかも様々な要素がある中で、フォントをお願い、と上司から振られたとしても、どのようにして良いかは難しいでしょう。フォントが文字のデザイン形式であることは分かっても、どのようなところに注意してデザイナーに発注すればいいのか、というところまで踏み込むと、専門知識がなければ困難なはずです。
今回は、そんなあなたのために、共にフォントに関して気を付けたいポイントを上げていきたいと思います。
改善において、フォントで気を付けたいポイントは、以下の通りです。
・サイズで階層を表現
・書体は最多で2種類まで
・Webフォントを使う
・どんなときに明朝体で、どんなときにゴシック体か
では、一つ一つ解説していきたいと思います。
UIUXに限らず、情報には階層があります。タイトルレベルのテキスト、副題レベルのテキスト、1トピックレベルテキスト、そして本文レベルのテキスト……。
そんな文字列が全て同じだと、情報のウェイト差が視覚的に理解しづらいため、情報の区切りが認識しづらくなってしまいます。
例えば、以下のような文章は分からないでしょう。
ああああああああああああああああああ
ああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
ですが、以下の場合はどうでしょうか。
・ああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
「あ」しか書かれていない文章ではありますが、構造はサイズだけでも簡単に分かるのではないでしょうか。これが、「フォントサイズによって階層を表現する」ということの効果となります。
フォントの書体と言えば文字のデザイン形式ですが、UIUXのデザインにおいて、一体何種類が適切なのでしょうか？
例外はもちろんありますが、基本的に2種類、というのが適切な書式数とされています。
理由としては、必要用途に合わせるとこの数字に納まるから、というものになります。では、その必要用途とは何でしょうか？
それは、メイン使いする可読性の高いフォント書式1つと、インパクトを与えたりアクセントをもたらすためのデザイン性の高いフォント書式1つの、合計２つという事です。
詳しく説明します。
まずメイン使いする可読性の高いフォント書式について。
こちらは、主にコンテンツのメインとなる文章に使用されます。何故ならメイン文章は、本記事のように何かを説明したり紹介したり、という長い文章になりがちだからです。
デザイン性の高い書体で長文が書かれると、読むのがストレスになってしまうんですね。
そのため、可読性に優れ、長文でもストレスなく読める文字は、日ごろから見慣れた書体が好まれます。明朝体、ゴシック体のどちらか、というのが通常ですが、昨今の主流としてはゴシック体がメイン使いの書体に選ばれています。
次にアクセントとなるデザイン性の高い文字について。
こちらは、タイトルやトピック見出しのように、目立たせたい文章に使用されます。文字の意味が伝わる以上に、目に留まるという役割を果たす必要があるんですね。可読性の高いフォントでも悪くはありませんが、デザイン性の高いフォント書式の方が優れている、という意味でこちらを使わない手はありません。
デザイン性の高い書体は数が多いため、これ！ と説明することは難しいのですが、選び方に一つ特徴があるのでそちらをご紹介します。
それはつまり、ブランディングの観点から選択する、という事です。
ラーメン屋なら毛筆っぽい力強い書体が良いでしょうし、おしゃれなバーなら文字の払いがくるんとしているおしゃれな書体が良いでしょう。UIUXなら、ブランディングにもよりますが、近未来っぽい角ばった書体が好まれがちです。
このように、メインとなる書体1つ、アクセントになる書体1つ。合計2つ、という風にフォント書式を用意するのが良いでしょう。
Webフォントとは、従来のフォントと違い、サーバーにあらかじめ用意したフォントを呼び出す技術のことです。
例えばGoogleFontsやAdobeFontsなどが有名なので、それを使うのがおススメです。
と結論から述べたのですが、きっと「何故そのWebフォントとやらを使わねばならないのか」と疑問が浮かんでいるかと思います。ですので、その理由を今から述べたいと思います。
というのも、従来のフォントでは、読み込みが非常に重い、という問題点が存在するためです。
まず前提として、日本語の話をします。日本語はご存知の通り漢字が存在します。この漢字という文字は、非常に多種類存在します。アルファベットがたった26種類(大文字小文字があったとしても52種類)なのに対して、日本漢字は常用のものだけで2000以上存在します。
何が言いたいのかと言えば、日本語の漢字のフォント読み込みは、非常にPCにとって負担が大きいという事です。少なくとも、そのせいでサイトの表示にラグが生じてしまう程度には。
そんな問題を解決するために、「すでにサーバーに用意してある」という方法を取ったのがWebフォントということになります。このWebフォントを使用しなければ、かつてのように非常に表示や遷移動作の重いUIUXになってしまいます。
ですので、Webフォントが使われていないUIUXであった場合、ぜひWebフォントに乗り換えることをお勧めします。
なお、ここからは余談ですが、このWebフォントにはさらに読み込みが早くなる秘密が存在します。それは、「頻出漢字」と「非頻出漢字」でセクション分けがなされている、というものです。
つまり、よく使われる漢字をピックアップしてまとめておき、ひとまずそちらを先に読み込ませるという対応を取ることで、読み込みをさらに加速させている、という事です。豆知識ですが、覚えておくと役立つ時が来るかもしれません。
メインとなる文章は明朝体かゴシック体、という話を上記でしましたが、このトピックでは「結局どちらが良いのか」という事についてご説明したいと思います。
明朝体かゴシック体を選ぶ基準、それは、ブランディングです。
アクセント使用の書体でもブランディングの話はしましたが、メイン文章でも無関係ではありません。ただ、よく使用される非常に有名な書体という事で、別のトピックで改めて紹介しておくべきだと考えたため、そのような形を取らせていただきました。
さて、では明朝体とゴシック体で何がどのように異なってくるのか、という点について、以下に列挙したいと思います。
・明朝体は高級で静か
・ゴシック体はカジュアルでインパクト
それぞれの書体には、このようなイメージがあります。フォントは声色のイメージで捉えるのが理解しやすい、という話がありますが、何となくこのイメージで納得できるのではないでしょうか。
あとは、各書体のイメージとUIUXのブランディングの観点から、どちらが適切かを考えればうまくハマるかと思います。
以上が、UIUXデザイン改善のフォントで意識すべきポイントとなります。では、最後にまとめたいと思います。
フォントで意識すべきポイントは、以下の通りです。
・サイズで階層を表現
・書体は最多で2種類まで
・Webフォントを使う
・どんなときに明朝体で、どんなときにゴシック体か
フォントサイズで階層を表現、というのは、文字のサイズで情報のウェイトを視覚的に表現する方法となります。文字が大きければ大見出し的に捉えられ、文字が小さければ詳細説明、という風に、情報にまとまりが出来て理解が簡単になります。
書体はメインとなる可読性の高いフォント書体と、アクセント的に用いるデザイン性の高い書体の2つに絞って使用すべきです。理由は読みづらい長文はストレスになりますし、普通の書体よりもデザイン性の高い書体の方が見出しとして目に留まるためです。それ以上フォントを使うのはごちゃごちゃするため推奨しません。
Webフォントを使うのは、システム的に読み込み速度をより高速にするための工夫です。GoogleFontsとAdobeFontstがおススメです。
どんな時に明朝体かゴシック体かを判断するのかは、それぞれのイメージとブランディングの観点から判断できます。高級志向なら明朝体、カジュアルならゴシック体、という認識だと覚えやすいでしょう。ただし、昨今の主流はゴシック体です。
以上が、改善におけるフォントで意識すべきポイントです。ご活用いただければ幸いです。