WEBフォントを活用しよう

WEBフォントを活用しよう

以前こちらの記事でもご紹介したとおり、WEBサイトに表示されるテキストのフォントは、ユーザーの環境によって違います。Windowsではメイリオ、MSフォント(Win8以降は游フォント)、Macでは游フォントやヒラギノフォントが表示されるのが一般的です。今回はWEBフォントについてもう少し詳しく書いていきたいと思います。

【WEBフォントとは?】
WEBサイトのテキストは、ユーザーの閲覧端末(パソコンやスマホ、タブレットなど)にインストールされているフォントで表示されます。逆に言えばインストールされていないフォントは表示できないということになります。この問題を解決するのがWEBフォントです。
あらかじめサーバーにフォントデータを格納することで、端末が異なっても同じフォントを表示することができます。また、WEBフォントは解像度が高く、高解像度のディスプレイでも美しく表示することができ、レスポンシブデザインのWEBサイトでも効果が期待できます。

【WEBフォントは必要?】
WEBフォントの役割は目的によって異なります。下記は一例になりますが、業態に合った目的を達成するために、必要か不要かを判断すると良いでしょう。

・デザインが重視されるWEBサイト
ただ置かれるだけの飾り気のないテキストも、WEBフォントを使用すれば好みのテイストに変更することができます。高品質なフォントを利用すればブランディングの一助にもなるでしょう。

・文章の多いメディア系のWEBサイト
文章が主体のWEBサイトでは、高品質なWEBフォントの効果を実感することができます。紙媒体で使用されているフォントをWEBフォントとして使用することで、紙面と似た雰囲気のWEBサイトを制作できます。

・自治体、官公庁など、アクセシビリティが重視されるWEBサイト
多くのユーザーがより読みやすいようにつくられた「ユニバーサルデザインフォント」というフォントがあります。WEBフォントにユニバーサルデザインフォントを設定することで、可読性の高い、よりユーザーの満足度の高いWEBサイトになります。

【WEBフォントのデメリット】
・利用コスト
日本語フォントの場合、有料のものでないとWEBフォントとして採用する品質ではないものも多いです。

・表示速度を遅くする可能性
WEBサイトの表示の際、フォントデータの一部を読み込むので表示速度に影響を及ぼすことがあります。

対象のWEBサイトにWEBフォントが適しているかどうかは、株式会社モリサワの提供するTypeSquare Web Font Tryoutで無料で確認することができます。ページの下にある入力欄にWEBサイトのURLを入力して「Tryout」をクリックすると、サイトにウェブフォントを適用した様子が表示されるので、試してみてはいかがでしょうか?
TypeSquare Web Font Tryout

「TypeSquare WebFontTryout」でヤフートップページのフォントを変更してみました

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像