## はじめに
以下の書籍で、オブジェクト指向をベースとしたUI設計の方法を学んだので、まとめていこうと思います。
[オブジェクト指向UIデザイン 使いやすいソフトウェアの原理](https://www.amazon.co.jp/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E2%94%80%E2%94%80%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E5%8E%9F%E7%90%86-WEB-DB-PRESS-plus%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4297113511)

## 概要
この書籍では、どのようにUI設計をすればユーザーが使いやすいアプリケーションや、システムになるかが書いてあります。様々な実例などを交えながら書かれている書籍だったので、とても勉強になりました。

## オブジェクト指向の設計とタスク指向の設計の違い
### 〇タスク指向の設計
タスク指向のUI設計とは、簡単に言うと、動詞⇒名詞の順番にUI設計がされているシステムになります。
例えば、よく使うドリンクの自動販売機などはまさにそうです。お金を入れる(動詞)⇒ドリンクを選ぶ(選択)という順番で設計されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/29c07e34-3dd3-e90c-fe07-f0bb0d7608b1.png)
システムでいえば、以下のような銀行のATMなどは、「振込」「入金」などの操作の選択を先に行うタスク指向のUI設計になっていることが多いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/081cb325-9be0-edaa-d1e8-2fed3f2ab64f.png)


### 〇オブジェクト指向の設計
これは先ほどの逆で、名詞⇨動詞の順番にUI設計がされているシステムになります。
例えば、以下の画像のような生徒の管理をするアプリケーションがあるとします。
オブジェクト指向のUI設計に基づいて設計をされています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/7df29af3-fca1-3050-689c-532d7e096e53.png)

まず、オブジェクト(ここでは生徒がオブジェクト)を一覧で表示します。そのオブジェクトに関するボタン(ここでは編集ボタン)を押すとそのオブジェクトに関する操作ができるような設計になります。つまり、名詞⇨動詞の順番でUI設計がされているというわけです。
これがオブジェクト指向のUI設計になります。今回で言うと、一覧からオブジェクトを選択して、それに対する操作をすると言う流れです。
タスク指向のUI設計では、操作を選んでからオブジェクトを選択するという流れなので、全く逆なのです。

## オブジェクト指向UIの原則
この書籍では、オブジェクト指向UIの原則として以下が挙げられています。

**・オブジェクトを知覚でき直接的に働きかけられる**
**・オブジェクトは自身の性質と状態を体現する**
**・オブジェクト選択⇨アクション選択の操作順序**
**・全てのオブジェクトが互いに協調しながらUIを構築する**

## 宅配ピザサービスの例
最後に特殊なUI設計をしているサービスの解説をしてきます。
このUI設計のおかしな点を以下に箇条書きにしていきます。

**・商品を選ぶ前に、なぜかログインや会員登録しなければならない。**
⇨買いたい商品を選んでからログインなどの操作を行うUI設計の方が、ユーザーからしてもわかりやすい。
**・商品を選ぶ前に、商品を選ぶのではなく、なぜか「今すぐ配達」ボタンを押さないと注文画面にいけない。**
⇨ユーザーからすると、どこのボタンを押せば商品を押すと注文をすることができるのかわかりにくい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/1b7e74c4-0823-7f86-a41a-ae2eabb0945e.png)



## 最後に
他にも記事を書いているので、良ければ見ていってください。

[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)
[cv:issue_marketplace_engineer]

## はじめに
以下の書籍で、オブジェクト指向をベースとしたUI設計の方法を学んだので、まとめていこうと思います。
[オブジェクト指向UIデザイン 使いやすいソフトウェアの原理](https://www.amazon.co.jp/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E2%94%80%E2%94%80%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E5%8E%9F%E7%90%86-WEB-DB-PRESS-plus%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4297113511)

## 概要
この書籍では、どのようにUI設計をすればユーザーが使いやすいアプリケーションや、システムになるかが書いてあります。様々な実例などを交えながら書かれている書籍だったので、とても勉強になりました。

## オブジェクト指向の設計とタスク指向の設計の違い
### 〇タスク指向の設計
タスク指向のUI設計とは、簡単に言うと、動詞⇒名詞の順番にUI設計がされているシステムになります。
例えば、よく使うドリンクの自動販売機などはまさにそうです。お金を入れる(動詞)⇒ドリンクを選ぶ(選択)という順番で設計されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/29c07e34-3dd3-e90c-fe07-f0bb0d7608b1.png)
システムでいえば、以下のような銀行のATMなどは、「振込」「入金」などの操作の選択を先に行うタスク指向のUI設計になっていることが多いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/081cb325-9be0-edaa-d1e8-2fed3f2ab64f.png)


### 〇オブジェクト指向の設計
これは先ほどの逆で、名詞⇨動詞の順番にUI設計がされているシステムになります。
例えば、以下の画像のような生徒の管理をするアプリケーションがあるとします。
オブジェクト指向のUI設計に基づいて設計をされています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/7df29af3-fca1-3050-689c-532d7e096e53.png)

まず、オブジェクト(ここでは生徒がオブジェクト)を一覧で表示します。そのオブジェクトに関するボタン(ここでは編集ボタン)を押すとそのオブジェクトに関する操作ができるような設計になります。つまり、名詞⇨動詞の順番でUI設計がされているというわけです。
これがオブジェクト指向のUI設計になります。今回で言うと、一覧からオブジェクトを選択して、それに対する操作をすると言う流れです。
タスク指向のUI設計では、操作を選んでからオブジェクトを選択するという流れなので、全く逆なのです。

## オブジェクト指向UIの原則
この書籍では、オブジェクト指向UIの原則として以下が挙げられています。

**・オブジェクトを知覚でき直接的に働きかけられる**
**・オブジェクトは自身の性質と状態を体現する**
**・オブジェクト選択⇨アクション選択の操作順序**
**・全てのオブジェクトが互いに協調しながらUIを構築する**

## 宅配ピザサービスの例
最後に特殊なUI設計をしているサービスの解説をしてきます。
このUI設計のおかしな点を以下に箇条書きにしていきます。

**・商品を選ぶ前に、なぜかログインや会員登録しなければならない。**
⇨買いたい商品を選んでからログインなどの操作を行うUI設計の方が、ユーザーからしてもわかりやすい。
**・商品を選ぶ前に、商品を選ぶのではなく、なぜか「今すぐ配達」ボタンを押さないと注文画面にいけない。**
⇨ユーザーからすると、どこのボタンを押せば商品を押すと注文をすることができるのかわかりにくい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/1b7e74c4-0823-7f86-a41a-ae2eabb0945e.png)



## 最後に
他にも記事を書いているので、良ければ見ていってください。

[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

続きを読むには単価診断を受けてください（30秒）