2020.2.14サブセット化で日本語Webフォントの容量を軽量化する方法web制作デザインWebサイトをデザインする際、フォント選びはそのサイトの雰囲気を左右する重要な要素のひとつとなります。こだわりのあるフォント、おしゃれなフォントをWebサイトに使うことで差別化することができます。WebサイトにWebフォントを使うことも増えつつあります。Webフォントを使用するメリット見栄えが良くなる、デザイン性が高くなるテキスト表示できるためSEO効果がある他サイトと差別化できるどの端末で閲覧しても同じフォントになる自動翻訳に対応できるWebフォントの使い方はこちらWebフォントを使ってWEBサイトのデザインを高めるWebフォント使用の注意点Webサイトをより魅力的にするWebフォントですが、日本語のWebフォントには最大の問題点があります。それは容量が大きくなってしまうことです。日本語フォントは含まれる文字数が多いためファイル容量がかなり大きくなります。10MBを超えたりするものもあります。これは重すぎて表示するまでに時間がかかってしまいます。表示速度が下がると、検索順位の低下や、閲覧者の離脱につながるため、避けることが望ましいですね。そんな容量の大きい日本語フォントですが、サブセット化することで容量を軽くする事ができます。サブセット化とは、フォントに含まれる文字の中から必要な文字だけを抜き出しファイルサイズを小さくすることです。それではダウンロードしたフォントをサブセット化して軽量化する方法をご紹介します。サブセット化で容量を減らす好みのフォントをダウンロード試しにこの棘薔薇フォントというのををダウンロードしました。それでは容量を確認してみましょう。なんと16.7MBでした。これはさすがに重い、、ソフトのインストールサブセットするにはいくつかのソフトが必要になります。下記からサブセットフォントメーカーとWOFFコンバータをインストールします。http://opentype.jp/subsetfontmk.htmhttp://opentype.jp/woffconv.htmサブセットフォントメーカーインストールしたサブセットフォントメーカーを起動してみましょう。画面は下のようになっています。第1水準漢字でサブセット化し、ファイルサイズを削減します。必要なフォントだけを残し使わないフォントは削除します。「作成元フォントファイル」で今回軽量化するフォントを指定します。「作成後フォントファイル」は軽量化した後のフォントの保存場所を指定します。第一水準漢字+記号+ローマ字+カタカナ+ひらがなを貼り付けます。下記よりコピペしてください。「作成終了後、WOFFコンバータを起動する」にチェックを入れます。作成開始でサブセット化します。第一水準漢字+記号+ローマ字+カタカナ+ひらがなを下記からコピーし、サブセットフォントメーカーのフォントに格納する文字の部分にペーストします。https://docs.google.com/document/d/1Qs-XTAZEgFxx9TbfTNCrGMGuEJqxv2T5SKTLRJ4Gv6Q/editWOFFコンバータ「変換前ファイル」で先程サブセットフォントメーカーで軽量化したフォントを指定します。「変換後ファイル」で変更した後のファイル名を指定します。「EOTファイルを生成する」でIEに対応したフォントファイルを制作できます。様々なブラウザに対応するため4種類のフォーマットのファイルを作成ことをおすすめします。.eot.ttf.woff2.woff10MBを超えるほとんどの日本語フォントは1MB以下に軽量化することができます。棘薔薇フォントはサイズを87%減少することができました。まとめこだわりのあるフォントを使用することでサイトをより魅力的にすることができますが、日本語のWebフォントを導入する際は容量に注意する必要があります。今回ご紹介した方法で容量を軽量化することで問題なくサイトに導入することができます。日本語フォントを使用するときは必須と言っていいと思います。活用しWebサイトのデザイン性を高めてみてはいかがでしょうか。リッキー10分でできる!WordPressのローカル環境が簡単に構築できる「Local」の使い方wordpress。