AdobeユーザーならモリサワWEBフォントが無料で利用できるので使ってみた

ちくしょう！どいつもこいつもWEBサイトに「メイリオ」ばっかり使いやがって…俺が表現したいWEBサイトはこんなんじゃないッ！というWEBデザイナーの声が聞こえてくる今日このごろです。Macなら「ヒラギノ」、windowなら「メイリオ」を使うというのは業界のルールであります。

なぜならほぼすべてのユーザーに対応しなければならないからです。一部のデザインリテラシーの高い人向けにWEBサイトのフォントを選ぶわけにはいけないんです。つまりは必然的に「OSに初期搭載されているフォント」から選ぶ必要がありました。それがwindowsのメイリオです。windows8になり游ゴシックと游明朝という游書体が登場し、中々にイケてる感じになりましたが私を含めwindows7派がまだまだ多いためWEBサイトのメインフォントにするわけにはいきませんでした。

オレはこういうオサレなフォントが使いたいんだ！

1. それは以前もちろんその運動感という事の日にするだでしょ。もし事実をお話し院は何でもかでもこういう変化でしょでしともをなるていらっしゃるませには学習しんたて、始終にはなりただましです。やり方がいますのはいったい次第にとにかくですますない。何ともネルソン君に出立手段それだけ見当が云っです余裕どんな権利それか使用よりというご推薦うででしませて、その時間もここか他大名をするて、向さんの事が道義の私が常にご享有と返ってそれら癪がご専攻がありように依然として実発達に思いたくですて、とうとうまあ演説を持っなから来ですものを儲けなけれた。

クオリティのフォントがスタンダードになる日が近づいています。

WEBフォントの登場

今まのでWEBサイトのフォント問題

1. WEBサイトのフォントはヒラギノかメイリオが浸透していて自由度がなかった
2. しばらくはイケてるフォントがすべてのユーザーのOSに入ることはない

近年WEBフォントの登場によってこの閉塞したWEBデザイン環境が一変しつつあります。そうサーバーにフォントを入れてしまえばすべてのユーザーに美麗なフォントのWEBサイトを見せることができるようになったのです。WEBフォント自体は日本以外では早く浸透しています。日本でWEBフォントが難しかったのは漢字の存在です。すべてに対応しようとすると、フォントのサイズが大きくなりサーバーからダウンロードするのに時間がかかるため表示速度が遅くなるという本末転倒を招いていました。

http://typesquare.com/

最近になりモリサワを始めモリサワのTypeSquareがすべてのフォントをサーバーからダウンロードするのではなく、WEBサイトが使用しているフォントだけをダウンロードして表示する技術「サブセット化」を使用し始めたため、日本語WEBフォントの表示速度は劇的に改善され、デザイナーは予算さえ出れば積極的に検討したい事項にあがりました。

Typesquareは基本的に有料サービス

1つのフォントだけは無料で使用することができます。制限は1万PV/月まで。
ちょっとしたブログでもすぐに制限にかかってしまいますし、１つのフォントだけというのもABテストなどの実験にも使えません。かといって１つ上のプランにすると月額2,160円かかるので遊びでも中々手が出せない。趣味や勉強の人には敷居の高いフォントです。

モリサワフォントが無料で使えるAdobe Typekit

そんなときに出てきたのがAdobeのTypekit。Adobe Creative Cloudに加入しているのが無料使用の決まりになっていますが、仕事でデザインに携わっている人やこれからデザインを勉強する人はCreative Cloudになると思いますがので、Photoshopなどのアプリケーションのおまけでついてくるといった感覚です。

利用制限もTypesquareに比べて使いやすく仕事で使っても制限の心配はほぼありません。

Adobe Typekitのまとめ

1. Adobe Creative Cloudを使用している人は無料（コンプリートプランでポートフォリオ）
2. 4200のフォントを使用可能（モリサワフォントを含む）
3. 50万PV/月まで
4. WEBサイトの数は無制限

ユー、フォント、好きに使っちゃいなYO?状態です。

Adobe TypekitのWEBフォントを使ってみる

まずはAdobe Typekitにログインします。

新しいキットを作成します。ここでキット名と使用するURLを入力します。ローカル環境での開発の初期設定でXAMPなら「http://localhost」MAMPなら「htt:localhost:8888」になります。

表示されたjavascriptをHTMLのheadの中に入れます。

すべてのフォントを参照するをクリックし、使いたいフォントを選択選んで行きます。

＋フォントを使用をクリックします。

どのキットで使用するかを選択しますので作成したキットを選択します。

フォントの使い方やサイズが表示されます。太ゴB101を使いたいテキストにCSSで”.tk-kazuraki-sp2n”のclassを当ててあげるだけでフォントがモリサワの太ゴに変化します。フォントはダイナミックサブセット化されますので不必要なフォントはサーバーからダウンロードされません。モリサワ１つのフォントで大体50～100KBで使用できます。

最後に右下の「公開」を押すことで設定をAdobeのネットワーク全体に配布させます。

現在使用できるモリサワの日本語フォント

Adobe Typekitで無料で使用できるモリサワフォント

1. モリサワ A-OTF UD新ゴ Pr6N
2. モリサワ A-OTF UD新丸ゴ Pr6N
3. モリサワ A-OTF UD黎ミン Pr6N
4. モリサワ A-OTF じゅん Pro
5. モリサワ A-OTF 中ゴシックBBB Pr6N
6. モリサワ A-OTF 太ゴB101 Pr6N
7. モリサワ A-OTF 太ミンA101 Pr6N
8. モリサワ A-OTF 見出ゴMB31 Pr6N
9. モリサワ A-OTF 見出ミンMA31 Pr6N
10. モリサワ A-OTF リュウミン Pr6N

その他モリサワ以外の日本語フォントがたくさんありますので、好きなフォントを使いましょう。

モリサワフォントを表示してみる

A-OTF リュウミン Pr6N

1. それは以前もちろんその運動感という事の日にするだでしょ。もし事実をお話し院は何でもかでもこういう変化でしょでしともをなるていらっしゃるませには学習しんたて、始終にはなりただましです。やり方がいますのはいったい次第にとにかくですますない。何ともネルソン君に出立手段それだけ見当が云っです余裕どんな権利それか使用よりというご推薦うででしませて、その時間もここか他大名をするて、向さんの事が道義の私が常にご享有と返ってそれら癪がご専攻がありように依然として実発達に思いたくですて、とうとうまあ演説を持っなから来ですものを儲けなけれた。

私の好物リュウミンです。美しいフォントですね。
これでWEBの制作モチベーションもアップします。Adobeユーザーなら無料ですし、表示速度も早い。しかもモリサワフォントが使える。AdobeのTypekitは現状のWEBフォントでは一番使いやすいと思います。

エックスサーバーと契約するとモリサワWEBフォントが無料で使える

月額1000円で独自SSL(https化)無料、ハイスペックサーバーが使用できるコスパ最強のエックスサーバー。このブログも現在こちらを使用しています。最近の機能拡張でモリサワのWEBフォントが無料で使用できるようになりました。25,000PV/月という制限はありますが、WEBサイトの立ち上げに試しに使ってみるのも良いかもしれません。