ファーストビューで惹き込まれる！ポスターみたいな大胆なタイポグラフィを使ったWebサイト20選
数あるホームページのデザインには、ルールに縛られずに大胆に作られているものがあります。
その中には、最初にユニークなタイポグラフィを使った大胆なデザインのホームページもあります。
*「ファーストビュー」*と呼ばれる、最初に画面に映る部分でどのように印象を残すことができるかはWebデザイナーの腕の見せどころです。
単なるページに文字を並べる従来のレイアウトではなく、ページ全体を白紙のポスターのように捉えて、大胆に見せるサイトも増えてきました。
そこで今回は、ファーストビューで惹き込まれる、ポスターみたいな大胆なタイポグラフィを使ったWebサイトをご紹介していきます。
ポスターみたいな大胆なタイポグラフィを使ったWebサイト
1. Valaire
Valaireはカナダで2004年に結成された5人組バンドです。ホームページの冒頭では、バンドメンバーが森林に隠れたような写真を背景に、彼らのバンド名を表すユニークなロゴが配置されています。スクロールすると、太文字のゴシックが左右からあらわれ、彼らのアルバム「Oobopopop」の曲の一部を聴くことができます。
2. Friends
アメリカ・ペンシルヴァニア州のデザイン制作会社Friendsのホームページです。黄色の太いペンで描いたかのような大胆なストライプの上に、極太のサンセリフ書体を"どーん"と配置。スクロールすると、丸い切り抜きの写真や、細い線で型どった可愛いイラストが現れます。他のページではページを中央で2分割するスプリットスクリーンも採用されています。
3. Novum Collection
アメリカのジュエリーブランドNovumのホームページで、宝石を売るのに大切なことはブランドイメージを持ってもらうことです。ホームページも例外ではなく、洗練された被写体、クラフトマンシップを伝える動画、先駆的なデザイナーのストーリーなどが絶妙なバランスで配置されています。スクロールの仕方も非常に独特です。
4. formula
http://formula.standardabweichung.de
The One Showという、ニューユークで開かれる広告やデザインのクリエイティブアワード用に作られた作品です。まるでDNAのような独特な形をして、文字が流れていく幻想的なデザイン。ページはこれだけで、ナビゲーションを開くことでこの不思議なモジュールの速さや角度を変えることができます。
5. 神戸女子大学
http://www.yg.kobe-wu.ac.jp/wu/
神戸女子大学のホームページでは、同大学の女子大生を表す「Shinjo」の文字が女子大の日常を映し出すヒーローイメージとともに大胆に配置されています。一見するとイメージ構築先行のホームページのように見えますが、スクロールすると大学ならではのたくさんの情報が上手にまとまっています。
6. PORT!
PORT!は渋谷にあるクリエイティブ会社CINRAが運営するセミナーイベントです。PORT!のページでは、方眼を想起させるドットとロゴを背景に、縦長のポスターのように情報を上手に配置しています。全体的にコントラストを下げて、白い文字の可読性を上げる工夫がされています。
7. deskpass
シカゴを拠点に75箇所以上のコワーキングスペースを定額で使うことができるdeskpassのホームページです。フラットデザインを採用しており、スクロールするごとにかわいらしいイラストとともにサービス内容を理解することができます。
8. Forward Festival
Forward Festivalは、ドイツ・オーストリア・スイスで行われているデザインとコミュニケーションの祭典です。四角で囲った「Forward」のロゴや、マウスに反応して回転する「FORWARD FESTIVAL IS BACK」の文字、会場を表すベタ塗りの円がアーティステックに配置されています。アーティストのラインナップ写真にデュオトーンが取り入れられているのも注目です。
9. BE PROUD
BE PROUDは、歯科医に特化したホームページ制作を行う、東京・日本橋に拠点を置くデザイン会社です。馬に乗った武士が筆で描かれて和を演出しながらも、サイト全体ではゴシック体のフォントが多用されており、洗練してすっきりまとまっているホームページとなっています。
10. Museum of Wi-Fi
Museum of Wi-Fiは世界中の面白いWi-fiネットワークの名前を集めただけのホームページです。ファーストビューであらわれるタイポグラフィーは、凝視するとWi-Fiのマークのように見えます。下方にスクロールすると、昔のゲームボーイを想起させるようなポータブルWi-Fi端末のイラストレーションに、思わず突っ込みたくなるようなWi-Fiネットワーク名が紹介されています。
11. Double Eight
イタリアのメンズ服ブランドDouble Eightのホームページでは、開いた瞬間にまるで映画のような全画面のイメージ動画が流れます。撮影地の「ICELAND」という文字が一瞬大胆に表示された後、動画は進み、最後にエンドロールが流れ、通常のサイトに遷移します。最初にしっかりと来訪者を惹きつける、参考にしたいホームページです。
12. DeNA Running Club
渋谷に本社を置くDeNAの陸上部のホームページです。部員の写真がポスターのようにかっこよく表示され、「DENA RUNNING CLUB」の文字がテロップのように流れてきます。グリッドデザインをやや崩したデザインを採用しており、単調でないところも見ていて飽きがこないポイントとなっています。
13. Walk West
アメリカ・ノースカロライナ州に拠点を置くWalk Westも、大胆なヒーロー画像を背景として太字のサンセリフ体をロゴに、雑誌やポスターのようなレイアウトを採用しています。スクロールするとタイミングをズラしてあらゆるものが動くパララックスエフェクトも取り入れられています。
14. 株式会社山陽
本革製品を扱っている兵庫の株式会社山陽のコーポレートサイトでは、丸みを帯びた印象的なオレンジのロゴが製品の前景として大胆に配置されています。スクロールするごとに様々なカラーのレザーがまるで紙をちぎるかのように登場し、パララックスエフェクトとともに楽しむことができます。
15. VINCENT
VINCENTは、アートディレクション企業Graphikaの監修のブランドです。筆で大胆に書いたような「VINCENT」の文字がしっかりと存在感を発揮し、見る人を印象付けます。写真・イラスト・文字をバランスよく配置し、全体的に雑誌のような仕上がりになっています。
16. クロニクル、クロニクル！
http://www.chronicle-chronicle.jp
写真を使わず文字だけで雑誌のようなレイアウトを実現しているのが、展覧会クロニクル、クロニクル！のホームページです。「繰り返される展覧会」のコンセプトどおり、ホームページのレイアウトも繰り返されているようなデザインになっています。
17. WORDSBERG
翻訳やコピーライティングに特化したクリエイティブ企業WORDSBERGのホームページでは、まさに言葉や伝達をモチーフとした文字だけでメッセージを伝えようとしています。トップページの文字はパララックスエフェクトがかかっていて、右側の大きなタイポグラフィだけではなく、メニューも連動して動くところは注目です。
18. AMP MUSIC
アフリカの音楽を世界に届けるレーベルAMP MUSICのホームページです。アフリカの人々の様子をイメージさせるヒーロー動画が印象的です。スクロールすると、レーベルの音楽を視聴することができます。
19. 小林大輔写真事務所
写真家・小林大輔さんの事務所のホームページでは、透きとおった水色のタイポグラフィを前景に、実際に小林さんが写真を撮っているシーンが動画として流れていきます。モノクロの動画や画像とアクアブルーの色の統一感が魅力を引き立ててくれています。
20. DRAFT Inc.
まるでその場で書いているかのようなアニメーションとともに筆で書いたような文字があらわれるのが、インテリアデザイン会社DRAFTのコーポレートサイトです。空間デザインを専門とするだけあって、ホームページの各要素も大胆に配置されています。気付かないぐらいの、グラグラと独特の動きをするパララックスエフェクトも取り入れられています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ファーストビュー
- ファーストビューとは、ユーザーがホームページを訪問した際、スクロールせずに表示される範囲のことです。ディスプレイのサイズや解像度によって、ファーストビューは異なります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト（ウェブレイアウト）」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ファーストビュー
- ファーストビューとは、ユーザーがホームページを訪問した際、スクロールせずに表示される範囲のことです。ディスプレイのサイズや解像度によって、ファーストビューは異なります。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ１ページ)の集まりのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- 広告
- 広告とは販売のための告知活動を指します。ただし、広告を掲載するための媒体、メッセージがあること、広告を出している広告主が明示されているなどの３要素を含む場合を指すことが多いようです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ナビゲーション
- ナビゲーションとは、もともと「目的地までの経路」や「道順案内」を意味する英単語です。しかし、インターネットの分野では、ホームページにある主要コンテンツをまとめたリンクを指します。これがあることで、ユーザーは目的のページがどこにあるかを短時間で見つけることができます。また、検索エンジンのクローラー（検索ロボット）に対して、効率的にサイト内を巡回させるという効果もあります。 ナビゲーションには「グローバルナビゲーション」と「ローカルナビゲーション」の二つがあります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- セミナー
- セミナーとは、少人数を対象とする講習会のことです。講師からの一方的な説明だけで終わるのではなく、質疑応答が行われるなど講師と受講者のやり取りがある場合が多いようです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ファーストビュー
- ファーストビューとは、ユーザーがホームページを訪問した際、スクロールせずに表示される範囲のことです。ディスプレイのサイズや解像度によって、ファーストビューは異なります。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト（ウェブレイアウト）」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- コーポレート
- コーポレートとは、日本語の「企業」のことです。インターネット上で「コーポレートサイト」という場合は、企業のホームページであることを表します。また、コーポレートは接頭語として使われることが多く、「コーポレートガバナンス（企業内統制）」などのように、他の単語と組み合わせて使うことが多いようです。会社そのものを指すことが多い「カンパニー」とは使い方が異なります。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト（ウェブレイアウト）」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンセプト
- コンセプトとは、作品やサービスなどに一貫して貫かれている考え方をいいます。デザインと機能がバラバラだったり、使い勝手がちぐはぐだったりすると「コンセプトが一貫してないね」などと酷評されてしまいます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コーポレート
- コーポレートとは、日本語の「企業」のことです。インターネット上で「コーポレートサイト」という場合は、企業のホームページであることを表します。また、コーポレートは接頭語として使われることが多く、「コーポレートガバナンス（企業内統制）」などのように、他の単語と組み合わせて使うことが多いようです。会社そのものを指すことが多い「カンパニー」とは使い方が異なります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
この記事を書いたライター
おすすめ記事
関連記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO（検索エンジン最適化）
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション（MA）
- メールマーケティング
- データ分析・BI
- CRM（顧客管理）
- SFA（商談管理）
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
●課題
●その他
