奈良 Web制作/集客 エイプリルデザイン April Design

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

見やすいホームページ?いやいや…デザインのオシャレなWeb制作会社なら、どこも一緒だよね?」

いまのWebサイト、見た目に満足しきっていたり、少しは気になることすら放置していませんか?

“うわべデザイン”だけでホームページの成果は上がりません・・・・・・!

使いやすさ(ユーザビリティ)・わかりやすさ」もアップさせ、価値あるサイトにしてみませんか?

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

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

だと「ホームページに集客できているのに、売れない…」てことになりやすく、かなり損してしまいます。

今回は、見やすくする方法がわからない、ユーザビリティ初心者向けの改善ポイントを「面白く」ご理解いただけるようにまとめました。

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

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

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

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

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

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

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

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

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

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

ホームページ制作会社も中には「デザインの意味」を曖昧にしている業者もあります。

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

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

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

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

00.「使いやすいホームページ」とは

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

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

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

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

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

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

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

【閲覧注意】見にくいサイトの例

古のネットユーザー様にはおなじみの、代表的な見にくいホームページたちがいくつかあります。

  • ナイトウ薬局:「かの病院」のような、忌まわしき、点滅とギラギラみ溢れるレトロなサイトデザインw
  • 愛の妖精ぷりんてぃん:何のホームページかすら、一切の説明を拒否する「プリティ?」なHP。

刺激的なサイトはまだまだたくさんある。いくつかピックアップしたので、ご覧いただきたい。

あの「愛生会病院」サイトが閉鎖するらしいので、他のすごいサイトも集めてみた

「弊社サイトは、こんな酷くないです。もっとシュッとしてるから大丈夫では?」

なんて思われたかもしれませんが、キレイなだけでは「本当の使いにくさ、お客様の不満」がないかまでは、わかりません。

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カウンセラー

Web運営サポート(ブログ/SEO対策/マーケティング/ライティング)対応のホームページ制作とブランディング。
お気軽にご相談ください。名刺、集客診断だけでも。

  • ネットショップ担当と制作会社を経験。カート選定からもご提案可。
  • 元ダンス部₍ (ง ˙ω˙)ว ⁾⁾

SNSをフォロー ▼

診断/ご相談

^