Kouji Anzaiさん
  • コラボレーター
  • 株式会社モリサワ
  • Kouji Anzai

Webサイトの「フォント」、どう選ぶ? 色々なフォントを簡単に試せるツール4選

  • -
  • このエントリーをはてなブックマークに追加
    -
  • tweet

クリエイティブ関係の仕事をしている人にとって、デザインとフォントは切っても切れない関係にあります。デザインに最適なフォントを選ぶのもデザイナーの必須スキル。みなさんはどうやってフォントを選んでいますか?

今回は、最適なフォントを選ぶために便利なツールを紹介します。

Webサイトに使うフォントを選ぶタイミングは?

新しいWebサイトを立ち上げるとき、どのような流れでサイトを組み立てていくでしょうか。コンセプトやターゲットを決め、自社の強み、他社との差別化などの分析を行うと思います。

そしていよいよデザインの段階に入りますよね。

まずはページの細かなレイアウトを決めます。そこからデザイン、コーディングという流れになるでしょう。メインビジュアルやロゴなどのフォントはこのときに決まってくるかと思います。

一方で、本文やボタンなどのフォントをどの段階で選びますか?これは大変難しい問題ですね。

メインビジュアルやロゴは、サイトや製品のイメージを決定づける大切な要素です。当然、全体のコンセプトを決めるときにおよそのイメージがあり、デザインの際にそのイメージに合った書体を選び出します。

しかし、本文やボタンに使うフォントついてはどうでしょう。

コンセプトの段階で本文のフォントをイメージしている人は稀だと思います。コーディングの直前か直後、もしくはもっと後に、デザイン指示として決定するのではないでしょうか。

そうなると、フォントを当て込む段階で作業するのはコーディング担当かと思います。しかし、コーディング担当者の作業マシンに、選択できるほどフォントがインストールされていることはまずないと思います。

そこで役立つのが、フォントベンダーなどが提供しているフォントのシミュレーションができる仕組みや、フォントレンタルの仕組みです。この記事では、それらの便利な仕組みについて紹介していきます。

自社サイトにWebフォントを簡単に流し込める「Webtype」とは

Webtype

Webtypeは、The Font Bureauが運営するWebフォント配信サービスです。Font Bureau社は、Windows初期のフォントとして有名なGeorgiaやVerdanaをデザインしたMatthew Carter氏を中心としたフォントファウンダリで、以前の記事でも紹介したVOGUEのロゴで使われるフォントである Miller Displayや、多くの企業でコーポレートフォントとして扱われているBenton Sansなどを扱っています。

ホームページが Web メディアとして生まれ変わる - VOGUE サイトリニューアル

このWebtypeが備えているのがFONT SWAPPERという機能です。 WebサイトのURLを入力すると、サイトのデザインを変えずにWebtypeの提供するフォントを表示することができます。

コーディング担当がデザイン指示からフォントを選ぶときにも役立ちますし、クライアントへデザインの提案をするときにもイメージを伝えやすくなります。

Webフォントを流し込めてレイアウトも調整できる「TypeSquare」

TypeSquare

FONT SWAPPERとほぼ同等の機能をもったシミュレータが、モリサワの提供するTypeSquareにもあります。

そのシミュレータは、Web Font Tryoutといいます。Web Font Tryoutの特徴は、フォントサイズや行間の調整ができることです。テキストを使ったレイアウトの場合、どうしてもフォントによって組版が変わってしまいます。

これを微調整し、最適なレイアウトを見つけてもらうため、こういった機能を入れています。 また、既に提供している「かな書体」などについて、もっと使いやすくするためのアップデートを 現在計画中です。お楽しみにしていただければと思います。

▼フォントサイズや行間を微調整し、最適なレイアウトを探せる

TypeSquare

フォントを含めたWebデザインを簡単に作れる「typecast」

typecast

ここまでご紹介したFONT SWAPPER、Web Font Tryoutは既にあるWeb サイトに対してフォントをシミュレートするアプリケーションでしたが、Monotypeが運営するfonts.comで提供されているtypecastは、フォントを含めたWebサイトのデザインを簡単に行うことができるアプリケーションです。

▼フォントを含めたWebサイトのデザインを制作できる

typecast

さまざまなテンプレートからサイトを制作することもできますし、CSSを直接編集することも可能です。HTMLの操作には対応していませんが、要素それぞれの操作ができるので苦になりません。Dreamweaverなどのクライアント型 Webサイト制作ツールに迫るほどの完成度になっています。

フォントを月単位でレンタルできる「Fontstand」

Fontstand

Fontstandはこれまで紹介してきたツールとは一味ちがったOSX向けアプリケーションです。メインの機能はレンタルフォントです。

アカウントを作成し、デスクトップアプリケーションを起動、 ログインすると、各フォントを1時間は無料で試用することができるようになります。また、1ヶ月単位でレンタルしたり、ファミリーごとにレンタルしたりすることができます。

▼様々なフォントをレンタルできる「Fontstand」

Fontstand

取り扱っているフォントファウンダリはProduction TypeやJust Another Foundryなど、規模は小さいものの良質な書体を提供しているところばかりです。

まとめ

ここで紹介したサービスやアプリケーション以外にも、Adobe Creative Cloudに含まれるTypekitがデスクトップフォントを取り扱うようになったり、英語版Google DriveでGoogle Fontsが使えるようになったりと、さまざまな面でフォントの利用環境は良くなってきています。

クリエイティブ関係の仕事をされている方もそうでない方も、自分の手で最適なフォントを選んでみてはいかがでしょうか。

  • -
  • このエントリーをはてなブックマークに追加
    -
  • tweet