どうしても釘付けになってしまう16のホームページデザイン

ダウンロード: 5ステップで成果が出るウェブサイトを作成する方法
戸栗 頌平(とぐり しょうへい)
戸栗 頌平(とぐり しょうへい)

最終更新日:

公開日:

人脈づくりの交流会では、誰もが握手をすると思います。ホームページは、オンライン版の握手です。交流会で参加者は、軽い会話から始めるため、勇気を振り絞り知らない人に話しかけます。

どうしても釘付けになってしまう16のホームページデザイン

→ダウンロード: 5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

そして相手に最高の第一印象を持ってもらえる、一度きりのチャンスを手に入れます。握手です。

単に握手と言っても、その中には想像を絶するたくさんの要素が詰まっています。まず握手をするときは、がつがつとした印象を与えないように注意しながら、なおかつしっかりと相手の手を握る必要があります。目と目を合せて自己紹介をすると同時に、相手の名前を頭に叩き込もうと必死になるでしょう(自分の手の平がじっとりと汗ばんでいると感じるのは勘違いに違いないと祈ることは、言うまでもありません)。

話をホームページに戻します。人がホームページを開くときというのは、ほとんどの場合、インターネット上で何かを探している途中に偶然あるページを開く、というような場合です。そういった場合に偶然ページを開いた人が、もっと見てみたい、関わってみたい、そう感じるような魅了的なホームページであることは非常に重要です(素敵な握手と同じです)。

訪問者の次の行動としては、「会社概要」ページを開く、さらには「CTA(Call-To-Action)」からリードに代わる、ということさえあります。当たり前のことを言っているように感じるかもしれません。ですが、たくさんのホームページが存在する中で、訪問者に確実な第一印象を与えることは非常に重要な鍵となります。決して簡単なことではありませんが。

自分のホームページが素晴らしい第一印象を与えられているのかどうか、どうしたら確認できるでしょうか。決まった方程式はありません。ただし素晴らしいホームページをいくつも目にすると、あるパターンが見えてきます。説明するより見たほうが早いので、心を奪われずにはいられない素晴らしいデザインのホームページを16個用意しました。

5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

1)Rezdy

アイコンや矢印などの視覚要素をRezdyのように巧みに使用することができたら、製品の目的を伝えるためにページいっぱいにテキストを並べる必要がなくなります。

rezdy_edited


2)Jay Z's Life+Times

人を楽しませることを本当に知っている人と言えば、Jay Zです。たくさんの要素を持つJay Z個人のウェブサイトには、インタラクティブなタイルがたくさん敷き詰められており、Jay Zの実生活のスタイルが良く表現されています。

life_and_times


3)Sagmeister & Walsh

ここでぜひ見てもらいたいのは、ユニークなサイトナビゲーションです。拡張現実と呼ばれるこの手法では、フロアに置かれた各要素をクリックすることができます。クリックすると読者は、サイト内の別のページに進んでゆくことができます。この視覚要素は、他のサイトとは完全に差別化されています。

Sagmeister__Walsh


4)Collaborate

Collaborateのウェブサイトには、3種類のCTAが互いに邪魔し合うことなく上手にレイアウトされています。これにより違ったタイプのユーザーが、効果的にサイトを利用することができます。

collaborate


5)Prezi

Preziのウェブページは、情報を階層的に示すと同時に、訪問者の思考の流れをそのまま追えるような構成になっています。ページ上の動画、会社のキャッチフレーズ、わかりやすいCTAを利用すれば、いとも簡単に知りたいことに辿り着くことができます。

prezi


6)Fannabee

Fannabeeのウェブサイトは、パララックススクローリングを採用することで、ユーザーが他では味わえない独特な体験をできるようになっています。バナーに表示された「mega fans(熱烈なファンのみなさま)」をクリックすると不思議な特別感が生まれ、オーディエンスはCTAをクリックして、ベルベットロープの張られた向こう側、レッドカーペットの世界を覗いてみたい衝動にかられるのです。

Fannabee


7)UrbanBound

UrbanBoundのウェブサイトのように、ページの中央にCTAを配置することはとても優れた方法です。そうすることにより、ウェブサイト上で一番大切な情報をページの真ん中に配置することができます。

urban_bound


8)JIB

シンプルなイラスト、完璧な捕色の組み合わせ、はっきりとしたキャッチコピー、そしてCTAをたった一つ配置するなど、数々の参考になる要素を持つこのページは、間違いなくハブスポットのお勧めホームページのひとつです。

jib_edited


9)Galpin

Galpinのウェブページは、自分たちの特徴を際立たせるためにタイポグラフィを利用しています。メッセージを伝える手段として、画像ではなくテキストを使用している点を参考にしてみてください。

Galpin


10)Surf Right

ナビゲーションの容易さと美しいデザイン、この両方を同時に実現することは可能です。インタラクティブなスライダーと美しく構成されたタイルで、非常に簡単にウェブサイトを操作することができます。ほら、実感できましたか?

surf_right


11)Riley Cran

Riley Cranのウェブサイトは、タイルを効果的に利用したもうひとつのウェブサイトデザインです。Riley Cranのページは、他とは明らかに異なります。すべてがひとつのページに収まり、なんとスクロールすることさえ不要です!

Riley_Cran


12)New Breed

New Breedのウェブサイトは、良く構成された見やすいページに、大量のコンテンツをバランス良く効果的に表示することに成功しています。

new_breed


13)SilkTricky

Silk Trickyのウェブサイトは、タイルでコンテンツを構成させたもうひとつの例です。テキスト部分に表示された、小さな白い三角形が見えますか。この三角形がテキストと視覚要素を自然な形で関連付け、読者が無理なくコンテンツを追えるようにしています。

SilkTricky


14)Function Point

Function Pointのウェブサイトでは、すべてのデザイン要素の見た目と雰囲気に一貫性があります。また、イラスト、スタイル、色の選択がデザインを力強く後押しして、視覚的な階層を構築しています。

FP


15)Woodwork

Woodworkのウェブサイトには非常にたくさんの視覚要素が用意されており、ユーザーはサイトを開いたとたんに圧倒されてしまいそうです。ですがこの例で見られるように、はっきりとしたナビゲーションとレイアウトを採用していることで、そのようなことはありません。

Woodwork


16)Quarter Rest Studios

Quarter Rest Studiosのホームページは、ヘッダーのシンプルなナビゲーションとページ中央の大きなスライドショーの組み合わせで構成されています。このページから訪問者は、完全な詳細までとは行かずとも、役に立つさまざまな情報を手に入れることができます。視覚要素をベースとしており、雑誌のターゲット市場にとっては理想的ではないでしょうか。

Quarter_Rest_Studios

どのホームページにピンときましたか?インスピレーションを与える53の無料ホームページ集(英語)も、クリックしてみてください!

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

トピック: ウェブデザイン

関連記事

HubSpotはお客さまのプライバシー保護に全力で取り組んでおります。お客さまからご提供いただいたご情報は、お客さまにとって価値あるコンテンツ、製品、サービスの情報をお送りするために使用させていただきます。なお、当社からのEメール配信はいつでも停止できます。詳しくは、HubSpotのプライバシーポリシーをご覧ください。

HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO