2024.01.09
この記事を書いた人
PENGIN LLC.
Webデザインを作成しているけど、「どうやってフォントを選べば良いんだろう？」と悩んでいませんか？
この記事では『フォントの選び方』を解説すると共に、デザインの特徴に合わせたフォントの具体例を紹介します。
フォントは、種類や特徴を抑えることで使い方が理解でき、誰でもデザインのテイストにあったフォントを選べるようになります。
迷わずにフォントを選び、デザインのクオリティを高められるよう、この記事の『フォントの選び方』をぜひ実践してみてください！
フォント（タイポグラフィ）の基礎知識
一口にフォントと言っても、様々な種類があります。まずは、フォントの基礎部分を抑えましょう！
欧文フォントと和文フォント
欧文フォントは、アルファベットや数字に対応しているフォント、和文フォントは上記にプラスして、ひらがなや漢字に対応しているフォントを指します。
明朝体（セリフ体）とゴシック体
明朝体は、「ウロコ」や「セリフ」と呼ばれる装飾がついているフォントです。細くて可読性が高いため、本や新聞などで使うことが多いです。
一方、ゴシック体は、装飾がなく太さがほぼ均一なフォントです。太くて見やすいため、見出しやプレゼン資料などで使うことが多いです。
Webデザインをするときのフォントの選び方
デザインのテイストを決める
フォントを選ぶ前にまず、デザインそのもののテイストを決めます。
制作しようとしているデザインは、カッコよく仕上げたいのか、可愛くまとめたいのか…など、イメージを明確にします。
使用するフォントでデザインのイメージが変わってくるため、できるだけ制作するデザインとイメージが近いフォントを選べるようにしましょう。
Google fontsで探す
Webデザインでは、「Webフォント」を使用することが一般的になってきています。
Webフォントを使用すると、どのデバイスで見ても、デザイン制作時に意図したフォントで表示できるようになるため、非常に便利です。
一方、読み込みに時間がかかると、Webページの読み込みが完了するまでフォントの表示が意図しないものになってしまうため、ローディングアニメーションを入れたり、画像を圧縮して読み込みの速度を早くしたりといった工夫が必要になります。
フォント選定をしっかり考えずにWebデザインをしてしまうと、デザイン完成後に1からデザインを見直すことになってしまいますのでご注意を…。
Webフォントは各社提供されているのですが、最初は「Google fonts」で選ぶと間違いありません！
無料かつ商用利用可能で、簡単にWebフォントを使用することができるので、フォント選びに慣れるまではこちらからフォントを選ぶことをおすすめします♪
Googleフォントの使用方法については以下の記事で解説しています！
デザインのテイスト別おすすめフォント
実際に、よく使用されている定番のWebフォントを、テイスト別にご紹介します！
かっちりとしたテイスト
Noto sans
Noto sansはとても読みやすいゴシック体で、クセが少ないため様々なテイストで使用できる万能型です！幅広い事業のコーポレートサイトなどで使用されています。
Roboto
RobotoもNoto sans同様、クセが少なく、幅広いテイストで使用できるゴシック体のフォントです。太さの種類が12種類もあるので、1つのフォントでもバリエーション豊かに使えます。
可愛いテイスト
Lato
文字に丸みを感じられるゴシック体です。通常のゴシック体より柔らかい印象になり、可愛らしいテイストにも合うフォントとなっています。
かっこいいテイスト
Lora
読みやすさを重視して設計された、セリフ体のフォントです。LoraはWeb上でも読みにくさを感じさせないので、セリフ体を使用したいときにおすすめです！
カジュアルテイスト
Josefin Sans
文字の重心が低く、少しクセのあるゴシック体のフォントです。キャッチコピーやタイトルなどにアクセントとして使用すると、デザインの印象を変えることができます。
まとめ
今回は、フォントの基礎知識とWebフォント、そしてテイスト別のおすすめについてお伝えしました。
WebデザインをするときはWebフォントの中からフォントを選ぶようにしましょう！
この点を抑えつつ、様々なフォントを使用しながら、Webデザインのクオリティを高めていってください！
【参考】さらに、フォントについて学びたい方へ
今回の記事では、フォントの基本的な部分についてお伝えしましたが、もっとフォントについて学びたい方は、『ほんとに、フォント』をおすすめします！
私自身、今でもフォントを選ぶときは参考にするほど、フォントの特徴やデザインに合ったフォントを学べる本です。
フォントで、デザインがどこまで変わるのかをbeforeとafterで比較できるので、フォントの選び方をさらに極めたい！という方はぜひ読んでみてください♪
