はじめに

みなさんは、エンジニア・デザイナー間のコミュニケーションに困ってないですか？

エンジニア・デザイナー間のコミュニケーションで以下のような課題をよく聞きます。

このような課題を解決するため、解決方法はいろいろあると思います。
この記事では、このような課題を解決するためのデザインデータの作り方について解説しようと思います。

この記事を読む上で前提となるもの

この記事では、オブジェクト指向UIデザインをベースに、エンジニア・デザイナー間のコミュニケーションを円滑にするデザインデータ作りについて解説します。

この記事では、「メールアプリ」を例にデザインデータの作り方について解説しようと思います。

デザインデータを作るために、はじめにやることは、アプリケーションでやりたいタスク（小さな目的）を言語化することです。

タスクを言語化する時には、以下のようにします。

<!-- 誰 --> が <!-- 何 --> を <!-- どうする -->

メールアプリのタスクはこのようになります。

タスクの中から名詞を抽出し、メインオブジェクトを決め、メインオブジェクトに紐ずくプロパティを決めます！

上記の画像で名詞は、こちらになります。

これらの名詞を整理し、メインオブジェクトとプロパティはこのようになります。

次は、メインオブジェクトとプロパティに紐ずくアクションを見つけていきます。

オブジェクトの抽出したら、次は、ビュー・ナビゲーションを検討していきます。

基本構成を考えるために、メインオブジェクトにコレクションビュー（一覧）とシングル（詳細）を考えます！

コレクションビュー（一覧）とシングル（詳細)の呼び出し関係を考えます。

呼び出し関係が決まったら、ナビゲーションを決めていきます。

ナビゲーションが決まったら、レイアウトを考えていきます。

レイアウトが決まったら、デザインを詰めていきます。

Step.3 で作ったデザインをもとに、 UI Stackを考えます。

考える 5つの状態はこちらです

状態変化のデザインが完成したらデザインデータの完成です！

この記事では、このような課題を解決するためのデザインデータの作り方について解説しました。

オブジェクト指向UIデザインx UI Stack を意識することで、

エンジニア・デザイナー間のコミュニケーションはだいぶ改善すると思います！

デザインデータの作成の仕方は、こちらの記事を参考にしてみてください！

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。