中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
otfとwoffの基本的な違いを理解しよう
OTFはOpenTypeフォントの略で、アウトラインデータと呼ばれる文字の形を指示する情報を格納するフォーマットです。紙の印刷やデジタルアプリで長年使われてきた標準の形式で、TrueTypeとPostScriptという2つの流派が組み合わさっています。OTFにはヒント情報と呼ばれる微妙な調整データが含まれ、表示の際に文字の形が崩れにくいよう工夫されています。これに対してWOFFはWeb Open Font Formatの略で、主な目的はウェブ上でのフォント配信を軽くすることです。つまりOTFは印刷物やオフライン表示向けの安定性を重視し、WOFFはウェブ上での読み込み速度を重視した設計が基本です。
WOFF/WOFF2は元のフォントデータを圧縮してネットワーク越しに送る仕組みです。WOFFはgzipと同様の圧縮を使い、OTFやTTFの情報を包んでファイルサイズを小さくします。WOFF2はより新しいアルゴリズムを使い、同じ文字集合であってもさらに小さくなることが多く見られます。ウェブサイトのパフォーマンスを考えると、WOFF2を第一候補として使うのが現在の主流です。ただし、フォントのライセンス条項をWeb埋め込みに対応しているかは必ず確認してください。ライセンス次第で、ウェブ上での配布自体が制限されてしまうからです。
互換性と用途の違い
OTFとWOFF/WOFF2はどんな場面で適していますか？OTFは印刷物、PDF、デスクトップアプリ、オフラインの表示で安定した描画を提供します。WOFFとWOFF2はウェブサイトのフォントとして設計され、ブラウザがデコードして表示します。現代のほとんどのブラウザはWOFF/WOFF2を読み込む能力を持っており、オンラインでのフォント配布の標準として広く使われています。
ただし、OSに組み込まれているOTFフォントをそのままウェブに使うと、ライセンスや配布権の問題が生じることがあります。
ライセンス面の違いも重要です。OSに入っているOTFフォントはシステムフォントとして使われますが、ウェブ上での再配布や埋め込みには別のライセンスが必要です。WOFF/WOFF2はウェブ配布用のライセンスが必要になることが多く、商用サイトではウェブフォントライセンスを取得するか、Google Fontsのような公開ライセンスのフォントを使うのが手っ取り早いです。ライセンスの確認を最優先にしてください。
実務での使い分けのコツ
実務の基本はウェブ用にはWOFF2を第一選択とすることです。CSSの@font-faceを使い、src:url('path/fonts/font.woff2') format('woff2');と指定します。サイト全体を統一する場合はファイルを1つか2つに絞り、管理を簡潔にします。印刷物やデスクトップアプリ向けにはOTFを別途用意するのが一般的です。ライセンスと技術要件を満たす計画を立てることが重要です。
パフォーマンスをさらに高めるコツとして、フォントのサブセット化（必要な文字だけを抽出してファイルサイズを削減）と、複数ファイルを避けて1つの軽量ファイルに統一する工夫があります。font-display: swap を使えばフォントが読み込まれるまでの表示が乱れず、ユーザー体験が向上します。実務ではこの他にも遅延読み込みやCDNの活用、適切なキャッシュ設定など総合的な最適化が求められます。
結局のところ、ウェブの速度とライセンスの両面を考慮して選択することが最も大切です。
ところで、WOFF2の話をすると友達とついこの前も雑談になりました。ブラウザがフォントを読み込むとき、従来のOTFファイルをそのまま送るより、WOFF2に圧縮するとページの読み込みが速くなるって知ってましたか？私が自分のサイトを作っていたとき、初めてCSSのfont-faceを使ってfont-displayを設定したとき、読み込みが遅い原因がフォントファイルの大きさだと気づいたんです。WOFF2は同じフォントデータを小さくするので、端末がつまずくことが減ります。とはいえ、ライセンスと互換性の問題はいつも頭の片隅に置く必要があります。
ITの人気記事
