UXを高める情報設計を意識したワイヤーフレーム作成

こんにちは！
デジタルハリウッドSTUDIO姫路のトレーナー廣岡です。

ワイヤーフレームは、サイトを形にする設計の最初のステップです。
この段階で情報設計をしっかりと意識することは、ユーザー体験(UX)の質を大きく左右します。

理解するだけで大きな効果が得られますので、Webデザイナー初心者は早めに習得しましょう。

情報設計とは？

Webサイトの情報設計とは、ユーザー(サイトの利用者)が欲しい情報を適切に届けるための設計です。
情報設計は、UXデザインの構造を決める段階の要素で、サイトのユーザー体験(UX)を高めるために必要な工程です。
ユーザー体験とは、ユーザーがホームページから得た体験や感情（見たい情報にすぐ辿り着けた、事例がたくさん見れて楽しいなど）を指します。
サイトの利用者がスムーズに情報を見つけて、理解し、アクション出来るようにするために大切です。

ユーザーが目当ての情報にたどり着きやすくすることで、見込み顧客の離脱を防いだり、コンバージョン率（来店・購入などの目的の達成率）を向上でき、成果に繋がるWebサイト制作ができます。

UXは早期に取り組むべきスキル

UXに関するポイントの習得は、デザインやコーディングに比べて比較的早い段階で身に付けやすいです。

UX設計の考え方を早い段階で習得することは、デザインやコーディングを効率よく進めるための土台作りにもつながります。
UXを意識したワイヤーフレームが作れるようになると、プロジェクト全体の成功確率が大幅に高まるので、初心者にとって最初に習得すべき領域の一つです。

WebサイトのUXデザイン

ユーザーにとって使い勝手のいいウェブサイトにするために、ユーザー体験の向上を図るには企画・設計が必要不可欠です。

UXデザインを高める8つの要素

各要素の詳しい説明については、こちらの記事をご覧ください。

2024.10.10

ニーズに応えるホームページ制作｜企画・設計について

こんにちは！ デジタルハリウッドSTUDIO姫路のトレーナー廣岡です。 デジタルハリウッドスタジオでは、卒業制作として実在するクライ...

UXを高める質の高いワイヤーフレームの作り方

この記事では、ペルソナデザインやサイトの目的が明確になっていることを前提に、訪れるユーザーに配慮できている質の高いワイヤーフレームの作り方を解説します。

ワイヤーフレームの本質を理解しよう

そもそもワイヤーフレームって？

ワイヤーフレームは、ページの設計図です。
サイトのページ内で、何をどこにどう配置するかを図にしたものです。

ワイヤーフレームの作成工程

1.サイトのコンセプトとページの役割を整理

サイト作成の目的とサイトマップ作成時に決めた各ページの役割を再確認し、重要視するところを見失わないように作成しましょう。

2.情報の整理

情報に優先順位を付けて、ユーザーが理解しやすい構成を考えましょう。
情報を盛り込みすぎたり、文脈が唐突だと、ユーザーが何をどのように見ていいのかわからなくなったり、理解しにくくなってしまいます。

3.レイアウトする

情報の強弱や、写真やボタンの配置を決めていきましょう。
サイト回遊を高めるための導線設計も意識してください。

ワイヤーフレーム作成で気をつけること

デザイナー、コーダーに意図を伝える

デザインから案件に参加するデザイナーやコーダーは制作意図を知りません。
ディレクションの意図が伝わりやすく、認識のズレが起こりづらいワイヤーフレームを意識して作成しましょう。

コンテンツや機能が目的のために最適か常に意識する

重要な情報が目立っているか、ユーザーが迷子にならないような導線は確保できているかを適宜見直しましょう。

デザインしない

フリーランスの方など、ディレクションからワイヤーフレーム、デザインを自分一人で作成する場合は、この時点でデザイン的なレイアウトを考える必要は一切ありません。
要素が揃っていれば、レイアウトは多少崩れていても問題ないので、レイアウトよりも情報設計を大切にしてください。

デザイナーに意図を伝えるためには、多少レイアウトやデザイン的な要素を考慮する必要がある場合もあります。

テキストは具体的に入れる

ワイヤーフレームの段階では、しっかりとした原稿が無い場合が多いです。
ただ、ダミーテキストを入れるとイメージが付きにくく、意図もわかりにくいため、参考サイトやAIなどを活用しながら出来るだけ具体的なコピーや文章を入れて、細かいところまでしっかり仕上げましょう。
影響の少ない部分は大まかにまとめても良いですが、影響が大きい部分は細部まで丁寧に作り込みましょう。

UXを高めるための顧客視点第一に考える5つのポイント

いくら素敵なデザインを作っても誰にも見てもらえない、見てもらえても目的につながらないと意味がありません。
ワイヤーフレーム段階で以下のポイントを意識してUX向上に努めましょう。

01.ユーザー像を理解する

ワイヤーフレームを作成する前に、ユーザーの年齢、職業、目的、行動パターンなどを具体的に想定しましょう。
検索、SNS、チラシ、広告など流入経路は様々です。
ターゲットユーザーがどのような悩みや目的でどうやってサイトを訪れるのかを考え、その解決策をワイヤーフレームに反映します。

02.ユーザーが求める情報をわかりやすく配置する

ユーザーが最短ルートで必要な情報や機能にアクセスできるように、情報を整理して、全ての情報を平等にせず、重要なコンテンツや機能を目立たせます。

03.ユーザーの視点で使いやすさを追求する

項目やボタンの名称などは出来るだけ分かりやすい言葉を使い、直感的に操作できるようにします。
また、スクロールやクリックなどの不要な操作や情報量を減らし、ユーザーがスムーズに目的を達成できるようにします。

04.ユーザーの心理を考慮する

ユーザーが「これで正しいのか」と不安に思わないように、ガイドや補足説明を適切に入れましょう。
初めて訪れたWebサイトでお問い合わせや来店などの成果を得るためには、いくつもハードルがあります。
ユーザーの不安を出来るだけ解消して、目的の行動を取ってもらいやすい構成を心掛けましょう。

05.ユーザーにストレスを与えない

情報量は適切に抑え、画面に情報を詰め込みすぎず、余白を活用して視認性を高めましょう。
見出しと文章の構成や、リスト形式で整理して適度に区切りを付けるなど、全ての文章をしっかり読まなくても、瞬間的に大まかな内容が理解できるようにしましょう。

まとめ

ワイヤーフレーム作成時にUXを高めるには、以下の3つを軸に顧客視点で考えることが重要です。

• ユーザーが何を求めているかを深く理解する
• 必要な情報や機能を優先順位付けして簡潔にまとめる
• 使いやすさと心地よさを兼ね備えた設計を心がける

これを徹底することで、ユーザー満足度の高いWebサイトを実現できます！