INFORMATIONお役立ち情報

INFORMATION お役立ち情報

お役立ち情報

【中国A79】 成功するWebデザインと失敗するWebデザイン。違いはどこに?2022.11.06

 

 

 1. Webデザインには、成功するデザインと失敗するデザインがある

 

 

③たとえ価値のある内容を詰め込んだホームページでも、
じっくり読むかどうかは、数秒で判断されることが多い。

 

情報量が多いホームページでも、
欲している情報にたどりつけないと、イライラしてしまう。
              ↓
訪問者ができるだけ長く滞在すると成功につながるため、
Webデザインは、居心地のよいホームページにすることが大切。

デザインで大切なのは、使いやすさがポイント。

 

 

 

 2. 成功するデザインと失敗するデザインの違い

 

①成功するデザインの要素

   ・ユーザーが知りたい情報が探しやすい
   ・更新しやすいデザイン
   ・1ページだけでもホームページ内容がある程度把握できる
   ・ 読みやすい文字、分かりやすいインデックス

 

 

②失敗するデザインの要素

   ・ おしゃれに見えることだけを考えている
   ・ 小さすぎる文字、読みにくい背景色
   ・ 1ページあたりの情報が少なすぎる
   ・ インデックスが分かりにくく、複雑な構造

 

※ インデックスとは、検索エンジンにWebページが登録されること
 インデックスされると、検索エンジンに検索されやすくなる。

 

 

③成功と失敗の違いが生まれる理由

 

失敗するホームページが生まれる理由は、以下。
「ユーザーより自分を優先して作っているため」

 

成功するデザインにする秘訣は、以下を再認識すること。
「ユーザーのために作るユーザーファースト」
            ↓
自己満足感を優先させるのではなく、以下を目指すべき。
「ユーザーが使いやすいデザイン選び」

 

 

 

 4. 失敗しないデザインを選ぶためのノウハウ

 

 

 

【ノウハウ❶】情報の優先度が設定されていない

全て大事な情報なので全て目立たせて欲しいと要望されることがある。
しかし全てを目立たせることは、全て目立たなくなるのと同義になる。

 

 

【ノウハウ❷】多すぎる同レベルの情報は思考を止める

同じレベルの情報が複数並んでいると人は思考を止めてしまう傾向がある。
次のアクションを起こさなくなる。

それを避けるためには、情報に優先度を設定することが必要。
箇条書きにする場合には、3件に絞るのがベスト。

 

 

【ノウハウ❸】 UIやコンテンツに目がいかない

コンテンツの内容や、ホームページの導線に目がいかず、
役割を果たせていない場合は成果を上げることが難しい。

 

 

【ノウハウ❹】更新されることを前提として設計されていない

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

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

 

ユーザー側で更新・管理ができるCMS機能を採用すべき。
※ CMSとは、ユーザー側の管理画面でホームページの更新ができるシステム

 

 

【ノウハウ❺】文字が見やすく、読みやすいデザインか

黒い背景に白い文字のデザインは、簡単にハイセンスに見えそうで、
初心者がやりたくなるデザイン。

しかし、色が濃い背景で文字を見やすくするのは難しいため、
初心者は避けるほうが無難。

 

 

【ノウハウ❻】更新されているホームページであることが伝わること

ホームページの良さとは、最新の情報を知ることができること。

会社案内などでは、ホームページが完成すると安心してしまい、
何年もそのままにしてしまいがち。

 

常に以下を考えて、運用すべき。
  ・ 会社は何年もの間、何も変わらないのか
  ・ 訪問者が知りたいのは、何年も前の古い情報なのか

 

 

 5. レイアウトの統一感がなぜ重要なのか

 

【理由❶】印象と使いやすさの重要性

ユーザーは、以下の目的で検索などを通じてホームページへとやってくる。
        ・ 情報を得る目的
        ・ 商材を探す目的

 

その時、以下のようなホームページであったらどう思うか。
  ・ 見た目がちぐはぐな、色やデザイン
  ・ 検索したい情報や、商材とかけ離れた見た目
            ↓

以下のようになり、その場ですぐに離脱する可能性が高くなる。
  ・ 信頼できないと感じる
  ・ 自分が興味を持ったものとはイメージが違う
  ・ レイアウトがバラバラで使いにくい
  ・ 欲しい情報へとうまくたどり着けない

 

 

以下の目的のために、レイアウトにも統一感を持たせる。
  ・ 短時間でスムーズに理解してもらう
  ・ さまざまなコンテンツに目を通してもらう
  ・ 期待するアクションへつなげる
  ・ 訪問者のページ離脱を防ぐ

 

 

 【理由❷】見た目の統一感

 

 

【ルール❶】カラーの数を絞る

目立たせるために以下にするのは、統一感を乱す原因になる。
  ・ カラフルにしたい
  ・ 強調したいところの色を強めたい
  ・ コンテンツごとのイメージに合わせて色を変えたい

 

基本は、以下にすべき。
・ メインカラー、ベースカラー、アクセントカラーの3色を決め、明度や彩度も統一する
・ メインカラーはコーポレートカラーにすることや、ブランドイメージに合うカラーにする

 

 

【ルール❷】フォントを決める

主に見出し用のフォント、本文のフォント、英文のフォントの3つを決めておくこと。

これ以上多くのフォントを用いると統一感がなくなり、見た目が悪く、読みにくくなる。

 

 

【ルール❸】画像の明度や彩度

掲載するさまざまな画像の明度や彩度がバラバラでは見た目が悪くなる。
キレイに見える明度や彩度で統一を図るべき。

 

 

【ルール❹】コンテンツデザインの統一

以下にルールを設け、コンテンツごとにバラバラにならないようにする。
     ・ 見出しやボタンのデザイン
     ・ テキストの文字間や行間
     ・ コンテンツ間のマージン など

 

 

 

 

 

「この記事についてのご意見をお聞かせください」
ご意見を反映させてお役立ち情報を作成していきます。

※上記の画像は DALL・E3によって作成されたものです。

※各例の掲載企業名は、プライバシー保護のため、仮称を
使⽤している場合があります。ご了承の上お読みください。

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