こんにちは、アクトゼロの小林です。
2013年ももうすぐ終わりですが、みなさんにとって今年はどんな一年でしたでしょうか？
僕にとってはwebデザイナーになって2年目の年で、昨年よりかは視野を広げてデザインを見れるようになった気がします。
同時に課題もたくさん見つかった年なので、来年はもっと頑張りたいと思います！
************************
さて本題ですが、webデザインにおいて、ある程度フォントを覚えると、そのフォントばかり使ってしまうということありませんか？
特に英字フォントにおいては無数に書体があるので、選ぶのが手間で無難に走りがちだと思います。
今回はそれを打開するべく、最近の海外サイトでどんなフォントがどんなふうに使われているのか調査してみました！
やや長い記事なりますが、参考になれば幸いです。（画像は全てクリックすると拡大されます）
No.01 ［Mooncamp］
http://www.mooncampapp.com/
宇宙好きな僕にとってはたまらないデザインです！
■タイトル、ナビゲーション、見出し： Novecentowide
フォントの購入・ダウンロードはこちら→http://www.myfonts.com/fonts/synthview/novecento/
■見出し一部： Old Standard TT Italic
フォントの購入・ダウンロードはこちら→http://fontpro.com/old-standard-tt-font-16618
■本文： Raleway
フォントの購入・ダウンロードはこちら→http://fontpro.com/raleway-font-16024
————————————————–
基本このジオメトリックな3種類のフォントをベースにして、ウェイトを使い分けることでメリハリを出しています。どれもいいフォントですね。
No.02 ［Home Page Etec Minds］
http://www.etecminds.com/eng
最近よく見かける背景に動画を使用したサイトです。これもクールなデザインです。
■タイトル、見出し、本文： Nilland
フォントの購入・ダウンロードはこちら→http://www.dafont.com/nilland.font
————————————————–
こちらはなんとロゴ以外は全て同じ一つのフォントでデザインされています！ウェイトを使い分けるいい参考です。
クセのあるスラブセリフフォントを上手く使っています。これはもう即ダウンロードですね。
No.03 ［Alistair Lane］
http://www.alistairlane.com/
写真主体のスタイリッシュなモノクロサイト。余白の取り方も上手です。
■リード、本文など： Miller
フォントの購入・ダウンロードはこちら→http://www.myfonts.com/fonts/fontbureau/miller/
■写真タイトル： League Gothic
フォントの購入・ダウンロードはこちら→http://www.whatfontis.com/League-Gothic-Regular.font
————————————————–
このMillerフォントの美しいこと！オールド・フェイスとモダンフェイスの中間に位置するトランジショナルな形のように思いますが、使われているMiller Display Lightはよりモダン寄りな気がします。イタリック体がまたキレイですね。長体調のLeague Gothicも文字単位でみるとスポーティですが、こうやって控えめに、文字間をゆったりと空けてあげるとモダンな雰囲気になる点も参考になります。
サイトの世界観に見事ハマっています。
No.04 ［Digital Marketing Agency in Edmonton | Kick Point］
http://kickpoint.ca/
シンプルですがカラーとアイコン、フォントで魅せるフラットデザインなサイトです。
■タイトル、見出し、本文など： Merriweather
フォントの購入・ダウンロードはこちら→http://fontpro.com/merriweather-font-16060
■見出し、本文など： Karla
フォントの購入・ダウンロードはこちら→http://fontpro.com/karla-font-16630
————————————————–
スラブセリフ体とサンセリフ体を上手く組み合わせています。どちらもサイトのテイストに合ったヒューマニストといいますか、暖かみを感じられるフォントだと思います。視認性にも優れていますね。
No.05 ［Digital Marketing Agency in Edmonton | Kick Point］
http://www.toolofna.com/#/home
トップページだけでなく下層ページも非常にハイクオリティなサイトです。Directorsページ、Awardページ、Aboutページは特にフォントの魅せ方が上手いです！
■タイトル、見出し： Trump Gothic
フォントの購入・ダウンロードはこちら→http://www.fonts.com/ja/font/canada-type/trump-gothic?isRatingExpanded=False#product_top
■見出し、本文など： Letter Gothic Std
フォントの購入・ダウンロードはこちら→http://store1.adobe.com/cfusion/store/html/index.cfm?store=OLS-JP&event=displayFontPackage&code=1143
————————————————–
Trump Gothicはスポーティ・クールな印象を受ける現代的な長体のように感じます。個人的に、長体のフォントは文字サイズをどーんと大きくするのがカッコイイと思っていますが、これはまさにお手本になります！No.03で挙げたLeague Gothicよりも、より四角に近い形なのでアイキャッチとしてもより適したフォントですね。
そしてLetter Gothic Stdはタイプライターで打ったような文字で独特です。この2つのフォントの対比がまたニクいです～。
No.06 ［Whiteboard］
http://whiteboard.is/
こちらも背景を動画にしたダイナミックなデザインです。TOPページ、メインビジュアルだけでなく下部も動画が見えるので印象に残ります。
■タイトル、リード、見出しなど： Merriweather
フォントの購入・ダウンロードはこちら→http://fontpro.com/merriweather-font-16060
■ナビゲーション、本文など： Lato
フォントの購入・ダウンロードはこちら→http://www.latofonts.com/
————————————————–
N0.04でもあったMerriweatherが使用されてるほか、Latoというフォントの計2種類で構成されています。
どちらも少し柔らかみをもった形状で視認性にも優れていて、使いやすそうなフォントです。
No.07 ［I enjoy life as a Graphic Designer – Janne Koivistoinen Portfolio］
http://janne.me/
この犬の画像はノイズが走っていてあたかも動画のようですが実はgifアニメという工夫がおもしろいですね。メガメニューの魅せ方もオシャレで、文字組もキレイです。
■タイトル、リード、ナビゲーション、見出しなど： Arial
（windowsの標準フォントなのでリンクは省きます）
■見出しなど： Times New Roman
（windowsの標準フォントなのでリンクは省きます）
■本文など： FF Tisa
フォントの購入・ダウンロードはこちら→https://www.fontfont.com/fonts/tisa
————————————————–
Helveticaを使わずArialをメインに使うのがなんだか新鮮に感じられました。
No.08 ［The Official Site of Cannondale Bicycles］
http://www.cannondale.com/
webフォント主体のサイトが続きましたが、こちらはメインビジュアルで疾走感溢れる画像テキストが使用されています。
■メインビジュアル： Metronic Pro？ Acto？
フォントの購入・ダウンロードはこちら→（Metronic）http://www.myfonts.com/fonts/mostardesign/metronic-pro/、（Acto）http://www.myfonts.com/fonts/dstype/acto/
■見出し、ナビゲーションなど： Trade Gothic
フォントの購入・ダウンロードはこちら→http://www.fonts.com/ja/font/linotype/trade-gothic#product_top
■本文など： Arial
（windowsの標準フォントなのでリンクは省きます）
■その他一部：Georgia
（windowsの標準フォントなのでリンクは省きます）
————————————————–
すみません、メインビジュアルのフォントが完全に一致するものが僕では調べがつきませんでした…。
形としては四角っぽいMetronic Proとほぼ同じだと思うのですが、「K」や「G」などが大きく違います。その点、Actoは一致するのですがそもそもの形が違います。うーむ…。知っている方良かったら教えて下さい。
No.09 ［Belong. Hand printed t-shirts for everyone.］
http://wearyoubelong.com/
かわいらしい手書き調のデザインが特徴的です。
■タイトル、見出しなど： Populaire
フォントの購入・ダウンロードはこちら→http://www.myfonts.com/fonts/pintassilgo/populaire/
■本文など： skolar
フォントの購入・ダウンロードはこちら→http://www.myfonts.com/fonts/rosetta/skolar/
————————————————–
サイトの世界観にあった手書き調のPopulaireというフォントをメインに使用しています。かといってかわいすぎないのは、長体の形をしているからでしょうか。
一緒に使われている柔らかいスラブセリフ体のskolarとの相性も良いですね。
No.10 ［Italian jewelry brand since 1929, Carlo Barberis］
http://www.carlobarberis.com/en/
写真がメインのジュエリーのブランドサイトです。余白を生かしたデザインってやっぱ素敵です…！
■見出しなど： Lato
フォントの購入・ダウンロードはこちら→http://www.latofonts.com/
■本文など： Source Sans Pro
フォントの購入・ダウンロードはこちら→http://sourceforge.net/projects/sourcesans.adobe/files/
————————————————–
極細のサンセリフ体が人気の昨今ですが、やはりこういった上品なデザインとの相性が抜群です。このLatoはNo.06のサイトでは本文で使用されていましたね。
Source Sans Proは昨年の夏、アドビ初のオープンソースフォントとして注目されました。汎用性に優れたフォントでウェイトも揃っています。（詳しくはこちら→http://blogs.adobe.com/typblography/2012/08/source-sans-pro.html）
No.11 ［AYR – Explore］
http://ayr.com/
まるで窓のように動画が埋め込まれているレイアウトがおもしろいです。
■リード： Verlag
フォントの購入・ダウンロードはこちら→http://www.typography.com/fonts/verlag/styles/
■見出し： Vanitas
フォントの購入・ダウンロードはこちら→http://www.myfonts.com/fonts/reserves/vanitas/
■ナビゲーション、本文： Whitney
フォントの購入・ダウンロードはこちら→http://www.typography.com/fonts/whitney/styles/
————————————————–
3種類フォントを効果的に使い分けています。vanitasは日本語で言うとフォーク体のようなフェミニンなフォントですが、futuraのようなスタイリシュなVerlagを織り交ぜることで、スタイリッシュさとかわいさの絶妙なバランスが保たれている気がします。
No.12 ［Soh Tanaka – Los Angeles based Interactive Designer ＆ Front-end Developer］
http://baddreamsinc.com/
近未来的な雰囲気がするポートフォリオサイトで、個人的にとても好きなテイストです。クールですね！
■全て： TeX Gyre Adventor
フォントの購入・ダウンロードはこちら→http://www.fontsquirrel.com/fonts/TeX-Gyre-Adventor
————————————————–
ロゴを除けば、サイト全体が1種類のフォントで構成されています。直球のジオメトリックのサンセリフフォントを、太字、普通、イタリック体の3つ+カラーリングで使い分けています。1種類のみのフォントにも関わらず単調さを感じさせません。
No.13 ［An Idea Lives On］
http://www.anidealiveson.org/
レトロと新しさがキレイに合わさったようなデザインではないでしょうか。配色、フォント、どれも上品さを感じさせます。モノクロ写真の扱い方の参考としても好例です。
■見出しなど： Didot Italic
フォントの購入・ダウンロードはこちら→http://www.linotype.com/en/1012/LinotypeDidot-family.html
■ナビゲーション： Droid Serif Italic
フォントの購入・ダウンロードはこちら→http://www.linotype.com/877339/DroidSerif-family.html
■本文など： News Cycle
フォントの購入・ダウンロードはこちら→http://fontpro.com/news-cycle-font-16220
————————————————–
Didotはファッション誌VOGUEのロゴなどで使われて有名なモダンフォントです。とてもおしゃれなフォントではあるのですが僕の中では「女性向け」と位置づけてしまっていて、使用候補に上がることはほとんどありませんでした。しかしこのサイトを見て、その華麗さに改めて脱帽。とくに大文字と小文字を混ぜたイタリック体の雰囲気は抜群だと今更気づきました。反省します。
No.14 ［The Charles NYC Annual Report for 2013］
文字が主体のページが多めのシンプルなサイトです。キレイダナー
■セリフ体： Cardo
フォントの購入・ダウンロードはこちら→http://www.fontsquirrel.com/fonts/Cardo
■サンセリフ体： Proxima Sans
フォントの購入・ダウンロードはこちら→https://www.fontshop.com/fonts/downloads/mark_simonson_studio/proxima_sans/
※現在は改良されたProxima Novaが大変人気のようです→http://www.myfonts.com/fonts/marksimonson/proxima-nova/
————————————————–
セリフ体とサンセリフ体を上手に使い分けています。どちらもクセがなくシンプルなデザインに向いているフォントと言えそうです。特にセリフ体のcardoのイタリック体は個人的にも好きなPalatino Linotype（http://www.linotype.com/57056/palatinolinotype-family.html）のイタリック体と似ていて良いですね。「R」の払いではCardoの方が好きです！
No.15 ［The Charles NYC Annual Report for 2013］
http://www.pacificrimmovie.com/
最後はちょっと趣向を変えて…個人的に2013年ベストムービーであるPACIFIC RIM（パシフィック・リム）のフォントに注目してみたいと思います！映画館で3回見ましたが目から汗が出ました…この映画が見れる時代に生まれてよかったと心底思いました。この映画の（以下略）
■見出し、ナビゲーションなど： Orbitron
フォントの購入・ダウンロードはこちら→http://imjustcreative.com/orbitron-font-free-open-source-font-for-download/2009/12/04
■SNS： Refrigerator
フォントの購入・ダウンロードはこちら→http://www.myfonts.com/fonts/marksimonson/refrigerator-deluxe/
■本文など： DIN Next
フォントの購入・ダウンロードはこちら→http://www.linotype.com/517415/dinnext-family.html
————————————————–
ロゴにはAgency FBというフォントが使われているのでそれがずっと頭にあって、サイトもこのフォントが中心かと思いきや、意外に様々なフォントが使われていました。とはいえやはり映画の世界観に合ったSF、ロボット的なフォントがメインです。この映画に限ったことではありませんが、舞台や映画のサイトはやはり世界観を出すことが肝になるので、フォントも少し特殊なものが多いですね。
まとめ
15サイトとあまり数は多くなかったのですが、調べて見るといろんな発見がありました。
- 使わているフォント数は1～3種類というサイトが多い。
- ウェイトを変えたり、斜体にして差別化する
- セリフ体が思ったより多い
- フリーフォントが多い
- サイズを大きくすると、そのフォントの印象がガラッと変わる
- 文字自体にエフェクトをあまりかけない
- ほとんどWebフォント
補足すると、「1」と「2」は日本のWebデザインにも当てはまる基本的なことと言えます。
「3」ですが、サンセリフ体一辺倒と思いきや実はそうでもありませんでした。セリフ体の中でもスラブセリフ体がよく見受けられました。スラブセリフ体は少し前からトレンドとして紹介されていましたが、実際その流れが来ているようです。（詳しくはこちら→Webデザインの新人気スタイル、スラブセリフ系フリーフォント素材まとめ-PhotoshopVIP）
個人的には「4」のフリーフォントがかなり多かったことに驚きました。日本語フォントもフリーフォントが多数ありますが、実際メインで使用するのは有料フォントがほとんどではないでしょうか。英字フォントは日本語フォントに比べて文字数も少なく作成しやすいため、必然的に質の高いフリーフォントができやすい環境なのかなと思います。今後しっかりと見極めて、積極的にありがたく使わせて頂きたいと思います。
「5」は日本語フォントでもドーンと大きくすることはありますが、なかなか英字フォントのようにはいかないような気がします。ただ単に自分のテクニック不足だとは思いますが、英字フォントは「記号」として見えやすいのかなと思います。例えばランディングページなどで、「○○の3つのポイント」というコンテンツがあるとします。その中で、「Point 1」と英字フォントで記号やアイキャッチ的な役目としてサイズ大きめにデザインされているのをよく見ます。（僕もよくやります。なぜならその時くらいしか自由に英字フォント使えないから…）
対して「ポイント1」という日本語表記で同じように大きくしたらなんだかイマイチに見えてしまいませんか？（実際この場合は、数字だけ英字フォントにして大きくしたりします。英字フォント使いたい…！）日本人の感覚かもしれませんが、それが英字フォントと日本語フォントの違いの1つだと感じます。
「6」は最近のwebデザインの傾向によるかと思いますが、やはり英字フォントは日本語フォントよりも装飾が少ないと思います。photoshopで言えばレイヤースタイルですね。
理由を自分なりに考えてみたのですが、英字フォントはその種類の多さから、日本語フォントでレイヤースタイルを使って表現したいことを、最適なフォントで表現できるから、なんじゃないかなと思います。文字組みも日本語フォントに比べて自由度が大きいと思いますから、そういったところでメリハリを付けているんだと思っています。
極力フォントには余計な手を加えないほうが読みやすいですからね。（文字詰めは別）
「7」はそのままです。おかげでフォントを調べるのも楽です。（ちなみに今回は標準のFirefox開発ツールで調べました。[調べ方はこちら→【Firefox22】Webサイトに使われているフォントを簡単に調べる方法-アイデアハッカー］）一部画像のものは、WhatTheFont（http://www.myfonts.com/WhatTheFont/）を使いました。
長くなりましたが、今回の調査でフォントに関してのヒントをいろいろ得られました。「このデザインにはこのフォント！」と選べるようになっても、そのフォントにこだわらず、新しいものに目を向けていきたいですね。僕の来年の目標は「文字だけ」のサイトを作ることです…。
