アイキャッチ画像

タイポグラフィで魅せる!海外のWebサイトデザイン事例20選(2022年5月)

[ 読了目安:約4分 ]

海外のタイポグラフィが活かしたWebサイトを集めてみました!
なかなか普段日本のWebサイトをデザインする上では、欧文フォントのみでファーストビューを構成する機会はあまりありませんが、余白の活かし方やどのようなフォントを使っているのかなどを見ていくと参考になる部分もたくさんあります。

それぞれメインで使用されているフォントも調べて載せているので、ぜひフォントのチェックもしてみてください!

サンセリフ(San Sefif)系

サンセリフ体は余白をいかしたミニマムでシンプルなサイトによく合います。また、線の太いものは力強く、印象に残りやすいです。

Murray Art Museum Albury (MAMA)のキャプチャ画像

Murray Art Museum Albury (MAMA)

  • オーストラリア/美術館のサイト
  • 使用フォント:Untitled Sans
Forge Partnersのキャプチャ画像

Forge Partners

  • アメリカ/不動産投資のサイト
  • 使用フォント:GT America
Encuentra tu médico Veganoのキャプチャ画像

Encuentra tu médico Vegano

  • スペイン/ビーガンフレンドリーな医者を探せるサイト
  • 使用フォント:MD Primer
BOLD Capital Partnersのキャプチャ画像

BOLD Capital Partners

  • アメリカ/ベンチャーキャピタルのサイト
  • 使用フォント:Roobert
Multidisciplinary Designer | Anna Sherrubleのキャプチャ画像

Multidisciplinary Designer | Anna Sherruble

  • アメリカ(シカゴ)/デザイナー兼フロントエンドエンジニアのポートフォリオサイト
  • 使用フォント:Satoshi
Fabricca Creative Agencyのキャプチャ画像

Fabricca Creative Agency

  • ヨーロッパに複数拠点/クリエイティブエージェンシーのサイト
  • 使用フォント:Sailec
Portfolio of Product Designer Jesper Dahlqvistのキャプチャ画像

Portfolio of Product Designer Jesper Dahlqvist

  • スウェーデン/プロダクトデザイナーのポートフォリオサイト
  • 使用フォント:Colophon Foundry

セリフ(Serif)系

セリフ体のフォントは高級感や洗練された雰囲気がでてきます。また、セリフ体をキャッチコピーや見出しなどに使い、本文はサンセリフ体にする組み合わせもよく見受けられます。

Fashion sustainability Report 2022のキャプチャ画像

Fashion sustainability Report 2022 • Vestiaire Collective

  • フランス/ファッションECのレポートサイト
  • 使用フォント:Albra
Artistas migrantesのキャプチャ画像

Artistas migrantes

  • スペイン/移民関連のアーティストを取り上げるプロジェクトのサイト
  • 使用フォント:Saol Display
thevnomad.

thevnomad.

  • オーストラリア/ブランド構築支援をしている人の個人サイト
  • 使用フォント:Canvas Regular
Noise 13のキャプチャ画像

Noise 13

  • アメリカ/デザインエージェンシーのサイト
  • 使用フォント:Sentinel
I killed a cactusのキャプチャ画像

I killed a cactus

  • イギリス/観葉植物のプロジェクトのサイト
  • 使用フォント:Ogg Text
Pact Studioのキャプチャ画像

Pact Studio

  • カナダ/デジタルエージェンシーのサイト
  • 使用フォント:IvyPresto Display
Belle Epoqueのキャプチャ画像

Belle Epoque : Webdesign & Web Development

  • フランス(パリ)/デジタルエージェンシーのサイト
  • 使用フォント:Sharp
Hot Typeのキャプチャ画像

Hot Type

  • フォントの販売サイト
  • 使用フォント:Punta
RICCARDO NIEDDUのキャプチャ画像

RICCARDO NIEDDU

  • イタリア/デジタルデザイナーのサイト
  • 使用フォント:RL Unno

その他

Wyreのキャプチャ画像

Wyre

  • アメリカ(サンフランシスコ)/暗号通貨関連のサイト
  • 使用フォント:Arthemys Display, Gustavo
yannick gregoireのキャプチャ画像

yannick gregoire

  • オランダ/フリーランスのインタラクティブ&クリエイティブディベロッパーのサイト
  • 使用フォント:LT Terminal Mono
Refokus' Amazing Year in Review 2021のキャプチャ画像

Refokus' Amazing Year in Review 2021

  • ドイツ/Webフローエージェンシーの特設サイト
  • 使用フォント:(デジタル調のフォント部分はSVGだったため不明)
JB10Xのキャプチャ画像

JB10X

  • エストニア/コンサルティング会社のサイト
  • 使用フォント:Scope
Jack Jaeschkeのキャプチャ画像

Jack Jaeschke — Motion Design

  • オーストラリア/モーションデザイナーのサイト
  • 使用フォント:Neue Pixel

一挙に20選お届けしてみましたが、いかがでしたでしょうか?
私は今回使用されているフォントも調べてみて、Google fontsからだけでなく、様々な有料フォントもチェックしてみたくなりました。