上海物来喜電子商務有限公司

【中国B58】 ホームページデザインの成功と失敗は、どこで分かれるのか2023.08.20

 

 

 1. あなたはこのような経験はありませんか

①ある日、ネットで気になる商品やサービスを見つけた。
その商材が自社に合っていそうだと思った。

 

しかし、その商材を提供している会社のホームページにアクセスしてみたら、がっかり。
　　　　　　　　　　　　　　　↓
理由は、そのホームページは以下のようなものだったため。

           ・古くて見た目が悪い
           ・情報が少なくて内容が分からない
           ・操作が難しくて使いにくい
           ・信頼できるかどうか不安になる

 

その結果、あなたはその商材を購入するのをやめた。
そして、他の会社のホームページに移った。

 

 

②これは、Webデザインが失敗している例。
Webデザインが失敗していると、訪問者は以下のように感じる。

           ・興味や関心を失う
           ・不満や不信感を抱く
           ・サイトから離脱する
           ・問い合わせなどのコンバージョンに繋がらない

 

※Webデザインには流行があり、ホームページ作ってから３年経過
すると「古くて見た目が悪く、不信感を感じ始める人」が増える。

 

 

③Webデザインが成功していると、訪問者は以下のように感じる。

           ・興味や関心を持つ
           ・満足や信頼感を得る
           ・サイト内を探索する
           ・問い合わせなどのコンバージョンに繋がる

 

Webデザインが成功するためには、
どのようなことに気を付ければ良いのかを以下に紹介する。

 

 

 2. Webデザインは、ホームページの第一印象を決める要素

①訪問者は、ホームページにアクセスした瞬間に、以下の判断をする。

  ・信頼できるか
  ・自分が求めている情報や商材を提供しているか
  ・使いやすいか
  ・デザインが新しく、見た目が魅力的か

 

これらの判断は、数秒で行われることが多い。

 

 

②その結果によって、訪問者は次のアクションを決める。

  ・ページ内をさらに探索する
  ・他のページに移動する
  ・今のサイトから離脱する
  ・問い合わせなどのコンバージョンに繋がる行動をする

 

つまり、Webデザインは、訪問者ができるだけ長く滞在し、
目的に沿った行動を起こすために必要なもの。
                             ↓
逆に言えば、Webデザインが悪ければ、訪問者は
すぐにサイトから離れてしまい、集客や成約の機会を失ってしまう。

 

 

 

 3. どんなWebデザインが良いと言えるか

①それは、訪問者が求めている情報や商材にたどり着きやすく、読みやすく、見やすく、使いやすいもの。

また、訪問者に対して適切なメッセージや価値提案を伝えることも重要。

 

 

②成功するWebデザインVS失敗するWebデザイン

成功するWebデザインと失敗するWebデザインの違いは、
「ユーザーファースト」という考え方に基づいている。

ユーザーファーストとは、
ユーザーのニーズや課題に応えることを最優先にすること。

 

 

③ユーザーファーストのWebデザインは効果的な理由は、以下。

・ユーザーは自分の目的に沿った情報や商材を素早く見つけたいと思っている
・ユーザーは自分にとって価値のあるホームページだと感じたら、長く滞在し、コンバージョンに繋がる行動を起こす

 

 

④ユーザーファーストでないWebデザインは効果が低い理由は、以下。

・ユーザーは自分の目的に沿わない情報や商材に興味や関心を持たない
・ユーザーは自分にとって価値のないホームページだと感じたら、不満や不信感を抱く
・ユーザーは自分にとって価値のある情報や商材が見つかっても、操作が難しくて使いにくければ、疲れてしまう

 

 

 

 4. 成功するWebデザインを選ぶためのポイントを紹介する

【ポイント❶】情報の優先度を設定する

①Webデザインを選ぶ前に、情報の優先度を設定することが大切。

情報の優先度とは、
訪問者が知りたいと思う情報や商材の重要度の順番のこと。

 

 

②情報の優先度を設定すれば、こんなメリットがある。

・訪問者に必要な情報を効率的に伝えることができる
・ページ内のレイアウトやコンテンツの配置を決めやすくなる
・ページ内で目立たせるべき要素や色彩を選びやすくなる

 

 

③情報の優先度を設定する方法は、以下のものがある。

・ターゲットとなる訪問者のペルソナ（架空の人物像）を作成し、そのニーズや課題を明確にする

・ペルソナがホームページに求める目的や目標を洗い出し、それに沿った情報や商材をリストアップする

・リストアップした情報や商材に対して、訪問者がどれだけ興味や関心を持つか、どれだけ重要だと感じるかを評価する

・評価した結果に基づいて、情報や商材を優先度の高い順に並べ替える

 

 

④情報や商材を優先度の高い順に並べ替えることで、Webデザインを選ぶ時にできること

・情報や商材は、ホームページのトップページに大きく表示し、鮮やかな色や太字などで強調することが効果的

・ページの上部に優先度の高い情報や商材を配置し、訪問者の注意を引く

・優先度の高い情報や商材に対して、目立つ色や大きさや形などのデザイン要素を使う

・優先度の低い情報や商材は、ページの下部やサイドバーなどに配置し、必要なと時に見られるようにする

・優先度の低い情報や商材に対して、目立たない色や小ささや形などのデザイン要素を使う

 

 

 

【ポイント❷】在中国日系企業のホームページでは、以下の情報や商材が優先度の高いものと考えられる

  ・会社の概要や実績、信頼性を示すもの
  ・中国市場でのニーズや、課題に応える商材の特徴やメリット
  ・問い合わせなどのコンバージョンに繋がるボタンやフォーム

 

 

以下の情報や商材は優先度の低いものと考えられる。

  ・会社の沿革や組織図、社員紹介など
  ・中国市場でのトレンドや分析など
  ・会社のニュースなど

 

これらの情報や商材は、ホームページのフッターやメニューなどに
小さく表示し、淡い色や細字などで控えめにすることが適切。

 

 

【ポイント❸】多すぎる同レベルの情報は思考を止める

①同じレベルの情報が多すぎると、訪問者は思考を止めてしまう。

どれも重要そうに見えるため、どれも読まなければならないと感じる。
                           ↓
その結果、訪問者は疲れてしまい、サイトから離脱してしまう可能性が高くなる。

 

 

 

②それを避けるためには、以下の工夫をする。

・情報に優先度を設定し、重要なものだけを表示する
・情報をカテゴリー分けし、見出しやインデックスで区別する
・情報を箇条書きにする場合は、３件に絞るか、順番や番号で順序付けする

 

 

 

【ポイント❹】UIやコンテンツに目がいくようにする

①UI（User Interface）やコンテンツは、訪問者が操作したり閲覧したりするもの。

UIやコンテンツは、訪問者に対してサイトの目的や価値を伝える役割を果たす。

 

 

②しかし以下のような場合、UIやコンテンツに目がいかず、役割を果たせていない。

・ページ内に余計な装飾や背景画像が多くて邪魔している
・文字や画像が小さくて見えにくい
・色や形が統一感がなくてバラバラに見える

 

 

③UIやコンテンツに目がいくようにするためには、以下の工夫をする。

ページ内はシンプルで余白が多い方が見やすくなる。
余白とは、文字や画像などのコンテンツとコンテンツの間にある空白のこと。
　　　　　　　　　　　↓
余白が多いと、以下のメリットがある。

　　　　　・コンテンツが目立ちやすくなる
　　　　　・コンテンツの関係性が分かりやすくなる
　　　　　・コンテンツの読みやすさや見やすさが向上する
　　　　　・ページ全体のバランスや統一感が出る

 

④余白を効果的に使うためには、以下の工夫をする。

・コンテンツの大きさや位置に合わせて、余白の大きさや位置も調整する
・余白の大きさは、コンテンツの重要度や関係性に応じて変える。
例えば、重要なコンテンツは大きな余白をとり、関連するコンテンツは小さな余白でまとめる
・余白の色は、ページの背景色と同じか、それに近い色にする。
余白の色が目立つと、コンテンツが埋もれてしまうため

 

 

 

【ポイント❺】色や形で情報を分類する

①色や形は、情報を分類するために有効な手段。
色や形によって、情報の種類やレベルを示すことができる。

 

②色や形で情報を分類することで、以下のメリットがある。

・情報の優先度や目的を一目で伝えることができる
・情報の整理や探索を容易にすることができる
・情報に対する印象や感情を与えることができる

 

③色や形で情報を分類するためには、以下の工夫をする。

・色は、暖色系（赤・オレンジ・黄）と寒色系（青・緑・紫）に分けて使う。
暖色系は目立ちやすく、熱意や活動性を表す。
寒色系は落ち着きやすく、信頼感や安定感を表す。

・形は、角ばったもの（四角・三角）と丸みのあるもの（円・楕円）に分けて使う。
角ばったものは強さや正確さを表す。
丸みのあるものは柔らかさや優しさを表す。

・色や形は、同じ種類やレベルの情報に対して統一して使う。
例えば、問い合わせボタンは赤い四角で表示し、ニュース記事は青い楕円で表示する など

 

 

 

【ポイント❻】デザインに流行を取り入れる

①デザインには流行がある。

流行に沿ったデザインを選ぶことで、以下のメリットがある。

・訪問者に新鮮さや魅力を感じてもらうことができる
・訪問者に最新の情報や商材を提供しているという印象を与えることができる
・訪問者に自社のブランドイメージを高めることができる

 

 

②デザインに流行を取り入れるためには、以下の工夫をする。
Webデザインのトレンドを調べて、自社のホームページに合うものを選ぶ。

 

例えば、2023年のWebデザインのトレンドは、以下のようなものがある。

・グラデーションやネオンカラーなどの鮮やかな色彩
・イラストや写真などのビジュアルコンテンツ
・フラットデザインなどのシンプルなレイアウト

 

 

③Webデザインの流行は、約３年で変わると言われている。

そのため、定期的にホームページのデザインを見直し、更新することが必要。
                            ↓
Webデザインの流行にただ従うのではなく、自社のホームページの
目的やターゲットに合わせて、適切に取り入れることが大切。

 

 

 

【ポイント❼】更新されることを前提として設計する

①Webデザインを選ぶ際には、ホームページの更新性も考慮する必要がある。

ホームページは定期的に更新を行い、最新情報を保つことが望ましい。

 

 

②特に、ホームページが集客の中心であるコンテンツマーケティングでは、以下が前提。
「どんどんページ追加更新を行うこと」

 

しかし、以下の場合、ホームページの更新が困難になる。

     ・デザインが複雑で変更に手間がかかる
     ・デザインが固定で拡張性がない
     ・デザインが自分で管理できない

 

 

③これらの場合、ホームページの内容が古くなり、訪問者に対して魅力的でなくなる。

また、検索エンジンにも評価されにくくなり、集客力が低下する。
　　　　　　　　　　　　　　　　↓
それを避けるためには、デザインに以下の工夫をすると良い。

     ・シンプルで変更しやすいものにする
     ・柔軟で拡張可能なものにする
     ・自分で管理できるCMS機能を採用する

※ CMSとは、ユーザー側の管理画面でホームページの更新ができるシステム。

 

 

④CMS機能を採用することで、ホームページに以下のメリットが出る。

     ・更新を自分で簡単に行える
     ・デザインやレイアウトを自分でカスタマイズできる
     ・コンテンツを自分で追加や削除できる
     ・パフォーマンスやセキュリティを自分で管理できる

 

 

 

 

 

本ホームページの収録内容はすべて当社に著作権があります。
無断転載・複製は、固くお断りいたします。
以下の場合には、お気軽にお問い合わせください。
サービス内容 / 機能の実現性 / お⾒積もり