デジタルマーケティングを支援する

マイクロサイト構築パック
by Comitia
お問い合わせ

デザインの優れた海外BtoBサイトまとめ28選と8つの共通点

Webサイト事例, Webデザイン, ブログ

BtoB企業のインバウンドマーケティング実践において、デザインは重要な要素の一つです。優れたコンテンツを作成し、SEOやソーシャルメディアを活用したとしても、訪れたWebサイトのデザイン次第ではユーザのモチベーションは低下してしまいます。

そこで今回は、様々な海外のBtoBサイトをピックアップしました。業種・業態の違いはあっても、Webサイトのデザインでは多くの共通点があります。まずは、Webデザインにおける共通点をご紹介します。

※この記事は旧ブログ「INBOUND marketing blog」から移行したものです。

【目次】

デザインの優れた海外のBtoBサイトにおける8つの共通点

  1. レスポンシブデザイン。
    ＊海外ではフルブラウザーの対応にこだわりはない。その代わりにマルチディバイス対応を重視している。
  2. 最新のHTML／CSSを使用し、サイトを構成。
  3. 画像テキストの代わりに、デバイスフォント、組み込みフォントを使用。
  4. コンテンツに簡単にアクセスするために、配置が固定されたナビゲーションとアクションボタンを使用。
  5. ユーモラスな言葉遣い、大きいサイズの個人写真、プライベートソーシャルアカウントへのリンクなど、親しみやすい表現方法。
  6. ケーススタディや事例を、スライドショーや大きいビジュアルを使って、大々的に紹介。
  7. ブログフォーマットで、ニュースやお知らせの紹介。
  8. スマフォのRetinaディスプレイにも適応した、大きいサイズのグラフィックの使用。グラフィックはPCサイトのサイズにも自動で適応。

1. Kibart – 機械/電気工学

Kibart – 機械/電気工学
  • モダンなデザイン方法を取り入れた２コラムレイアウトの良い例。
  • ボタンはすべて同じカラーとデザインで統一。ボタンは目立ってはいますが、ページ全体のデザインを乱すことはない。
  • カラーパレットの良い使用例。

2. Real thread –　water based printing

Real thread –　water based printing
  • 鮮明なワンカラーデザイン。余白も多く使い、クリアーなサイトデザイン。
  • 美しいフラットデザインを使用。

3. Eldorado stone – 石材加工

Eldorado stone – 石材加工
  • コンテンツの内容が多いが、それをいかにシンプルに見せるための絶妙なデザインバランス。
  • プロダクトの高品質感を演出するための、カラーパレットの良い使用方法。
  • 簡単に使える、サブナビゲーションのタブデザイン。
  • 簡単に使える、プロダクトのシュミレーション機能。

4. We build rail –鉄道関連の求人サイト

We build rail –鉄道関連の求人サイト
  • クリエイティブなナビゲーションデザイン。
  • 垂直のスクロールではなく、横スクロールを使用したウェブサイト。
  • 独創的なアートワークとアニメーション表現。
  • 高品質の写真と動画の使用。

5. Metaport – クラウドネットワーク

（現在リンク切れ）

  • 余白を十分に使用し、最小限のカラーパレットで構成したモダンなデザイン。
  • アイコンやインフォグラフィックスは、シンプルなデザインではあるが、視認性が高い。
  • 大きいヒーロースペース（※１）を使って、プロダクト機能や導入事例を説明。
  • ボタンの横幅は、サイトの横幅いっぱいのサイズ表示。

※１ヒーロースペース：日本では、メインイメージエリア、キービジュアルエリアと呼ぶ。トップページにおいて、ページ上部エリアのこと。

6. Koombea – iPhoneアプリケーション開発

Koombea – iPhoneアプリケーション開発
  • 横型のメインナビゲーション、サブナビゲーションを使用している。ワンコラムでのデザインレイアウトの良い例。
  • 高いクオリティのイメージ使用。
  • ヒーロースペースにおいて、動画を背景として使用し印象的なイメージを演出。
  • シンプルかつスマートなケーススタディや事例の見せ方。

7. Bornevia – Enterprise helpdesk solution

Bornevia – Enterprise helpdesk solution
  • 背景が有色（白ではない）サイトの良い例。
  • コンテンツのイメージ画像が白色となっており、コンテンツが目立つ。
  • 簡単に文章を読んでもらうために、最小限の文章量にしている。
  • CSSによって、数字をタイポグラフィック的な表現方法にしている。

8. Dittto – ソーシャルコンテンツ管理

Dittto – ソーシャルコンテンツ管理
  • 消費者の注意を引くために、必要最小限の情報で構成されたBtoBサイトの良い例。
  • マウスオーバーアニメーションによって、ヒーローエリアとメインコンテンツエリアを相互表現している。
  • 秀逸な会社紹介の良い例。

8. Dittto – ソーシャルコンテンツ管理

9. Colibri – インバウンドマーケティングツール
  • 大きめなサイズのスクリーンショットを、絶妙なトリミングで、スタイリッシュに表現。
  • 事例やショーケースを印象的に大きく取り扱っている。

10. Socialites – ソーシャルメディア代理店

Socialites – ソーシャルメディア代理店
  • セクションブロックを色分けした、クリーンでモダンなワンコラムデザイン。
  • 秀逸な配色パターン。
  • サービスをよりわかりやすく説明するための、グラフィックデザイン（イラスト）を使用した良い例。

11. Erskinedesign – ウェブ制作・デザイン

Erskinedesign – ウェブ制作・デザイン
  • デザインレイアウトは少し古いが、フラットベース、ダイナミックな構成によって、モダンな見せ方にしている。
  • シンプルな文字組とイメージ構成によって、メンテナンスが行いやすいサイト。

12. Kin – HR solution

Kin – HR solution
  • スクロールするスクリーンショットや動画コンテンツの表現方法が秀逸。
  • 高品質な写真やスクリーンショットを使用している、クリーンで鮮明なサイトデザイン。

13. Stena bulk – タンカー輸送

Stena bulk – タンカー輸送
  • デザインレイアウトは少し古いが、フラットベース、ダイナミックな構成によって、モダンな見せ方にしている。
  • シンプルな文字組とイメージ構成による、メンテナンスが行いやすいサイト。

14. EVP consulting – 製造業専門のコンサルティング

EVP consulting – 製造業専門のコンサルティング
  • クライアントのよくある問題を洗い出し、それをヒーローエリアにおいて、的確にビジュアライズしている良い例。
  • サイドでスライドするナビゲーション機能を実装。
  • 下層ページにおいては、ダイナミックで、相互性の高いナビゲーション機能を実装。

15. Pickware – 配送アプリーケション

Pickware – 配送アプリーケション
  • １ページ内にアンカーボタンを配置し、完結させているサイトデザインの良い例。
  • １ページで、お問い合わせフォームまで含んだページ構成。
  • スライドショーを上手く使い、製品機能をすべて説明している。

16. Journey group – ブランディング

Journey group – ブランディング
  • ユニークでアイキャッチのあるレイアウト構成。
  • オリジナル性の高いアートワークとインフォグラフィックスを使用。
  • 事例やショーケースを印象的に大きく取り扱っている。

17. Semplice – ウェブサイト制作ツール

Semplice – ウェブサイト制作ツール
  • 高品質な写真とスクリーンショットを使用し、大胆な配色組み合わせをしているサイトデザイン例。
  • 文章量を必要最低限にとどめておく。
  • スライドショーを使って、事例を印象的に見せている。

18. Agreement express by Recombo – 契約簡易化ソリューション

Agreement express by Recombo – 契約簡易化ソリューション
  • サービス説明をわかりやすくするため、タブで動画を切り替えて表現。
  • ワークフローをタイムラインによってわかりやすく表現。

19. Base – sales CRM tool

Base – sales CRM tool
  • 美しい文章レイアウトのサイト例。
  • 価格表示をマウスオーバーすると、ボタンがその近くに表示される。スマートなUI例。
  • 事例ページとお問い合わせフォームの組み合わせることで、お問い合わせが行いやすい構成を実現。
  • スタイリッシュで、UIが優れた縦型ナビゲーションの実装。

20. Simplifi – データ管理ソリューション

Simplifi – データ管理ソリューション
  • ダイナミックかつ、美しい配色設定のウェブサイト。
  • 問い合わせフォームボタンがタブ的な表現で配置。
  • すべてのページのフッターに、お問い合わせフォームを実装。
  • 高い品質イメージ。

21. Marcuard heritage – 財務管理

Marcuard heritage – 財務管理
  • 余白を十分に使い、スタイリッシュかつ、鮮麗されたサイトデザイン。
  • 格納式の縦型のグローバルナビゲーションを実装。
  • 会社沿革をタイムラインによって表現。

22. Networked insights – マーケティング

Networked insights – マーケティング
  • 幾何学的デザインを使用し、アイキャッチ的な役割を果たしている。
  • キャッチコピーは特大サイズのディバイスフォントで実装。
  • 2つのお問い合わせフォーム、1つはフッターに掲載、もう1つは特定のページ上部へ配置。

23. Donedone – 問題追跡機能ソリューション

Donedone – 問題追跡機能ソリューション
  • 高いレベルのイラストレーションを使用。
  • 目を引く、ダイアナミックな配色デザイン。
  • コンテンツの中で、動画の見せ方を工夫している。

24. Dhiel group – 建築事務所

Dhiel group – 建築事務所
  • 黒の背景配色とタイポグラフィックの見せ方の良いサイト例。
  • タブナビゲーションと、コンテンツのスライドショーが連動した見せ方。

25. Polecat – iPhone & iPad アプリデザイン

Polecat – iPhone & iPad アプリデザイン
  • 鮮麗されたアートワーク、イラストレーションを使用。
  • 事例やワークフローの見せ方の良い例。
  • 大きいのフォントサイズで、綺麗なタイポグラフィックの表現。
  • 「遊び心」のあるサイト。

26. Satmetrix – 顧客情報分析

Satmetrix – 顧客情報分析
  • ヘッダーエリアで、アクションボタンは固定して使用している例。
  • 価格表が見やすくデザインされている。

27. Spectre – サウンド／音楽

Spectre – サウンド／音楽
  • 少ないコンテンツと、縦型ナビゲーションを使用したサイト例。
  • 絢爛なイメージ素材を、暗いトーンでデザインすることで、高いブランドイメージを演出。
  • ニュースは、ブログレイアウトを使用しての表現。

28. Adlucent – マーケティング

Adlucent – マーケティング
  • スマフォのRetinaディスプレイにも適応した、大きいサイズのグラフィックの使用。
  • ナビゲーションとアクションボタンは位置が固定。
  • ヒーローエリアでは、イメージを伝達するだけでなく、機能を説明するためのエリアとして使用。