![見出し画像](https://assets.st-note.com/production/uploads/images/41334753/rectangle_large_type_2_32ba4583c1a20a3a9f8da7161b42f3ea.png?width=1200)
【Webコーダー向け】効率的コーディングに必要な「フォント」の知識
こんにちは。マークアップエンジニアのヤナダ(@yanada_front)です。
Web制作の初心者向けに「HTML・CSSを丁寧に解説した教材」は数多くあります。しかし、「フォントについて解説した教材」はそれほど多くないように思います。かくいう私も、実際に案件を取った後に、フォントでつまずいた一人です。
このページでは、駆け出しエンジニアの方が、実際の案件を取ったときにつまずかないよう、最低限必要な「フォント」の知識をご説明いたします。
![画像12](https://assets.st-note.com/production/uploads/images/26101417/picture_pc_45e38e6304a3177efd41e9f964396f4b.png)
1. 対象読者
Photoshop のデザインカンプを渡されて、コーディングを実施する人
・デザインも自分で行う場合
・WordPress でテーマを利用する場合 などは、今回は対象外です。
2. Photoshop と フォント
貰ったデザインカンプ(Photoshop)には、コーダーの作業環境にないフォントが含まれていることがあります。
・Adobe 製品特有のフォント(小塚ゴシック など)
・Mac 環境デザイナーが作った Photoshop を、Windows 環境コーダーが閲覧する場合(逆も同じ)
・デザイナーが、独自に購入したと思しき、よく分からないフォント
ここから、2つの問題が発生します。
(1) コーダーの作業環境で、Photoshop の文字表示が変わってしまう。
(2) 実際のウェブサイト上の表示において、まったく同じフォントを再現することができない。
順に、解決策を見ていきます。
3. コーダーの閲覧環境について
★3-1. コーディング前のルーチンワーク
まず結論を書きます。
コーディングを行うにあたり、最初にやるべきルーチンワークは下記です。
-------------------------------------------
(1) デザインカンプ(PSDファイル)のコピー(バックアップ)を保存する
(2) 書き出し > PNGとしてクイック書き出し
(3) 個別画像の書き出し
(4) スクリプト「TextExportToCSV」を実行する
(5) 見つからないフォントを解決する
(6) 見つからないフォントの置き換え
-------------------------------------------
(1) バックアップ保存
Photoshop の表示は、作業している間に微妙に変わることがあります。作業前のオリジナル版を保存しておくと、最終チェックが楽になります。
(2) 全体画像 クイック書き出し
作業環境にフォントがインストールされていなくとも、Photoshop を開いた瞬間は、正しく(本来のデザイン通りに)表示されています。
この本来のデザインをまず、保存してしまいましょう。
「メニューバー」→「書き出し」→「PNGとしてクイック書き出し」で、デザインカンプ全体を1枚のPNGとして出力することができます。
(3) 個別画像の書き出し
ヒーローイメージやバナーなど、文字情報を含んではいるが、実際のコーディングでは「画像」として処理する部分があると思います。
まず最初に、画像として処理する部分を決定し、まとめて書きだし作業を行ってしまうのが吉です。
画像生成を後回しにしていると、気づかぬ間に Photoshop 上での表示が変わってしまい、本来とは違うフォントで画像を切り出すことになりかねません。
※ なお、「書き出し」といっていますが、「ファイル」→「生成」→「画像アセット」を利用するのが最もラクです。
(4) スクリプト実行
Photoshop を起動して、文字データを選択すると、パネルにフォント等が表示されます。
![スクリーンショット (460)](https://assets.st-note.com/production/uploads/images/26100512/picture_pc_604d547521aef44f90a32b69a18a8dfb.png)
しかし、一々「クリックで選択 → フォントを確認」していると、非効率なうえ、設定漏れが発生する可能性が高いです。そこで、デザインカンプ内で設定されているフォントを、CSVに一括出力することをオススメします。
スクリプトを利用すると、簡単に一括出力できます。
詳しい手順は、下記サイトをご参照ください。
■ PSD からテキスト情報を抽出するスクリプト - Developers' Blog
(5) 見つからないフォントを解決する
「メニューバー」→「書式」→「見つからないフォントを解決する」を実行してください。
フォントの「解決」とは、「Adobe が提供しているフォント」がPCにインストールされていなかった時に、自動インストール(アクティベート)する機能を指しています。
契約上の話をすると、Photoshop 製品版をお持ちの人は、Adobe Creative Cloud プラン (CCプラン) を契約していますので、Adobe が提供する「Adobe Fonts」を利用することができる、というわけです。
-----------------------------------------
※「Adobe フォント アクティベート」などとググると、「Creative Cloud デスクトップ を操作する」という説明や「Adobe Fonts 公式サイトにログインして操作する」といった説明が見つかるので、混乱する人もいるかもしれません。
![スクリーンショット (461)](https://assets.st-note.com/production/uploads/images/26100839/picture_pc_19f513ccc244d0152e9ead863008d71c.png?width=1200)
たしかに、それらの方法でもフォントのインストール(アクティベート)は可能です。
しかし、「Photoshop で使われているフォントを、一括でインストールしたい」というだけであれば、「Photoshopを起動」→「メニューバー」→「書式」→「見つからないフォントを解決する」という手順が、もっとも簡明かつ容易です。
-----------------------------------------
(6) 見つからないフォントの置き換え
手順(4)で「Adobe が提供しているフォント」については解決しましたが、それ以外のフォントについては、依然として作業環境にインストールされていない状況です。
フォントがインストールされていない文字データを選択すると、一々ダイアログが表示され、作業の効率が低下します。
![スクリーンショット (463)](https://assets.st-note.com/production/uploads/images/26100872/picture_pc_76bd798bcdb3555027d422d290401d66.png)
そのため、「メニューバー」→「書式」→「見つからないフォントの置き換え」を実施します。
フォントの「置き換え」とはその名の通り、PCにインストールされている、別の適当なフォントで置き換えて表示することを意味します。「解決」とは異なり、デザイナーが意図したものと違う表示に変化してしまいます。
以降の作業は、「あくまでこのフォントは、作業の便宜上、置き換えたものにすぎない」ということを意識する必要があります。本当に想定通りのデザインになっているかは、書き出したPNGや、バックアップのPhotoshopと見比べながら進めることになります。
<追記>
「Zeplin」というツールを使えば、この手順6は気にする必要がなくなります。この note では触れませんが、「Zeplin」はコーディング効率化には欠かせないツールなので是非とも導入しましょう。
→ Zeplinを導入してコーディングの効率UP!
上記 5 ステップを最初に実施しておけば、後々のコーディングがスムーズになります。間違えても、一番最初に「置き換え」を実行するような真似はいけません。Photoshop の表示が、想定デザインと異なっていることに気づかないまま、作業を進めてしまうと、クライアントから差し戻しを食らい、時間を浪費することになるでしょう。
★3-2. フォントが適用されているか、確認する方法
実際にコーディングする際に、必要になる知識です。
![スクリーンショット (470)](https://assets.st-note.com/production/uploads/images/26100908/picture_pc_dca6d949c78e9a4252579f4353755b91.png)
想定通りに、フォントが反映されているかを確認する際に、デベロッパーツールの「font-family」の設定を見てはいけません。これはあくまで CSS の設定がどうなっているか、を表示しているにすぎません。CSSでフォントを設定していても、そのフォントが実際にPCにインストールされていなければ、表示されることはありません。
実際に表示されているかは、デベロッパーツール → Computed → 一番下の「Rendered Fonts」で確認できます。
![スクリーンショット (472)](https://assets.st-note.com/production/uploads/images/26100965/picture_pc_2d4f1eb0500bac9a25b6c39e3a6ffc6f.png)
「Local File」と書いてある場合、PCインストール済みのフォントが反映されています。「Network resource」と書いてある場合、後述の「Webフォント」が読み込まれて反映されています。
4. サイト閲覧者の環境について
★4-1. 閲覧環境によってデザインは変わりうる
ここからは、制作したサイトが、実際に多くの人に閲覧される場合の話題になります。
基本的には、閲覧者のPCにインストールされていないフォントは、ウェブページ上で正しく表示されません。他の適当なフォントに置き換えられて表示されます。そのため、マイナーなフォントを設定すると、閲覧者ごとに見え方が異なる可能性があります。場合によっては、デザインが崩れるかもしれません。
ただし「Webフォント」を利用すれば、どの環境でも同じ見え方になります。Webサーバー側で「フォントのデータ」を持っておき、ウェブページを配信する際に、HTML・CSS等と合わせて、フォントのデータも配信するという仕組みです。
![画像1](https://assets.st-note.com/production/uploads/images/26100028/picture_pc_61ac655eab5cd092156d89a3912845a8.jpg?width=1200)
(画像引用元: https://www.asobou.co.jp/blog/web/webfont)
日本語の場合、フォントデータのサイズが大きく(重く)なりがち、という問題がありますが、デザインを崩さないためには役立つ仕組みです。
「Webフォント」の配信には、2種類の方法があります。
1つは、Webサイトを設置するのと同じWebサーバに、フォントデータを置くという方法。もう1つは、Google などが提供する、どこか別のWebサーバからフォントデータを読み込ませる、という方法です。
基本的には、後者で対応するのがラクです。前者は「フォントデータのファイル」を用意・設置・管理する手間が生じますが、後者はコードを数行追加するだけで完了します。
例えば、CSSに以下のようなコードを追加すれば、Google が提供する「Noto Sans JP」を、Webページ内で読み込ませることができます。
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');
----------------------
※ 余談: Google などの大企業は、「主要なフォントデータ」を用意したサーバを世界中に設置しています。利用者は、最も近くのサーバからデータを利用できる仕組みになっています。世界中のアクセスが、アメリカの1つのサーバに集中するようなことはないため、素早いデータ配信が可能になっています。このような「同じデータを用意したサーバを、あちこちに用意するから、一番近いところから使ってね~」という仕組みを、CDN (content delivery network) といいます。Webコーダーにとっては、BootStrap や jQuery の読み込み方法として、おなじみの仕組みでしょう。
<!-- JQuery 読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
----------------------
★4-2. フォント設定の基本方針
大前提として、下記方針でコーディングすると良いと思います。
(1) 多くのOSで標準搭載されているフォントは、深いことを気にせずコーディングする(CSS に font-familyを書くだけ)
→ 全標準フォント一覧
(2) Google Fonts で手に入るものは、読み込んで使う
(3) その他の簡単に手に入らないフォントは、「類似のフォントでも構わないか」をクライアントに確認する
(4) 厳密にデザイン通りにする必要がある時だけ、Adobe Fonts の利用 / あるいは、フォントデータを用意→サーバに設置 を検討する
★4-3. Google Fonts の Webフォントを利用する
(1) 検索 → フォント選択
(日本語は使えないので注意。「ゴシック」→「gosick」などで検索)
(2) "Select this style" をクリック
(3) 右上のロゴマークをクリック
![画像7](https://assets.st-note.com/production/uploads/images/26101124/picture_pc_1f5675cc1e3fa10a96a9ffa49f39d3dd.png?width=1200)
(4) Embed のコードをコピペする
(※ <link> と @import のどちらでも良いと思います。
<link> → HTMLの <head>内にコピペ
@import → <head>内、あるいはCSS内にコピペ)
ただし、検索結果に下記のような表示がある場合、
「Google Fonts」以外の外部サービスに案内され、それ以降の操作手順も変わります。
慣れないうちは、どの企業のサイトを見ているのか、区別できずに混同しがちなので注意が必要です。
(下図の場合、Adobe Fonts に飛ばされます。)
![画像8](https://assets.st-note.com/production/uploads/images/26101183/picture_pc_3ea166f3a5333a825c27952c9da34df1.png?width=1200)
★4-4. Adobe Fonts について
Adobe社が独自に開発したフォントは、「Google Fonts」では手に入りません。その代わり、Adobe CCプラン契約者なら利用可能な「Adobe Fonts」というサービスがあります。
後述のとおり、使用には注意が必要です。
(1) 検索 → フォント選択
(2) Webプロジェクトに追加 を選択
(アクティベート ではない)
![画像9](https://assets.st-note.com/production/uploads/images/26101265/picture_pc_bdddf1c9ae785d444a894f9093ee5d41.png?width=1200)
(3) プロジェクト名をつけて保存
![画像10](https://assets.st-note.com/production/uploads/images/26101305/picture_pc_2723528297a34de4fd3b49417766e220.png?width=1200)
(4) 表示されるスクリプトを、HTML にコピペする
![画像11](https://assets.st-note.com/production/uploads/images/26101322/picture_pc_106dc9c93fed292dc7a69541bc357f0c.png?width=1200)
「Google Fonts」とは、微妙に使い方が異なります。
Google Fonts は、追加したいフォントの数だけ、個別に <link> や @import を追加していきます。
一方、Adobe fonts は、使用したいフォント全てを「そのWebサイト専用のプロジェクト」に紐付け、プロジェクトを読み込む <script> を1回だけ記述すればよい、という仕組みです。
なお、勘違いしやすいですが、手順(2)で「アクティベート」を選択すると、「見つからないフォントを解決」と同様の効果が得られます。すなわち、ローカルPCの Photoshop などで利用できるフォントの種類が増えますが、Webサーバからのフォント配信とは別物です。
【※注意点】
Google Fonts は、世界中の誰でもアクセスできる CDN です。
一方、Adobe Fonts は、Adobe CCプラン契約者のみが利用できるサービスです。そのため、CCプランを解約すると、作成したプロジェクトが消えてしまい、必然的に Webフォントの読み込みも無効になります。
ウェブ制作会社が「会社専用の Adobe ID」を用いるようなケースであれば、問題はないでしょう。しかし、外部のコーダーに委託した場合、フォントの読み込みの生殺与奪が、サイト運営者ではなく、コーダーの手にかかってしまう危険な状態になります。
コーダーの立場としては、3つの選択肢があると思います。
(1) クライアントの ID でプロジェクトを制作する
→ この方式なら、将来的にフォントが正常に読み込まれるかは「クライアントのアカウント運営責任」にかかってくるので、コーダーは一度納品すれば後を気にする必要はなくなります。
「Web制作会社からの下請け案件」であれば、この方式もアリだと思います。ただし、直案件(Webに詳しくないお客様からのサイト制作依頼)の場合、この手は使えないでしょう。
(2) 類似のフォントで代替する
→ 私の経験上、「デザインと全く同じフォントでなければいけない」というクライアントは、そう多くありません。
「フォントを厳密に揃えるには、別途有料フォントデータを購入して頂く必要がありますが、宜しいですか?」という聞き方をすると、「類似のフォントでよい」という返答をもらいやすくなります。(もちろん、コーダーが自腹でフォントデータを購入する義務などありません。)
ちなみに、デザイナーもフォントに厳密なこだわりがあるとは限りません。Adobe Photoshop で編集する際に、なんとなく Adobe 標準フォントを使っていただけ、という事も往々にしてあります。
(3) やっぱり Adobe Fonts を使う
→ 厳密にデザイン通りに制作してほしい、という依頼であれば、Adobe 公式配布フォントに優るものはありません。
また、「私は向こう10年、絶対にCCプランを解約しない!」という方であれば、Adobe Fonts を使って納品するのもアリだと思います。
5. 最後に
HTML + CSS の解説サイトはよく見かけますが、こういった実務に必要なフォントのノウハウを、ひとまとめに解説したサイトは余り見かけません。(私の情報収集が甘いだけかもしれませんが。)
断片的に「フォントの仕様」を解説したサイトは存在しています。しかし、多くのコーダーにとって本当に必要なのは、「技術的な解説」+「実際にどういう手順でコーディングすればいいか」の両方を組み合わせた "ノウハウ" ではないでしょうか。
全国のwebコーダーが、自分の中で練り上げた「ノウハウ」を共有・公開し合うことで、よりweb制作が効率的になればいいな、と願っています。
この note が役に立ったら、SNSでシェアして頂けますと有り難いです。
他にも、web制作のノウハウをまとめた note を投稿しています。マガジン「Yanada's Note」にまとめていますので、ぜひご覧ください。
この記事が気に入ったらサポートをしてみませんか?