人脈づくりの交流会では、誰もが握手をすると思います。ホームページは、オンライン版の握手です。交流会で参加者は、軽い会話から始めるため、勇気を振り絞り知らない人に話しかけます。
そして相手に最高の第一印象を持ってもらえる、一度きりのチャンスを手に入れます。握手です。
単に握手と言っても、その中には想像を絶するたくさんの要素が詰まっています。まず握手をするときは、がつがつとした印象を与えないように注意しながら、なおかつしっかりと相手の手を握る必要があります。目と目を合せて自己紹介をすると同時に、相手の名前を頭に叩き込もうと必死になるでしょう（自分の手の平がじっとりと汗ばんでいると感じるのは勘違いに違いないと祈ることは、言うまでもありません）。
話をホームページに戻します。人がホームページを開くときというのは、ほとんどの場合、インターネット上で何かを探している途中に偶然あるページを開く、というような場合です。そういった場合に偶然ページを開いた人が、もっと見てみたい、関わってみたい、そう感じるような魅了的なホームページであることは非常に重要です（素敵な握手と同じです）。
訪問者の次の行動としては、「会社概要」ページを開く、さらには「CTA（Call-To-Action）」からリードに代わる、ということさえあります。当たり前のことを言っているように感じるかもしれません。ですが、たくさんのホームページが存在する中で、訪問者に確実な第一印象を与えることは非常に重要な鍵となります。決して簡単なことではありませんが。
自分のホームページが素晴らしい第一印象を与えられているのかどうか、どうしたら確認できるでしょうか。決まった方程式はありません。ただし素晴らしいホームページをいくつも目にすると、あるパターンが見えてきます。説明するより見たほうが早いので、心を奪われずにはいられない素晴らしいデザインのホームページを16個用意しました。
5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法
HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。
- オーディエンスとそのニーズについて理解する
- オーディエンスに合ったコンテンツを作成する
- ウェブサイトを最適化し最大限の成果を上げる
- パフォーマンスレポートの作成、分析、継続的な改善
今すぐダウンロードする
全てのフィールドが必須です。
1）Rezdy
アイコンや矢印などの視覚要素をRezdyのように巧みに使用することができたら、製品の目的を伝えるためにページいっぱいにテキストを並べる必要がなくなります。
2）Jay Z's Life+Times
人を楽しませることを本当に知っている人と言えば、Jay Zです。たくさんの要素を持つJay Z個人のウェブサイトには、インタラクティブなタイルがたくさん敷き詰められており、Jay Zの実生活のスタイルが良く表現されています。
3）Sagmeister & Walsh
ここでぜひ見てもらいたいのは、ユニークなサイトナビゲーションです。拡張現実と呼ばれるこの手法では、フロアに置かれた各要素をクリックすることができます。クリックすると読者は、サイト内の別のページに進んでゆくことができます。この視覚要素は、他のサイトとは完全に差別化されています。
4）Collaborate
Collaborateのウェブサイトには、３種類のCTAが互いに邪魔し合うことなく上手にレイアウトされています。これにより違ったタイプのユーザーが、効果的にサイトを利用することができます。
5）Prezi
Preziのウェブページは、情報を階層的に示すと同時に、訪問者の思考の流れをそのまま追えるような構成になっています。ページ上の動画、会社のキャッチフレーズ、わかりやすいCTAを利用すれば、いとも簡単に知りたいことに辿り着くことができます。
6）Fannabee
Fannabeeのウェブサイトは、パララックススクローリングを採用することで、ユーザーが他では味わえない独特な体験をできるようになっています。バナーに表示された「mega fans（熱烈なファンのみなさま）」をクリックすると不思議な特別感が生まれ、オーディエンスはCTAをクリックして、ベルベットロープの張られた向こう側、レッドカーペットの世界を覗いてみたい衝動にかられるのです。
7）UrbanBound
UrbanBoundのウェブサイトのように、ページの中央にCTAを配置することはとても優れた方法です。そうすることにより、ウェブサイト上で一番大切な情報をページの真ん中に配置することができます。
8）JIB
シンプルなイラスト、完璧な捕色の組み合わせ、はっきりとしたキャッチコピー、そしてCTAをたった一つ配置するなど、数々の参考になる要素を持つこのページは、間違いなくハブスポットのお勧めホームページのひとつです。
9）Galpin
Galpinのウェブページは、自分たちの特徴を際立たせるためにタイポグラフィを利用しています。メッセージを伝える手段として、画像ではなくテキストを使用している点を参考にしてみてください。
10）Surf Right
ナビゲーションの容易さと美しいデザイン、この両方を同時に実現することは可能です。インタラクティブなスライダーと美しく構成されたタイルで、非常に簡単にウェブサイトを操作することができます。ほら、実感できましたか？
11）Riley Cran
Riley Cranのウェブサイトは、タイルを効果的に利用したもうひとつのウェブサイトデザインです。Riley Cranのページは、他とは明らかに異なります。すべてがひとつのページに収まり、なんとスクロールすることさえ不要です！
12）New Breed
New Breedのウェブサイトは、良く構成された見やすいページに、大量のコンテンツをバランス良く効果的に表示することに成功しています。
13）SilkTricky
Silk Trickyのウェブサイトは、タイルでコンテンツを構成させたもうひとつの例です。テキスト部分に表示された、小さな白い三角形が見えますか。この三角形がテキストと視覚要素を自然な形で関連付け、読者が無理なくコンテンツを追えるようにしています。
14）Function Point
Function Pointのウェブサイトでは、すべてのデザイン要素の見た目と雰囲気に一貫性があります。また、イラスト、スタイル、色の選択がデザインを力強く後押しして、視覚的な階層を構築しています。
15）Woodwork
Woodworkのウェブサイトには非常にたくさんの視覚要素が用意されており、ユーザーはサイトを開いたとたんに圧倒されてしまいそうです。ですがこの例で見られるように、はっきりとしたナビゲーションとレイアウトを採用していることで、そのようなことはありません。
16）Quarter Rest Studios
Quarter Rest Studiosのホームページは、ヘッダーのシンプルなナビゲーションとページ中央の大きなスライドショーの組み合わせで構成されています。このページから訪問者は、完全な詳細までとは行かずとも、役に立つさまざまな情報を手に入れることができます。視覚要素をベースとしており、雑誌のターゲット市場にとっては理想的ではないでしょうか。
どのホームページにピンときましたか？インスピレーションを与える53の無料ホームページ集（英語）も、クリックしてみてください！
