オブジェクト指向UI（OOUI）の制作３ステップ
オブジェクト指向UI（OOUI）の制作はこの３ステップ。
1.オブジェクトを定義する
2.UIフロー図を定義する
3.UIパターンを出す
1.オブジェクトを定義する
まずは、UIで表現するメインオブジェクト（コンテンツ）を決める。
このメインオブジェクトを中心にしてページの構成を決めていく。
①要件から動作フローを整理する
オブジェクトを定義するには、
まず、要件を動作フローに整理する。
「新規作成」→、、、とか、
「通知確認」→、、、とか。
ここはまだ開発側。機能要件。客観的な視点。
②動作フローからユーザーの行動に変換する
ここが重要なポイント。
動作フローをユーザーの行動に変換する。
「新規作成」だったら、
→「新しく投稿を作成する」とか、
「通知確認」だったら、
→「通知を確認する」とか。
ユーザーの動作フローを
1つ1つユーザー視点での行動に翻訳、変換する。
③行動から名詞を取り出す
「新しく投稿を作成する」からは、
→「投稿」とか、
「通知を確認する」からは、
→「通知」とか。
はい、出ました。
これらが「メインオブジェクト」です。
このメインオブジェクトを中心にページを構成していきます。
2.UIフロー図を定義する
メインオブジェクトを定義したら、
お次はUIフロー図を定義していきます。
①オブジェクトから必要な情報・アクションを決める
そのオブジェクトのページに表示させる
・情報（プロパティ）
・アクション
この2つを決めていく。
「通知」のオブジェクトだったら、
・情報（プロパティ）は、
相手のアイコン
相手の名前
相手のID
相手の行動内容（いいねなのかフォローなのか…）
行動日時、、、など。
・アクションは、
リフォローする
コメントを返す、、、など。
②階層関係をフロー図で整理する
オブジェクトから、
ページに表示させる必要な情報・アクションが決まったら、
各々のページの階層関係をフロー図で遷移を整理していく。
関連のあるアクションを意識するのがポイント。
⇒ここまでやったら一度、
要件を満たすか構造かどうかを確認した方が良い。
3.UIパターンを出す
①ルートナビを定義する
グローバルナビゲーション、ボトムナビゲーションと言われているところを定義する。
最上位のナビゲーション項目、起点になるページ、サービスを利用する理由となるところ、一番重要なコンテンツ。
②レイアウトを決める
これまででページに表示させる下記3点が決まりました。
・コンテンツ
・アクション
・ナビゲーション
あとは、これらをどこに表示させるか決めていきます。
コンテンツはメインとなるので中央にドーン。
あとは、ナビゲーションとアクション。
この2つはざっくり言うと、
ヘッダーに配置するか、フッターに配置するか、だけ（超ざっくり）。
＋１パターンとしては、
アクションをコンテンツ内に直接置くパターン。
これは、コンテンツ情報の一部に対してのアクションであった場合。
コツは、
・グルーピングすることと、
・優先度を明確にすること。
そして何より、コンテンツ情報／アクション／ナビゲーションとちゃんと分類されて整理されていること。
これらが出来ているとパターンが出しやすくなる。
③プロトタイピング
もうここからはたくさんのパターンでプロトタイピングして、
作って壊す、作って壊すの繰り返し。
行ったり来たりしながら、解像度がますます上がっていく。
とにかくグルグル回し続ける。