コーポレートサイトなどを制作していると、おしゃれなwebサイトにしたい！という願望をいただくことがあります。ただ、webデザインに凝りすぎて、見やすいフォントを意識しないケースも多いのが現実的です。
実際、ホームページのフォントは何を使えばいいのでしょうか？
- 見やすさを優先するか？
- 文字のおしゃれさを優先するか？
課題の1つですが、今回は、webデザイン トレンド で 見やすいフォント として、今、注目をされているフォントについて、おすすめしていきます。
専門的なCSSの設定ではなく、マーケティング視点で、今は、こうした方がいいよ！という可読性、視認性を重視した、webサイトのフォントをおすすめした記事です。
webデザイン フォント選びの基本は？
webデザインには、意図、意味があります。
その意図、意味合いを汲んだ、フォント選びが重要ですよね。
つまり、目的にそったフォントを選びましょう！ということです。
というのも、基本的にフォントは、Webサイト全体に対して一括で指定し、そのwebサイト全体で統一するものです。
それゆえ、フォント選びは、意味をもった選択が重要です。
そこで、フォント選びのチェックリストをご紹介します。
フォント選び チェックリスト
web制作などで、どのフォントを使おうか、迷ってしまったら、原点に立ち返ってみて、チェックリストを活用してみてください。
- webサイトの目的は？
- 誰が利用するのか？
- webデザインと一致しているか？
- スマホ重視のフォントにするか？
- 日本語、英語に対応したフォント選びをしているか？
- 異なるウェイトがあるフォントを使っているか？
- SEO対策を優先させるのか？
上記が、フォント選びのチェックリストです。
フォント選びと、SEO対策が、どう絡んでくるのでしょうか。
実は、webフォントなどを選んでしまうと、webサイトが重くなってしまうという弊害もあります。それゆえ、SEO対策を優先させたい場合は、選ぶべきではなくなります。
webフォントについての詳細は、以下の記事を参照してください。
webフォント メリットは？表示が遅くなると、SEO対策に悪影響も
webサイト ターゲット にあわせたフォント設定
スマホを優先させたフォント選びの場合、やはり、日本では、iOS優先になります。そうなると、Hiragino Sansのような、OS X 10.11 以降で活躍しているフォントを使ったほうが見映えはよくなります。
意外と、スマホ重視のフォントにするか？どうかも、考えるべきポイントになってきます。その理由は、Androidが、フォントの指定が難しいからです。
Androidですが、Androidは、OS、メーカー、機種などによってインストールされている日本語フォントがバラバラなので、デフォルトのフォント利用がおすすめです。いわゆる、それぞれの端末のシステムフォントです。
さらに、Android端末は、明朝体が入っていないケースも多いんです。
どうしても明朝体を使いたいなら、Webフォントを利用する方法しかありません。
おすすめ 読みやすいフォント
2020年時点で、おすすめのフォント指定のセットは以下です。
- Helvetica Neue
- ヒラギノ角ゴ ProN
- Hiragino Sans
- Meiryo
上記4つの指定があれば、日本語、英文、そして、スマホ対応もある程度、できます。そして、もちろん、かなりきれいに仕上がります。
どのフォントも、読みやすく、可読性が高いです。
メイリオがあるので、windows環境でも、ある程度、太い文字で見ることが可能です。
おすすめ おしゃれ webフォント
おしゃれという話になってくると、いろいろと定義はありますが、現状、webフォントで、比較的多く使われていて、読みやすく、それでいて、モダンなデザインなのは、
- Noto Sans JP 日本語
- Lato 英文
というかんじです。
Noto Sans JP
Google font Noto Sans JP googleフォント
https://fonts.google.com/specimen/Noto+Sans+JP
Noto Sans JPは、Googleフォントで提供されています。
「Noto Sans」はGoogleとAdobeが共同開発したフォントで、Adobeでは「源ノ角ゴシック」という名前で公開されています。
昔は、フォントファイルの総容量が約3～8MBと、重かったのですが、今は、多少改善されてきています。
そして、多くのwebデザイナーから選ばれてきているwebフォントになっています。
やっぱNoto Sans JPはいいな。形も綺麗だし、ウエイトが6段階あるのもいい。
— かじわらよういち (@kajidesign) August 30, 2020
Noto Sans JP は使いやすいけどぎりぎり物足りない
— さんふら＠神戸かわさき錨山28欠席 (@sun_fle) August 29, 2020
私はNoto Sans JPとコーポレートロゴをよく使う
— まっちゃ (@matcha_tb) August 23, 2020
Lato 英文フォント
Lato フォント googleフォント
https://fonts.google.com/specimen/Lato
英字は「Lato」フォントです。これが、webフォントでは、メジャーですね！
- シンプル
- おしゃれ
- 見やすい
この三拍子そろった、英字フォントなんですよね。
最近のワードプレスのテーマでも、このNoto Sans JP、Latoはデフォルトで組み込まれています。それくらい、読みやすいフォントなんですよね。
Latoフォント、フリーだけど使いやすいhttps://t.co/2vxguytnUr pic.twitter.com/eTQfVda88I
— 平泉康児／編集者 (@hiraizm) August 1, 2018
Slack 最大の功績は、 Lato (https://t.co/kLtvuC2laT) フォントをすんげー広めたことじゃないだろうか？
— Ryutaro Miyashita (@ryugoo_) May 25, 2020
まとめ フォント選びは、マーケ視点で、消費者を考えながら！
いかがでしたでしょうか？
webデザインから、webフォントを考えるのも、結構重要なことです！
ただし、マーケティング視点で、誰向けのwebサイトなのかは、しっかりと見直して、考えておきましょう。
フォント選びも目的意識です！！
そもそも、消費者は見慣れたフォントのほうが違和感を感じません。
あまり、トレンドを追いかけすぎて、サイトが重くなったり、変におしゃれすぎないように考えていったほうがいいと思っています。
また、どんなにがんばっても、Androidの場合、フォントがうまく使えないことも多いです。
web制作では、読みやすさ、違和感を与えないように、フォント選びを進めましょう！
参考として、
【英語＋日本語デザイン】よく使われるフォントを調べてみた！
https://www.natsu-note.com/tips/tips-20191218-commonly-used-font/
【無料】商用利用可能！おしゃれなイラスト画像・素材サイト undraw
UI デザイン 関連記事
UI デザイン トレンド 参考にすべき webデザイン 設計 コツ などを まとめてみた！
https://saras-wati.net/web-make/ui-design-knowhow/
【人気】Sketch 海外 メジャー webデザイン UI 制作ツール クチコミ などの ご紹介
https://saras-wati.net/web-make/about-sketch/
【EC UI】shopify テーマ おすすめ 情報 事例 サンプル まとめてみた。
https://saras-wati.net/web-make/shopify-themes/
【おすすめ UI】nivel ニベル ホームページ制作 依頼内容 まとめ 無料 サービス！
https://saras-wati.net/news/about-nivel-web/
【必見】デジタル マーケティングブログ 人気 メディア 25選まとめ 知識 UI サンプル 豊富！
https://saras-wati.net/news/digital-marketing-blog-media-link/
【無料】UI デザイン ツール Figmaとは 利用方法 ワイヤフレーム制作 にも 便利！
https://saras-wati.net/knowhow/what-figma/
UI とは ? ユーザーインタフェース デザイン の 優れた 事例 紹介
https://saras-wati.net/marketing/about-ui/
【デザイン】おしゃれなweb アパレル ファッション ニュースメディア 5選
https://saras-wati.net/marketing/admake-sp-sales-marketing/
