見出し画像

WEBデザインで活用できるおすすめフォント10選【和文フォント編】

KKI DESIGN

こんにちは！KKI DESIGNのはまだです。

KKI DESIGNのWEBチームでは隔週でWEBデザイン勉強会というものを開催しています。
チーム間でWEBデザインの流行や基礎について情報共有を目的とした会なのですが、少し前にWEBフォントについてそれぞれ調べる回がありました。
色々なフォントを調べてみて個人的にとても勉強になったので、今回はその内容をまとめた記事にしたいと思います。

フォント選びでお悩みの方に、少しでもご参考になれば幸いです！


①Webフォントとシステムフォントについて

サイト制作に使用されるフォントには、サーバー上から読み込んで使用するWEBフォントと、パソコンに内蔵されているシステムフォントの2種類があります。

・WEBフォント
クラウドやサーバー上に保存されていて、インターネットを介して利用するフォント。

＜メリット＞異なるデバイスでも同じフォントで表示することが可能。

＜デメリット＞和文フォントが欧文フォントに比べ少なかったり、有料の場合は利用料金や利用規約などの注意点もある。

・システムフォント
パソコンやスマホなどのデバイスに最初から保存されているフォント。

＜メリット＞デバイスに既に保存されているためダウンロードしなくて済み、早く表示することが可能。

＜デメリット＞異なるデバイスで表示した場合、違う書体で表示される点や、選べるフォントの種類も少ないといった箇所があげられる。

それぞれの特徴を理解して、適切なフォント選びをしましょう！

②フォント紹介

ゴシック体フォント

まずはよく使われているゴシック体のフォントをご紹介します。

  • Noto Sans JP

WEBデザインで最も多く使われているフォントです。シンプルで明るい印象のデザインで、様々な系統のデザインに幅広く使える万能フォントです。
ちなみに「STUDIOフォントランキング2023」で1位でした！
KKIのサイトでも使われています。

  • ヒラギノ角ゴ

macOSおよびiOSに標準搭載されているフォントです。「ヒラギノ明朝」との組合せを意識して作られており、オーソドックスな印象ながら現代的な明るさもあるフォントになります。9ウエイトあるため、紙媒体からWEBまであらゆる場面で使いやすいと思います。

  • メイリオ

Windows Vista以降に採用されたシステムフォントです。名称の由来が「明瞭（はっきりと見分ける）」から来ているだけあり、非常に視認性の高いフォントです。

  • りょうゴシック

今回の勉強会で初めて知ったフォントなのですが、個人的に好きです。漢字部分は小塚ゴシック、かなは小塚ゴシックよりも小ぶりでクラシックな形をしています。
サイトに柔らかな印象を持たせたい時に使いやすいフォントかなと思います。

  • A1ゴシック

こちらも大好きなフォントです！
オールドスタイルのゴシック体で、CMから紙媒体、WEBまで様々なところで使用されているのを見かけます。角に丸みがあったり、所々に墨だまりがあるなど、細かい箇所に工夫がされているため可愛らしい印象のフォントです。
A1ゴシックについての記事があったので引用します↓　ファンが多い…

明朝体フォント

ここからは明朝体をご紹介します。

  • ヒラギノ明朝

ヒラギノゴシックと同様に、オーソドックスな雰囲気を保ちつつ、現代的でクールなイメージの書体デザインです。元々はビジュアル雑誌やパンフレット用に開発された明朝体ファミリーのようです。

https://www.morisawa.co.jp/fonts/specimen/1844

  • リュウミン

「リュウミン」という名称は、1902年に創業された活字メーカー森川龍文堂の「龍」と明朝体の「明」から来ているそうです。ハライやハネに特徴があり、エレガントな雰囲気があります。こちらも色々な場所で使われているオーソドックスな書体です。

  • 筑紫明朝

筑紫明朝は一般的な明朝体に比べると文字の中の空間が狭く、上にあげた２つの明朝体に比べ、レトロな雰囲気を持つフォントです。

フトコロの広い漢字・仮名の明朝体とは一線を画し、文字そのものが内在する空間の強弱と線質が持つ伸びやかさを残しています。文字を組んだとき、リズミカルな心地よい可読性を醸し出します。　

https://lets.fontworks.co.jp/fonts/8

  • A1明朝

ノスタルジックな雰囲気で、こちらもファンが多いと感じる明朝体です。ゆったりとしたカーブや、墨だまりが独特の味わいを出しているフォントです。
雰囲気があるフォントなので、コピーをじっくり読ませたいようなサイトにはぴったりな印象です。

  • しっぽり明朝

上品なスタイルで、見ているだけでうっとりするような明朝体を目指して制作されたオールドスタイルの明朝体フォントです。

https://fontdasu.com/shippori-mincho/

とあるように、滑らかで上品な印象のフリーフォントです。
高級感があったり、上品な雰囲気のサイトで本領発揮するフォントだと思います。

まとめ

調べていて分かったことは、フォントにもそれぞれ歴史や名称の由来、意図したイメージなどがあることです。フォントについて知った上で選ぶことで、より情報やイメージが伝わりやすいサイト作りに繋がるのかと思いました。
皆様のフォント選びの参考になれば幸いです。 長くなりましたが、ここまで読んでいただき、ありがとうございました。

＜過去の記事＞
・KKI DESIGN　デザイナー自己紹介
・パッケージ受注サイトができるまで
・グラフィックデザイナーがWEBデザインのセミナーに通ってみて

Writer：はまだ｜KKI DESIGN
Xアカウント：@hmd_kkiweb

いいなと思ったら応援しよう！