font-familyはメイリオがオススメな理由【よく使われる3つのフォントと比較】マンガでわかるホームページ作成ホームへfont-familyはメイリオがオススメな理由【よく使われる3つのフォントと比較】2020年03月29日CSSではfont-familyでフォントを指定できます。フォントってたくさんあって、ホームページやブログでは何を使うのが一番いいの!?私は地方でWebデザイナーを9年ほどやっているものです。これまでたくさんのサイトを作りいろいろなfont-familyを指定してきました。そのうえでfont-familyはメイリオを指定することをオススメします。メイリオはこの文字であり、当サイトでもメイリオを使っています。font-familyはメイリオがオススメである理由を、Webサイトでよく使われる3つのフォントと比較しながら解説します。目次Webフォントは表示が遅い游ゴシックはchromeで細く読みづらい明朝体はパソコンでの長文に向かないメイリオは一瞬で表示され、読みやすいタイトルやアクセントには他のフォントでもOKまとめ比較するフォントは以下の4種です。太さが細かく指定でき、Webフォントの中では一番読みやすくオススメできるフォントです。JP」以外にもWebフォントはたくさんあります。Webフォントの登場により利用できるフォントの数は飛躍的に増えました。一方でWebフォントには弱点があります。フォントファイルのダウンロードが必要ということです。Webフォントファイルのダウンロードが完了するまで文字が表示されません。記事が真っ白になり何も表示されない状態になります。1,2秒で表示されるとはいえ、Webではその1,2秒の表示遅延が命取りです。短気な人だと即直帰してしまうでしょう。素晴らしい記事を書いているのに読み込みが遅いという理由だけであなたの記事が読まれなくなります。Webフォントを軽くする方法もあります。日本語フリーフォントをWebフォントとして使う方法【高速化もする】WebフォントといえばGoogleフォントですが、フリーの日本語フォントはたくさんあります。それらはWebフォントとしても使うことができます。この記事を読む容量が大きくても一度読み込まれればキャッシュが効くので次回からは文字がすぐ表示されます。PVを集めるサイトではWebサイトは向かない、リピーター向けのサイトではWebサイトでもOKということです。これから5Gが当たり前になり、表示速度が向上されるとWebフォントのほうが優勢になるかもしれません。5G...ざっくりいうとすごく早い通信。2時間の映画の動画が3秒でダウンロードできるという。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む游ゴシックはchromeで細く読みづらい游ゴシック上記は游ゴシックです。chromeで見てみてください。游ゴシックはパソコンに標準インストールされている比較的新しいフォントです。問題点としてchromeで細くなってしまいます。目の悪い方にとっては非常に読みづらくなってしまいます。明朝体は筆で書いたようなきれいなフォントです。印刷物ではよくつかわれるフォントです。パソコンでは向きません。パソコンは最低のサイズ単位が1pxであり、筆で書いたようにだんだん細くなる表現が難しく、できたとしても文字が細くなり読みづらくなりがちです。メイリオは一瞬で表示され、読みやすいメイリオメイリオは語源が「明瞭」であり、読みやすいことを目的として作られたフォントです。パソコンに初期インストールされているフォントです。Webフォントのダウンロードが必要という問題もメイリオにはありません。游ゴシックや明朝体の細くて読みづらいという問題もありません。そもそも読みやすさを目的として作られたフォントです。メイリオは比較的昔のフォントです。したらダサく感じるかもしれません。ダウンロード不要かつ読みやすいフォントでメイリオ以上のものは今のところまだ出ていません。タイトルやアクセントには他のフォントでもOKメイリオがおススメとはいえ、すべての文字のフォントをメイリオにするとおもしろみがないサイトになる場合があります。基本的な文章はメイリオにして、タイトルやアクセント部分だけWebフォントやその他のフォントにするのはアリだと思います。まとめWebフォントは表示が遅い(キャッシュがあればOK)游ゴシックはchromeで細く読みづらい明朝体はパソコンでの長文に向かないメイリオは一瞬で表示され、読みやすいタイトルやアクセントには他のフォントでもOKあくまで現時点です。5Gが当たり前になり通信速度が飛躍的に向上すればWebフォントのほうが優勢になるかもしれません。以上、font-familyはメイリオがオススメな理由でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。