MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
WebサイトにおけるOOUIの必要性

WebサイトにおけるOOUIの必要性

公開日:2021年08月18日
最終更新日:2021年08月18日
d.sato
Webデザイン
デザイン
ホーム > 全記事一覧 > 制作 > デザイナー > デザイン > WebサイトにおけるOOUIの必要性
このエントリーをはてなブックマークに追加
WebサイトにおけるOOUIの必要性
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

WebサイトにおけるUIデザイン

UIって何ですか?ぼくはwebデザイナーになって数カ月間UIについて説明することが出来ませんでした。
ワードは知っているがどんなものか概要がイマイチ分からなかったのです。

そんなとき上野 学さんのOOUIというサイトを見つけて読んでいくうちにどんどんのめり込んでUIって知れば知るほど身近にあるし、何より勉強してて楽しいと思えました。

ぜひこの記事を読んでいる皆さんもOOUIの楽しさに触れていただければと思います。

OOUIとはどんなものか

OOUI=自分が行おうとしていることを達成するために使用するモノを基準に考える。

つまりオブジェクト指向ユーザーインターフェースということになります。オブジェクトが主人公となり、どう動くか動かすかによって課題を解決していくこととも言えます。

 

OOUIを推進すべき理由

OOUIを推進していくべき理由は3つあります。

劇的な遷移(ページ)数削減による工数縮小

もし「どう動かすか」が先にあるサイトの場合、ECサイトで例に上げると「買う・詳細を見る・問い合わせる」といったボタンがTOPページに有るとしましょう。
おそらくエンジニアはこの3つのボタンの遷移先ごとに商品一覧ページを作らなくてはなりません。

しかし、商品一覧がTOPにある場合、商品ごとに「買う・詳細を見る・問い合わせる」のボタンを実装すればいいだけなので圧倒的にページ数の削減に繋がります。

デザイナーとエンジニア間の手戻り減

OOUIは銀の弾丸とも呼ばれており、この共通言語を用いることで常に目的達成のためのサイト・アプリを作成することができます。
よって、1つの正解をもとに開発を行うことで職種間にブレない目的が作り上げられます。

ユーザーライクなUIデザインが可能になる事

人間は生まれながらにして「モノもって動かす」ような思考が一般的です。動作が先に来てモノを決めるなど安易にできるはずありません。
サイトの中でも「モノをどうするか」といった導線を張ることでユーザーにストレスのないサイト回遊をさせることができます。

以上の3つよりOOUIはプロダクト改善に有効な施策といえます。

 

OOUIの「オブジェクトベース」とは

そもそもUIは大きく分けて「オブジェクトベース」「タスクベース」の2通りの方法で考える事ができます。

両者の区別は、かんたんにストーリーの始まりが「名詞」「動詞」かで分けられます。

例で、「商品をレジに持って行ってお金を払う」だと商品が始まりで成り立っているので「オブジェクトベース」

「自販機にお金を入れてジュースを買う」だとお金を入れるが始まりなので「タスクベース」となります。

オブジェクトベースのほうが使いやすい理由

なぜオブジェクト指向は使いやすいのかというと、世の中にはオブジェクトベースでありふれているからです。

日常でいうと「飲食店に入ったとき商品を選んでから帰りに料金を払います。」もしこれが逆の場合も世の中にはあり、セルフガソリンスタンドだと先にお金を入れてからガソリンを入れていきます。これはおそらく、もう買うもの(ガソリン)が決まっていて看板にデカデカと料金が書いてあるからこそ成り立っているのでしょう。もし飲食店で「先に手持ちのお金いくらまで出せるか教えて下さい。教えないとメニュー見せられません」なんて言われたらもうそのお店に行くことをやめてしまうでしょう。

 

もっとわかり易い例でよく言われているのが「人はハンマーを持って釘に向かって振り下ろす」「振り下ろしてからハンマーを持つ人はいない」です。

つまり日常的にオブジェクトベースの処理の流れがあるからこそネット内にも合わせるべきと言えます。

OOUIという言葉が流通している理由

OOUIが話題になっている理由としてネットのサイトやアプリではタスクベースによる処理が多いからです。

なぜ、普段の生活ではオブジェクトベースなのにネットではタスクになってしまうのか。

それはユーザーの課題を解決しようとする人の思いゆえだと考えています。ユーザーの課題を、複雑なニーズを満たすために「ユーザーの要求事項」を単純に設計に盛り込んでしまうと、「購入する」「振り下ろす」といったタスクが優先され、「何を?」の部分が十分に考慮されないという弊害が発生してしまいます。

自分たちが仕事で携わっているwebサイトにおいても、このようなユーザーの要求を単純に実現することに向かうのではなく、ユーザーが自然にオブジェクトを持ってタスクを達成できるか、という観点を失ってはいけません


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

色の機能と与える印象を知って、上手に配色しよう!
デザイン
デザイン
公開日: 2017年06月21日
最終更新日: 2017年06月21日
色の機能と与える印象を知って、上手に配色しよう!
オンスタ運営
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
Webデザイン
デザイン
公開日: 2018年03月26日
最終更新日: 2018年03月26日
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
オンスタ運営
WEB用に使われる画像形式の基礎と特徴
Webデザイン
マークアップ
公開日: 2018年05月19日
最終更新日: 2018年05月19日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
Webデザイン
デザイン
公開日: 2019年03月26日
最終更新日: 2022年01月17日
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
オンスタ運営
【 Illustrator CC 】でWebデザインをする時に気をつけたいルール8選
Webデザイン
デザイン
公開日: 2016年12月27日
最終更新日: 2016年12月27日
【 Illustrator CC 】でWebデザインをする時に気をつけたいルール8選
オンスタ運営
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
Webデザイン
マークアップ
公開日: 2018年03月02日
最終更新日: 2018年03月02日
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
オンスタ運営
Webデザインで取り入れたい!心理学を使ってユーザーを誘導する方法
Webデザイン
デザイン
公開日: 2017年01月18日
最終更新日: 2022年01月17日
Webデザインで取り入れたい!心理学を使ってユーザーを誘導する方法
オンスタ運営
webデザイン参考まとめ!webデザイン学習に役立つサイト4選(国内外問わず)
Webデザイン
オンライン学習
デザイナー
制作
公開日: 2019年11月12日
最終更新日: 2022年01月17日
webデザイン参考まとめ!webデザイン学習に役立つサイト4選(国内外問わず)
  • # webデザイン参考
  • # 国内外問わず
オンスタ運営
知っておきたい!Photoshopを使ってできることを大公開
Webデザイン
公開日: 2019年06月14日
最終更新日: 2022年01月17日
知っておきたい!Photoshopを使ってできることを大公開
  • # Photoshop
  • # pickup
  • # できること
オンスタ運営
このフォントどうやって使うの?ダウンロードしていいの?【正しいフォントの使い方】
Webデザイン
デザイナー
デザイン
デザイン
公開日: 2020年12月07日
最終更新日: 2020年12月07日
このフォントどうやって使うの?ダウンロードしていいの?【正しいフォントの使い方】
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。