今回は、これまで学習してきたFigmaの機能を使って、実際にUIを設計するための考え方を学んでいきます。
最初に考えたいのは、そもそも何を作るべきなのか という問題です。
例えば、
会社のWebサイトをリニューアルするとします。
すぐにFigmaを開き、かっこいいトップページを作り始めることもできます。
しかし、見た目が優れたサイトを作っても、
問い合わせが増えなかったり、
必要な情報が見つからなかったりすれば、
目的を達成できているとは限りません。
デザインは、見た目を整えることだけが目的ではありません。
ユーザーが抱えている課題を解決し、サービスや事業の目的を達成するための手段です。
今回は、デザインを始める前に考えるべきことを整理し、
FigmaやFigJamを使って「何を作るべきか」を判断する方法を学びましょう。
デザインの出発点は「作りたいもの」ではない
Webサイトやアプリを作るとき、最初に「どんな画面にしようか」と考えがちです。
例えば、次のような要望が出てきます。
- かっこいいトップページにしたい
- アニメーションを取り入れたい
- メニューを使いやすくしたい
- おしゃれなカード型レイアウトにしたい
- スマートフォンに対応したい
これらは、デザインや実装に関するアイデアです。
しかし、これだけでは、何を解決するために作るのかがわかりません。
例えば、問い合わせが少ない会社のWebサイトを改善する場合、必要なのは派手なアニメーションではなく、サービス内容をわかりやすく伝えることや、問い合わせまでの導線を改善することかもしれません。
重要なのは、作りたいものを先に決めるのではなく、
解決したい課題から、必要な機能や画面を考える ことです。
目的・ユーザー・課題を整理する
何を作るべきかを判断するために、まずは3つの観点を整理します。
目的：何を達成したいのか
目的は、Webサイトやアプリを作ることで達成したい結果です。
例えば、会社のWebサイトなら、次のような目的が考えられます。
問い合わせを増やす
サービスの認知を広げる
資料請求につなげる
採用応募を増やす
既存顧客への情報提供を効率化する
目的によって、必要な画面や機能は変わります。
問い合わせを増やしたいサイトと、採用応募を増やしたいサイトでは、掲載する情報も、目立たせるべきボタンも異なります。
ユーザー：誰が使うのか
次に、そのサイトやアプリを使う人を考えます。
例えば、会社のサービス紹介サイトであれば、次のような人が利用するかもしれません。
初めてサービスを知った人
サービスの導入を検討している担当者
料金を比較している人
すでに利用している顧客
ユーザーが違えば、必要な情報も変わります。
初めてサービスを知った人には、サービスの概要や特徴が必要です。
一方、導入を具体的に検討している人には、料金、導入条件、実績、問い合わせ方法などが重要になるでしょう。
課題：ユーザーは何に困っているのか
最後に、ユーザーが目的を達成するうえで、何に困っているのかを考えます。
例えば、次のような課題です。
サービスの内容がわかりにくい
料金が見つからない
他社との違いがわからない
問い合わせ方法が見つからない
スマートフォンでは文字が読みにくい
課題が具体的になるほど、必要な改善策を考えやすくなります。
ただし、これらは仮説です。
実際のユーザーの行動データや問い合わせ内容、ユーザーへの聞き取りなどを確認し、必要に応じて仮説を修正します。
実習：会社のWebサイトを改善する
今回は、架空の会社のWebサイトを改善するケースを考えます。
現状
ある会社では、Webサイトを公開しているものの、
問い合わせが少ないという問題があります。
担当者からは、次のような要望が出ています。
トップページをもっとかっこよくしたい
サービス紹介を充実させたい
問い合わせボタンを目立たせたい
スマートフォンでも見やすくしたい
この段階で、すべての要望をそのまま実装するのは早すぎます。
まずは、目的と課題を整理しましょう。
手順1：目的を決める
今回の目的は、次のように設定します。
「Webサイトを訪れた見込み顧客がサービス内容を理解し、問い合わせできるようにする」
目的を文章にすることで、判断に迷ったときの基準ができます。
例えば、見た目を派手にする案があっても、サービスの理解や問い合わせに役立たないのであれば、優先順位を下げる判断ができます。
手順2：ユーザーを想定する
今回は、主なユーザーを「サービスの導入を検討している企業の担当者」とします。
この人は、サイトを訪れたときに、次のような情報を知りたいと考えられます。
どんなサービスなのか
自社の課題を解決できるのか
料金はいくらなのか
信頼できる会社なのか
どこから問い合わせればよいのか
この情報を整理すると、必要なコンテンツが見えてきます。
手順3：課題を仮説として整理する
この会社で、問い合わせが少ない原因として、次のような仮説を立てます。
サービス内容が抽象的で、利用するメリットが伝わっていない
料金や導入条件がわからず、検討を進められない
実績や事例が少なく、信頼性を判断できない
問い合わせボタンが見つけにくい
これらは原因が確定したわけではありません。
アクセス解析やユーザーの声などを確認して、
どの課題が実際に影響しているかを検証する必要があります。
FigJamで課題を可視化する
前回学習したFigJamを使って、目的や課題を整理してみましょう。
手順1：テーマを置く
FigJamで新しいボードを開き、中央付近に大きなテキストを配置します。
Webサイトの問い合わせを増やす
これを今回のテーマにします。
手順2：3つのグループを作る
テーマの周囲に、次の3つのグループを作ります。
目的
ユーザー
課題
それぞれに付箋を追加し、考えた内容を書き出します。
例えば、次のように整理できます。
| グループ | 付箋の内容 |
|---|
| 目的 | 見込み顧客からの問い合わせを増やす |
| ユーザー | サービス導入を検討している企業担当者 |
| 課題 | サービス内容がわかりにくい |
| 課題 | 料金が見つからない |
| 課題 | 実績が少なく、信頼性を判断しにくい |
このように情報を見える状態にすると、何を改善すべきかを考えやすくなります。
手順3：課題と改善案をつなぐ
課題の付箋から、改善案の付箋へ矢印を引きます。
今回は、次のように整理します。
サービス内容がわかりにくい → サービスの特徴と導入メリットを明確にする
料金が見つからない → 料金ページや料金情報への導線を整える
実績が少なく、信頼性を判断しにくい → 制作実績や導入事例を掲載する
問い合わせボタンが見つけにくい → 主要なページに問い合わせへの導線を設ける
この時点では、具体的な画面のデザインは必要ありません。
まずは、課題と改善案が論理的につながっているかを確認しましょう。
必要な画面と機能を決める
課題と改善案が整理できたら、実際に必要な画面や機能を考えます。
例えば、今回のWebサイトでは、次のような構成が考えられます。
| 画面・機能 | 目的 |
|---|
| トップページ | サービスの概要と主なメリットを伝える |
| サービス紹介ページ | サービス内容を詳しく説明する |
| 料金ページ | 料金や導入条件を伝える |
| 導入事例ページ | 実績や信頼性を伝える |
| お問い合わせページ | 問い合わせを受け付ける |
ここで大切なのは、ページをたくさん作ることではありません。
課題を解決するために必要な情報を、
ユーザーが適切なタイミングで確認できるようにすることです。
例えば、料金がシンプルであれば、独立した料金ページを作らず、サービス紹介ページに掲載する方法もあります。
必要なページ構成は、情報量やユーザーの行動に合わせて判断します。
優先順位を決める
課題や改善案が複数ある場合、すべてを同時に実施できるとは限りません。
そこで、どの改善を優先するかを決めます。
次の2つを比較してみましょう。
A：トップページに派手なアニメーションを追加する
B：サービスの特徴を明確にし、問い合わせへの導線を改善する
今回の目的が
問い合わせの増加であれば、Bのほうが直接的に課題解決につながる可能性があります。
ただし、実際の優先順位は、課題の深刻さ、実装コスト、効果の見込み、ユーザー調査などを踏まえて判断します。
デザインの見た目だけで優先順位を決めないことが重要です。
優先順位を考える観点
ユーザーの課題をどの程度解決できるか
目的の達成にどの程度貢献するか
実装にどのくらいの時間やコストがかかるか
効果を検証できるか
このように整理しておけば、限られた時間や予算の中でも、重要な改善から取り組めます。
Figma Designに移る前に確認する
FigJamで課題や改善案を整理したら、Figma Designで画面を作り始める前に、次の項目を確認します。
何を達成するためのサイトなのか
主なユーザーは誰なのか
ユーザーは何に困っているのか
どの課題を優先して解決するのか
どのような情報や機能が必要なのか
改善した結果をどう確認するのか
この段階で、すべての細部を確定する必要はありません。
ただし、目的と課題が曖昧なまま画面制作を始めると、途中で構成を大きく変更することになりやすいため、
最低限の方向性は整理しておきましょう。
あとがき
何を作るべきかを判断するには、画面の見た目を考える前に、目的・ユーザー・課題を整理することが重要です。
目的が明確になれば、必要な情報や機能を判断しやすくなります。
また、ユーザーの課題を整理すれば、見た目の改善だけではなく、本当に役立つ改善案を考えられます。
FigJamを使えば、こうした考えを付箋や図で可視化し、整理するために役立ちます。
そして、整理した内容をもとに、Figma Designで必要な画面を設計していきます。
デザインは、何を作るかを決めるところから始まっています。
Figmaを使い始めると、便利な機能を覚えたり、見た目のよい画面を作ったりすることに意識が向きます。
しかし、実際の制作では、機能を使いこなすことと同じくらい、
何を作るべきかを判断することが重要です。
目的に合わない機能を追加しても、ユーザーの課題が解決されるとは限りません。
反対に、ほんの少し情報の配置や導線を見直すだけで、使いやすさが大きく改善することもあります。
これからは、
デザインを始める前に「誰の、どのような課題を解決するのか」を考える習慣をつけていきましょう。
0 件のコメント:
コメントを投稿