はじめに
みなさんは、エンジニア・デザイナー間のコミュニケーションに困ってないですか？
エンジニア・デザイナー間のコミュニケーションで以下のような課題をよく聞きます。
- 「デザイナーが作成したモックアップが、エンジニアの実装時に再現できない」
- 「デザイナーが技術的制約を十分に理解できてない」
- 「エンジニアがデザインの意図を正確に汲み取れない」
このような課題を解決するため、解決方法はいろいろあると思います。
この記事では、このような課題を解決するためのデザインデータの作り方について解説しようと思います。
この記事を読む上で前提となるもの
◯ 前提知識
この記事では、オブジェクト指向UIデザイン をベースに、エンジニア・デザイナー間のコミュニケーションを円滑にするデザインデータ作りについて解説します。
◯ 解説するUIデザイン
この記事では、「メールアプリ」を例にデザインデータの作り方について解説しようと思います。
デザインデータを作る
Step.1 オブジェクトの抽出
1 - 1. タスクを言語化する
デザインデータを作るために、はじめにやることは、アプリケーションでやりたいタスク（小さな目的）を言語化することです。
タスクを言語化する時には、以下のようにします。
<!-- 誰 --> が <!-- 何 --> を <!-- どうする -->
メールアプリのタスクはこのようになります。
1 - 2. タスクの名詞を整理する
タスクの中から名詞を抽出し、メインオブジェクトを決め、メインオブジェクトに紐ずくプロパティを決めます！
上記の画像で名詞は、こちらになります。
- 「ユーザー」
- 「新規メール」
- 「送信メール」
- 「受信メール」
- 「未読メール」
これらの名詞を整理し、メインオブジェクトとプロパティはこのようになります。
1 - 3. アクションを見つける
次は、メインオブジェクトとプロパティに紐ずくアクションを見つけていきます。
Step.2 ビュー・ナビゲーションを検討する
オブジェクトの抽出したら、次は、ビュー・ナビゲーションを検討していきます。
2 - 1. 基本構成を考える
基本構成を考えるために、メインオブジェクトにコレクションビュー（一覧）とシングル（詳細）を考えます！
2 - 2. 呼び出し関係を考える
コレクションビュー（一覧）とシングル（詳細)の呼び出し関係を考えます。
2 - 3. ナビゲーションを考える
呼び出し関係が決まったら、ナビゲーションを決めていきます。
Step.3 デザインを詰めていく
3 - 1. レイアウトを考える
ナビゲーションが決まったら、レイアウトを考えていきます。
3 - 2. デザインを作る
レイアウトが決まったら、デザインを詰めていきます。
（適当に作りすぎてますが、許してください...）
Step.4 状態変化を作っていく
Step.3 で作ったデザインをもとに、 UI Stackを考えます。
考える 5つの状態はこちらです
- Blank State（空っぽの状態）
- Loading State（ローディング状態）
- Partial State（部分達成状態）
- Error State（エラー状態）
- Ideal State（理想状態）
状態変化のデザインが完成したらデザインデータの完成です！
まとめ
この記事では、このような課題を解決するためのデザインデータの作り方について解説しました。
オブジェクト指向UIデザインx UI Stack を意識することで、
エンジニア・デザイナー間のコミュニケーションはだいぶ改善すると思います！
デザインデータの作成の仕方は、こちらの記事を参考にしてみてください！
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。