💨

「エンジニアが作るイマイチなUI」を作らないためのコツ ~情報整理編1~

2024/07/03に公開

こんにちは!普段フロントエンド開発をしている人です🙌
タイトルはパンチされそうなくらい挑発的ですが、本編の内容はレイアウトやデザインについて自分自身がUIを作成していてこうしたほうが楽だなと気づいたことです。
少しでもより良いUI作成のお手伝いになると嬉しいです!

いくつかシリーズとして出していく(つもり)なので目次を順次追加していきます。
一つずつの内容は少なめにしているのでさっと読んでもらえると思います。

  1. UIを作る前の情報整理1 WHO・WHAT・WHENについて ←今回
  2. UIを作る前の情報整理2 図解とラフ図について
  3. UIを作る前の情報整理3 どっちがだいじ?
  4. UIのレイアウト作成
  5. 画面内情報の主役決め
  6. 色と脳
  7. UI作成時に気をつけていること

UIや元になるデザインを考える前にまずするべきことは「情報整理」です。
これが一緒に開発していく方や使用者と一致していないとやり直し…なんてこともあるのでこの「情報整理」の時間はきちんと取りましょう。

今回はどのように情報整理するのかの第一弾になります。

WHO・WHAT・WHEN/WHERE

英語の授業ですか??ってなりそうな見出しですが、そうではありません。
情報整理でまず最初に確認しておかなければならないのは、
作成するUIを 誰が使うか何ができるかいつ・どこで使うのか と言うことです。

この三つが違うと何が違うんだ…と思われるかもしれないので、例を挙げながらもう少し詳しく説明していきます。

例えば…

例として「料理のレシピUI」を作ることにします。

今回私が考えてみたものは以下のようになります。

誰が使う 何ができる いつどこで使う
料理を全く知らない人 作り方を伝える スマホで見れる料理サイト
意識高い系の人 詳しく知ってもらう 雑誌形式サイトの最後のページ
小学生 料理を楽しんでもらう 学校の授業

これを元に次は図解とラフについて考えていきます。
今の段階では、「作り方を伝えるにはシンプルなほうがいいな」や「子供向けには絵がいっぱいあったほうがいいな」などざっくりとしたイメージができれば◎です。

まとめ

誰が使うか、何ができるか、いつ・どこで使うか
この三つが違うだけで例で考えてみたもののようにUIの構成が異なります。
BtoBのWebサイトやApp開発をされる方は基本的にはこの三つの内容が決まっていることが多いと思うので、先方の方などとの確認を忘れないようにしてください。

Discussion