Skip to content
独創的なWebサイトの画面を示しながら、分かりやすい操作を案内するアイペンちゃんと猫のイラスト

コラム

独創的なサイトデザインは、本当に使いやすいのか

Webサイトを見ていると、

「かっこいい」
「他とは違う」
「よくこんな動きを思いついたな」

と感じるサイトがあります。

独創的なWebサイトの画面を示しながら、分かりやすい操作を案内するアイペンちゃんと猫のイラスト

画面いっぱいに広がるビジュアル、スクロールに合わせて動くパララックス、マウス操作に反応するアニメーション、スクロールすると次々に現れるコンテンツ。

Web制作の立場から見ても、技術的に興味深く、強く印象に残るサイトは少なくありません。

一方で、実際にそのサイトを利用しようとすると、

「メニューはどこにあるのだろう」

「会社概要を見たいのに、どこを押せばいいのか分からない」

「問い合わせ先を探すのに時間がかかる」

と感じることもあります。

独創的なデザインと、利用者にとっての使いやすさ。

この二つのバランスを取ることは、Webサイト制作において意外と難しい問題です。

ユーザーは「いつもの場所」を無意識に探している

多くのWebサイトには、ある程度共通した配置があります。

例えば、

  • ページ上部にロゴがある
  • 右上付近にメニューがある
  • ロゴを押すとトップページへ戻る
  • ページ下部に会社情報や問い合わせ先がある
  • 「お問い合わせ」という名前のボタンがある
  • スマートフォンでは右上にメニューボタンがある

といったものです。

これは単なる慣習ではありません。

多くのユーザーが長年Webサイトを使う中で覚えてきた、いわば操作上の共通言語です。

利用者はWebサイトを見るたびに、

「このサイトの操作方法はどうなっているのだろう」

と一から考えているわけではありません。

無意識のうちに、

「メニューはこの辺にあるはず」

と予測しながら操作しています。

その予測通りにナビゲーションが存在すれば、迷わず目的の情報へ移動できます。

逆に、独自性を重視するあまり通常とは違う場所にメニューを配置すると、利用者には「探す」という作業が発生します。

数秒程度の違いかもしれません。

しかしWebサイトでは、その数秒が意外に重要です。

「考えさせない」こともデザインの一つ

Webサイトのデザインというと、

色、写真、余白、フォント、アニメーションなど、見た目の部分が注目されがちです。

しかし、本来のデザインには、

利用者が迷わず操作できるように設計すること

も含まれています。

例えば問い合わせをしたい利用者が、

  1. メニューを探す
  2. どの文字がクリックできるか確認する
  3. アニメーションが終わるのを待つ
  4. 問い合わせページを探す

という操作をしなければならないとすれば、見た目が優れていても、使いやすいサイトとは言いにくくなります。

理想は、

「問い合わせをしたい」と思った瞬間に、ほぼ無意識で問い合わせボタンを見つけられること

です。

サイトの使い方を利用者に考えさせない。

これも重要なデザインだと思います。

動きのあるサイトが悪いわけではない

もちろん、

  • パララックス
  • スクロールアニメーション
  • 3D表現
  • 動画背景
  • マウスに反応する演出
  • ページ遷移アニメーション

といった技術自体が悪いわけではありません。

適切に使えば、非常に効果的です。

例えば、

商品の特徴を視覚的に説明する。

企業のブランドイメージを伝える。

製品の構造を3Dで見せる。

ストーリーをスクロールに合わせて展開する。

こうした場面では、動きそのものが情報伝達の役割を持ちます。

問題になるのは、

「動かすこと自体が目的になってしまった場合」

です。

表示する意味のないアニメーションが毎回再生されたり、情報を読むためにスクロール演出を待たなければならなかったりすると、演出がユーザーの操作を妨げることになります。

「他と違う」ことが目的になっていないか

Web制作では、

「他社と違うサイトにしたい」

という要望が出ることがあります。

もちろん、企業や商品の特徴を表現するために独自性は必要です。

しかし、

ナビゲーションの位置まで他社と違う必要があるのか

という点は考える必要があります。

例えば自動車は、メーカーによってデザインが大きく違います。

しかし、

  • ハンドル
  • アクセル
  • ブレーキ

の基本的な配置まで毎回独自にしたら、非常に運転しにくくなるでしょう。

Webサイトも似ています。

ビジュアルや表現方法には独自性を持たせながら、

操作方法については、ある程度利用者の慣習に合わせる。

この方が合理的な場合が多いと思います。

サイトの目的によって正解は変わる

ただし、すべてのWebサイトを同じ基準で考える必要はありません。

例えば、

  • アーティストの公式サイト
  • 映画やゲームのプロモーションサイト
  • ブランドのキャンペーンサイト
  • Web制作会社のポートフォリオ

では、通常とは違う体験そのものが価値になることがあります。

一方、

  • 病院
  • 官公庁
  • 企業サイト
  • 採用サイト
  • ECサイト
  • 業務サービスサイト

では、利用者が目的の情報へ素早く到達できることの方が重要です。

特に、

「電話番号を知りたい」

「営業時間を知りたい」

「料金を確認したい」

「問い合わせたい」

という明確な目的を持った利用者が多いサイトでは、操作性を優先した方がよいでしょう。

つまり、

デザインの良し悪しは、見た目だけでは判断できません。

そのサイトの目的によって評価基準が変わります。

独創性は「見せ方」に使い、「操作」は分かりやすくする

私自身、Webサイト制作では独創的な表現を否定する必要はないと思っています。

むしろWeb技術が進歩したことで、以前では実現できなかった表現ができるようになりました。

それを利用しない理由もありません。

ただし、

独創性を出す場所を選ぶこと

は重要です。

例えば、

  • メインビジュアル
  • 写真の見せ方
  • コンテンツのレイアウト
  • 背景演出
  • ブランドカラー
  • タイポグラフィ
  • 3D表現

などでは大胆なデザインを行う。

一方、

  • メニュー
  • 戻る操作
  • 問い合わせ
  • 検索
  • 電話
  • 重要ページへの導線

については、できるだけ分かりやすくする。

このように役割を分けることで、

「個性的だけれど使いやすいサイト」

を作ることができます。

デザインで重要なのは「驚かせること」ではなく「目的を達成させること」

Webサイトを作る側は、どうしても新しい技術や表現を試したくなります。

制作実績として見せる場合には、技術力を表現することも重要でしょう。

しかし利用者にとっては、

「どの技術が使われているか」

よりも、

「自分が欲しい情報をすぐに見つけられるか」

の方が重要です。

Webサイトの主役は、制作した人ではなく利用する人です。

独創性と分かりやすさ。

どちらか一方だけを選ぶ必要はありません。

分かりやすい基本構造の上に、必要な独創性を加える。

そのバランスを考えることこそ、Webデザインの難しさであり、面白さなのだと思います。

関連する用語・実践記事