Web上で好きなフォントを簡単に表示できるTypekitの使い方

Web上でさまざまな フォント を表示することができるWeb フォント は、今ではかなり一般的になりつつあり、さまざまなホームページがWeb フォント を活用しています。
Web フォント には欧米文字だけでなく、日本語 フォント も設定次第で表示することができるので、 タイトル などの画像スライスを作成する必要がなく、デザインの幅が大きく広がります。

Web フォント を選ぶサービスとして最もよく知られているのはGoogle Fontsですが、 Google Fontsには日本語 フォント が充実しておらず、日本語サイトをデザインするデザイナーにとってはあまり使い勝手がよいとは言えないでしょう。
しかし、PhotoshopやIllustratorなどの開発・販売をしているAdobeでは、Typekitと呼ばれるWeb フォント サービスを展開しており、日本語 フォント も充実しています。
さらに特筆すべきことは、このTypekitはCreative Cloudの有料会員はもちろん、無料でも十分に活用することができるという点です。

そこで本稿では、無料から始められる、Web上で好きな フォント を簡単に表示できるTypekitの使い方を初心者向けに解説していきます。

Typekitを使ってみよう

スクリーンショット：2017年9月

デザインを行う上で必要不可欠なのが、 フォント を使って文字を装飾することですが、もっと自由にフォントを使えたらますます便利になると思いませんか？
Adobeが提供しているWeb フォント サービスTypekitは、そんな思いに応えるWebサービスです。

このサービスを使えば、サーバーに フォント をアップロードしたり、 ユーザー にわざわざ フォント をダウンロードしてもらわなくても、Web ブラウザ 上ですぐにデザイン フォント を表示することができます。

ここでは、Typekitの使い方を3ステップに分けて確認していきましょう。

1. Adobe IDを登録

Typekitには、Adobe IDへの登録が必要です。
こちらのページに移動し、新規でAdobe IDを発行するか、すでにお持ちのAdobe IDでログインを行なってください。

2. 使いたい フォント を選ぶ

スクリーンショット：2017年9月

サインアップ(もしくはログイン)後、 フォント を選ぶ ページ が表示されます。
右側のフィルターで絞り込みを行ったり、上のトグルで日本語 フォント だけを選ぶことができます。

スクリーンショット：2017年9月

無料プランでは、日本語 フォント は「源ノ角ゴシック」「源ノ明朝」「平成角ゴシック Std」「平成丸ゴシック Std」「平成明朝 Std」の5つを選択することができます。
ここでは「平成丸ゴシック Std」をホームページに反映させてみましょう。

スクリーンショット：2017年9月

使える フォント が緑色のボタンで表示されるので、Webサイトで表示したい場合は「キットに追加」ボタンをクリックします。

3. キットを作成して埋め込みコードを追加

スクリーンショット：2017年9月

最初はまだキットを作成していないので、このような画面が現れます。

スクリーンショット：2017年9月

「キットを作成」をクリックして、サイト情報を入力します。

すると、このような埋め込みコードが作成されるので、このコードをコピーして、ホームページのHEAD タグ 内、もしくはBODYの閉じタグの直前に挿入します。
( SEO 的にはBODYの閉じタグの直前のほうがいいと言われています)

スクリーンショット：2017年9月

続行をクリックするとキットの管理 ページ に移動します。

スクリーンショット：2017年9月

「公開」を押して、キットを有効化します。

有効化したあと、このページの「 CSS で フォント を使用」をクリックすると、 CSS 挿入用のタグが表示されます。

スクリーンショット：2017年9月

こちらのコードを任意の場所に挿入してください。

すると、下記のような角ゴシック調の ブログ 記事が、

スクリーンショット：2017年9月

丸ゴシックで表示されるようになりました。

スクリーンショット：2017年9月

Web フォント だけではない、Typekitを試してみたい理由

画像引用元：stock.io

実は、TypekitはWeb フォント を簡単に導入できるという点で非常に便利ではあるのですが、それ以外にも便利な機能があります。
ここでは、Typekitを試す上でチェックしておきたいその他のポイントも確認していきましょう。

1. デスクトップ上のフォントとしても利用可能

Creative Cloudのデスクトップ アプリ をダウンロードすれば、Typekitで使える フォント をご自身のパソコンにインストールすることもできます。

無料プランでも、280個以上の フォント をインストールすることができます。
Adobeのソフトウェア以外にも、WordやPowerPointでも フォント を使うことができるので、文書やプレゼンテーションでもデザインの幅が広がります。

2. アウトラインやPDFへ埋め込みができる

Creative Cloudのデスクトップ アプリ 経由でダウンロードしたTypekitは、プリインストールされているフォントと同じように使うことができるので、アウトライン化して利用したり、PDFに埋め込みを行うこともできます。

YouTubeなどの動画にテロップとして活用することも簡単です。

名刺やフライヤーなどのデータを印刷会社に持ち込む場合には、必ずアウトライン化してデータを渡すようにしましょう。

さらに多くのフォントを使いたい場合

以上で見たように、Typekitを使えば簡単にWebサイトで日本語のWeb フォント も設定することができます。
無料プランでも5つの日本語 フォント を含め、950個以上の フォント を利用することができます。

ただし、日本語 フォント の数はこれでもたくさんあるとは言えないので、さらに多くのフォントを使いたい場合にはCreative Cloudの各種プランに登録するか、Typekitの単体サブスクリプションを登録する必要があります。

スクリーンショット：2017年9月

Creative CloudのプランのうちTypekitのポートフォリオプランが使えるのは月々2,180円からのプランで、Typekitだけを使いたい場合には年間49.99ドル(約5000円前後、月額450円程度)で利用することができます。

スクリーンショット：2017年9月

ポートフォリオプランに登録すると、日本語 フォント で使える書体は40種類にまで増えます。
中には「Roぶらっしゅ Std」や「TBカリグラゴシック Std」など、ユニークな書体を使うこともできるので、他のホームページと差別化することもできるでしょう。

まとめ

2015年10月に日本語 フォント の老舗であるモリサワの フォント が10書体収録されたりと、次第に使い勝手が広がっているTypekit。
Webデザインだけでなく、印刷物やプレゼンテーションなどのデザインでも活躍するでしょう。

今回ご紹介したように、TypekitはCreative Cloudの有料メンバーシップを持っていない人でも無料で活用することができます。
ぜひ、ご自身のWebサイトや文書、印刷物を見やすくクリエイティブに彩ってみましょう。