Web運用
PR

ホームページ制作のベンチマーク – 参考サイトの探し方

hisashi
記事内に商品プロモーションを含む場合があります

 どんな形や表示・機能が実装されるか分からずに、ホームページを制作するのはとても不安です。
 クライアントの立場に立って考えると、どうでしょう。完成イメージを先に提示してくれたら安心しますよね。

 そこでホームページ制作に取り掛かる前に、参考になるホームページをリサーチしてクライアントと制作側で完成イメージのすり合わせを行います。そのことを、ベンチマークといいます。ベンチマークは「基準」「水準」あるいは「指標」といった意味をもつ言葉です。

  • クライアントの安心につながる
  • 制作のゴールイメージがつかめる
  • 制作のアイデアを引き出す・トレンドがつかめる
  • 競合サイトの調査になる

 ベンチマークには、これらの目的があります。難しく考える必要はなく、参考になるホームページを探していきましょう。

 この記事では、ベンチマークの際に注意する点を解説していきます。

ベンチマークの視点・観点

 ベンチマークは同じ業界だけするのではなく、他業種・デザイン性・機能性など、さまざまな観点で行いましょう。

競合他社からベンチマークする

 まずは同業他社をベンチマークしましょう。その理由は、ベンチマークと同時に競合分析もできるからです。

  • 業界でいちばん有名な企業
  • 自社の一歩前を行っている企業
  • ホームページに力を入れている企業

 目標としている企業のホームページが、

  • どのような構成になっているか
  • なにを伝えたいホームページになっているか
  • どんな成果を求めているか

 これらの情報を集めることで、自社にしかない強みをホームページでどう打ち出すべきか、ヒントになります。

他業種からベンチマークする

 他業種からベンチマークすることで、同じ業界にはない特徴的なホームページの表現や見せ方を探ります。たとえばベンチマークの観点は次の通りです。

  • デザイン性(構成・配色・レイアウト・見せ方)
  • ページ数・ページ構成
  • 導線設計
  • ユーザーの利便性(PC・スマートフォン)

 制作に携わる業界がITに明るい業界ではないとき、他業種を参考にすることで、最新のトレンドを吸収できます。

ベンチマークの具体的な方法

 では、具体的なベンチマークの方法を紹介していきます。

検索サイトからベンチマークする

 「業界」「業種」「地域」などの検索キーワードで検索します。検索1ページ目の上位10サイトを見ていきましょう。

 10位以下のサイトは見なくて大丈夫です。というのは、検索順位に力をいれている企業は、ホームページに力を入れているからです。

ポイント

 自社よりも少し先を行っている企業が目標となります。つまりそのホームページを超えるクオリティーが制作の目標になります。

 検索1ページ目の上から数件リンクは、google広告枠なので除外しましょう。広告枠を企業が入札して、上位に掲載されているサイトです。

ギャラリーサイトを使ってベンチマークする

 ホームページのリンクを集めたギャラリーサイトから探すのも有効です。

 ギャラリーサイトは、ホームページを「業種」「デザイン性」「カラー」などのカテゴリーにわけており、検索しやすいように分類されているサイトです。Web制作会社では、デザイナーがデザインのトレンドを調査するためによく使用しています。

 主にデザイン性や見せ方・装飾の参考にするといいでしょう。注意する点は、該当のホームページが検索順位で上位を取っているとは限らない点です。

有名なギャラリーサイト

 いくつか有名なギャラリーサイトを紹介します。

縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

https://muuuuu.org/

81-web.com

https://81-web.com/

I/O 3000 | Webデザインギャラリー

https://io3000.com/

Web Design Clip | Webデザインギャラリー・クリップ集

https://webdesignclip.com/

bookma!

https://bookma.org/

ベンチマークを手助けしてくれるツール

 ベンチマークしたサイトはクライアントに共有して、ホームページ制作の方向性を確認しましょう。クライアントとの共有を楽にしてくれるツールを紹介します。

スクリーンショットのアドオン

 ページ丸ごと、スクリーンショットを取っておくと便利です。ブラウザの拡張機能(アドオン)をインストールすれば簡単にスクリーンショットを取得できます。

GoFullPage – Full Page Screen Capture

https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=ja

カラーピッカーのアドオン

 ホームページで使われているカラーバリエーションをピックアップできます。

ColorPick Eyedropper

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

ベンチマークで見るべきポイントのまとめ

  • トップページの構成
  • デザイン性
    • カラーマネジメント
    • フォント
    • レイアウト
  • ページ構成
    • ページの導線
  • コンバージョンポイント
    • お問い合わせの設置場所
  • コンテンツ
    • ライティング
    • ブログ
  • SNSの活用
  • 機能
    • お問い合わせフォーム
    • サイト内検索
  • スマートフォン・タブレットの表示

 ベンチマークは、最終的に3サイトくらいに目標を絞りましょう。多くのサイトから参考にしたいところですが、選択肢が多くなると取り入れたい要素が整理できなくなります。

ベンチマークで注意すること・やってはいけないこと

 ベンチマークはあくまで参考サイトを探し、ホームページ制作のゴールイメージをクライアントと共有することです。

 デザイン性を真似したり、模写してしまうと、同じようなサイトが出来上がってしまいます。

 これからつくるホームページに文章や画像の転載は絶対にしないでください。最悪の場合、後発の類似サイトとしてgoogleからペナルティーを受け、検索結果から除外されるケースもあります。また、参考にした企業から訴えられることも考えられます。

https://hisashi-media.com/web/flow/ https://hisashi-media.com/lp-make/
Twitterからの読者コメントをお待ちしています。
ブログ更新の励みになります!
ABOUT ME
のざき寿
のざき寿
物書き
元芸人 / Webエンジニア5年 / SEOライティング2年 / コピーライター養成講座卒業
スポンサーリンク
記事URLをコピーしました