• ・知りたい情報や訪問された目的に迷いなく辿り着けるか
• ・できるだけシンプルな導線設計になっているか
• ・ユーザーの行動に合わせた導線になっているか
• ・ユーザーに分かる言葉を使用しているか

この4つに共通しているのは「ユーザー視点」。効果的なUXデザインをするためには「訪れるユーザーの視点に立つ」ことがポイントです。
ユーザー視点に立ちユーザーが感じる不自由さを徹底的に解消し、目的地までストレスなく誘導することでUXが向上します。

ECサイトのUXデザイン

ではECサイトにおけるUXデザインとはどのように設計していくのでしょうか。

こちらの図はアメリカのUXデザイナーであるJesse James Garrett 氏が提唱したモデルで、UXデザインを5つの要素に分けたものです。

こちらのモデルをECサイトの制作に置き換えて考えていきましょう！

• まず、「戦略」でユーザーは何を求めているのか、ユーザーにどのようなアクションを起こしてほしいのかを考えます。
• 続いて「要件」で必要なコンテンツをカスタマージャーニーマップ等を用いて洗い出します。
• 「構造」でサイトの情報を整理しながらサイトマップを用いてサイトの構造を決定し、
• 「骨格」でユーザーの動線を考慮しながら、コンテンツやナビの配置を決めワイヤーフレームを作成します。
• 最後に「表層」で見た目のビジュアルデザインを創っていきます。

サイトを作成する際、見た目のビジュアルを一番こだわりたくなってしまいますが、実は「表層」は一番最後の行程です。
戦略〜骨格の部分がしっかりと固まっていないまま作成してしまうと、後々崩れてしまう、運営しづらい、誰にも刺さらないといったサイトになってしまう可能性があります。

導線設計をしてお客様が購入しやすいECサイトに！

導線設計とは

続いては導線設計について深掘りしていきましょう！

導線とは、ユーザーにどのように回遊して欲しいかを考慮して、サイト上に設けた経路のことです。

導線設計とは「ユーザーをどう導くかを設計すること」で、UXデザインをしていく上で非常に大切な部分です。「商品を購入する」等のサイトの目標を達成するために、ユーザーにどのような流れでサイトを回遊して欲しいのかということを整理して、お客様が迷わずに商品を購入できる、思わず商品を購入してしまう導線を設計していきます。

同じ発音で動線という言葉もありますが、こちらは人や物が実際に動いた経路のことです。

サイト内の導線を整理しよう

サイトの導線を整理・設計するためには大きく5つのポイントがあります。

• ・サイト内のコンテンツのグループ分け
• ・ページごとの目的を明確にする
• ・入口と出口を設計する
• ・情報量の整理
• ・ページ全体を俯瞰して見渡す

では、具体例を元に確認していきましょう！

●サイト内のコンテンツのグループ分け

サイト内のコンテンツのグループ分けでは、

• ・商品の適切なカテゴリー分けができているか
• ・伝えたい情報が分散していないか
• ・不必要なコンテンツを配置していないか

の3点に着目します。

販売する商品をさまざまな切り口から分析し、適切なカテゴリーをつけることや伝えたい情報を効果的な場所で伝えることでユーザビリティが高まります。

●ページごとの目的を明確にする

• ・ブランドイメージを感じて欲しいのか
• ・情報や知識を提供したいのか
• ・ストレスのない購入体験をして欲しいのか

など、ページごとの目的を定めることも大切です。

商品ページのカート周りは商品購入に必要な情報を配置する、ブランド紹介のページは企業・商品イメージを大切にしたコンテンツやデザインを盛り込むなど目的に合わせたコンテンツを考えていきます。

●入口と出口を設計する

どのページから入ってきて、次にどのようなアクションを起こして欲しいのかを設計することも大切です。ここでは3つのページを例に説明いたします。

■メールマガジン申込ページ
メールマガジン申込ページはメールマガジンの申込がゴールのページなので、他のコンテンツは配置しません。

■メールマガジン申込完了ページ
登録が終わった後はサイトを回遊して欲しいので、商品に関わるコンテンツを配置します。

■カートページ
カート周りでは低価格商品や関連商品を表示して複数購入率が高まるように設計します。「あと〇〇円で送料無料」や「ショッピングを続けるボタン」の位置も大切です。

このように、ページの目的や次に起こして欲しいアクションを考慮してコンテンツを配置することも大切です。

●情報の整理

あれもこれも伝えたい！このページもあのバナーもクリックして欲しい！と欲張りになってしまうのもあるあるです。

大量のバナーを設置やカート近くに他の商品への導線を配置など、せっかく入店してくださったお客様やレジの前にきてくださったお客様を迷わせるような構造になっていませんか？

ついついお店側が伝えたいことをお伝えしたくなってしまいますが、ユーザーが本当に欲しい情報は何なのか、どうしたら気持ち良く分かりやすくサイト回遊をしていただけるかということを忘れてはいけません、、、！

1ページに表示する情報量が多すぎないか、必要以上のリンクを設置していないか振り返ってみましょう。

●ページ全体を俯瞰して見渡す

導線設計をする際は以下の着眼点も忘れてはいけません。

• ・ブランドコンセプトに沿った設計ができているか
• ・ターゲットユーザーに合わせた設計になっているか
• ・競合他社との差別化を打ち出せているか

設計中もユーザー目線を忘れずサイトを俯瞰して確認することでコンテンツやレイアウトをブラッシュアップしていきます。

まとめ

いかがでしたでしょうか。今回はUXデザインと導線設計について深掘りいたしました。

UXデザイン、導線設計というのはユーザー目線に立って設計していくことが大切です。

しかし、ユーザーの目線が大切だと頭では分かっていても、つい自分の伝えたい情報を伝えてしまいがち・・・。日頃から「ユーザー目線」に立ち、客観的に自社サイトを見ることを意識したいものです・・！

そして、ウェブサイトは最初に設計したら終わりではありません。公開後も常にPDCAを回して施策と検証を繰り返すことでサイトは成長していきます。

思わず購入してしまうECサイトを目指して、ぜひこの機会に自社サイトを見直してみるのはいかがでしょうか。

このブログを読んだ方におすすめのブログ

マーケ部だより 〜リピーター・シェア編〜

みなさまこんにちは！ソレプロの上田です。３回目となるマーケ部だより。今回は消費者の購買の流れ最終段階の「リピーター」と「シェア」についてお話ししていこうと思います。前回のマーケ部だよりは分析方法のお話だったので難しい言葉ばかり登場していましたが、今回は実体験も交えながら、「リピーターを増やすにはどうしたら良いのか」「どうしたらシェア(SNS・レビュー投稿)してもらえるのか？」について考えていきたいと思います。リピート確定！と思ったECサイトに出会った話少し前の話になりますが、冬のアウターを購入した...