良質なWebページの作り方

公開日:
更新日:
0Webデザイン

良質なWebページを作ろう

何かについて "良質なWebページ" を作成するとき、ユーザに対して有益な情報を提供できるかが重要になります。有益な情報とは、情報の量、質、信頼性、理解しやすさなどの多角的な視点から評価されます。有益な情報以外にも、情報の探しやすさ、誤字・脱字の有無、HTMLの文法エラーの有無、ページの表示速度なども良質なWebページの条件になります。


本来、インターネットは自由な空間です。特に個人Webサイトではコンテンツに何の制約も受けないため、普段の何気ない日常の日記や、何かの備忘録のためのメモや、好きな写真などを自由に掲載することができます。しかし、情報を誰かに発信するという意味では、それらのコンテンツに興味を持つユーザは少ないため、意味を成しません。また、主な流入元の検索エンジンも良質なWebページをユーザに提供しようと工夫しているため、退屈なページには誰もやってこないでしょう。


せっかく作ったWebページは、なるべく多くの人に見てもらいたいと思うはずです。一般的に流入を増やす手法としては SEO(Search Engine Optimization:検索エンジン最適化)や、SEM(Search Engine Marketing:検索エンジンマーケティング)などがありますが、流入を増やす一番大切なことは良質なWebページを作ることです。 SEO や SEM も軽視すべきではありませんが、良質なWebページを作ることが流入を増やす最適な方法と言えます。

Google が定義する良質なWebページ

Google はユーザに良質なWebページを提供するため、総合的に評価の高いページを検索結果の上位に表示するようにアルゴリズムを組んでいます。アルゴリズム自体は公開されていませんが、Google が考える品質評価指標が良質なWebページを作る上でのヒントになります。以下の25の質問が Google の考える品質評価指標になります。


  • あなたはこの記事に書かれている情報を信頼するか?
  • この記事は専門家またはトピックについて熟知している人物が書いたものか?
    それとも素人によるものか?
  • サイト内に同一または類似のトピックについて、キーワードがわずかに異なるだけの類似の記事や完全に重複する記事が存在しないか?
  • あなたはこのサイトにクレジットカード情報を安心して提供できるか?
  • この記事にスペルミス、文法ミス、事実に関する誤りはないか?
  • このサイトで取り扱われているトピックは、ユーザーの興味に基いて選択されたものか?
    それとも検索エンジンのランキング上位表示を目的として選択されたものか?
  • この記事は独自のコンテンツや情報、レポート、研究、分析などを提供しているか?
  • 同じ検索結果で表示される他のページと比較して、はっきりした価値を持っているか?
  • コンテンツはきちんと品質管理されているか?
  • この記事は物事の両面をとらえているか?
  • このサイトは、そのトピックに関して第一人者(オーソリティ)として認識されているか?
  • 次のような理由で個々のページやサイトに対してしっかりと手がかけられていない状態ではないか?
  • コンテンツが外注などにより量産されている
  • 多くのサイトにコンテンツが分散されている
  • 記事はしっかりと編集されているか?
    それとも急いで雑に作成されたものではないか?
  • 健康についての検索に関し、あなたはこのサイトの情報を信頼できるか?
  • サイトの名前を聞いたときに、信頼できるソースだと認識できるか?
  • 記事が取り上げているトピックについて、しっかりと全体像がわかる説明がなされているか?
  • 記事が、あたりまえのことだけでなく、洞察に富んだ分析や興味深い情報を含んでいるか?
  • ブックマークしたり、友人と共有したり、友人にすすめたくなるようなページか?
  • 記事のメインコンテンツを邪魔するほど、過剰な量の広告がないか?
  • 記事が雑誌、百科事典、書籍で読めるようなクオリティか?
  • 記事が短い、内容が薄い、または役立つ具体的な内容がない、といったものではないか?
  • ページの細部まで十分な配慮と注意が払われているか?
  • このサイトのページを見たユーザーが不満を言うか?
Google ウェブマスター向け公式ブログ - 良質なサイトを作るためのアドバイス

Google ウェブマスター向け公式ブログ - 良質なサイトをより高く評価するために

すべての質問を満たすページを作ることは難しく、一部の質問はどのようにスコアリングをしているのか見当すらつきませんが、Google はユーザに対して良質なWebページを提供しようと、どれだけ苦心しているのかが分かります。

良質なWebページとSEO対策

良質なWebページにSEO対策は必要かと言えば、ある程度は必要であると考えます。なぜなら、良質なWebページかどうかを評価するのはユーザであり、ユーザに見てもらうためには検索エンジンに評価される必要があるためです。


しかし、SEO対策はある程度までは必要ですが、過剰な対策は不要です。例えば、ページの流入を増やすテクニックとして、タイトルに "今更聞けないXXX" や "たった1ヶ月でXXXできる" や "みんなやってるXXXの10の方法" など、ユーザを扇動するような文章は好きになれません。その他にも、タイトルが目をひくようにインパクトを重視したり、説得力を上げるために数字を入れたり、検索結果画面のタイトルが見切れないように30文字以内でおさめたりするテクニックも無用です。


逆に、ある程度必要と思われるSEO対策は、タイトルと記事の整合性や、適切にタグを使い分けることや、ページの高速化や、セマンティックな構造にすることなどです。その他にも、記事に誤字・脱字がある場合は修正したり、記事の情報が古い場合や不足している場合に編集を加えるなど、コンテンツ内容の適正化が必要であると考えます。ユーザを最優先に考えた "ユーザファースト" なSEO対策は以下になります。


  情報が有益であり、全体を網羅している
  他のサイトと比較して、希少性が高く役に立つ
  情報の出処が明確であり、高い信頼性がある
  優れたデザインであり、細部にわたり高品質である

逆に、コンテンツの品質が低下したり、ユーザからの信用を失うポイントは以下になります。


  無効なリンクや、コンテンツと関連が薄いリンクがある
  誤字・脱字が多い読みにくい文章や、間違った情報がある
  広告の量が多すぎる
  コメントやフォーラムなどにスパム投稿がある

Webユーザビリティ

ユーザビリティは、日本語訳で "使いやすさ" を意味しますが、厳密な定義はありません。なぜなら、ユーザビリティはユーザの趣味・嗜好、熟練度、利用状況によって使いやすさが変化するためです。ユーザビリティに厳密な定義はありませんが、ヤコブ・ニールセン※1のユーザビリティ定義が有名です。


ヤコブ・ニールセン博士は、システムがユーザ、クライアント、管理者すべての要求を満たしているかが最上位の概念とするならば、その下位概念としてユーザビリティが存在すると述べています。博士の定義するユーザビリティは以下のとおりです。


  • 学習しやすさ:すぐに作業が始められ、簡単に学習できるようにする。
  • 効率性:一度学習すれば、高い生産性を上げられるようにする。
  • 記憶しやすさ:簡単に記憶でき、覚えやすくする。
  • エラー発生率:エラー発生率を低く抑え、エラー発生時には簡単に復旧できるようにする。
  • 主観的満足度:ユーザが満足できるよう、楽しく利用できるようにする。

学習しやすさ

Webデザインには暗黙的なルールがあります。多くのWebサイトは暗黙的なルールを守って作られているため、ユーザは知らず知らずのうちに暗黙的なルールを学習し、初めて訪れたWebサイトでもある程度迷わずに進めます。暗黙的なルールとは、リンクの色が青色だったり、ロゴをクリックするとトップページに戻れたり、フッターには Copyright が書かれているなどです。


暗黙的なルールを守っていないWebサイト(特に Flash サイトや、デザイナーのサイト)は独自のデザインを取り入れており、ユーザを混乱させます。そのため、暗黙的なルールを学習したユーザは多くのWebサイトと同じデザインである方が使いやすいと感じます。

効率性

多くのオンラインサービスでは、ユーザに何かしらの入力を求めます。会員登録をしてもらうためにユーザの個人情報の入力や、インターネットバンキングで送金するための金額や取引パスワードなどです。これらの操作では効率性が求められ、効率性が悪いとユーザは使いにくいと感じます。


効率性が悪い例としては、不必要に多い入力項目、入力例が分からない項目、半角・全角などの入力文字種の強制など様々です。入力フォームは、入力フォーム最適化(EFO:Entry Form Optimization)を行い、ユーザの入力ストレスを少しでも減らす努力が必要です。


Google のアカウント作成の入力フォームでは、ユーザに余計なストレスを与えないように入力フォーム最適化が施されており、ユーザビリティが高い好例と言えます。


Googleのアカウント作成
Googleのアカウント作成


Google アカウントの作成

記憶しやすさ

毎日閲覧するWebサイトと異なり、不定期に閲覧するWebサイトは記憶しやすいサイトである必要があります。記憶しやすいサイトとは、デザインが統一されており、シンプルで、ユーザが考えたり、情報を探したりしなくても利用できるサイトを指します。例えば、全日空のWebサイトでは、不定期に利用するユーザにもすぐに分かるように、トップページに利用頻度の高い国内線の入力フォームが用意されています。ユーザは、全日空のWebサイトに航空券の予約を期待して訪れる割合が高いため、ユーザビリティ的に正しいデザインと言えます。


ANAのWebサイト
ANAのWebサイト


航空券 予約・空席照会・運賃案内・国内線|ANA

記憶しやすさは学習しやすさと相関があり、学習しやすさが高ければ自然と記憶しやすさも高まります。全日空の例では、全体を青色でまとめており、ユーザが選択できるボタンは青色と相性の良い白色でまとめています。しかし、重要なボタンだけは青色と補色関係にあるオレンジ色としており、重要性を強調しています。これらのデザインは、直感的に理解しやすいため、学習しやすく、また記憶しやすいと言えます。

エラー発生率

大前提として、致命的なエラーは発生しないように十分な動作確認テストを行わなければなりません。多角的な動作確認テストを行うことにより、致命的なエラーの発生率は低く抑えることができます。しかし、致命的なエラーの発生率を抑えても、ユーザの誤操作や入力誤りによる小さなエラーは必ず発生します。


エラー発生時には、ユーザに "何が誤っているか""何が正しいのか" の2種類の情報を通知する必要があります。ユーザは "何が誤っているか" の情報から、原因を知ることができます。そして "何が正しいのか" の情報でエラーに対するリカバリを試みることができます。一般的なエラーメッセージも "XXXが誤っています。XXXをして下さい。" と2種類の情報が通知されるはずです。


致命的なエラーが発生した場合でも、ユーザに通知する情報は同じです。重要なポイントは、ユーザにエラー原因と(可能な場合は)リカバリの方法を通知することです。


致命的なエラーが発生した場合のメッセージ
致命的なエラーが発生した場合のメッセージ

主観的満足度

主観的満足度とは、そのWebサイトを利用して楽しかったか、満足できたかということです。主観的満足度を満たす条件はユーザによって異なりますが、ユーザの求める情報が探しやすいか、分かりやすく書かれているか、美しく使いやすいUI/UXを提供しているかなどがあります。


Google では良質なWebページをユーザに提供することを目標としています。それは検索エンジンとして、主観的満足度の高いページをユーザに提供できるかということになります。そのため Google の良質なサイトを作るためのアドバイスが主観的満足度を満たす一種の指標になります。


Google ウェブマスター向け公式ブログ - 良質なサイトを作るためのアドバイス

ただし Google の良質なサイトの定義は、テキストベースとなっています。主観的満足度を満たすWebサイトは、良質なテキストと、良質なデザインが複合したユーザーファーストなWebサイトだと考えます。

コンテンツデザイン



結局、ユーザはコンテンツ目当てでウェブサイトに足を運ぶものだ。
コンテンツ以外の要素は単なる背景にすぎない。
デザインはコンテンツにアクセスできるようにするためにあるのだ。
劇場に足を運ぶ人のことを考えてみればいい。
劇場を後にした彼らと話をするとしたら
「この劇は面白かったかい?」とは聞きたいだろうが
「衣装はすばらしかったかい?」なんて話にはならないだろう。

コンテンツデザイン
(参考:ヤコブ・ニールセン(著)「Designing Web Usability」P87)


デザインはコンテンツを表現するための重要な要素です。殺風景なテキストが並ぶモノトーンなページより、洗練されたデザインである方がユーザに与える印象はまるで違うものになります。しかし、ユーザは洗練されたデザインを見にページを訪れているわけではありません。ユーザは何かしらの情報を求めてページに訪れるため、デザインよりもコンテンツが重視されます。例え、デザインがコンテンツより何倍の時間がかかっていても。

読みやすい文章

  1. 1つの段落には1つのトピック
    1つの段落に複数のトピックを詰め込むと要点が何なのか分からなくなります。
  2. 段落の最初に要点を書く
    段落の最初に、その段落で伝えたい要点を書きます。ユーザは段落の最初の文から、その段落を読むか、飛ばすかを選択できるため、ナナメ読みをすることができます。
  3. 簡潔に書く
    長い文章は何を伝えたいのかユーザを混乱させる可能性があります。長くなる場合は、段落を分けてトピック毎に説明します。
  4. 肯定文を使う
    肯定文と否定文では、肯定文の方が分かりやすく伝わります。
  5. 分かりやすく書く
    ユーザの目線に合わせて専門用語や難しい言葉はなるべく避けて書きましょう。しかし、難しいことを難しく書くことは容易ですが、難しいことを簡潔に書くことは非常に困難です。
  6. 受身の表現を避ける
    主語のない文章は、述語の主体が不明確になります。"~れる"、"~られる" などの受身の表現は説得力に欠けるため避けた方が無難です。
  7. 可読性を上げる
    背景色と文字色のコントラスト比が高くなるように設定します。コントラスト比が低い場合、ユーザの可読性を著しく損ねることになります。また、フォントも読みやすいユニバーサルフォントなどを考慮しましょう。
  8. ユーザの気を散らさない
    無限ループするアニメーション画像や、気が散る主張の激しい広告などは、取り除くことを検討して下さい。ユーザがテキストを読むことに集中できる環境を提供することも大切なことです。

ファクト・メリット・ベネフィット

ユーザには "ファクト(fact:事実)"、"メリット(melit:利点)"、"ベネフィット(benefit:利益)" を伝えることで読む価値のある文章になる可能性があります。3つの違いをノートパソコンに例えて説明します。


ファクトは、そのまま事実を表します。ノートパソコンに内蔵されているCPU、メモリ、HDDなどのスペック情報がファクトに該当します。


メリットは、商品の直接的な価値を表します。インターネットができる、ゲームができる、オフィス製品で事務作業ができるなどが該当します。


ベネフィットは、商品を利用することで得られる価値を表します。インターネットを通じて友達ができる、アフェリエイトを利用してお金が得られるなどが該当します。


ノートパソコンの購入を考えているユーザに、ファクトをどれだけ説明しても購入の後押しにはなりません。ノートパソコンを購入することで得られるメリット、ベネフィットを説明することで、ユーザはノートパソコンに価値を見出すことができます。

HTML の文法をチェックする

本Webサイトのコードは、すべてエディタで作っていますが、たまにタグの閉じ忘れや、文法エラーがあります。ブラウザで表示しても多少の文法エラーは補完してくれるため、ブラウザからではエラーの検知ができません。そのため、HTML の文法をチェックするには Markup Validation Service というオンラインのサービスを使うと便利です。チェックしたいページのURLを入力し、checkボタンをクリックすると結果が表示されます。


The W3C Markup Validation Service

Markup Validation Service
Markup Validation Service


テストに合格すると、Result に "Passed" と表示されます。テストに不合格の場合、Result に "Errors" と表示されます。また、下記の例では警告(warning)が1つ残っていますが、開発段階のHTML5でチェックしているため1つの警告は必ず出るようです。


Markup Validation Service
Markup Validation Service


Markup Validation Service のページは英語ですが、エラーのあるおおよその場所を教えてくれるため英語を読み解く必要はありません。また、ページをすべて作り終えてからチェックを行うと大量のエラーや警告がでる場合があるため、慣れるまではチェックしながら作るとよいでしょう。

Webページの速度をチェックする

良質なWebページの条件にページの表示速度があります。どれほど有益な情報が掲載されていても、ページの表示に時間がかかるとユーザは離脱してしまいます。影響の程度は不明ですが、Google でもページの表示速度が検索順位を決める要因の1つに採用したことを公式ブログで明らかにしています。


Google ウェブマスター向け公式ブログ - Using site speed in web search ranking

ページの速度を測定するには、Google が提供している PageSpeed Insights や、広く利用されている GTmetrix があります。多くの評価項目は共通しており、どちらかの測定サイトのスコアが改善すれば、もう一方の測定サイトのスコアも改善します。


PageSpeed Insights

PageSpeed Insights
PageSpeed Insights


PageSpeed Insights
PageSpeed Insights


GTmetrix

GTmetrix
GTmetrix


GTmetrix
GTmetrix


100%のスコアを獲得するのは困難ですが、なるべくページの表示速度が高速になるようにチューニングを行いましょう。表示速度のチューニング方法については長くなるため本ページでは扱いません。

SNSで更新情報を発信する

良質なWebページを広く発信するためには、SNSを利用する方法が有効です。SNSで更新情報を発信すると流入が増える要因となり、シェアされることでより広く拡散されます。また、SNSからのリンクを多く集めるページは良質なWebページである可能性が高いため、検索結果の順位も高くなります。ただし、ページ自体が誰かに広めたいと思わせるような良質なWebページであることが大前提です。

まとめ

流入を増やすために スパムやボットを駆使して検索順位を操作することは無意味を通り越してマイナスに働きペナルティを受ける可能性があります。ユーザに感謝されるコンテンツを提供し、有益な情報を分かりやすくまとめ、良質なWebページを作り続けることに集中すれば、必ず成果が上がると信じています。