2021.06.18

サイトイメージに合ったフォントの見つけ方。選び方と設定時の注意点について解説

サイトフォントで主に使われるのはゴシックや明朝など。サイトフォント設定に迷ったらまずは2つを設定してみるのがおすすめです。上品さ、華やかさを出したいなら明朝体を、力強さやインパクトを与えたいならゴシック体を使うと良いでしょう。この記事では、サイトイメージに合わせたフォントの設定方法や注意点を解説します。

サイトフォントの定番といえば

タブレットとペン

まずは、よく使われるフォントについて紹介します。迷ったら下記の定番フォントを設定するのがおすすめです。

ゴシック体

ゴシック体には、ヒラギノ角ゴシック、游ゴシック、筑紫ゴシック、Noto Sans、コーポレートロゴなどがあります。ゴシック体は文字の太さが均一で視認性が高いので、文字が読みやすいのが特徴。タイトルや見出しに使われることが多いフォントです。

	フォント	特徴
1	ヒラギノ角ゴシック	・使用頻度が高い・視認性が高く、幅広く使える・ウェブサイト、テレビCM、書籍に使われる
2	游ゴシック体	・漢字内の空間が狭く、ひらがなが小さい・安定性が高い・WindowsOSとmacOSどちらにもインストールされているため、見え方の違いがない
3	筑紫ゴシック	・バランスが良く視認性が高い・モダンでクラッシックな雰囲気で上品な印象を与える・見出しにも本文にも使える
4	Noto Sans	・英語だけではなくギリシャ語、日本語、中国語、韓国語の表記が統一されている・文字が統一されているので視認性が高い

＜フォントサンプル＞

・ヒラギノ角ゴシック

ヒラギノ角ゴシック　W１

via www.morisawa.co.jp

・游ゴシック体

游ゴシック体

via image.jimcdn.com

・筑紫ゴシック

筑紫ゴシック R

via fontworks.co.jp

・Noto Serif JP

Noto Serif JP 中500

via fonts.google.com

明朝体

明朝体にはヒラギノ明朝、游明朝体、Noto Serif、筑紫明朝、さわらび明朝などがあります。線の太さに強弱があり、上品な印象を与えるのが明朝体の特徴。ウェブサイトの本文で使われることが多く、可読性が高いため、小説などにも使われているフォントです。

	フォント	特徴
1	ヒラギノ明朝	・漢字とひらがなのサイズが揃っている・現代と伝統を統合させた華やかで上品なフォント・紙面だけでなく、ウェブサイトとの相性が良い
2	游明朝体	・小説を組むために開発されされたフォント・小説はもちろんウェブサイトのフォントとしても使いやすい・可読性が高く、上品な印象を与える
3	筑紫明朝	・書体に止め、はねの強弱がしっかりある・可読性が高いデザイン・長文の本文に適している

＜フォントサンプル＞

・ヒラギノ明朝

ヒラギノ明朝

via www.screen-hiragino.jp

・游明朝体

游明朝体

via www.jiyu-kobo.co.jp

・筑紫明朝

筑紫明朝

via fontworks.co.jp

サイトイメージに合わせたフォントの選び方

パソコンとキーボード

さっそく、サイトイメージに合わせたフォントを選び方を紹介します。

まずは読みやすいフォントを選択

まず、見やすいフォントを選ぶことが大前提です。見やすいフォントとは｢視認性｣、｢可読性｣、｢判読性｣が揃ったフォントのことを言います。文字のやわらかさや丁寧さ、太さや大きさが統一されていると見やすいフォントと言えるでしょう。

また、数字や英字の表記の仕方にも注目。aとoが識別しにくいフォントもあるので注意が必要です。太字、斜体に対応していないフォントもあるのでそこも注意して選んでください。

華やかで上品な印象を与えたいなら明朝体を選択

明朝体は上品で華やか、かつ繊細なイメージを与えます。また、同じ明朝体でも文字の太さで見える印象が違います。太めの場合は、上品で華やかながらも力強さを表現。細めの場合は明朝体の特徴を最大限に活かしたフォントになり、繊細さや華やかさがより一層際立つようになります。

なかでも、おすすめはヒラギノ明朝です。文字が綺麗に統一されており丁寧なフォントが、上品さや高級感を際立てます。

カジュアルで力強い印象を与えたいならゴシックを選択

ゴシック体はカジュアルで力強い印象を与えながら安定したフォントです。文字の太さを太めにするとより力強い印象となり、ゴシック体の特徴を最大限に活かしたフォントとなります。文字にインパクトを与えたい場合や強調したい時に使うと良いでしょう。文字の太さが細めのゴシック体は、カジュアルで力強い印象とともに高価なイメージを表現できます。

おすすめは、游ゴシック。綺麗な書体で見やすいうえ、読みやすいのでユーザーにストレスを与えない書体と言えます。

その他のイメージを表現したいなら

固いイメージを和らげたい場合は、丸ゴシック体を選ぶと良いでしょう。やさしさ、ソフト、ワクワク感を表現できます。古風なイメージや伝統的なイメージを表現したいなら、行書体、教科書体、楷書体がおすすめです。明朝体よりもより和風な雰囲気を出せます。ポップ体や手書きフォントは個性を出したいときに。しかし、デザイン性の高い手書きフォントを使用すると読みにくい印象を与えてしまうので注意が必要です。

サイトフォントを設定するときの注意点

重要の文字

サイトフォントについて知ったら、サイトフォントを設定する場合の注意点を押さえておきましょう。ここでは、サイトフォントの設定時に注意すべき点を順に解説していきます。

ユーザーのデバイスによって表記の仕方が変わる

ユーザーが使っているデバイスによってはフォントの表記の仕方が変わってしまいます。また、同じフォントでも若干サイズや太さが変わってくるので注意が必要です。

ユーザーのフォント所有によっても表示が変わる

ユーザーが設定したいフォントを所有していない場合も、別の書体で表示されます。

ユーザーに与えたい印象でフォントを選んでも別のフォントで表示されると、作成者の意図が反映されないので対策方法についても知っておきましょう。次の項目で詳しく説明します。

設定したフォントをそのまま表示できる方法

さまざまなデバイス

サイトイメージに合わせたフォントをそのまま表示するためには、画像を作成し挿入する方法とウェブフォントを利用する方法があります。2つの方法について詳しく解説していきます。

画像で挿入する

まず1つ目は、画像編集ソフトを利用してテキストを画像化して表示する方法があります。ユーザーには画像としてそのまま表示されるので、デバイスやフォントの所有に左右されません。しかし、SEO対策にはならないので注意が必要です。

ウェブフォントを利用する

2つ目は、ウェブフォントを利用する方法です。ウェブのフォントサービスを使うと、どのデバイスでも同じ書体で表示されます。Google Fonts、Adobe Fonts、TypeSquareなどが代表例です。手順はそれぞれ違うので、各サイトの利用方法を確認して使用してください。

便利なウェブフォントでも、多くの種類のフォントを利用するとデーターが重くなり、サイトの通信が遅くなってしまうというデメリットも。使用時は軽量化することをおすすめします。

自社のサイトイメージに合ったフォントを選択しよう

サイトのフォントを決める人達

今まで、フォントを気にせずサイト作成していたかもしれません。サイトのフォントはユーザーに与えるイメージを大いに変えます。ブランドイメージやユーザーのイメージに合ったフォントを設定したり、ユーザーにとって読みやすいフォントを設定したりすることで集客力をアップさせることにもつながります。まずは今回紹介した、ゴシック体や明朝体を利用して自社のサイトイメージにあったフォントを選びましょう。