初めてでも安心！使いやすいウェブサイトは80%の「お決まり」で出来ている

「新しくウェブサイトを作りたいけど、他のサイトと似ていたらダメなのかな…」「個性的なデザインと、使いやすいデザイン、どっちがいいんだろう？」

実は、ウェブサイトは他のサイトと80%程度似ている方が、使いやすくて良いんです！

多くの人は、普段からよく見るウェブサイトのデザインに慣れています。だから、それと同じようなデザインにすることで、初めて訪れた人でも、どこに何があるのか分かりやすく、スムーズに情報を探せるんです。

この記事では、

どうして他のサイトと似ていることが大切なの？
使いやすさとオリジナリティ、どうやってバランスを取ればいいの？
初心者でもできる、効果的なデザインの選び方って？

といった疑問について、優しくお答えします。

ウェブサイトのデザインで迷っているあなたも、この記事を読めば、きっと解決のヒントが見つかりますよ！

ウェブサイトは80%「似ている」方が良い理由

ウェブサイトを他のサイトと80%程度似せることは、使いやすさと「検索エンジン対策(SEO対策)」の両方に大きなメリットがあります。

「検索エンジン対策(SEO対策)」とは、Googleなどの検索エンジンで上位に表示されるために行う工夫のことです。

多くの人が使い慣れているデザインや構成で作られたサイトは、それだけで使いやすく、結果としてGoogleからも評価されやすくなるのです。

例えば、地域の八百屋さんがウェブサイトを作る場合を考えてみましょう。多くの人がよく使うAmazonのような大きな通販サイトや、食べログのようなグルメサイトのメニュー構成を参考にすれば、初めてサイトを訪れた人でも「どこに何が書いてあるか」が直感的に分かり、欲しい情報にすぐにたどり着けます。

似ていることで、検索エンジンにも好かれる！

ウェブサイトを他のサイトと80%程度似せることで、Googleなどの検索エンジンは「このサイトはこのジャンルでよくある、ちゃんとした作りのサイトだな」と判断しやすくなります。

Googleは、特定のジャンルでよく使われている構成や要素があるサイトを、「信頼できる、ちゃんとしたサイト」と評価する傾向があります。

例えば、あなたが地元の工務店のウェブサイトを作るとしたら、

会社概要
サービス内容
施工事例
お客様の声
お問い合わせ

といったページを作るのが一般的ですよね。多くの工務店サイトで共通して作られているこれらのページは、Googleからも「このサイトは工務店のサイトだな」と認識してもらいやすくなるのです。

さらに、ユーザーが使いやすいと感じるサイトは、

「サイトに訪れた人がすぐに他のサイトへ行ってしまう割合」が減る
「サイトに長く滞在してくれる時間」が増える

傾向にあります。そして、これらの「ユーザーの行動」は、Googleがサイトを評価する上でとても大切なポイントになります。

つまり、ユーザーにとって使いやすいサイトは、Googleにとっても良いサイトであり、検索結果で上位に表示されやすくなるのです。

初めての人でも安心！使いやすさと信頼感アップ

ウェブサイトのデザインや構成が他のサイトと似ていると、初めて訪れた人でも安心して使うことができます。

例えば、通販サイトなら、多くのサイトで「商品をカートに入れる」ボタンは、商品の近くに配置されています。これは、多くの人がその配置に慣れているからです。もし、あるサイトだけボタンの位置が全く違ったら、使いにくく感じますよね。

他にも、

「検索窓は、だいたいサイトの上の方にある」
「カートのアイコンは、右上に表示されていることが多い」

といった、多くのサイトに共通する「お決まり」のパターンがあります。これらのパターンに従うことで、ユーザーは「このサイト、使いやすいな」と感じてくれるのです。

ただし、ロゴやブランドカラーなど、あなたのビジネスを表現する大切な部分は、オリジナリティを出すことが大切です。このバランスをうまく取ることで、使いやすくて信頼感のあるウェブサイトを作ることができます。

「お決まり」の正体：デザインの4原則と視線の動き

「お決まり」に見えるウェブデザインは、実はデザイナーの怠慢ではなく、人間の認知の仕組みに基づいた理論から導き出されたものです。1994年に出版され今も版を重ねているロビン・ウィリアムズ著『ノンデザイナーズ・デザインブック』では、「近接」「整列」「反復」「対比」という4つの原則が、見やすいデザインの土台として紹介されています。

「近接」は、関連する情報同士を近づけ、関係のない情報とは間隔を空けるという考え方です。例えば商品名と価格を近くに配置し、隣の商品情報とはしっかり余白を空けることで、ユーザーは一目でどの情報がひとかたまりなのかを理解できます。「整列」は、要素を目に見えない線に沿って揃えることで、画面全体に統一感を出す原則です。「反復」は、同じ色・フォント・見出しの装飾をサイト全体で繰り返すことで、「これは見出しだ」「これはボタンだ」とユーザーに直感的に学習させる働きがあります。「対比」は、文字の大きさや色に強弱をつけることで、どこを一番に見てほしいかをはっきり伝える原則です。

また、ユーザーがページを開いたときの視線の動きにも一定のパターンがあります。写真中心で情報量が少ないページでは、視線は左上→右上→左下→右下と「Z」の字を描く「Z型」の動きになりやすく、テキスト量が多いブログ記事などでは、左端を縦に読みながら気になる見出しで横に視線を動かす「F型」の動きになりやすいことが知られています。ボタンやロゴを配置する位置を決めるときは、こうした視線の動きに逆らわないことが重要です。

他のサイトを参考にするとき、ここだけは注意！

他のサイトを参考にすることは、とても大切です。しかし、やりすぎると、逆にユーザーや検索エンジンからの評価を下げてしまう可能性があります。ここでは、特に注意すべきポイントを2つお伝えします。

著作権は絶対に守りましょう

他のウェブサイトを参考にするとき、最も注意しなければならないのは「著作権(ちょさくけん)」です。

「著作権」とは、文章、写真、イラスト、音楽などの作品を作った人に与えられる権利のことです。この権利があるため、他の人が勝手に作品を使ったり、コピーしたりすることはできません。

そのため、他のサイトの文章をそのままコピーしたり、勝手に画像を使ったりすると、著作権の侵害、つまり「ルール違反」になってしまいます。

レイアウトや色使いなど、一般的なデザインの「考え方」を参考にすることは問題ありません。しかし、ロゴやイラスト、そのサイト独自のデザインなどは、著作権で守られている可能性が高いので、そのまま使うのは絶対にやめましょう。

もし、どうしても他のサイトのデザインや構成を参考にしたい場合は、必ず専門家に相談することをおすすめします。

オリジナリティも忘れずに

使いやすさを重視して他のサイトと似せることは大切ですが、それだけでは、あなたのウェブサイトの魅力は十分に伝わりません。

80%は「使いやすさ」を意識して他のサイトと似せても、残りの20%は、あなたのビジネスの個性や魅力を表現する「オリジナリティ」を出すことが大切です。

例えば、

メニューの配置は他のサイトと同じでも、使っている写真はあなたのお店で撮影したオリジナルのものにする
サイトの構成は他のサイトを参考にしても、文章はあなた自身の言葉で、お客様への想いを込めて書く

など、ほんの少し工夫するだけで、サイトの印象は大きく変わります。

また、他のサイトにはない、あなた独自の情報を載せることも効果的です。例えば、

商品やサービスへのこだわり
お客様の声
スタッフの紹介

などを掲載することで、「このお店は信頼できそうだな」「このお店の人たち、なんだか親しみやすいな」と感じてもらうことができ、あなたのお店のファンを増やすことにもつながります。

なぜ「80%似せる」が正解なのか：ヤコブの法則という裏付け

「みんなと同じ＝没個性」だと感じる方もいるかもしれません。しかし、UXの専門家ヤコブ・ニールセン氏が2000年に提唱した「ヤコブの法則」は、この考え方に明確な根拠を与えています。ユーザーは自分の時間の大部分をあなたのサイト以外で過ごしているため、他のサイトと同じように動作することを無意識に期待している、という考え方です。

この法則を裏付ける実験として、ユーザビリティ専門機関のNielsen Norman Groupが行った調査があります。企業ロゴを画面の左上に置いた場合、トップページへ戻ることに失敗したユーザーはわずか4%でしたが、ロゴを画面中央に配置しただけで失敗率は24%まで跳ね上がりました。ロゴの位置という些細な違いだけで、迷うユーザーが6倍に増えたのです。奇抜な独自レイアウトは、ほとんどの場合「使いにくい」という結果しか生みません。

具体的にどうすればいい？ウェブサイトを「似せる」方法

では、具体的にどうやって他のサイトを参考に、自分のウェブサイトを作っていけばいいのでしょうか？ここでは、初心者の方でも簡単にできる方法を、ステップごとに解説します。

ステップ１：まずは、あなたのビジネスに近いサイトを探そう！

まずは、あなたのビジネスに近い、成功しているウェブサイトを探しましょう。例えば、あなたが地元のパン屋さんなら、「地域名　パン屋」などのキーワードで検索してみましょう。検索結果の上位に表示されるサイトは、Googleから評価されている、つまり多くの人に見られているサイトです。

最低でも3つ、できれば5つ以上のサイトをピックアップしましょう。

ステップ２：選んだサイトの良いところを書き出そう！

選んだサイトをじっくり見て、

「使いやすいな」と感じたところ
「この情報、分かりやすいな」と思ったところ
「このデザイン、素敵だな」と感じたところ

を、どんどん書き出してみましょう。例えば、

「メニューが上にあって、探しやすい」
「お客様の声がたくさん載っていて、安心できる」
「写真が大きくて、パンの美味しさが伝わる」

など、どんな小さなことでも構いません。たくさん書き出すことで、多くの人が「良い」と感じるウェブサイトの共通点が見えてきます。

ステップ３：自分のサイトに取り入れてみよう！

ステップ２で見つけた「良いところ」を、自分のウェブサイトにも取り入れてみましょう。ただし、丸パクリは厳禁です！

「メニューの配置」は同じでも、「メニューに載せる内容」はあなたのお店のオリジナルのものにする
「お客様の声を載せる」という構成は同じでも、「文章」や「写真」はあなたのお客様からいただいたものを使う

など、あくまでも「考え方」を参考にすることが大切です。

ステップ４：公開後も改善を続けよう！

ウェブサイトは、作って終わりではありません。公開した後も、

「どのページがよく見られているか」
「どんなキーワードで検索して、サイトに来てくれた人が多いか」

などを分析して、改善を続けることが大切です。Googleが無料で提供している「Googleアナリティクス」や「Googleサーチコンソール」などのツールを使うと、これらのデータを簡単に確認することができます。

ウェブサイト作り、ここだけは外せない！

ウェブサイトを作るとき、特に注意してほしいポイントを4つに絞ってお伝えします。

ポイント１：スマホ対応は必須！

今や、多くの人がスマートフォンでウェブサイトを見ています。そのため、パソコンだけでなく、スマートフォンでも見やすいデザインにすることは、絶対に欠かせません。「レスポンシブデザイン」と呼ばれる、画面サイズに合わせて自動的にレイアウトを調整するデザインを採用することが一般的です。

ポイント２：写真はとっても大事！

ウェブサイトに使う写真は、お店や商品のイメージを大きく左右します。美味しそうな料理の写真、スタッフの笑顔の写真、分かりやすい説明図など、質の高い写真を使うことで、サイトの印象はぐっと良くなります。プロのカメラマンに依頼するのも一つの方法です。

ポイント３：分かりやすい文章を心がけよう！

どんなにデザインが優れていても、文章が分かりにくければ、ユーザーはすぐに離れていってしまいます。専門用語はできるだけ避け、誰でも理解できる、分かりやすい文章を心がけましょう。「です・ます」調で統一することも大切です。

ポイント４：文字の大きさと押しやすさにも配慮する

本文の文字サイズは小さすぎないように、目安として16px程度を確保すると、多くの人にとって読みやすくなります。また、ボタンやリンクは指でも押しやすいよう、周りの余白も含めて十分な大きさを確保しましょう。これは心理学者ポール・フィッツ氏が1954年に示した「フィッツの法則」（対象までの距離が近く、大きいほど、素早く正確に押せるという法則）にも基づいた考え方です。小さすぎるボタンは、それだけで離脱の原因になります。