UI/UX

ワイヤーフレーム制作前に必要となる「情報設計」とは? 進め方とポイント

こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。

快適に利用できるサービスを作る為には「情報設計」が重要です。
きちんと情報設計を行うことで、ターゲットユーザーに合わせた導線が明確となり、使いやすいサイトを作ることが出来るようになります。今回は、イマイチ分かりにくい「情報設計」の進め方と、意識すべきポイントについて解説していきたいと思います。

 

情報設計とは?

情報設計は、ユーザーに情報が分かり易く伝わる様、整理し組み立てていく事です。
家を建築する場合、どこにリビングを置き、どこに水回りを配置すればクライアントにとって快適な空間になるのか考えながら設計を行います。
Webサイトも同じで、どの様なコンテンツをどの順番で配置すればユーザーにとって使いやすいサイトとなるか、利用目的によって情報を整理していきます。

 

情報設計の流れ

現状の課題を整理する

情報設計はワイヤーフレーム作成前に取り掛かる工程です。ますは、Webサイトを作る目的は何なのか、さらに改善したい部分や問題となっている点は何なのか、現状の課題を整理するところから始まります。

<目的>
・売り上げを伸ばしたい
・新規顧客の獲得
・商品やサービスの認知拡大
・問い合わせ数を増やしたい

また、情報設計はターゲットによっても変わってくる為、「誰」に向けてその情報を届けるのか明確にしておく事が大切です。誰に・何を・どのように届ければ目的を達成できるのか具体的に考えましょう。

問題点を分析する

ユーザーは何かしらの目的がありサイトに訪れます。しかし、その目的に対し情報が上手く伝わらなかった場合、使いにくいサイトと認識されて離脱が起こり易くなります。
ターゲットユーザーにとってどこが問題なのか、そしてなぜこの問題が起きているのか原因を分析します。
また、その上でどうするべきか戦略を立て、ゴールに誘導するための施策を練る必要があります。
その為には、競合との比較や差別化するにはどうすべきかを洗い出し、ユーザーストーリーに沿った設計を行うことが大切です。

戦略を立てる

戦略を立てる為には、まずユーザーの行動や心理を整理し、把握する必要があります。
そのための手法として、「ストーリーマッピング」や「カスタマージャーニーマップ」があります。
これらは、ユーザーが取るであろう行動・思考を時系列に沿って並べ、一連の行動を可視化したものです。これにより、それぞれのフェーズで何が必要となるのか、どの様な機能・導線が有効か検討することが出来ます。

参考:UXをデザインする方法

 

必要なコンテンツを洗い出す

カスタマージャーニーマップやストーリーマッピングでの仮説をもとに、必要なコンテンツを洗い出します。
情報が多すぎると分かりにくくなったり迷いやすくなる場合もあるので、ユーザーにとって本当に必要かどうか、ここでしっかり検討する必要があります。

 

ワイヤーフレームを作る

必要となるコンテンツや要素が整理できたところで、ようやくワイヤーフレームの作成となります。ワイヤーフレーム作成では、情報設計で定めたコンテンツや機能などを配置・構成し、視覚化していく作業です。
また、ワイヤーフレームはデザインの骨組みとなるものですが、デザインの下書きではありません。
重要なのはページ構成や配置がどのようになっているかです。その為、ワイヤーフレームの段階ではフォントや色などデザイン要素は入れない様に注意します。

 

気を付けたいこと

開発途中では「やはり、この機能も必要だった」など、抜け漏れが多くなりがちです。しかし、その都度追加や修正を行うと、想定していたスケジュールや予算を超えてしまうことにもなり兼ねません。
このようなトラブルを防ぐ為にも、情報設計は大切です。
ワイヤーフレームの段階で「ターゲットに沿った構成になっているか」「機能は問題ないか」等、認識を揃えておく事でお互いに齟齬無くデザインを進める事が出来ますし、後々の追加・修正のリスクも軽減されます。

 

まとめ

いかがでしたでしょうか?
情報設計はWebサイトの核となる、とても重要な項目です。「誰に・何を・どのように」届けるのかという事を意識し、情報を組み立てていくことが大切です。

Web制作でお悩みの方はファストコーディングにお任せください!
ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。
お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。