奈良 集客ホームページ制作 エイプリルデザイン April Design

ホームページを見やすくするには?簡単にできるユーザビリティ改善

自社ホームページが「見づらいんだけど、見やすくして欲しい」と言われたことはありませんか?

「おしゃれに」「可愛く」・・・など「見た目デザイン」ばかりで悩んでしまうweb担当者さん・事業主さま、事業やWeb運用で忙しく、また理解が難しくて放置していませんか?

残念ながら“うわべデザイン”も大切ですが、それ「だけ」ではホームページの価値は出ません・・・・・・!

見やすさ使いやすさ・わかりやすさ」にも注目して、価値あるサイトにしてみませんか?
web専門用語では「ユーザビリティ」と言います。

デザインがおしゃれでも、

  • このボタン押したら何が起こるの?(不安/わからない)
  • 値引き条件が難解すぎる!
  • 次のページへの行き方は?

こうなってしまうと、「ホームページに集客できたけど、なぜか売れない…」なんてことになりやすく、かなり損してしまいます。

今回は、見やすいホームページにする方法がわからない、ユーザビリティ初心者向けの改善ポイントをまとめました。

「おしゃれなホームページ」目指して、事件発生

ホームページリニューアルしたのに・・・

まだお客様からこのような「見方がわからない」と言われたり、あるいは購入などにつながりにくいまま・・・・ということがありえます。
ホームページ制作は、この部分でもクオリティに違いが出ます。

適切な制作者を選ぶのはもちろん、発注者様も「お客様が本当に望むデザイン」を共に目指していきましょう。なぜなら、運用後などにもちょこちょこ、使いやすさの課題は出てくるからです。その際、できるだけ「改悪」してしまわしない事も重要です。

  • バナーだらけで疲れた
  • レイアウトが難解。探したい〇〇はどこ?
  • イメージ写真を見て、「これは違うな」と思いました
  • 耳障りのいいコピーやデザインばかりで、重要なコンテンツが乏しい!

といったことが起きた時、人はそのwebサイトから回れ右して、逃げてしまいます。
お客様から直接言われないことも多く、アクセスに繋がらないというような形で問題が見えたりしますね。逆に、ちょこちょこ言われるというサイトは重症かも!

中小企業・個人経営のホームページでは特に、せっかく作るなら、「見にくい、使いにくい。で損しない」Webデザインを依頼された方が賢明です。
運用時にも、アクセス解析・ユーザーテストなどから見えた課題を改善していくのがオススメです。

それでもおしゃれなだけ、を目指しますか?

  • Web担:見た目次第でだいぶ(結果も)変わるでしょ?
  • Web担新人:デザインを覚えて、自社サイトをかっこよくするぞ!
  • 社長:きれいだったらいいのでは?有名な制作会社を探そう…

こういう時の「デザイン」とは、アート面を意味することが多いです。でもこれ、よくある落とし穴に・・・。

制作会社も中には、HP制作にとっての「デザインの意味」を曖昧にしている業者もあります。

“きれいなデザイン”は長期的に見ると重要ですが、単品ではホームページの効果に結びつきません。

いかに「見にくい(ユーザビリティが低い)と、残念なホームページなのか」、ご理解いただけましたか?

あなたがWeb担当者さんだった場合、周囲から何か指摘されるかもしれないポイントです(特に、売れていない場合など)。

そうでなく、Webデザインは課題解決の一つなんです。お客さま思いの作りになっていることがまず、大前提。
ホームページはダサい必要もないどころか、見た目の恩恵もかなり大きいのですが……

00.「使いやすさ」とは

では早速、自社サイトで「残念な結果」を避ける「使いやすさ」の基礎を押さえましょう!

利便性のよさの尺度をデザイン用語では「ユーザビリティ」と言います。
一言で言えば、Webサイトであれば「ホームページを見やすくすること」ですが・・・

ISO(国際標準化機構)のユーザビリティの定義

特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い。

ユーザビリティで著名なヤコブ・ニールセン博士の定義

  • 学習しやすさ: すぐに、そして簡単に使用することが可能
  • 効率性: 学習後は高い生産性を創出可能
  • 記憶しやすさ:簡単に使い方を記憶することが可能
  • 間違えにくさ: 間違いを起こしにくく、また起こしても簡単に回復可能
  • 主観的満足度: ユーザーが満足できるよう楽しく利用することが可能

つまり「ユーザビリティがいい状態」とは、「紛らわしくなく、くどくど説明しなくても、お客様が自然にみていただけるような」ホームページのことですね。

01.ページ導入部に、パッと伝わる情報やビジュアルを

あるページに訪問して、最初に画面に見える上部のエリアを「ファーストビュー」と言います。

このファーストビューは超大切。
ページに訪問した大多数の人は、ページ上の方を見て瞬時に判断し、問題を感じたらすぐ離脱してしまうからです。

様々な調査で、ページの下へ行くほどスクロールしてくれる割合は激減することがわかっています。下まで見る人は、全体の30%以下ほどになるでしょう。

ヒートマップのサービスを提供するClickTaleはおよそ10万のページの閲覧を分析しました。
結果としては、対象者は閲覧したページの76%でスクロールバーを使用し、そのうちの22%では、ページの長さにかかわらず一番下までスクロールしました。それでもなお、ページの一番上の画面が最も価値があるということは明白です ― Unfolding the Fold、ClickTale Scrolling ReportPart 2

なので、少しでも脱落させないためにも、「ファーストビュー」は一瞬で的確に、その先まで見続けるメリット・特色を打ち出すよう作り込みましょう。

ファーストビューが最初のハードル、ということです。
「導入部」が残念だと、その下にいくら丁寧な説明などあっても離脱され安く、ムダになってしまいます。

ファーストビューの基本チェックポイント

画像そのもののクオリティが同レベルでも、

  • 専門用語を不用意に使わず、ターゲットに通じる文言なのか?
  • クリック先が予測できるコピーやデザインか?
  • 一つのバナーで伝える内容を絞っているか?

など。「やばい、うちのファーストビューだめかも…」と思った人は、ぜひ改善を試みてください。

こんな事例も

デザインに詳しくない方の作るバナーやメインビジュアルは、「改善前」のように多くの要素を詰め込んでしまいがちです。

バナーなども、人はクリックすべきか判断するのに数秒以上かけてくれません。

ファーストビューの改善だけで反応率がアップした事例(現在記事は非公開になっています)

02.定番ルールに従う(学習しやすさ)

ホームページって色んなデザインのサイトがあるように見えて、実は「迷ったらこうしとけ」な“定番ルール”があるんです。

リンクは青。ヘッダーのロゴはトップページ(ホーム)へ戻るリンク。
などなど、“定番ルール”に従うだけでも、十分使いやすくなります。

ただ、そのホームページでちゃんと明確な法則が見えるようデザインすれば、必ずしもこのルールに沿わなくても大丈夫。
(規格外にすることは、制作者の力量次第では危険ですが…)

「サイトをピンク系にまとめるため、リンク色はピンクに」という感じですね。

新ルールは、誰もが簡単に理解できるものである必要があります。
「何でもかんでも問合わせないと使えないホームページ」なんて使わないですよね?(それに近いサイトもあります・・・)

混ぜるなキケン。

そして、ルールは基本は一つに統一しましょう。気分でリンク色がピンクになったり青になったり、というのは絶対だめです!

“webサイトの定番”は押さえつつ、プロの判断で独自性を出したデザイン性の高いサイトは、良質な「見やすい」のお手本です。ぜひ、たくさんのホームページを研究してみてください。
ルールの作り方も、崩していいポイントも、そこにヒントがあります。

03.ユーザーは広告が嫌い

ユーザーは広告に見えるコンテンツを無意識に飛ばし読みします。それが広告でなくても、「広告っぽい」だけでクリックされません。
・・・ということは、さきほど例に挙げた「バナーだらけページ」はもってのほか、とわかりますね_φ( ̄ー ̄ )

デザインのコツは、あらゆる案内リンクをバナー風のデザインにするのは避けること。広告風デザインはバランスや目的からみて、重要なものに絞りましょう。

広告化させないものの例としては、一般的には、定番的なメニューで案内するような基本のナビゲーションなどです。

04.メニュー数は少なめに

人は選択肢が多すぎると、決断できないという心理があります。
また、一度に記憶できる「情報のかたまり」にも上限があり、だいたい3〜7個と言われています。

2つの心理学的な理由から、ナビゲーションのどれもクリックせず、次のページまで見ない可能性が高いわけです。
このため、メインナビゲーションは情報整理して、主要なものに制限しましょう。

05.文字を読みやすく

小さすぎ・薄すぎなど、字が読めない「無駄におしゃれ風」ホームページになっていませんか?
薄ーいグレーの文字、ミニサイズのフォント、流れる文字・チカチカする効果・・・とか。(懐かしいwww…と感じる世代です・汗)
それだめ!デザインです。すぐ、お客様の目に優しく、読みやすいテキスト表現に改善してください。

ホームページの本文で、読みやすいフォントサイズは、14~16ピクセル程度。フォントの種類や、背景と文字カラーのコントラストによっても変わります。さまざまなフォントサイズや種類、色を試して、最も読みやすいデザインを見つけましょう!

06. リンクとボタンをわかりやすく

本文テキストとは明らかに違った目立つリンク色にしたり、クリックできそうなボタンデザインを心がけましょう。
クリックできるかわかりにくいデザインは、それだけで損しています。そして、ちょっと考えて「押せそう」となるよりは、パッとわかるものであるほど面倒な印象を和らげられます。
さらに、マウスオーバーしたり、クリックすると見た目(色やライン)を変えることで「押した感」を出してください。

色覚系のアクセシビリティに問題ある方にも、助けになるでしょう。

07.文章に程よく余白を

行間や段落ごとの余白がちょうどよく取られていれば、読みやすさが確保されます。

文章のブロックごとに空間があると、「ここからここまでが1テーマ」とまとまりができ、情報が入ってきやすいですし、 行間が適度にあると、じーっと目を皿にして読まなくても大丈夫なので、「読んでみよう」と思ってもらえる一要素に。

08.ユーザビリティ改善を阻むもの

「明日から活かせそう!」という人も、「使いやすく変えられるか、よくわからない」人もいらっしゃるかもしれません。

あるいは、「このホームページでは注文こない、とは感じているんです。でも、社長や上司も見た目を中心に指摘するし…」
などその重要性を訴えたり、ご自身での改善が難しいこともありますよね。

でも、「使いやすさは、逃げられない・効果的なホームページを支える」もの、と少しでもご理解いただけましたら、とても嬉しいです。
当制作でももちろん配慮しています。(「使いやすい」視点だけじゃないですが)

ユーザビリティをしっかり考えられるweb業者なら、目的・ニーズに沿って制作します。
気分や好みだけでは作りません。だからデザインや見やすさの話は、なるべく制作会社やプロデザイナーを信頼していただきましたら幸いです。

心理学や統計、イメージなどの視点から、わかりづらいと判断したご要望につきましてはご相談させていただきますが、弊社ではエンドユーザーのよき理解者という意味で、まずはお客様の視点もお聞かせください。
基本的には「画面を覗くリアルなお客様候補」の方々を重視いたします。

■ まとめ

  • 「おしゃれなホームページ」もまずは見やすいことから
  • 瞬時に伝わるファーストビューに
  • 定番に従おう
  • 嫌われるから、広告の量は控えめに
  • メニューは少なめに
  • 文字を読みやすく
  • リンクとボタンをわかりやすく
  • 程よく余白を
  • ユーザビリティ、まずは重要性を理解しよう

April Design(エイプリルデザイン)/ビジネスに春を呼ぶWebカウンセラー

  • Web/デザイン制作からHP運用まで支援OK。
  • ネットショップ担当▶︎Web制作会社▶︎独立。
  • 通販/スポーツ💃/飲食など、ココロ・カラダが喜ぶサービス応援。
  • 「ちょうどいい」ご提案と魅力伝わるブランド作り。
  • ブログ(ライティング/SEO)/分析周りが比較的得意。
  • 関西以外でも一度ご相談を。

一人で悩んでいませんか?
まずはお気軽にご相談ください👩‍⚕️
現状の集客やHP状況を診断してから…という方のメニューもございます。

現状ご相談

通販サイトのUI(部分デザイン)等はこちらへ

シェア▼
^