集客したいネットショップ/ホームページ制作 奈良 大和高田 April Design

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

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

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

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

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

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

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

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

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

□「おしゃれなホームページにしたい」で作ってしまったために事件は起こった

ホームページリニューアルしたのに、まだお客様から「見方がわからない」と言われる!

  • 最初のページにたどり着いたが、バナーだらけで疲れた
  • レイアウトが難解で、探したい〇〇はどこ?
  • イメージ写真を見て、「これは違うな」と思いました

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

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

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

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

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

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

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

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

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

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

00.「使いやすさ」の基礎 - ユーザビリティとは

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

まずユーザビリティとは何ぞや?をさらっとご紹介。
一言で言えば、ホームページを見やすくすること、ですが・・・

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業者なら、目的・ニーズに沿った制作をしています。
気分や好みだけでは作りません。だからデザインや見やすさの話は、なるべく制作会社やプロwebデザイナーを信頼いただきましたら幸いです(^_^;)

■ まとめ

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

「効く」ホームページ制作 奈良 April Design

  • ユーザー層・目的確認、提案で、貴社ホームページの成長を促進します。ネットショップ運営経験から、集客販促に強いWebデザイナーです。
  • 完全オリジナルデザイン。魅力を届ける、伝わるHPを丁寧に制作。
  • 完成後も安心。アクセス解析/SEOなど更新サポートもお任せください!競合や時勢を意識し、責任をもってサイト改善/運営していきます。

ホームページ新規制作・リニューアルしたい、Webを活用できず悩んでいる方。 まずはお気軽にApril Designまでご相談ください!(大阪、その他地域も歓迎)

制作のお問合せ

よろしければシェアお願いします。
^