フォントで世界観を作る。ユニークなフォントを使ったサイト7選

こんにちは、デザイナーの岡町です。

普段デザインを考えるとき、つい使い慣れた定番フォントを選びがちになってしまうので、最近はサイトをチェックする際、フォントにもより注目するよう心がけています。

それぞれのフォントの特性を使ってうまく世界観を表現しているサイトは、全体の統一感や完成度が高く感じられます。
今回はそんなユニークなフォントを使った個性が光るWebサイトを国内外から7つご紹介します！

1. anicecompany inc.

最初は、「anicecompany」というクリエイティブエージェンシーのサイトです。
女性向けファッションやライフスタイルを中心にクリエイティブを展開しています。

オレンジとグリーンのカラーも相まって、メインの英字フォントに使用されているAll Round Gothicがサイトに可愛らしいポップな印象を与えています。
さらに、サブの英字フォントとして用いられている文字はSFT Schrifted Serifというセリフ体になっており、ポップなデザインの中にスタイリッシュさを感じさせるアクセントとなっています。

使用フォント：All Round Gothic / SFT Schrifted Serif / こぶりなゴシック

2. 常陸国ロングトレイル

続いて、「常陸国ロングトレイル」という茨城県にある全長320km(予定)のロングトレイルの魅力を伝えるサイトです。　「自然」「歴史」「旅」というキーワードを中心として、温かみのある和風なデザインになっています。

日本語タイトル文字にはTsukushi C Old Minchoという筆書きのような古風なフォントが用いられ、伝統的な世界観にぴったりです。
また、本文に使用されているAntic Cezanneはアンチック体と呼ばれゴシック体の漢字と明朝体のような「かな」を組み合わされた書体です。（漫画によく使用されるようでコミック体とも呼ばれます。）
あまりウェブサイトに使用されているのを見かけたことがないので、このアンチック体もサイトに個性を与えてくれています。

アンチック体（コミック体）が気になる方はこちらの記事が興味深かったので読んでみてください！
https://note.com/shijimiota/n/n8a08f6625220

使用フォント：Tsukushi C Old Mincho / Antic Cezanne / Fraunces / Cabin

3. URBANPAKU（アーバン博）

続いて、株式会社アーバンリサーチが大阪万博に出展をするプロジェクトの特設サイトです。
ページの大半が文字で構成されており、まさにフォントで世界観が作られています。

なんと言っても最初に目に飛び込んでくる「アーバン博」の書体がインパクト大です。
日本の伝統を感じさせるような力強い書体と未来的な角ばったフォントが組み合わさって非常に迫力のあるデザインになっています。

使用フォント：不明

4. 白十字のワッフル

続いて、「白十字ワッフル」のサイトです。
美味しそうなワッフルがスクロールするごとに変化していく様子がついつい最後まで見たくなるデザインです。

日本語文字はNoto Serif と一般的によく用いられるフォントですが、よく見てみるとフォント自体が少し横長に調整されています。
商品が楕円形で横長なので商品との一体感が生まれ、細かなフォントアレンジが商品の良さを一層引き立てています。

使用フォント：Noto Serif JP / Meno Banner

5. Seasoned – The brand creation kitchen

ここからは3つの海外サイトを取り上げてみたいと思います！

こちらのサイトは一見料理系のサイトかと思いきや、Kotoというデザイン会社が手がけた、ブランド構築の知識やスキルを学べる無料のオンラインリソースサイトだそうです。
1970年代の料理本からインスピレーションを受け、淡い色調やノイズを用いたレトロな世界観が目を惹きます。

タイトルコピーは筆記体や太いゴシック体等、ジャンルの異なる複数のフォントを組みあわせて遊び心のあるデザインになっています。
袋文字やシャドウが淡い色使いと合わさってレトロポップな世界観を表現しています。

使用フォント：Gooper Condensed / STIX Two Text / Luxurious Script / Seasoned Sans（おそらくオリジナルフォント）

6. Siena Film Foundation

続いて、Siena Film Foundationというドキュメンタリー等を主に制作する映像制作会社のサイトです。
モノトーン基調で、昔のフィルム映画を連想させる表現がサイト全体に施されています。

メインで用いられているNeue Bruckeというインクのにじみを感じさせるフォントがフィルムのアナログ感とマッチし、シンプルながらも存在感のあるフォントになっています。
サブフォントとして用いられるParrish Romanもシンプルかつクラシカルなセリフ体になっており、Neue Bruckeとの相性がとても良さそうです。

使用フォント：Neue Brucke / Parrish Roman

7. BOYD

最後は、BOYDというオンラインアートギャラリーのサイトで世界中から厳選されたアート作品を紹介・販売しています。
アート作品を引き立たせる美術館のように洗練された美しいサイトです。

メインフォントとしてLoveという優雅なフォントが大胆に用いられています。
繊細なフォルムとアルファベットによって横幅が異なるという特徴を持っており、情緒のある様子がまさにアートサイトにぴったりです。

使用フォント：Love / Adieu / Canela

最後に

いかがでしたでしょうか？

フォントがサイト全体の個性を際立たせていて、こだわりを感じるサイトばかりだったのではないでしょうか。
こうやって注意深くフォントを見ていると改めてフォント選びの重要性を感じます。

時に英字フォントは日本語フォントよりも書体がシンプルな分、より個性的なアレンジフォントもたくさんあるので海外サイトにも引き続き注目しながらインプットしていきたいと思います。

最後までご覧いただき、ありがとうございました！