有限会社Willさんいん ホーム

サイトマップ

お問い合わせ

0852-28-6220(平日 9時30分から17時30分)

このページの位置: Home > フロントエンドエンジニアのblog > Web フォントを使ってみました

フロントエンドエンジニアのblog

RSS

Web フォントを使ってみました

この記事は2015年3月25日に書かれたものです。情報が古い可能性がありますのでご注意ください。

Willさんいんでは、モリサワのすべてのフォントが使用できる MORISAWA PASSPORT を契約していますが、すべての MORISAWA PASSPORT 製品契約者は、追加料金なくモリサワの Web フォント(モリサワでは“クラウドフォント”と称しています)TypeSquare を利用できるということで、Willさんいんのサイトに導入してみました。この MORISAWA PASSPORT プランは、利用可能書体数、利用可能ドメイン数に制限がなく、1,000万PV/年まで無料で利用できます。

今回、視認性が高く、読みやすいというユニバーサルデザインフォントを採用し、本文を含むすべてに “UD新ゴ” をベースフォントとして使い、見出しには “UD新丸ゴ” を使ってみました。

くもやじ” とか “プリティー桃” とか “はるひ学園” とか “すずむし” といったデザインフォントも使えます。

従来から日本語の Web サイトでは、テキストのデザイン表現のために、メニューや見出しなどには画像テキストが使われることが多いですね。Willさんいんでは画像ではなくテキストを用いることを基本としていますが、基本的には PC に一般的にインストールされているフォントに限られるため、Windows での表示を考慮すると、どうしても飾り気のない普通のゴシック体になります。

また、JIS X 8341-3:2010 では「画像化された文字に関する達成基準(等級 AA)」として、次のように記されています。

使用しているウェブコンテンツ技術で意図した視覚的な表現が可能である場合は、画像化された文字ではなくテキストを用いて情報を伝えなければならない。

これまで画像テキストにしていたメニューや見出しなどに Web フォントを使えば、テキストデータとして扱うことができますので、ユーザビリティやアクセシビリティの向上が見込めますし、テキストやデザインの変更が HTML や CSS の編集だけで済み、メンテナンス性も向上します。また、CSS3 を駆使すれば多少凝ったデザイン表現も可能です。

しかし、日本語の Web フォントは文字数が膨大なため、フォントファイルのダウンロードに時間がかかるなどの理由から、まだまだ普及していません。サイト内のテキストデータを分析して、必要なフォントデータだけを配信するという Web フォントサービスもありますが、月々の使用料が必要なため、費用が発生するのなら使用を見送るという場合も多いと思います。

以前、アクセシビリティ関連のセミナーに参加した際、弱視の方が「メニューを画像にしないでほしい」と訴えておられました。

もっと気軽に日本語 Web フォントを使用できる環境が整い、日本語 Web フォントが普及すれば、画像テキストというアクセシビリティ上の問題の解決の一助になるのではないかと思います。

この記事へのフィードバック

Facebook のコメントです。

コメントを残す

この記事のトラックバックURL:
https://www.will3in.co.jp/blog/article/using-web-fonts/trackback/

このページの先頭へ