デザインの良いWebサイトとは、一体どんなものでしょう？
多くの人はどこかのWebサイトをのぞいた時、直感的に「ここのサイトはデザインがいい（or 悪い）…」と判断しているはずですが、デザインの良し悪しをどこで判断しているのか意外とわかっていないものです。
Webデザイナーの視点でみれば、このWebサイトは…
など、いくつかのチェック項目があります。しかし一般の人は、そんなことをいちいち考えているわけではありません。ほとんどの場合は、「何となく見やすいな…」とか、「この色好きだなぁ…」といった感じのはずです。
ここにWebデザイナーと一般人の意見の乖離があります。デザイナーが専門知識をフルに活用して完璧なWebサイトを作成したとしても、お客さんから見たらそれが気に入らないということは、十分に起こりうることなのです。
では、Webサイトをお客さんに気に入ってもらえるために、僕たちは何をすれば良いでしょう？それでは、それぞれの改善案について順に見ていきましょう…
目次
家づくりに例えてみましょう。明るく見えて訪問者に好印象を与える家の外装や、畳や木材をうまく使った純和風の落ち着ける部屋…目に見える装飾の部分は人それぞれ好みがあります。自分ではどんなに気に入っていても、お客さんと趣味が合わなければ気に入ってもらえません。そこは僕たちでコントロールできないところであり、労力をかけるには無駄が多く出そうな部分です。
でも、いくら見た目に美しくても実際の住みやすさとは別の話。段差が多すぎて足をつかえそうとか、廊下が狭くてものを運びづらいとか…いくら見た目で気に入っていても、こんな欠点だらけの家ならきっとあなたも住みたくないと思うはずです。
反面、外見的に惹きつけられるものがなくても、ゆったりとスペースがとられていて、どの部屋にもスムーズに行くことができて、それぞれの部屋がしっかりと役割を果たしている…そんな家なら、多くの人が快適に過ごせるのではないでしょうか。
Webサイト作成もこれと同じです。訪ねてきてくれたお客さんがサイト内を快適に移動できるように交通整理をして、迷子にならないようにシンプルな構造にして、誤解を起こさないようにわかりやすいWebコピーライティングを行う…こうしたWebサイトの“内部デザイン”を整える方が、外見を調整するよりはるかに多くのお客さんに喜んでもらえます。一方Googleもこうした内部環境の調整を積極的に評価しているので、内部デザインを調整することで自然とSEO対策も行なっていることになります。
それでは、お客さんにとって使いやすいWebサイトを作るためのチェックポイントを挙げていきましょう…
お客さんが詳しい情報を求めて別の場所へ行こうとしているとき、どこをクリックすればいいのか直感的にわかるようになっていますか？次の行き先がわからないというのが、お客さんをライバル他社へ逃がしてしまう大きな原因の1つとして挙げられます。
最低限、アンカーテキスト（リンクを貼る文章）や購入ボタンの色を周りと違う色にして目立たせる配慮は必要です。加えてリンク先の情報と矛盾しないよう、読み手に誤解を生まないような文面になっているか、アンカーテキストも一度見直してみましょう。
コンテンツが増えれば増えるほどWebサイトは巨大化し、めったに訪れないお客さんにとっては迷子になりやすくなっていきます。もしお客さんが自力で戻ってこれなければ一旦ブラウザを閉じてしまったりしますが、その時点でよほど欲しい商品でない限り、お客さんの方から同じページへ戻る努力はされません。
このような不便をお客さんに与えないためにも、ページのわかりやすいところにナビゲーションを置き、そこからサイト内のあらゆるページに簡単に行けるように交通経路を調整しましょう。そのナビゲーションは、特別な事情がない限り場所を変えたり、取り除いたりしてはいけません。「自分がどのページにいても（同じ場所にある）ナビゲーションから行きたいところに行ける」という安心感を与えることで、お互い顔が見えない位置にいてもお客さんからの信頼を得ることができます。
いくら優れたコンテンツを持っていたとしても、お客さんに読んでもらえなければ宝の持ち腐れです。インターネット上の文章は紙の文章より目や脳に負担をかけることがわかっていて、文章の読みやすさについては印刷物よりも細心の注意を払わなければなりません。
論より証拠、具体例をお示しします。下の2つのサンプル、記事の内容は全く同じです。違うのはフォントのサイズだけ。でも読みやすさは全然違いますよね。
例1: フォント 10pxのブログ
例2: フォント 16pxのブログ
Webサイトに載せる文章のフォントについては、いくつか推奨される種類が提案されています。日本語フォントでは、インターネット上でよく使われているものの1つにメイリオがあります。望ましいフォントサイズや行間スペースについては、Googleが明確に基準を出しています。基本的にこれらを守っていれば大きな問題はありませんが、もしあなたのビジネスのターゲットが高齢者だったりするならば、少し大きめのフォントサイズにして行間スペースも若干広めにとるなど、メインターゲットに配慮した設定にしておく方が好まれます。
商品やサービスの購入決定には、ほとんどの場合その時のお客さんの感情が大きく影響を与えます。なので、Webサイトのデザインを考える上でお客さんの感情を無視するわけにはいきません。
Webサイトを作る上でまず念頭においてほしいことは、お客さんのポジティブな感情を刺激することです。あなたのWebサイトを見れば、きっと何かいいことがある…良い情報が得られたり、楽しいコンテンツで息抜きができたり、そんな雰囲気をWebサイト全体で演出していく必要があります。ネットサーフィンをしていて嫌な気分になりたい人など、きっと誰もいませんよね。不愉快な印象を与えるWebサイトを作ってしまったら、それこそお客さんが寄り付かなくなってしまいます。
ではあなたのWebサイトで、お客さんのポジティブな感情をどのように刺激すれば良いでしょうか？いくつか例を挙げていきますので、取り入れられるところがあればどんどん試してみてください。
Webサイトのメインの色を他の色に替えるだけで、お客さんの受け取る印象はガラッと変わります。Webサイトの配色については詳しくリンク先に記載していますので、こちらをご参照ください。
例えばAppleのWebサイトを覗いてみてください。ページを開いた瞬間、大画面で新商品の画像が出てきますよね。Appleの商品はどれもスタイリッシュで、持っている人にモダンなイメージを与えます。その画像を見たお客さんが、自分がその商品を持っているイメージを思い浮かべることにより、「欲しい」という欲求が刺激されるのです。
この戦略は、必ずしもデザインに優れた商品でなければダメというわけではありません。例えば、ビフォーアフターの比較写真を乗せて魅力的な効果をアピールしたり、無料レポートダウンロードでお客さんの興味を引きつけたり、あなたの顔出しをして信頼性をアピールしたり…ネットサーフィンでいろいろネタは手に入るので、あなたのビジネスで取り入れられるものを探してみるといいでしょう。
お客さんがURLを間違ってタイプしてしまうと、そのページが存在していないことを示す404エラーページが現れます。こういった悪意のないトラブルが起こることはどうしても避けられませんが、事務的に冷たく対処するのではなく、何か気の利いたコメントを入れてお客さんの心を和ませることができれば、それはきっと商品やサービスの購入にもプラスに働きますよね。
ブランドイメージが許す限り、ちょっとしたジョークを入れるのもおススメです。404ページまで注意してWebサイトを作っている人はなかなかいないので、あなたがちょっと手を加えるだけで簡単に競合他社を出し抜くことができます。
最近スマホでのページ閲覧が増えてきたこともあり、Webサイトのデザインも縦長のものが主流になってきました。よくあるデザインとして、ファーストビューにアイキャッチ画像を表示してお客さんの注意を引きつけ、その下に本文を書いていく形式。ちょっと注意して見れば、Yahoo!のニュース記事などメジャーなページも同じ構造をとっているのに気づきます。
これまでは見た目にやさしく、お客さんに興味を持ってもらえるような対策をご紹介してきましたが、ここからは本文を読んでもらうための工夫です。いくら目にやさしく好印象を与えるWebサイトでも、肝心のコンテンツを読んでもらえなければ売り上げにはつながりません。お客さんに最後まで話を聞いてもらえるように、何か工夫できることはないでしょうか？
単調な長い文章は嫌われます。一目見て「いったいどこまで続くんだろう…」とお客さんに思わせると、もうコンテンツを読んでくれなくなってしまいます。
そんな印象を与えないために、見出しを上手に挿入して長文を短いパラグラフに区切っていくのが効果的です。こうすると見た目に読みやすさをアピールするだけでなく、どの部分にどんな情報が書いてあるのかがわかりやすくなり、お客さんにとってより必要な情報にアクセスしやすくなるというメリットも生じます。
また、文章の流れを邪魔しないなら、文章にブレット
やナンバリング
を挿入して段落に変化をつけることで、パッと見でさらに魅力的な構成になります。
文章が長くなればなるほど、読む方は疲れます。お客さんが疲れた状態で記事を読んでいて、些細なきっかけで続きを読むのをやめて別のページへ行ってしまうことはよくあります。そのきっかけとしてよくあるのが、文章のつながりに違和感を感じること。つまり論理性に欠ける文章です。意味のない情報が続いたり、話が急に関係のない方向に飛んでしまったりすると、お客さんはあなたの文章に説得力を感じずに「もう読んでも無駄」と思ってしまうのです。
これは前後の文章だけでなく、前後のパラグラフ、見出しなど文章全体の構成にも当てはまります。実際長文のコピーになるほど、お客さんも全文を読まずにスキャンしながら大まかな流れをつかもうとします。そんなときでも見出しだけはお客さんの目に入るので、見出しの流れに論理性を持たせてコピーを書ければ、お客さんが全文を読まなくても商品やサービスの購入へのハードルを大きく下げられます。
すべての文章には終わりがあります。お客さんがコピーを読み終えた後、あなたはどうして欲しいですか？お客さんも同じく「次にどうしたらいいか？」を考えています。あなたの商品がいらなければ別のページに行きますし、欲しいと思えばどうしたら手に入るのか知りたくなります。
せっかく「欲しい」と思ってくれたお客さんを路頭に迷わせることはありません。お客さんが次に進むための道筋をはっきり示してあげましょう。購入ボタンを大きく、文章や他のパーツから十分なスペースを空け、目立つ色で嫌でも目に入るように目立たせます。購入ボタンをあからさまにすると卑しい印象を与えるかも？そんなことはありません。あなたの商品を欲しいと思っている人にとっては、どこにいけば手に入るかをきちんと示してもらう方がずっと親切に感じられるのです。
それでは今回の記事のまとめです。
関連記事：
404エラーと410エラーの使い分けに関するGoogleの最新回答
レスポンシブ対応Webサイトがもはや常識になった理由を3つ言えますか？
使ってから後悔しないために…WordPressテーマを選ぶ7つの基準
AWAI認定コピーライター
SEO contents institute認定コピーライター
何事も“超一流の専門家から学ぶ”をポリシーとしており、コピーライティング業界で世界最高の権威である全米コピーライター協会(AWAI)でライティングの基礎を習得後、SEOコピーライティングのパイオニアHeather-Lloyd Martin、コンテンツマーケティングの世界的第一人者Brian ClarkにWebコピーライティングを学ぶ。
さらにAWAIでビジネス用Webサイト作成スキルを習得、知識ゼロの状態から自社サイトSuper Clear Contentsを立ち上げる。その経験とインターネット業界の動向をふまえて、個人事業主や副業サラリーマンに向けて最新のビジネス用Webサイト構築方法を提供している。
