2022.07.28前回に引き続きフォントブログを運営されている山田晃輔さんよりご寄稿いただいております!モリサワによるクラウドフォントサービス「TypeSquare」。Webフォントという言葉は何となく聞いたことがあるけど、実際に使ったことはない。—そんなデザイナーの皆さんが多いのではないでしょうか。今回は「TypeSquareを使うメリット・デザイナー編」と題して、実際にTypeSquareを使う側であるデザイナーの皆さんにとってのメリットを、3つの観点から紹介したいと思います。流行りのレスポンシブWebデザインや動きのあるサイトなど最新のWebテクニックとの相性がバツグンWeb制作の現場は日進月歩。日々新しいテクニックが生まれては、古いテクニックは廃れていきます。そんな中、今最も旬なのが、レスポンシブWebデザインやスマートフォン向けサイトの構築ではないでしょうか。近年Webサイトを閲覧できる環境は無数に増え続けており、パソコン以外にもスマートフォン、タブレットなど、様々な端末の解像度や画面サイズに応じて、レイアウトや画像、文字を流動的に変化させなければいけません。その際、画像文字を用いて文字を配置してしまうと、流動的に変化させることが難しくなります。画像文字としてテキストを配置したイメージそこで便利なのがWebフォントです。テキスト要素なので、様々な端末のレイアウトに応じて流動的に変化させることができます。画像文字だと、拡大や縮小をすると文字がぼやけたり、潰れたりしてしまいますが、Webフォントはアウトラインデータなので、レイアウトが変化し、自由自在に拡大縮小しても、美しい描写を保つことができます。Webフォントを用いてテキストを配置したイメージ【コラム】Webフォントを使えば工数、ファイル容量、ファイル数を削減できるiPhoneやiPadが備える高精細のRetinaディスプレイでは、普通のサイズの画像をそのまま配置するとぼやけて見えてしまうため、通常の2倍のサイズで書き出した画像を50%に縮小し配置する方法がとられています。することで、画像がくっきり美しく見えるのです。他にもCSSやJavaScriptで通常用と高精細用で画像を分ける方法、さらには高度にサーバーサイドで画像処理を行う方法もありますが、工数が大幅に増え、ファイル数だけでなく、画像ファイルの容量も増えてしまいます。当然ながら通信量も増えるため、サイトの表示にも時間がかかってしまいます。1文字ずつテキストにアニメーションなど、画像文字の場合は1文字につき1つの画像ファイルを用意しなければならず、管理するファイル数が莫大に増えてしまいます。WebフォントとCSSを用いて、画像ではなくテキストデータとしてHTMLに配置すれば、工数だけでなく、ファイルの容量や数を削減できるうえ、複数の環境に対して柔軟に制御できるようになります。最新のWebテクニックとの相性がバツグンなのがWebフォントであり、それを実現するための重要な技術がWebフォントです。それに加え、ファイルの管理面でも一役買う便利な技術であると言えます。PASSPORT契約者なら追加料金不要で利用可能!TypeSquareには新ゴ、リュウミン、見出しゴ、秀英体など、デザインの現場で大活躍中のモリサワ書体群がラインアップされています。あるので、日本語以外のサイトを制作する際においても、高品質で見栄えの良い書体を使うことができます。年間1,000万PVまでであれば、利用できる書体の数やドメインに一切の制限はありません。1,000万PVはどのくらいの感じなのか分かりづらいかもしれないですが、よほどの大規模サイトでなければ超過することは無いので安心です。PV(ページビュー)とはクラウドフォントの使用されたWebページが1回閲覧されると、1PVとしてカウントされます。TypeSquareをはじめとするWebフォントサービスでは基準となる単位となっており、ページのアクセス数とは異なるので注意しましょう。PASSPORTプラン、利用せず放置したままになってしまっていませんか?まずは皆さんがお持ちの会社のサイトや、自身のポートフォリオサイトやブログで使ってみてはいかがでしょうか。契約者の方以外のサイトや1,000万PVを超えるサイト、クライアントのサイトでTypeSquareをお使いいただく際は、ぜひTypeSquareのご契約をご検討ください。TypeSquareのプランはこちら(山田晃輔)フォントブログは、1998年ごろからフォントの情報サイトとして運営。デザイナーが知りたいフォント、書体、タイポグラフィ、Webフォントの情報を不定期で発信しています。モリサワによるクラウドフォントサービス...その他ブログリニューアルキャンペーン実施中(終了しました)当キャンペーンは終了しました。多数のご応募ありがとうございました。TypeSquareブログがリニューアル。モリサワの2023年度新書体が10月18日にリリースされました。Blog.メニューホーム検索トップサイドバ。