🙆

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

2024/07/04に公開

こんにちは!普段フロントエンド開発をしている人です🙌
第一回に続き、今回は「図解とラフ」について書いています。まだ第一回を読んでない方は下の目次から飛んで読んでみてください。

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

今回も前回使用した例を使っていくのでおさらいとして例を書いておきます。
(例)料理のレシピUIの作成

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

図解とは

ここでいう図解というは情報の親子・兄弟関係を考えるための図のことです。
開発者の方にはER図などがわかりやすい例になると思います。
今回は、ER図のようなエンティティとリレーションなどをしっかり書かなければいけないというわけではありません。
あくまで、ざっくりと情報の関係性がわかればいいのです。
例えるなら、ER図でいうエンティティ名だけ書かれた関係表みたいな感じです。

例での図解を作ってみる

上で書いている例に合わせて図解を作ってみました。

レシピ名A、B、Cが兄弟関係になり、レシピ名と作り方が親子関係になります。
ここの作り方は人それぞれなので自分が後から見てもわかりやすく、誰にでも伝わりやすい図解ができればOKです🙆‍♀️

ラフ図とは

ここまでの整理でどのようなUIにしたいか、情報のざっくりとした関係性がわかったので、ここからUIの大まかな画面の構成を考えていきます。
ラフ図は四角や丸などの枠を書いていくようにしてください。

例でのラフ図を作ってみる

左から順に、
料理を作らない人向け→わかりやすくシンプルに
意識高い系の方向け→少しおしゃれに
小学生→見てわかる絵を中心に
という感じで作ってみました。

まとめ

情報の関係性を図解で、大まかな画面構成をラフ図で作成してみました。
ここまではざっくりとした情報しか考えていませんが、ある程度のUIは見えてきたのではないでしょうか?
正解はないので、今回の例で自分はどのようにするかを考えてみてもらえると嬉しいです!

次回は情報整理編で最も大事なところになる予定なのでぜひ読んでみてください。

Discussion