BLOG MENU

UI/UX設計とは？成果を出すWebサイトのつくり方

成果を出すホームページを構築する上でUI/UXの設計は欠かすことができません。
ただUI/UXといってもブランディングを意識してデザインしたり、コンテンツの配置を工夫して見やすい、分かりやすいデザインを行うだけでは成果を出すことができない可能性があります。

何故ならブランディングにユーザーの共感が得られなければ意味はなく、
共感を得られるように予め「ユーザーの行動」や「ターゲット」を明確にしておく必要があるからです。

例えば「ターゲット」を明確に決めずに料理レッスンを開講したとしましょう。
すると、料理経験が少ない人、料理経験が多い人が混ざって集まってしまう可能性があります。
この中で高度な技術を説明してしまえば、経験の少ない人は話についていく事ができず、おいていかれてしまいます。

これでは、良質なレッスンだったとしても成功とは言い難いでしょう。

ターゲット（ペルソナ）設定で課題を抽出しよう

ただ情報を整理するだけではなく、大切なことは「誰に」「何を」伝えるか。
このターゲットを明確にしていく必要があり、
そのために必要になってくるのが「ペルソナ」の設定です。

ペルソナとは製品・サービスのターゲットユーザーを具体的な人物像として表現し、
本質的な課題を抽出することで、サービスの根底を決定するものとなります。

一例として一つのグルメサイトを制作するとした場合。

例）
グルメサイト制作にあたってのペルソナ（ターゲット像）

30代前半　女性　既婚者　パートタイマー
主人・子供2人（小学生2年生男、小学4年生女）
子供のお昼はお弁当を作らなくてはいけない
自分の帰宅時間は17時頃

ターゲットの悩みや欲求

朝早く起きることが辛い
毎日のお弁当の献立を考えることが大変

ターゲットの悩みが解決しない原因は何か

毎日の献立が思いつかない
レシピのストックが少ない

ターゲットの悩みに対し、価値あるサービスとは

考える時間を短縮できるレシピ
作り置きができるようなレシピ

ターゲットがサイトを使うシーン

時短レシピ
お弁当レシピ
残った食材から探せる検索機能

このように、順序だててユーザー行動やユーザーシーンを作っていくことで、必要なコンテンツや機能が見えてきたかと思います。

今回は例として1つのターゲット像を設計しましたが、実際には数パターン用意していく必要があります。
何故なら性別・年齢・職業・家族構成が違えば、求めるものが変わってくるからです。
設計する上で、ターゲットとなるユーザーを定めることは非常に重要なことなので、細かくユーザー行動を設定してみましょう。

時には迷わせる設計も正解である

上記の例と少し反比例して聞こえるかもしれませんが、必ずしも道筋を描いてあげることだけが正しい設計とは限りません。

何故ならあえて迷わせる、考えさせるといった設計も一つの正解になりうることがあるからです。

少し特殊ではありますが、そうすることでユーザー数を増やし人気を博した成功例もあります。

例えば「ドン・キホーテ」が良い例になるのではないでしょうか？
複雑な陳列や大雑把な商品の配置といったものが逆に客ウケして今でも多くのお客様が店舗へ訪れています。
本来であれば、何処に何が置いてあるのかを明確にしないことは、お客様にとって不親切であり、不満の対象となってしまうので避けるべきことです。
ただし、ドン・キホーテはこの手法を逆手にとり、あえて迷わせて商品を探させつつも、他に面白い商品や変わった商品を配置する事でお客様を楽しませるという行動に成功しています。

ただ、誤解しないで欲しいこととして、この「迷わせる行動」もそういった「ペルソナ設定」が行われたからこその成功例であり、決して考えもなく設計されたものではありません。

どういったユーザーをターゲットにどんな商品を売っていくのか。
その為にしっかりペルソナを設計することで必ずゴールに近づくことはできます。
ペルソナサンプルは多ければ多いほど精度は増していきます。
ユーザーリサーチなどを行えば一か月以上かかることもあるでしょう。
ただ、今後何年も続いていく製品・サービスのことを考えるのであれば、この期間が長いととるか、短いととるかは自ずと見えてくるのではないでしょうか？

直観的に理解できる情報設計を心がける

ペルソナの設計ができれば、あとはそのターゲットに対して、
どのようなコンテンツをどのように見せていくかを考えていきましょう。
重要なのは直観的に理解できることです。
情報整理をしっかり行い、ユーザーにとって親切な設計を心がけます。

参考例）

もやし	卵	ハンバーグ	おせち料理
キャベツ	オムライス	ローストビーフ	ピーマン
青のりポテト	きゅうり	ナス	唐揚げチキン
かつ丼	ナポリタン	ベーコン巻き	鶏むね肉ソテー

上記の中で「時短レシピ」がどれか分かりますか？
このように規則性がなく材料名や料理名が並んでいると、見つけるのに時間もかかってしまいますし、答えだって本当に正しいのかどうかと悩んでしまうこともあるかと思います。
これではユーザーに優しくはなく、ストレスの原因にもなります。

良いUI設計とは「直観的に答えが分かる」こと。

参考例）

お弁当レシピ	時短レシピ	おもてなしレシピ	食材
ハンバーグオムライスかつ丼ナポリタン鶏むね肉ソテー	青のりポテト唐揚げチキンベーコン巻き	おせち料理ローストビーフ	もやし卵キャベツピーマンきゅうりナス

これなら料理も食材も一目瞭然です。
直観的に理解できるように欲しい情報を整理しまとめていくことが大切なのです。
何が正しい情報なのか、どうする事で直観的に伝わるのか、何度も試行錯誤し繰り返す事で
より磨かれた答えに近づくはずです。

まとめ

UI/UX設計において、正解は決して一つではありません。
時代に応じて変化することもあれば、サービスによって変化することもあります。
ただあらゆるケースを想定し続けることで、限りなく正解に近づくことはできると思っています。
クーシーは試行錯誤を繰り返します。
どんなサービス設計においても、あらゆる角度から見渡す努力を惜しみません。
もし、コンバージョンが伸びない、ユーザーの離脱率が多いなど、サイト設計に悩んでおりましたら一度クーシーにご相談ください。

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラスクル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。