COLUMN/

2分でサイトがカッコよく!さくらのレンタルサーバの全サイトでモリサワのWebフォントが無料使用可能に

タイプスクエア(typesquare.com)

タイプスクエア(typesquare.com)

Webフォントを使うと、平凡なメイリオやMSゴシック以外にも読みやすく、また印象に残るテキストでウェブサイトが作れます。

今まではキャッチコピーの書体などにこだわった場合、画像で表現してというのが一般的でしたが、もっと綺麗に読みやすく劣化に強く表現できるようになる、ということです。

さてさくらインターネットのレンタルサーバにて「モリサワ」のWebフォントが無料で使用できるようになりました。
今まではWordPress内での対応ということでしたが、今回同CMS以外、HTMLページであれば自由に使えるようになったのは大きいことです。

モリサワのWebフォントを無料で使える「さくらのレンサバ×TypeSquare」をすべてのサイトで利用できるよう機能拡張

一応以下のような前提条件はあります(2016年9月16日現在):

  • プランはスタンダード以上(ライトは不可)
  • 利用にはコントロールパネルからドメインの登録が必要
  • 30書体を月間2.5万ページビューまで表示
  • HTMLに直接タグを記述してWebフォントを表示する

そして使用できるフォントは以下のようなバリエーションです(2016年9月16日現在):

明朝体 リュウミン R-KL / リュウミン M-KL / 見出しミンMA31 / A1明朝
ゴシック体 新ゴ R / 新ゴ M / ゴシックMB101 B / 見出しゴMB31 / ナウ-GM
丸ゴシック体 じゅん 201 / じゅん 501 / 新丸ゴ
デザイン書体 フォーク R / フォーク M / 丸フォーク R / 丸フォーク M / カクミン R / 解ミン 宙 B / シネマレター / トーキング / はるひ学園 / すずむし / G2サンセリフ-B
装飾書体 新丸ゴ 太ライン
筆書体 正楷書CB1 / 隷書101
UD書体 UD新ゴ R / UD新ゴ M / UD新ゴ コンデンス90 L / UD新ゴ コンデンス90 M

導入方法も非常に簡単で、以下の通りです:

  • さくらコントロールパネルからログインし、「ウェブフォント」項目から表示したいドメインに設定する
  • 下記のタグを</head>直前あたりに挿入する

[html]
<script type="text/javascript"src="//webfonts.sakura.ne.jp/js/sakura.js"></script>
[/html]


もともとフォント、書体というのは活版印刷の時代より前から芸術の域にまで高められた世界であり、とても奥が深いもの。

Webフォントはまずは表示速度を追いつかせるところから始まったとはいえ、まだまだ日本語は種類も限られていて、そして画面上での表現も紙とは異なる制限があるため、まだまだこれからです。

とはいえ世間の端末のディスプレイ精度も上がっていてより再現性の高くなっていますし、googleからやはり無料で出ているnoto fontのおかげもあり、この1,2年でだいぶ普及してきたと思います。

モリサワから使えるフォントも、これだけあればある程度はなんとかなるかもしれません。このサイトでも使用している新ゴ、内容によっては読みにくいですしね..

よくを言えばウェイト、線幅はもっと多彩なはずなので、より読みやすい、使いやすい選択肢が増えれば嬉しいです。

Yossio Nagata
Web Director / designer

沖縄県与那原町在住。ICT企業のウェブ部門担当、事業会社のインハウスデザイナーを経験。2012年より独立し、企業のウェブ制作、運用を専門に展開。 ロードバイクと山とコーヒーにこだわりを持つ。