Webデザイントレンド定点観測 Webフォントを利用した大きなタイポグラフィ
東京都渋谷区でフリーランスWebデザイナーとして働く、黒野明子（くろのあきこ）と申します。
ゴールデンウィークをはさんで公開が遅れましたが、「Webデザイントレンド定点観測」の第4回をお届けします。
今月のテーマは、「Webフォントを利用した大きなタイポグラフィ」。
メインビジュアルの中央、またはメインビジュアルの代わりになるような重要な存在として、大きなタイポグラフィを利用したデザインを取り上げます。
このような「大きなタイポグラフィ」を利用したサイトに多く見られる特徴を挙げてみましょう。
– （ページの最上部で）大きなタイポグラフィを使い、そのサイトで最も重要な商品・サービス・理念などを、端的な単語やフレーズで語る
– 単色ベタ背景や「色調が補正された大きめの写真」を背景に、白抜きで文字が入っているパターンが多い
– 大きなタイポグラフィの周辺には余白がたっぷり取られており、しっかり視線をとらえるレイアウトになっているケースが多い
といったところです。
「このサイトは何のサイトか」「最も訴えたいことは何か」ということをひと目で効果的に伝え、ユーザーの興味をひいて本文へと誘導していくテクニックとして、特に会社や商品を紹介するサイトなどで有用なデザインパターンと言えます。
さて、今回チョイスしたサイト10例のうち9例までが、この「大きなタイポグラフィ（キャッチコピー）」や本文にWebフォントを利用しています。
Webフォントを利用するメリットには、
– 閲覧者の環境にそのフォントがインストールされていなくても、制作者が意図したフォントで表示される
– さまざまな画面密度／画面サイズの端末で、ギザつくことなく美しく表示される
– テキストなので、書き換えなどのメンテナンスにも容易に対応でき、コピー＆ペーストしやすい
– CSSで装飾が可能
といったものが挙げられます。
特にアルファベットのフォントでは、日本語のフォントと違ってグリフ数が少なめで、ファイルサイズも巨大になりにくいので、上記のようなメリットを最大限に活かす傾向がこれからも強くなっていくでしょう。
Bay Street Biergarten
サウスカロライナ州チャールストンにあるビアバーのサイト。最も重要な商品である「GOOD FOOD / CRAFT BIER」という単語を、100px近い大きさの文字で表現しています（PCやタブレットで閲覧した場合）。文字を画像化せず、Webフォントを利用してCSSでシャドウをつけているので、Retinaなど高密度のディスプレイで見てもシャープな美しさを保っていまています。
Brand Aid | Nashville Web Design & Brand Management
テネシー州ナッシュビルにあるWebデザインとブランドマネジメントの会社のサイトです。このサイトのトップページでも、会社の特徴を端的に表す「We Are Craftsmen of Beautifully Branded User Experiences」というフレーズを、トップページ最上部の鮮やかな朱色地のセンターに配しています。下層ページのデザインも、配色を変えるなどしながら、タイポグラフィを重視しています。WebフォントとともにSVGを多用しており、クリアでシャープな印象です。
Brand Aid | Nashville Web Design & Brand Management
mmunion
イギリスにあるマンチェスター・メトロポリタン大学の学生組合のサイトです。まず目を引くのは、これも最近のトレンドである「大きくて少しレトロな色の写真」が、次々とスライドしていくメインビジュアル部分。それぞれの写真に合わせて、白く太いサンセリフ書体で、組合ビルの特徴が語られていきます。このサイトでは、Typekitを利用してWebフォントが指定されています。
Visage – Beautiful, Branded Reports
エンタープライズ向けのグラフやプレゼンテーションツール作成サービスのサイト。メインビジュアル部分のテキストは、jQueryのプラグインによりタイプで文字を打っているような効果を与えられており、非常に目を引くエレメントです。このアニメーションになっているテキストに、Webフォントが指定されています。
Visage – Beautiful, Branded Reports
Studio Källbom
ストックホルムにあるデザインスタジオのサイト。トップページは、白背景に文字要素のみの潔さです。ただ、ページをブラウザが読み込む際に、まず目を射るようなビビッドな黄緑色が表示され、そのあとスワイプしてこの画面が表示されるので、白が単なる白ではない深み／裏地を持っているような錯覚にとらわれます。「We Design Digital Products」という最も重要なメッセージは、デバイスフォント（Maison Neue Book等）が指定されています。右にある矢印状に形どられたスタジオ名が、アクセントです（この部分はSVG）
Lincoln Jay
「話すこと」でお金を稼げるようにするコンサルタント会社のサイト（あまり見かけない業種ですね）。この会社のトップページでも、最も伝えるべきメッセージである「We Help You Find Paid Speaking Opportunities and Prepare You to Speak」というフレーズが、Webフォントを使って大きく表現されています。
Lincoln Jay
We’re Cinco, a brand and product design agency. | Cinco
オレゴン州にあるブランド＆プロダクトデザイン会社のサイト。トップページ最上部のメインビジュアル（写真）をスクロールした直下に、黒背景に大きな白文字で「We’re Cinco, a brand and product design agency.」という自己紹介が表示されています。また、「Studio」や「Contact」のページでも、最上部に「単色ベタ背景＋大きな白文字」が利用されています。このサイトでもTypekitを利用してWebフォントが指定されています。
We’re Cinco, a brand and product design agency. | Cinco
Mextures
iPhoneの写真加工アプリのランディングページ。背景の大きな写真（このアプリで加工できるエフェクトのイメージ）の上に、白くて太いサンセリフ体で、キャッチコピーが表現されています。このサイトでもTypekitを利用していますね。
Focus Lab, LLC | Branding & ExpressionEngine Experts
ジョージア州にあるデザイン会社のサイト。ビビッドな赤背景に重なる半透明の大きな写真の上に、最重要なサービスである「BRAND. WEB. UI.」というキーワードが、Webフォントで指定されています。他のページでも、写真を背景に余白をたっぷりととった状態で、重要なキャッチフレーズやタイトルが大きく配置されており、言葉によるイメージ喚起とコミュニケーションがとても大切にされている印象です。
Focus Lab, LLC | Branding & ExpressionEngine Experts
THIS IS NOW
2012年に開催された展覧会の特設サイトのようです。これまでに見てきたサイトと異なり、大きく扱った文字は画像化（透過PNG）されています。また、一部の本文テキストも画像化されてしまっています。最上部の「THIS IS NOW」などの文字は、既存のフォントではなく自前の作品であろうと思われるため、画像化するのもやむを得ないとは思いますが、昨今の閲覧環境のことを考えると、透過PNGではなくSVGで実装しても良かったのかなと思います。ただ、フォントデザインの面白さが非常に重要な位置を占めるデザインですので、とても参考になります。
このように見ていくと、「大きなタイポグラフィ」を使ったデザインでは、Webフォントを利用した例が沢山見つかります。
文字を画像化してしまうと、レスポンシブ対応などで改行位置を変更する場合などに非常に不利ですので、Webフォントを使っておきたいところです。
日本語のWebフォントも利用が広がってきていますので、日本語による「大きなタイポグラフィ」デザインも今後増えていくかもしれませんね。
（了）