数あるホームページのデザインには、ルールに縛られずに大胆に作られているものがあります。
その中には、最初にユニークなタイポグラフィを使った大胆なデザインのホームページもあります。

ファーストビューと呼ばれる、最初に画面に映る部分でどのように印象を残すことができるかはWebデザイナーの腕の見せどころです。
単なるページに文字を並べる従来のレイアウトではなく、ページ全体を白紙のポスターのように捉えて、大胆に見せるサイトも増えてきました。
そこで今回は、ファーストビューで惹き込まれる、ポスターみたいな大胆なタイポグラフィを使ったWebサイトをご紹介していきます。

ポスターみたいな大胆なタイポグラフィを使ったWebサイト

1. Valaire

01_valaire.jpeg
http://valaire.mu

Valaireはカナダで2004年に結成された5人組バンドです。ホームページの冒頭では、バンドメンバーが森林に隠れたような写真を背景に、彼らのバンド名を表すユニークなロゴが配置されています。スクロールすると、太文字のゴシックが左右からあらわれ、彼らのアルバム「Oobopopop」の曲の一部を聴くことができます。

2. Friends

02_friends.jpeg
https://bff.co

アメリカ・ペンシルヴァニア州のデザイン制作会社Friendsのホームページです。黄色の太いペンで描いたかのような大胆なストライプの上に、極太のサンセリフ書体を"どーん"と配置。スクロールすると、丸い切り抜きの写真や、細い線で型どった可愛いイラストが現れます。他のページではページを中央で2分割するスプリットスクリーンも採用されています。

3. Novum Collection

03_novum.jpeg
http://novumcollection.com

アメリカのジュエリーブランドNovumのホームページで、宝石を売るのに大切なことはブランドイメージを持ってもらうことです。ホームページも例外ではなく、洗練された被写体、クラフトマンシップを伝える動画、先駆的なデザイナーのストーリーなどが絶妙なバランスで配置されています。スクロールの仕方も非常に独特です。

4. formula

04_theone.jpeg
http://formula.standardabweichung.de

The One Showという、ニューユークで開かれる広告やデザインのクリエイティブアワード用に作られた作品です。まるでDNAのような独特な形をして、文字が流れていく幻想的なデザイン。ページはこれだけで、ナビゲーションを開くことでこの不思議なモジュールの速さや角度を変えることができます。

5. 神戸女子大学

05_shinjo.jpeg
http://www.yg.kobe-wu.ac.jp/wu/

神戸女子大学のホームページでは、同大学の女子大生を表す「Shinjo」の文字が女子大の日常を映し出すヒーローイメージとともに大胆に配置されています。一見するとイメージ構築先行のホームページのように見えますが、スクロールすると大学ならではのたくさんの情報が上手にまとまっています。

6. PORT!

06_port.jpeg
http://port.cinra.co.jp

PORT!は渋谷にあるクリエイティブ会社CINRAが運営するセミナーイベントです。PORT!のページでは、方眼を想起させるドットとロゴを背景に、縦長のポスターのように情報を上手に配置しています。全体的にコントラストを下げて、白い文字の可読性を上げる工夫がされています。

7. deskpass

07_deskpass.jpeg
https://www.deskpass.com

シカゴを拠点に75箇所以上のコワーキングスペースを定額で使うことができるdeskpassのホームページです。フラットデザインを採用しており、スクロールするごとにかわいらしいイラストとともにサービス内容を理解することができます。

8. Forward Festival

08_forwardfestival.jpeg
Forward Festival

Forward Festivalは、ドイツ・オーストリア・スイスで行われているデザインとコミュニケーションの祭典です。四角で囲った「Forward」のロゴや、マウスに反応して回転する「FORWARD FESTIVAL IS BACK」の文字、会場を表すベタ塗りの円がアーティステックに配置されています。アーティストのラインナップ写真にデュオトーンが取り入れられているのも注目です。

9. BE PROUD

09_beproud.jpeg
http://www.beproud.asia

BE PROUDは、歯科医に特化したホームページ制作を行う、東京・日本橋に拠点を置くデザイン会社です。馬に乗った武士が筆で描かれて和を演出しながらも、サイト全体ではゴシック体のフォントが多用されており、洗練してすっきりまとまっているホームページとなっています。

10. Museum of Wi-Fi

10_museumofwifi.jpeg
http://museumofwifi.com

Museum of Wi-Fiは世界中の面白いWi-fiネットワークの名前を集めただけのホームページです。ファーストビューであらわれるタイポグラフィーは、凝視するとWi-Fiのマークのように見えます。下方にスクロールすると、昔のゲームボーイを想起させるようなポータブルWi-Fi端末のイラストレーションに、思わず突っ込みたくなるようなWi-Fiネットワーク名が紹介されています。

11. Double Eight

11_doubleeight.jpeg
http://www.doubleeight.it

イタリアのメンズ服ブランドDouble Eightのホームページでは、開いた瞬間にまるで映画のような全画面のイメージ動画が流れます。撮影地の「ICELAND」という文字が一瞬大胆に表示された後、動画は進み、最後にエンドロールが流れ、通常のサイトに遷移します。最初にしっかりと来訪者を惹きつける、参考にしたいホームページです。

12. DeNA Running Club

12_denarunningclub.jpeg
https://dena.com/running/

渋谷に本社を置くDeNAの陸上部のホームページです。部員の写真がポスターのようにかっこよく表示され、「DENA RUNNING CLUB」の文字がテロップのように流れてきます。グリッドデザインをやや崩したデザインを採用しており、単調でないところも見ていて飽きがこないポイントとなっています。

13. Walk West

13_walkwest.jpeg
https://walkwest.com

アメリカ・ノースカロライナ州に拠点を置くWalk Westも、大胆なヒーロー画像を背景として太字のサンセリフ体をロゴに、雑誌やポスターのようなレイアウトを採用しています。スクロールするとタイミングをズラしてあらゆるものが動くパララックスエフェクトも取り入れられています。

14. Hillmann Living

14_hillmanliving.jpeg
https://www.hillmann-living.de/de/

Hillmann Livingは、ドイツに拠点を置く家具メーカーです。モダンな椅子を中心に取り扱っているだけに、ホームページも椅子の良さにスポットライトを当てているようなデザインになっています。公開されているインスタグラムの写真も、非常に鮮やかで魅力的です。

15. 株式会社山陽

15_sanyo.jpeg
http://sanyotan.co.jp

本革製品を扱っている兵庫の株式会社山陽のコーポレートサイトでは、丸みを帯びた印象的なオレンジのロゴが製品の前景として大胆に配置されています。スクロールするごとに様々なカラーのレザーがまるで紙をちぎるかのように登場し、パララックスエフェクトとともに楽しむことができます。

16. VINCENT

16_vincent.jpeg
http://iam-vincent.com

VINCENTは、アートディレクション企業Graphikaの監修のブランドです。筆で大胆に書いたような「VINCENT」の文字がしっかりと存在感を発揮し、見る人を印象付けます。写真・イラスト・文字をバランスよく配置し、全体的に雑誌のような仕上がりになっています。

17. クロニクル、クロニクル!

17_clonicle.jpeg
http://www.chronicle-chronicle.jp

写真を使わず文字だけで雑誌のようなレイアウトを実現しているのが、展覧会クロニクル、クロニクル!のホームページです。「繰り返される展覧会」のコンセプトどおり、ホームページレイアウトも繰り返されているようなデザインになっています。

18. WORDSBERG

18_wordsburg.jpeg
http://wordsberg.com

翻訳やコピーライティングに特化したクリエイティブ企業WORDSBERGのホームページでは、まさに言葉や伝達をモチーフとした文字だけでメッセージを伝えようとしています。トップページの文字はパララックスエフェクトがかかっていて、右側の大きなタイポグラフィだけではなく、メニューも連動して動くところは注目です。

19. AMP MUSIC

19_ampmusic.jpeg
http://amp-music.net

アフリカの音楽を世界に届けるレーベルAMP MUSICのホームページです。アフリカの人々の様子をイメージさせるヒーロー動画が印象的です。スクロールすると、レーベルの音楽を視聴することができます。

20. 小林大輔写真事務所

20_kobayashidaisuke.jpeg
小林大輔写真事務所

写真家・小林大輔さんの事務所のホームページでは、透きとおった水色のタイポグラフィを前景に、実際に小林さんが写真を撮っているシーンが動画として流れていきます。モノクロの動画や画像とアクアブルーの色の統一感が魅力を引き立ててくれています。

21. DRAFT Inc.

21_draft.jpeg
https://draft.co.jp

まるでその場で書いているかのようなアニメーションとともに筆で書いたような文字があらわれるのが、インテリアデザイン会社DRAFTのコーポレートサイトです。空間デザインを専門とするだけあって、ホームページの各要素も大胆に配置されています。気付かないぐらいの、グラグラと独特の動きをするパララックスエフェクトも取り入れられています。
  

まとめ

今回は、ファーストビューで惹き込まれる、ポスターみたいな大胆なタイポグラフィを使ったWebサイトをご紹介していきました。

クリエイティブな職業では、時に既存の概念に縛られずに思いっきり大胆に行動することが求められますが、ホームページでもその大胆さが発揮されていましたね。
文字組みを縦にしてみたり、文字と写真を重ね合わせてみたり……こうしたアイデアも、ホームページなら普通はこういうレイアウトをする、という概念を一旦取り払うことで、たくさん出てきます。

ぜひ、今後のホームページレイアウトの参考にしてみてください。