• Home
  • TOP
  • サービス
  • 事例
  • お役立ち資料
  • セミナー
  • ブログ
  • MARKEiT ブログ

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

    • このエントリーをはてなブックマークに追加

    2014年10月16日

    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 – 機械/電気工学

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

    2. Real thread – water based printing

    ・鮮明なワンカラーデザイン。余白も多く使い、クリアーなサイトデザイン。
    ・美しいフラットデザインを使用。

    3. Eldorado stone – 石材加工

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

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

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

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

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

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

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

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

    7. Bornevia – Enterprise helpdesk solution

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

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

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

    9. Colibri – インバウンドマーケティングツール

    ・大きめなサイズのスクリーンショットを、絶妙なトリミングで、スタイリッシュに表現。
    ・事例やショーケースを印象的に大きく取り扱っている。

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

    ・セクションブロックを色分けした、クリーンでモダンなワンコラムデザイン。
    ・秀逸な配色パターン。
    ・サービスをよりわかりやすく説明するための、グラフィックデザイン(イラスト)を使用した良い例。

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

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

    12. Kin – HR solution

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

    13. Stena bulk – タンカー輸送

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

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

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

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

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

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

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

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

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

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

    ・サービス説明をわかりやすくするため、タブで動画を切り替えて表現。
    ・ワークフローをタイムラインによってわかりやすく表現。

    19. Base – sales CRM tool

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

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

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

    21. Marcuard heritage – 財務管理

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

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

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

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

    ・高いレベルのイラストレーションを使用。
    ・目を引く、ダイアナミックな配色デザイン。
    ・コンテンツの中で、動画の見せ方を工夫している。

    24. Dhiel group – 建築事務所

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

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

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

    26. Satmetrix – 顧客情報分析

    ・ヘッダーエリアで、アクションボタンは固定して使用している例。
    ・価格表が見やすくデザインされている。

    27. Spectre – サウンド/音楽

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

    28. Adlucent – マーケティング

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