有料？無料？Webフォントとは？Webサイト制作に関するフォントの基本

Webサイト制作の際はコンテンツの質だけでなく、サイトの印象を大きく左右するフォントの選択にも気を配る必要があります。フォントの指定方法にはさまざまな種類がありますが、Webサイトのデザインを決めるルール「CSS3」で新たに導入されたフォントが「Webフォント」です。Webフォントを利用することで、テキストで使用できるフォントの幅が広がり、サイトのデザインの自由度を高めることができます。そこで今回はWebサイト制作に関するフォントの基本とWebフォントについてご紹介していきます。

よくパワーポイントのスライドを作るとき、かわいいフォントを使いたくて、フリーフォントを探しているよ。フォントを変えるだけで、見栄えが全然違うよね。

フォントを工夫するだけで、デザインのクオリティは一段と上がります。Webデザインの現場では、「Webフォント」を使用することで表現の幅が広がります。この記事ではそんなWebフォントについて具体的に解説していきます。

Webサイト制作に関するフォントの基本

フォントには無料フォントと有料フォントがあります。無料フォントは「フリーフォント」と呼ばれていますが、フォント利用料が無料であるだけで、著作権をフリーにしているわけではありません。

例えば、趣味のブログなど個人的なWebサイト制作に利用する場合は無料ですが、商用利用の場合は有料になるフォントや、ロゴマークや印刷に利用することはできないと規約に明記されているフリーフォントなどがあります。

フォントを利用する際は、必ずライセンス確認を行い、利用規約を守って使用しましょう。利用規約には、「利用後は著作者に連絡をしてください」「クレジット表記が必要です」と記載されているケースもあるため、利用前の確認が不可欠です。

Webフォントとは

Webフォントとは、Webサーバー上にあるフォントデータを参照して表示する仕組みです。ユーザーがWebフォントを利用するWebページにアクセスすると、そのWebフォントがダウンロードされ、ブラウザに表示されるようになります。Webフォントにも無料フォントと有料フォントの2種類があります。

和文のWebフォントは無料フォントの選択肢が少ないため、フォントにこだわるのであれば有料フォントがおすすめです。有料フォントの中からデザイン性が高く、読みやすいフォントが見付かるでしょう。

一方、欧文のWebフォントは無料・有料共に種類が豊富です。有料フォントを探す前にイメージに合う無料フォントがあるかどうか探してみてください。

Webフォントを使うメリット

ユーザーが使用するOSによって標準インストールされているフォントは異なります。CSS2（CSS Fonts Level 2）の「font-family」プロパティではローカルデータ(ユーザー側の環境)のフォントを指定していたため、指定したフォントがユーザーのPCにインストールされていない場合、指定のフォントを表示させることができませんでした。

しかし、CSS3から導入されたWebフォントは指定したURLからフォントデータをダウンロードする仕組みであるため、ユーザー環境にかかわらず自由にフォント指定ができます。

CSS4では仕様が拡張され、1~1000までに値を自由に指定できるようになりました。これにより、1000段階もの太さの調整が可能になりました。細かく太さを指定したい方にはまたとない機能となっています。

WebフォントはWebページの拡大・縮小表示をしても文字の形が崩れないことも特性の1つです。

和文Webフォントのサブセット化

日本語は漢字の文字数が多いため、和文Webフォントは欧文Webフォントと比較してデータ容量が大きくなります。そのため和文Webフォントの読み込みに時間が掛かることがあります。

読み込み時間短縮のために有効な方法が、Webサイト内で使用するフォントだけを読み込む「サブセット化」です。読み込むフォントを第1水準漢字・平仮名・カタカナ・記号などに限定することによって、ユーザーにストレスを与えることなくサイトを表示させることができます。

おすすめWebフォントサービス

１）欧文フォント

・Google Fonts
すべて無料で使用することができます。DM SansやCormorantといったメジャーなフォントから、EczarやAlegreyaなど凝ったフォントまでさまざまな展開がある、万能なWebフリーフォントサービスです。

・Fontspring
海外フォントを販売しているサイトです。無料のものから有料のものまで取り揃えがあり、多くの海外フォントを販売しているため、自分好みのフォントが見つけられるのではないでしょうか。

・Adobe Fonts
アドビシステムズ社の提供するサブスクリプション型のフォントサービスです。欧文も和文も取り揃えが豊富であり、料金も高くないため、初心者の方にも手の出しやすいサービスとなっています。

・Font Squirrel
すべて無料で使用することができます。こちらはグラフィックとWebフォント、両方で使用することができるフォントです。個性的なフォントが多いため、一風変わったおしゃれなフォントを探している方におすすめのサイトです。商用利用可のものもあり、詳しくはフォントごとにライセンスをご確認ください。

インターネット・アカデミーの受講生なら、Adobeソフトを特別価格で1年間利用することができます。そのパッケージの中にAdobe Fontsも含まれているので、大変お得に利用を開始することができます。

２）和文フォント

・Google Fonts
欧文フォントとしても紹介しましたが、2021年に日本語のフォント31種類が追加されて以降、Googleフォントの提供する日本語Webフォントは年々増加し、現在、52 種類の和文フォントが提供されています。

・FONTPLUS
3600種以上のフォント数を取り揃える、ソフトバンク・テクノロジーが手がけるWebフォントサービスです。有料ですが、利便性も高く、大手企業も多く利用しています。

・WebフォントTypeSquare
有料Webフォントサービスで、月額課金のサブスクリプションで展開しています。1,800種類以上のフォントを使用でき、日本語フォントは1,000種類以上揃っています。日本の会社が提供しているため、日本語フォントが豊富に揃っていることが特徴です。無料から有料までのプランがいくつかあり、商用利用も可能です。

おわりに

フォントによってWebサイトの印象が決まると言っても過言ではありません。Webサイトで使用するフォントのバリエーションを豊かにしたい場合はWebフォントの使用が効果的です。

ただし、Webフォントを使用する際はフォントの利用規約に目を通すだけでなく、著作権に対する十分な理解が欠かせません。自身がどこまで十分に学べているかわからないという方や、これから知りたいという方は、まずWebサイト制作に関する著作権や現場でのフォントの活用方法をWebの専門スクールで学ぶこともおすすめです。

インターネット・アカデミーでは、企画からデザイン、コーディングまで、実際に１からWebサイトを作りながら、制作するためのノウハウも学ぶことのできる講座をご用意しております。少しでもご興味がございましたら、ぜひお気軽に無料カウンセリングにお越しください。

Webサイトの必須スキルと最新技術

作品制作講座

Webサイトの企画からデザイン、コーディングまで、既定のWebサイトを制作しながら、実践で使えるスキルを学びます。

相談してコースを選びたい方はカウンセラーに無料で相談

※無理な勧誘は一切ありません

無料で相談してみる