Help us understand the problem. What is going on with this article?

マイクロフレーム(マイクロワイヤーフレーム)を書いてUI開発

More than 1 year has passed since last update.

モブプログラミングでToDoリストを作った際に、マイクロフレームを書きました。
やってみるといい感じだったので、その時の様子とともに、情報をアップします。

作ったToDoリスト
https://mob.harutacompany.work/

背景

モブプログラミングで、ToDoリストを作ることになりました。
とりあえず要件を以下のように決め、コードを書くことに、、、

  • 要件
    • テキストボックスに入力したタスクを登録、表示。
    • タスクの優先度をアイコンで表示。
    • タスクの優先度アイコンは変更可能。
    • タスクの完了状態をわかるようにする。
    • タスクを削除可能にする。

しかし、コード書き始めてからすぐに、以下のような質問が続々と発生。
そして、「俺はこう思ってた」「私はこう思ってた」とイメージのずれが顕著に、、、

  • コードを書き始めてからの質問
    • タスクの一覧画面とは別に、登録画面用意する?
    • テキストボックス入力後、ボタンで登録する?ボタンは画像ボタン?エンターキー動作はどうする?
    • 優先度アイコンの変更は変更画面用意する?
    • タスクの完了状態を変更するイベントは?
    • タスクを削除するとき、確認メッセージ出す? etc.

「要件定義が甘い!」の一言でまとめられますが、文字でまとめてもイメージはずれるため、ワイヤーフレームを書いてはどうかとの提案が。同時に、次の意見も、、、

  • ワイヤーフレームを書くことについて
    • 面倒
    • ToDoリストくらいで書くのはちょっと…
    • とりあえずコード書きたい

折衷案として、簡単に書けるワイヤーフレームがあればと思い、調べてみました。
Cacooで「マイクロフレーム」なるものが紹介されてたので、この書き方でやってみることに。
https://cacoo.com/ja/blog/why-every-team-should-use-microframes/

結果

↓のようになりました。
マイクロフレームのルールでは「グレースケールのみ」とありますが、画像ボタンは色分けしました。
すべてグレーだと、話し合いで、どのボタンについて話しているかわかりにくかったからです。
image.png
上記のマイクロフレームのイメージを基に、作成したToDoリストのUIが↓です。
アプリヘッダーは実装していませんが、大体マイクロフレームと同じになりました。

ToDoリスト
https://mob.harutacompany.work/

最後に

↓のメリットがあり、開発メンバーで利用するにはいいなと思いました。
モブプログラミングのメンバーも書いたほうがやりやすかった、このくらいなら書いてもOKと言ってくれました。

  • メリット
    • 成果物のイメージが共有できる
    • 簡単に書ける
    • UI変更があっても、文字や色指定がないため、図の修正が少ない

ToDoリストという簡単な機能を仲間内でやるだけでもイメージのずれは大きかったので、仕事でクライアントがいる場合は、一般的なワイヤーフレームをしっかり作成してイメージのずれを解消しておくことが、大事だなと感じました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away