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月

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

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サイトや文書、印刷物を見やすくクリエイティブに彩ってみましょう。