「イマイチなUI」 を作らないためのコツ ~情報整理編~
こんにちは！普段フロントエンド開発をしている人です🙌
本編の内容はレイアウトやデザインについて自分自身がデザインからUIを作成していてこうしたほうが楽だなと気づいたことです。
少しでもより良いUI作成のお手伝いになると嬉しいです！
以前同じようなタイトルでいくつか出しているのですが、まとめた方が見やすくないか…？🧐と思ったのでカテゴリーずつにわけて新しく作成していきます。
内容は変わらないので見たことあるなって方はもう一度見返す程度で見ていただけると嬉しいです！
UIや元になるデザインを考える前にまずするべきことは「情報整理」です。
これが一緒に開発していく方や使用者と一致していないとやり直し…なんてこともあるのでこの「情報整理」の時間はきちんと取りましょう。
WHO・WHAT・WHEN/WHERE
英語の授業ですか？？ってなりそうな見出しですが、そうではありません。
情報整理でまず最初に確認しておかなければならないのは、
作成するUIを 誰が使うか、何ができるか、いつ・どこで使うのか と言うことです。
この三つが違うと何が違うんだ…と思われるかもしれないので、例を挙げながらもう少し詳しく説明していきます。
例えば…
例として「料理のレシピUI」を作ることにします。
今回私が考えてみたものは以下のようになります。
| 誰が使う | 何ができる | いつどこで使う |
|---|---|---|
| 料理を全く知らない人 | 作り方を伝える | スマホで見れる料理サイト |
| 意識高い系の人 | 詳しく知ってもらう | 雑誌形式サイトの最後のページ |
| 小学生 | 料理を楽しんでもらう | 学校の授業 |
これを元に次は図解とラフについて考えていきます。
今の段階では、「作り方を伝えるにはシンプルなほうがいいな」や「子供向けには絵がいっぱいあったほうがいいな」などざっくりとしたイメージができれば◎です。
図解とラフ
図解とは
ここでいう図解というは情報の親子・兄弟関係を考えるための図のことです。
開発者の方にはER図などがわかりやすい例になると思います。
今回は、ER図のようなエンティティとリレーションなどをしっかり書かなければいけないというわけではありません。
あくまで、ざっくりと情報の関係性がわかればいいのです。
例えるなら、ER図でいうエンティティ名だけ書かれた関係表みたいな感じです。
例での図解を作ってみる
上で書いている例に合わせて図解を作ってみました。
例
| 誰が使う | 何ができる | いつどこで使う |
|---|---|---|
| 料理を全く知らない人 | 作り方を伝える | スマホで見れる料理サイト |
| 意識高い系の人 | 詳しく知ってもらう | 雑誌形式サイトの最後のページ |
| 小学生 | 料理を楽しんでもらう | 学校の授業 |
レシピ名A、B、Cが兄弟関係になり、レシピ名と作り方が親子関係になります。
ここの作り方は人それぞれなので自分が後から見てもわかりやすく、誰にでも伝わりやすい図解ができればOKです🙆♀️
ラフ図とは
ここまでの整理でどのようなUIにしたいか、情報のざっくりとした関係性がわかったので、ここからUIの大まかな画面の構成を考えていきます。
ラフ図は四角や丸などの枠を書いていくようにしてください。
例でのラフ図を作ってみる
左から順に、
料理を作らない人向け→わかりやすくシンプルに
意識高い系の方向け→少しおしゃれに
小学生→見てわかる絵を中心に
という感じで作ってみました。
ラフ図は正解はないので自分なりのデザインと考えてみてください！
ラフ図ができたらもう少し細かいレイアウトを考えていきたいところなんですが、次の項目を行ってからの方が何倍も簡単に作れるようになるのでやることをお勧めします。
情報量と画面
ラフ図を作成しましたが、表示したい内容量が多く、作成するUIはスクロールなしの一画面の場合、テーブルなどを使ってぎっしり文字を詰めたようなUIになっていしまいませんか？
見やすく・使いやすいUIを作成する上で情報の取捨選択を行うようにしましょう。
（フロントエンジニアになってすぐは私はこれができていなかったので、イマイチどころではないUIを作り上げてしまった黒歴史が…）
この作業とっても大事！！！
どっちがだいじ？
情報の取捨選択をするために今までお話で目をつけていなかった細かい情報まで、一つ一つ繰り返しで どちらの情報の方がだいじか という確認をしていきましょう。
どうやってするのって気になる方がいましたら、下の例で一緒に考えてみてください。
例で考えてみる。
上に書いてある例で考えてみます。今回作成するUIの情報が以下のようになったとします。
例
| 誰が使う | 何ができる | いつどこで使う |
|---|---|---|
| 料理を全く知らない人 | 作り方を伝える | スマホで見れる料理サイト |
| 意識高い系の人 | 詳しく知ってもらう | 雑誌形式サイトの最後のページ |
| 小学生 | 料理を楽しんでもらう | 学校の授業 |
- レシピの写真
- レシピ名
- 材料
- 栄養価
- おすすめ料理グッズ
これらの情報の重要性を誰が使うかでどう変わるか考えてみましょう。
重要性がわかりやすいように「>、<、=」で比較表を作ってみました。
| 誰が使う | 重要性 |
|---|---|
| 料理を全く知らない人 | 作り方 = 材料 > レシピの写真 > レシピ名 > 栄養価 = おすすめの料理グッズ |
| 意識高い系の人 | 作り方 = 材料 > 栄養価 > レシピの写真 > レシピ名 = おすすめの料理グッズ |
| 小学生 | レシピの写真 > レシピ名 > 作り方 = 材料 > 栄養価 = おすすめの料理グッズ |
ここまでできたら、必須の情報とあったほうがいい情報・なくてもいい情報に分けていきましょう。
| 誰が使う | 必須 | あったほうがいい | なくてもいい |
|---|---|---|---|
| 料理を全く知らない人 | 作り方、材料、レシピの写真 | グッズ、レシピ名 | 栄養価 |
| 意識高い系の人 | 作り方、材料、栄養価、レシピ名 | レシピの写真 | グッズ |
| 小学生 | レシピの写真 | レシピ名、作り方、材料 | グッズ、栄養価 |
これで画面内に入れる情報の優先順位がつけれました。ここまでやってからレイアウトを考えるととっても作りやすくなるのではないのでしょうか
まとめ
情報整理は
①誰が使うか、何ができるか、いつ・どこで使うのか
②図解とラフ
③どっちがだいじ？
の順で行うととてもしやすくなります。(②、③は逆でも🙆♀️)
情報の優先順位をつけるためにはどのような情報があるかの洗い出しも必要なのでそこも忘れずに❗️
特に、BtoBのWebサイトやAppを作る際はどっちがだいじ？というのを先方と合わせる必要があります。
（私は商談してくださっている方にいつも「これいる…？？」って聞いてます。）
Appの作成者と商談者が違う場合や複数の人と作成する場合などは全ての情報と、優先順位は 資料 として残すことをおすすめします。
Discussion