Blog

ブログ

TOP
ブログ一覧
ブログ
ウェブサイトを考える上で大切な「点と線」をつなぐ”UX(ユーザーエクスペリエンス)デザイン”

ウェブサイトを考える上で大切な「点と線」をつなぐ”UX(ユーザーエクスペリエンス)デザイン”

目次

2025-04-10
2025-04-10

ウェブサイトの制作を請け負っていると、新規顧客獲得のために、

  • 「とりあえず名刺代わりのホームページを制作してほしい」
  • 「ウェブって何から手をつけたらいいかわからないから、とりあえずホームページを作って欲しい」
  • 「古いウェブサイトだから綺麗にしてほしい」

といったご相談をいただきます。

こうしたご要望を形にすることは可能なのですが、ウェブサイトを公開しただけでは、新規ユーザー(=お客さん※以下、「ユーザー」)は、まだあなたのことを知らないので、いきなり”〇〇株式会社”と検索して訪れることは少ないですよね。

結果として、公開して終わりになりがちです。

なので、"公開する"という「」だけでなく、

  • 公開したことでユーザーはどうやって訪れるのか
  • ウェブサイトを見ることで、ユーザーはその後どんな感情になって問い合わせをするのか
  • ユーザーはどういった情報を必要としているのか

こうした視点を踏まえた「点と線」をつないだウェブサイトを考える上で大切なUXデザインについてお話ししたいと思います。

UXデザインとは

UXデザインとは、U(User)X(eXperience)D(Design)の略で、ユーザーが商品やサービスを利用する際に、「このサービスを利用してよかったとユーザーが思える体験をデザインすることです。

UXの誤解

UXと聞くと、ウェブサイトやアプリを使っている間などの「利用中」をイメージされると思います。ただ、それはUX活動の中の一部でしかないのです。

そのため、サービス利用前の期待感や、利用後の評価を含めた全体の体験がUXデザインの重要なポイントになります。

【補足】全体の体験を考えるで重要な、UXの期間とは?

UXデザインでは、ユーザー体験を次の4つの期間に分けて考えます(「UX白書」より)。

ウェブサイトの体験の例

予期的UXは、ユーザーが商品やサービスを利用する前の期待感です。
例:検索結果やSNSなでウェブサイトを見つけたときに、内容が自分の課題を解決できそうだと感じるかどうか。

一時的UXは、実際に商品やサービスを利用している段階です。
例:ウェブサイトを訪問した際、ナビゲーションがわかりやすく、自分が求める情報がすぐに見つかるかどうか。

エピソード的UXは、利用後にその体験がどのように記憶されたのかを振り返る段階です。
例:ウェブサイトを見て「必要な情報が手に入った」「役に立った」とポジティブに振り返られるかどうか。

累積的UXは、体験全体がどのような体験だったのか自分自身の中でどのように評価され、蓄積されるかです。
例:他の人に「このサイトを参考にするといいよ」と勧めたくなるかどうか。

つまり、この4つ期間をもとに、ユーザーの背景や体験を可視化した上でデザインをすることで「点と線をつなぐ」ウェブサイトが実現します。

なぜ今UXデザインが重要なのか

もう既に、「モノ消費」から「コト消費」に変化しています。時代に取り残されないためにも、単に「ウェブサイトで何を提供するか」だけでなく「ウェブサイトでどんな体験をユーザーに提供するか」が非常に重要になってきています。

例えば、アパレル(衣服)のECサイトを例に考えてみます。

  • 衣服(モノ)の情報だけではなく、口コミや具体的な着こなし動画などが充実している(予期的UX)
  • 配送が迅速で、梱包が丁寧。さらに受け取った箱までオシャレで自慢したくなる(一時的UX)
  • 商品到着後すぐにメールが届き、思わずレビューしたくなった(エピソード的UX)
  • 他の必要なものを買うときに、そのECサイトを思い出し再度訪れる(累積的UX)

このように、衣服を「買う」という行為だけでなく、ユーザーが嬉しいと思えるような体験を提供することで満足度向上へとつながります。

UXデザインのアプローチ法

次のような流れでUXデザインをしていきます。

  • ユーザー理解
    • リサーチを通じて、ユーザーを深く理解するフェーズです。ターゲットとなるユーザーに対しアンケートや観察を行い、具体的なペルソナ像を作成します。
  • 課題特定
    • ペルソナがどのような体験をしているのか可視化します。カスタマージャーニーマップを描き、現状のユーザーがどのような課題や悩みを抱えているのかを明らかにします。
  • 改善策
    • 見つかった課題に対して、解決策を考え、ユーザーが求めている情報や導線をデザインに落とし込みます。
  • 検証と改善
    • 解決策を実施し、実際のユーザーの反応を見ながら改善を繰り返します。

UXデザインで成功した、習い事教室ウェブサイトリニューアルの例

この教室では、ウェブサイトからの問い合わせはほぼなく、口コミのみでの入会がほぼ占めていました。
今後は口コミだけでなく、新規顧客獲得のためにホームページを強化していこうと考えていました。

アプローチ

  • ユーザー理解
    • 保護者にアンケートを実施し、具体的なペルソナを作成。
  • 課題特定
    • サイトに訪れた際に安心感を得られる情報が不足している点を明確化。
  • 改善策
    • 強みを訴求するコンテンツを追加し、入会までの導線を最適化。
  • 検証と改善
    • 新しいウェブサイトを公開し、ユーザーの反応を観察し改善を繰り返す。

結果
これにより、ウェブからの新規入会者数は210%向上しました。

「点と線のつながり」を意識したウェブサイトを

ウェブサイトを公開するという「」で終わるのではなく、公開後にユーザーがどのようにサイトを訪れ、価値を感じ、行動につながるかという「」をデザインした上で、ユーザーにとって価値あるウェブサイトを目指しましょう。

他の記事

Webflowでお問い合わせフォームにreCAPTCHAを設定する方法
2025-05-02

Webflowでお問い合わせフォームにreCAPTCHAを設定する方法

Webflowに標準で搭載されているreCAPTCHA(v2)を使って、コード不要でスパム対策する方法を解説します。

【2025年最新版】Webflowの費用まとめ|Webflowの料金プランと最適なプランの選び方をご紹介
2025-05-02

【2025年最新版】Webflowの費用まとめ|Webflowの料金プランと最適なプランの選び方をご紹介

Webflowを使ってウェブサイトを作ろうと思っているけど、「Webflowって利用するのにいくらかかるの?」「自分の最適なプランはどれ?」「無料でどこまでできるの?」この記事では、個人でWebflowを使う場合にかかる費用と、目的に合わせたおすすめプランをわかりやすくご紹介します。

【2025年最新版】webflowアカウントの作成方法
2025-05-02

【2025年最新版】webflowアカウントの作成方法

2025年最新版のwebflowのアカウント作成方法です。初心者にわかりやすく、画像付きでご紹介しています。

お問い合わせフォームから「スパムメール(迷惑メール)」が増えて困ってませんか?reCAPTCHAでスパム対策をはじめよう
2025-04-24

お問い合わせフォームから「スパムメール(迷惑メール)」が増えて困ってませんか?reCAPTCHAでスパム対策をはじめよう

お問い合わせフォームに、見覚えのない名前や英語の長文。見たこともない、意味不明な言葉や怪しいURLが貼られたメッセージ。そんな「スパムメール(迷惑メール)」が届く頻度が、少しずつ増えていませんか?

”つたわる”ホームページ・ウェブサイト制作は「たった一人」のストーリーを考えることから始まる|UXデザインのフレームワーク:ペルソナの作り方と活用法
2025-04-10

”つたわる”ホームページ・ウェブサイト制作は「たった一人」のストーリーを考えることから始まる|UXデザインのフレームワーク:ペルソナの作り方と活用法

ホームページまたは、ウェブサイトを制作する際「誰に向けて情報を発信するのか」を明確にすることは、つたわるサイトづくりにおいて欠かせない視点です。

静的ページと動的ページの違いとは?  特徴・費用感・あなたのビジネスにおける選び方をわかりやすく解説
2025-04-02

静的ページと動的ページの違いとは? 特徴・費用感・あなたのビジネスにおける選び方をわかりやすく解説

”静的ページ”や”動的ページ”と聞くと、「止まったままのページ?」「動くページ?」というイメージになるかもしれません。この「静的ページ」「動的ページ」の違いを理解することは、運用のしやすさやコストに関わる大切なポイントです。