ユーザーにとって価値ある情報を繰り返し発信していく「まるログ」

WEBデザインのフォント選び〜私の選択基準〜

WEBデザインのフォント選び〜私の選択基準

普段WEBデザインをする際に、私が何を意識してフォントを選んでいるのか？この機会に改めて分析してまとめてみました。

WEBフォントについて

フォント選びの話の前に、今ではWEBデザインにおけるフォントの話をする上で欠かすことのできないWEBフォントについて説明します。
WEBフォントとは、WEBサーバにインストールされたフォントを呼び出してWEBブラウザで表示させるフォントまたはその技術のことを指します。自分のPCやスマートフォンなどにインストールされていないフォントであっても、WEBサーバから読み込みCSSで設定する事で、意図したフォントで文字を表示することができます。
WEBフォントを使用せずにWEBコンテンツを作成した場合、閲覧するOSやWEBブラウザのデフォルトフォントで文字を表示することになります。閲覧環境によってデフォルトフォントが異なる場合があり、その結果文字に適用されるフォントが変わってしまうため、WEBコンテンツの雰囲気が変わってしまい、デザイナーの意図とは違う見え方になる事があります。
例えば、Safariでデフォルトとなっているフォントは、「ヒラギノ角ゴシックW４」、Windows10のGoogle Chromeでは「メイリオ」、Windows7のGoogle Chromeでは「MS-P ゴシック」など、ブラウザやOSのバージョンによってもそれぞれ見え方が変わってしまいます。
デザイン性を重視し、閲覧環境によって見た目の雰囲気が変わらないようにするのであれば、WEBフォントを使用して、フォント表示を統一させる必要があります。

メイリオとヒラギノ比較

私はWEBフォントを探す際にGoogle Fontsをよく使用します。WEBデザイナーにとっては定番ですね。日本語のフォントはもちろん、欧文書体から特殊なフォントまで種類が豊富で、幅広いデザイン表現に使用できます。

日本語WEBフォント

フォント選び１：内容やブランドに合ったデザインで選ぶ

WEBページでは画面全体に対する文字の占める割合が比較的多く、その為ページ全体で使用しているフォントを変更するだけで全体の印象を変えることができます。
フォントはデザインの方向性を決める上で、とても重要な要素となります。そのフォントが持つ雰囲気から、デザインの方向性によって使用されるフォントの傾向は下記のように比較的限定される事が多いと感じます。

  • 高級感・リッチ・和風・伝統 → 明朝体
  • ポップ・かわいい → 丸ゴシック体・太めのゴシック体

明朝体やゴシック体の中でもフォントのウェイトよってさらに雰囲気が変わってきます。タイトル文字をウェイトの細いフォントで文字間を開けて配置すると、品格や知性、ゆとりを感じるデザインになります。また、太めのゴシック体を斜体にすることで勢いやスピード感が出てスポーティーな雰囲気になります。

フォントウェイトと文字間で雰囲気を

フォントの扱い方と雰囲気醸成の関係性を実際のWEBデザインと共にご紹介します。

細めのゴシック体で文字間広めのタイトル

文字間を広く取ることで、一文字一文字の印象が強くなりタイトルが目立ちます。
https://www.beams.co.jp/special/beams_japan/
細めのゴシック体で文字間広めのタイトル

太めのゴシック体で文字間狭めのデザイン

サムネイル写真が多いですが文字が太く大きいので写真に埋もれずしっかりと記事タイトルを認識できます。
https://www.otemon-jh.ed.jp/o-drive/
太めのゴシック体で文字間狭めのデザイン

細めの明朝体で上品な雰囲気のサイト

細い明朝体と、文字間をしっかり開ける事でゆとりを感じられ上品な雰囲気になっています。
https://recruit.she-inc.co.jp/
細めの明朝体で上品な雰囲気のサイト

太めの楷書が良いアクセントになっているサイト

フォントのみで見ると、使いどころが難しそうですがシュールなイラストと合わせることで固い印象にならずに、和風とポップな感じがうまくマッチしています。
http://yamadasuisan.com/yamadanofry/
太めの楷書が良いアクセントになっているサイト

フォント選び２：視認性で選ぶ

WEBサイトは見た目の綺麗さやかっこよさなども大切ですが、大前提として情報の見易さは必須となります。実際のデザイン制作では、情報が見易くデザインとも相性が良いフォントを選定するために、実際にデザインに当てはめて何度も検証していきます。
フォントを選定する際に視認性の点で注意が必要なのが、文章などの小サイズのフォントをどうするか、という部分です。例えば高級感を演出するためにWEBページの全てのフォントを明朝体にしてしまうと、細かな文章が読みにくくなることがあります。この原因としてはPCやスマートフォンのディスプレイにおける表示方法が関係しています。ディスプレイではピクセルという小さな四角い点が集合して画像や文字を表示しています。表示対象の中で1ピクセルよりも細い（小さい）要素は欠けたり滲んだりして綺麗に表示しにくくなります。明朝体は横ラインが細く、文字サイズが小さい場合はこの部分が表示しにくくなり、視認性が悪くなりがちです。

フォントの視認性

フォントとデジタルの特性を踏まえて、タイトルは明朝体、文章はゴシック体と言う具合にフォントの使い分けが必要になる場合もあります。

フォント選び３：私の好きなフォントの組み合わせ

私はタイトルに明朝体を使用する場合には、文章に使用するゴシック体は「游ゴシック」や「さわらびゴシック」を選ぶことが多いです。この組み合わせは比較的印象が柔らかく感じられ、私は好んで使用しています。
游ゴシックは游明朝と一緒に使うことを想定して開発されたフォントで、他の明朝体とも相性が良いと感じられます。游ゴシックはサイズ感がコンパクトで、角がやや丸く、書き始めや終わりに筆文字のような形状が見られる点が特徴です。他のゴシック体と比較してゴツゴツした印象がなく柔らかな感じがするのは、それらの特徴によって醸し出されているのではないかと思います。

游ゴシック体の特徴

まとめ

WEBデザインのフォント選び〜私の選択基準WEBデザインを考える際には、その内容やブランドイメージに合うフォント選定だけではなく、視認性も十分に考慮する必要があります。WEBデザインはフォントの選択次第で印象が大きく変わってきますので、よく考慮・検証して、表現すべき内容に最適なものを選ぶ必要があります。
フォントの世界はとても奥が深く、デザインの過程でフォントの検討をする度に新しい発見があり、フォント選びは私にとってデザイン業務の面白さの一つでもあります。

WEBデザイナー ／ N.N

WEBデザイン制作に関するお問い合わせはこちら