マガジンのカバー画像

#Goalist Design

450
運営しているクリエイター

#OOUI

求人サイトの管理画面をオブジェクト指向UIデザインで設計する

求人サイトの管理画面をオブジェクト指向UIデザインで設計する

こんにちは。UIデザイナーのマスダです。

OOUIデザイン(オブジェクト指向UIデザイン)で要件から画面遷移図を作成するということを最近行いました。
なんとなーく流れがわかってきたので、自分が実践しているOOUIデザインのやりかたを書いていきたいと思います。

1. タスクの書き出しユーザーのやりたいことを付箋に書き出します。
しっかりとユーザーの業務フローを理解して、どれだけ具体的に行動をイメ

もっとみる
オブジェクト指向UIの画面設計手順

オブジェクト指向UIの画面設計手順

この記事は社内向けの発表の書き起こしです。

UIデザインと一口にいっても、その意味するところはかなり幅が広いです。「UXデザインの5段階モデル」という考え方では、ユーザーの目に触れる表層部分から根底の戦略部分まで、5つのレイヤーで表現されていたりします。今回お話しする内容は、表層から2~3番目の構造設計の部分です。

UIの使いやすさは構造設計によって大きく左右される色使いやフォント、アニメーシ

もっとみる
OOUIデザインの準備運動をやってみる

OOUIデザインの準備運動をやってみる

こんにちは、マスダです。

デザイナー3年目で、そろそろ真面目にUIデザインの手法を勉強しはじめています。私の所属するデザインチームでたびたび話題に上がるのがオブジェクト指向UIデザイン(以下、OOUIデザイン)という考え方。

最近、本も出版されてデザイナーさんだと知っているという方も多いのじゃないでしょうか。

ユーザーの関心の対象物を手掛かりにUIデザインを行っていくのがOOUIデザインです

もっとみる
オブジェクト指向UIデザイン ワークアウト9 商品管理アプリケーション

オブジェクト指向UIデザイン ワークアウト9 商品管理アプリケーション

OOUIを勉強中です。

『オブジェクト指向UIデザイン』のワークアウトを行い、noteでアウトプットやその過程などを書いていこうと思います。

ワークアウト9:商品管理アプリケーション

ワークアウト6〜9では、ひとつのアプリを段階的にデザインしていきます。4回連続でやってきたこの商品管理アプリもこれで最後、基礎編としても最後のワークなので、ツール使って作りました。

1. オブジェクトの抽出(

もっとみる
オブジェクト指向UIデザイン ワークアウト8 商品管理アプリケーション

オブジェクト指向UIデザイン ワークアウト8 商品管理アプリケーション

OOUIを勉強中です。

『オブジェクト指向UIデザイン』のワークアウトを行い、noteでアウトプットやその過程などを書いていこうと思います。

ワークアウト8:商品管理アプリケーション
ワークアウト6〜9では、ひとつのアプリを段階的にデザインしていきます。

1. オブジェクトの抽出(モデルレイヤー)
まずはタスクから名詞を探します。
・前期末の棚卸高、今期の仕入高、今期末の棚卸高を確認する

もっとみる
オブジェクト指向UIデザイン ワークアウト7 商品管理アプリケーション

オブジェクト指向UIデザイン ワークアウト7 商品管理アプリケーション

OOUIを勉強中です。

『オブジェクト指向UIデザイン』のワークアウトを行い、noteでアウトプットやその過程などを書いていこうと思います。

ワークアウト7:商品管理アプリケーション
ワークアウト6〜9では、ひとつのアプリを段階的にデザインしていきます。

1. オブジェクトの抽出(モデルレイヤー)
まずはタスクから名詞を探します。
・「ある棚卸し」の「日付」と「合計金額」を確認する
・「ある

もっとみる
オブジェクト指向UIデザイン ワークアウト6 商品管理アプリケーション

オブジェクト指向UIデザイン ワークアウト6 商品管理アプリケーション

OOUIを勉強中です。

『オブジェクト指向UIデザイン』のワークアウトを行い、noteでアウトプットやその過程などを書いていこうと思います。

ワークアウト6:商品管理アプリケーション
ワークアウト6〜9では、ひとつのアプリを段階的にデザインしていきます。

1. オブジェクトの抽出(モデルレイヤー)
まずはタスクから名詞を探します。
・「ある仕入れ」の「仕入れID」と「日付」と「合計金額」を確

もっとみる
オブジェクト指向UIデザイン ワークアウト5 家族で遊べる場所を探すアプリケーション

オブジェクト指向UIデザイン ワークアウト5 家族で遊べる場所を探すアプリケーション

OOUIを勉強中です。

『オブジェクト指向UIデザイン』のワークアウトを行い、noteでアウトプットやその過程などを書いていこうと思います。

ワークアウト5:家族で遊べる場所を探すアプリケーション

1. オブジェクトの抽出(モデルレイヤー)
まずはタスクから名詞を探します。
・「すみれ山公園」の「すべり台」の「設置場所」を確認する
・「ブランコ」のある「公園」を確認する
・「公園」の「住所」

もっとみる
オブジェクト指向UIデザイン ワークアウト4 会議室予約アプリケーション

オブジェクト指向UIデザイン ワークアウト4 会議室予約アプリケーション

OOUIを勉強中です。

『オブジェクト指向UIデザイン』のワークアウトを行い、noteでアウトプットやその過程などを書いていこうと思います。

ワークアウト4:会議室予約アプリケーション

1. オブジェクトの抽出(モデルレイヤー)まずはタスクから名詞を探します。
・「ミーティングルーム」「ユーカリ」の「広さ」を確認する
・「会議室」を新規登録する
・「会議室」「ブルーベリー」が「何階」にあるか

もっとみる
オブジェクト指向UIデザイン ワークアウト3 イベント店舗管理アプリケーション

オブジェクト指向UIデザイン ワークアウト3 イベント店舗管理アプリケーション

OOUIを勉強中です。

『オブジェクト指向UIデザイン』のワークアウトを行い、noteでアウトプットやその過程などを書いていこうと思います。

ワークアウト3:イベント店舗管理アプリケーション
1. オブジェクトの抽出(モデルレイヤー)
まずはタスクから名詞を探します。
・「花屋」「ソラリス」の「ブースの場所」を確認する
・「B会場」の「出店」を確認する
・「タイ料理屋」「チェンマイ」の「名称」

もっとみる
オブジェクト指向UIデザイン ワークアウト2 社員名簿アプリケーション

オブジェクト指向UIデザイン ワークアウト2 社員名簿アプリケーション

OOUIを勉強中です。

『オブジェクト指向UIデザイン』のワークアウトを行い、noteでアウトプットやその過程などを書いていこうと思います。

ワークアウト2:社員名簿アプリケーション
やること
指定されたタスクを手掛かりに、アプリケーションをデザインします。
制限時間は30分です。

やってみる

1. オブジェクトの抽出(モデルレイヤー)

まずはタスクから名詞を探します。
・「野坂さん」の

もっとみる
オブジェクト指向UIデザイン ワークアウト1 メモアプリケーション

オブジェクト指向UIデザイン ワークアウト1 メモアプリケーション

OOUIを勉強中です。

こちらの本から演習課題を行い、noteでアウトプットやその過程などを書いていこうと思います。

ワークアウト1:メモアプリケーション
やること指定されたタスクを手掛かりに、アプリケーションをデザインします。
制限時間は30分です。

私はデザイナーではないので、詳細なデザインの作り込みなどはせずに、手書きでザクザクいきます。

やってみる

1. オブジェクトの抽出(モデ

もっとみる
OOUIの準備運動 7日目 実生活のオブジェクト

OOUIの準備運動 7日目 実生活のオブジェクト

やること
身の回りのものごとを、タスク・オブジェクト・プロパティ・アクションとして捉え直してみます。

やってみる
洗い物

タスクは「汚れを拭き取る・食器を洗う・しまう」など、オブジェクトは「食器」、プロパティは「食器の種類」など、アクションは「選択する・手に取る・スポンジで洗う・水気を拭き取る」などにあたります。

着替え

タスクは「着る服を決める・たんすから出す・パジャマを脱ぐ・服を着る」

もっとみる
OOUIの準備運動 6日目 一覧に対するアクション

OOUIの準備運動 6日目 一覧に対するアクション

やること
オブジェクトの一覧表示画面で、どんなアクションができるかを調査します。

やってみる
note
記事の管理画面

・選択
・(選択したものを)削除

・公開ステータスでフィルタ
・期間でフィルタ
・マガジンでフィルタ

・閲覧
・編集
・下書きに戻す
・削除
・共有用リンクを取得

記事を選択した時のみ画面下に出てくるパネル内に、一括アクションが収められているので、個別アクションと容易に

もっとみる