CMSお役立ち情報！

Webサイトの「文字」は、情報を伝えるインターフェースです。
しかし、同じ「文字」の情報でも、フォントが異なるとどうでしょうか？

例えば、実際に同じ文字列をフォントを変えてみると、下記のようになります。フォントが異なるだけで、強い印象、優しい印象など、伝わる印象は異なってきます。また、見やすさ、読みやすさ、といった「文字」にとって重要な役割である機能面でも、フォントによって大きく左右されます。

実際に、「ＭＳ Ｐゴシック」「メイリオ」「ＭＳ Ｐ明朝」を指定した場合、下記のように印象が異なります。

見出し

本文

ウェブサイトを表示する際に使用するフォントは、一般的には下記のようにCSSの定義によって、指定することができます。

• CSSの記述例
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";

デバイスフォント

指定されているフォントは、閲覧者の端末（PCやスマートフォン）にインストールされているフォント＝「デバイスフォント」を使用して表示されますが、端末側に対象のフォントがインストールされていない場合、異なるフォントで表示されることになります。
例えば、上記のCSSの記述例のように「メイリオ」「ＭＳ Ｐゴシック」を指定した場合、Windows端末では意図したフォントで表示されますが、MacOSやiPhoneなどでは対応するフォントが無いため、下記左図のように異なるフォントで表示されることになります。

フォントは、OSやバージョンによっても異なりますので、フォントを指定する際には注意をしなければなりません。

では、Webフォントはどうでしょうか。

Webフォントは、フォントファイルがインターネット経由で提供されるサービスです。フォントが端末にインストールされる必要がないため、ウェブサイトで指定したWebフォントのまま、閲覧者の端末に表示することができます。

例えば、Google Fontsより提供されている日本語に対応した「Kosugi Maru」「Noto Sans JP」「Noto Serif JP」を指定して確認すると、下図のように、端末に関わらず同じフォントで表示できることが確認できます。

Webフォントを利用する前に、メリット・デメリットを確認しましょう。

Webフォントのメリット・デメリット

メリット

• 端末に関わらず同じフォントで表示が可能。
• フォントを含めて画像化している制作作業を、Webフォントでテキスト化することが可能。
• 画像をテキストに変更することで、編集が容易、アクセシビリティやSEO的にも優位。

デメリット

• 費用が生じる場合がある（有料サービスの場合）。
• フォントファイルの読み込みに時間がかかる場合があり、ページの表示速度に影響がある。
  ※Webフォントを使用する箇所が多い場合（Body全体にWebフォントを使用する場合など）は、制作時にPC、スマートフォンで表示速度を確認しましょう。

次に、上記のWebフォントのメリット・デメリットも考慮した上で、Webフォントを利用するべきかどうか検討しましょう。Webフォントを利用する場合、Webフォントサービスを利用する方法が一般的ですが、CMS「CLOUD LINE」ではフォントモジュールを設定して利用することができます。

Webフォントサービスを利用する

Webフォントサービスには、Google Fontsのように無料で提供されるサービスもありますが、モリサワが提供する「TypeSquare」やAdobe Systemsが提供する「Adobe Typekit」のように、提供内容によって有償となるサービスもあります。Webフォントサービスを利用する場合は、どんなフォントが利用できるのか、費用がかかるかどうか、商用利用は可能か、日本語に対応しているかなど、予め提供されるサービス内容も合わせてご確認の上、ご検討ください。
利用方法につきましては、各Webフォントサービスサイトをご確認の上、ご対応ください。

• 参考：Webフォントサービス
  Google Fontsサイト
  TypeSquareサイト 
  Adobe Typekitサイト 

CMS活用：フォントモジュールを利用する

CMS「CLOUD LINE」では、フォントモジュールにより、サイトロゴ、サイト全体、見出し（H1～H６）、メニューを指定して、Googleフォント（Google Fonts、Google Fonts 日本語）を設定することができるようになりました。
→新モジュール「フォントモジュール」をリリースフォント設定

弊社提供の既存デザインテンプレートにつきましては、そのデザインに合うようにフォントを指定しておりますが、「H1の見出しはWebフォントを利用したいな」「メニューはWebフォントで少し個性を出したい」などのご希望にもお応えできるように、簡単に設定を行うことができます。

操作マニュアルの設定をご確認いただき、ぜひフォントモジュールをご活用ください。
→操作マニュアル「フォント設定」

実装事例

サイトロゴ・H1・メインメニューをGoogle Web Fontsの「Kosugi Maru」に設定しました。
PCの表示（上図：左上ロゴ、メインビジュアル上のH1、上部メニュー）、およびスマートフォンの表示（下左図：メインビジュアル上のロゴとH1、下右図：ハンバーガーメニュータップ後のメニュー）をご確認ください。

※サイト全体で使用するフォントは、サイト内に複数フォントを使用することで、統一感がない印象を受けてしまうこともあります。サイト内のフォントは2種類程度が理想的です。

■PC