参考にしたい魅力的な海外ホームページのWebデザイン16の実例

ダウンロード: CMSを活用したWEBサイト作成無料ガイド
戸栗 頌平(とぐり しょうへい)
戸栗 頌平(とぐり しょうへい)

最終更新日:

公開日:

以前HubSpotブログでは「卓越したホームページデザイン 15の実例」という記事を公開しました。

参考にしたい魅力的な海外ホームページのWebデザイン16の実例

→ダウンロード: CMSを活用したWEBサイト作成無料ガイド & CMS選定シート

おかげさまで、この記事、かなり読まれております!公開してから3週間足らずで、すでに36,000ビューを記録しました。......何もその数字を自慢しようというわけではありません。実はこれにはちょっとした余話があります。

実は、記事は確かに大成功だったのですが、ブログにいただいたコメントを見てみるとガッカリしていた読者も多かったようなのです。というのも実例として取り上げたホームページの大部分がソフトウェア企業のもので、多様な業界をカバーしていなかったためです。

そこでマーケターとしてHubSpotはどうするのか?読者の苦情を無視するのか、あるいはザ・キンクスのアルバムに倣って「Give the People What They Want(人々が望むものを与える)」のか? 

もちろん後者のほうが望ましいという結論になり、早速、「卓越したホームページデザイン 54の実例」をダウンロード可能なコレクションとしてまとめました。ソフトウェア業界以外にもさまざまな業界のホームページを取り上げています。

また、ferretさんがこちら「目移りするほどイケてる!海外デザインギャラリーサイト24選」でも魅力的なデザインのウェブサイトを紹介しています。

今回はその中から特にHubSpotがお気に入りのホームページを紹介し、それらのページのどこが優れているのかを検証していきたいと思います。皆さんがホームページを一新する際の参考になれば幸いです。

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

「卓越」したホームページデザインとは?

 実例を見ていく前に、優れたホームページデザインに欠かせない要素とはどのようなものか考えてみたいと思います。これについては「卓越したホームページデザイン 15の実例」の記事で詳しく書きましたが、ここで簡単におさらいしておきましょう。

「卓越した」という評価には主観が含まれるのも確かですが、それでも優れたホームページには総じて以下のような要素が見られるはずです。

  • 「どんな企業なのか」「どんな事業を行っているのか」「訪問者がウェブサイトでできることは何か」という疑問に明確に答えている
  • ターゲットオーディエンスに共鳴している
  • 説得力のあるバリュープロポジションがなされている
  • 操作性、ユーザビリティが優れており、モバイルにも最適化されている
  •  Call-To-Action(CTA)を組み込み、訪問者を次のステップへ誘導している
  • 訪問者のニーズ、問題、疑問を反映して常に変化している(ここに挙げる実例やコレクション内の実例で、すでにウェブ上で見つけられないものがあるのは、これが理由です!)
  • 全体的な見た目とセンスが良い

実例の中には、上記の要素をすべて満たしていないものもあるかもしれませんが、特定の要素において優れているものとして取り上げています。ホームページをデザインし直そうと考えているのであれば、十分にリサーチを行い、他のウェブサイトを参考にしてみてください。

この記事やダウンロードコレクションに含まれている実例以外にも、ウェブ上には素晴らしいホームページが山ほどあります。ウェブサイトを作成する際は、見た目に美しく、ブランドを反映したホームページをデザインするだけでなく、訪問者にユーザーフレンドリーなエクスペリエンスを提供することも忘れてはいけません。

もちろんWebデザインの観点からも機能的である必要性があります。こちらの「美しく(そして機能的な)Webデザイン受賞サイト15選」ではそのようなウェブサイトもご紹介しています。

時間をかけてターゲットオーディエンスに関する調査を行い、オーディエンスのニーズに合った素晴らしいエクスペリエンスを提供するようにしましょう。 

魅力的な海外のホームページデザイン16の実例

1)Austin Beerworks

Austin Beerworksはアメリカのテキサス州を拠点とする地ビール醸造会社です。 

HubSpotのオススメするAustin Beerworksの秀逸なウェブデザイン

 このホームページの優れている点:

何といってもAustin Beerworksの商品のカラーリングとプレゼンテーションに惹きつけられます。白の背景に高解像度の商品画像。喉が渇いているときに見たら思わず飲みたくなるデザインですね。

2)Oliver Russell

Oliver Russellは「新規企業や社会貢献している企業のブランディング」を行っているエージェンシーです。

HubSpotのオススメするOliver Russellの秀逸なウェブデザイン 

このホームページの優れている点:

絶妙な色合いや背景に配置された繊細なデザインは、主要コンテンツを損なわずに魅力的なビジュアルを実現している好例です。

3)Evel

Evelは音楽やその他関連商品の販売を行っているウェブサイトです。

HubSpotのオススメするEvelの秀逸なウェブデザイン 

このホームページの優れている点:

ウェブサイトで販売されているものが何なのか一目で分かります。また、さまざまなアイテム、魅力的なスライド、価格タグなどが見やすいように整然と配置されているのもいいですね。

4)Scotch & Soda

 Scotch & Sodaはアムステルダムを拠点とするアパレル企業です。

HubSpotのオススメするScotch & Sodaの秀逸なウェブデザイン

このホームページの優れている点:

ホームページの異なる領域をタイル表示することですっきりと見せています。ソーシャルアイコンも整然と配置されてSNSで共有しやすくなっていますし、「最新投稿(Latest Posts)」から追加コンテンツにも簡単にアクセスできるように工夫されています。

5)Sagmeister Walsh

Sagmeister Walshはニューヨークを拠点とするデザイン会社です。

HubSpotのオススメするSagmeister Walshの秀逸なウェブデザイン

このホームページの優れている点: 

実際の社内の様子を上から撮影した写真画像を使うというのは、とてもクリエイティブなアイデアですね。オフィスの床に描かれたメニューをクリックするとそれぞれのページに飛ぶことができます。他のデザイン会社に一歩差をつけたウェブサイトと言えるでしょう。

6)Jacqui Co.

Jacqui Co.はシンガポールでケーキとカップケーキを販売しているショップです。

HubSpotのオススメするJacqui Co.の秀逸なウェブデザイン

このホームページの優れている点:

HubSpotが特にお気に入りのホームページです。ウェブサイトの見た目も雰囲気もケーキショップにぴったりにデザインされており、インタラクティブな要素もあって遊び心のある楽しいページになっています。

7)Fit for a Frame

Fit for a Frameは大きなサイズのオリジナルスクリーンプリントをネット販売しているウェブサイトです。 

HubSpotのオススメするFit for a Frameの秀逸なウェブデザイン

このホームページの優れている点:

 おすすめの商品をホームページに上手く並べて表示しているところが評価できます。またトップに表示されているスライドショーもシンプルかつ魅力的です。スライドショーにすることで、ホームページをごちゃごちゃさせずに多彩な情報を提示することに成功しています。

8)Buffalo Wild Wings

 Buffalo Wild Wingsはレストラン、グリル、バーをチェーン展開している企業です。

HubSpotのオススメするBuffalo Wild Wingsの秀逸なウェブデザイン

このホームページの優れている点: 

統一されたブランドイメージを念頭に作成されたウェブページの好例です。色使い、デザイン、スタイル、フォントがすべて企業のブランドイメージと整合しています。 

9)Prezi

Preziはクラウドベース(SaaS)のプレゼンテーションソフトウェアです。ストーリーに焦点をあて、バーチャルキャンバスを使ってアイデアを共有する新しいスタイルを提案しています。

HubSpotのオススメするPreziの秀逸なウェブデザイン 

このホームページの優れている点:

ホームページのメインバナーに動画を埋め込んでいるところが秀逸です。プレゼンテーション作成ツールを提供している企業ですから、自社製品のプレゼンがこれだけ優れていれば説得力もあるというもの。Preziブランドの専門知識と信頼性を裏打ちするページに仕上がっています。

10)SilkTricky

 SilkTrickyは双方向性とエンタテインメントに特化した専門デジタルエージェンシーです。

HubSpotのオススメするSilkTrickyの秀逸なウェブデザイン

このホームページの優れている点:

 こちらも、ビジュアルタイルを使うことで、コンテンツをすっきりと表示している好例です。コンテンツを表示するエリアが限られているため、ほとんどスクロールせずに記事の詳細が読めるのも快適です。

11)Blind Barber

The Blind Barberは、昔ながらの理髪店をコンセプトとして、ニューヨークとロサンゼルスに店舗を構える理髪店&ラウンジで、ヘアプロダクトや男性化粧品も展開しています。

HubSpotのオススメするBlind Barberの秀逸なウェブデザイン

このホームページの優れている点:

 ローディング時間は多少長めではあるものの、ウェブサイトの最も重要な要素をページの中央に配しているところが注目に値します。訪問者の視線は自然と中央のボタンに引き寄せられますね。このボタンをクリックすると動画が埋め込まれた「About」ページが開き、訪問者にBlind Barberのコンセプトが伝わるようになっています。

12)Jib 

Jibはトロントに拠点を置くデザイン広告エージェンシーです。

HubSpotのオススメするJib の秀逸なウェブデザイン

このホームページの優れている点:

動画を使って明確なバリュープロポジションを打ち出しています。またサイトの色使いもそれぞれの色が補完し合うような良い色使いですね。背景のテクスチャもブランド全体のテーマと一貫しています。

13)Luhse Tea 

Luhse Teaはオンラインでお茶を販売しているネットショップです。

HubSpotのオススメするLuhse Teaの秀逸なウェブデザイン

このホームページの優れている点:

ユニークな見た目と雰囲気のあるウェブサイトで、ブランドに個性を持たせ、競合他社と差別化しています。

14)Ride for the Brand

Ride for the Brandはテキサス州のフォートワースおよびダラスで事業展開しているウェブデザイン会社です。

HubSpotのオススメするRide for the Brandの秀逸なウェブデザイン

このホームページの優れている点:

レトロなスタイルのホームページが目を引きます。カスタムデザイン要素で他とは一線を画し、横に自動スクロールする作りで、ユニークなユーザーエクスペリエンスを提供しています。

15)Ryan Edy

Ryan Edyはプロのフォトグラファーです。

HubSpotのオススメするRyan Edyの秀逸なウェブデザイン

このホームページの優れている点:

プロの写真撮影サービスを提供するウェブサイトとして、このデザインは訪問者にずばりアピールする作りと言えます。左側にシンプルなナビゲーションがあり、中央ではさまざまな写真が楽しめるようになっています。 

16)Grey Goose

Grey Gooseはウォッカのブランドで、フランスのコニャック地方の伝統的な製造プロセスと原料を用いたフレイバーウォッカを製造、販売しています。

HubSpotのオススメするGrey Gooseの秀逸なウェブデザイン

このホームページの優れている点:

プレゼンテーションがすべてと言えるでしょう。洗練された高解像度の画像と滑らかなライアウトで、ハイエンドをターゲットとしたブランドイメージを実現しています。Grey GooseのラインアップとレシピへリンクしたCall-To-ActionCTA)がページのメイン要素であり、それを邪魔するようなコンテンツは配置されていません。

また、HubSpotのCMSをご利用いただきますとデフォルトでレスポンシブであったり、海外ホームページデザインに見受けることのできるシンプルでクリーンなウェブサイトを構築することができます。

いかがでしたでしょうか。皆さんが素晴らしいと思うホームページデザインには他にどんなものがありますか?

上記に加えてさらに業界業種別に秀逸な海外ホームページデザインを50選しました。よろしければ無料サンプルはこちらからダウンロードください。

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

 

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

画像クレジット:cdrummbk

編集メモ:この記事は、2013年1月に投稿した内容に加筆・訂正したものです。Pamela Vaughanによる元の記事はこちらからご覧いただけます。

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

関連記事

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

Webサイトの作成に必要な機能を比較して最適なCMSを導入しましょう。

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

START FREE OR GET A DEMO