MENUCLOSE
twitter ツイッターfeedlyRSS

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

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

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

公開日:2021年08月18日
最終更新日:2021年08月18日
d.sato
Webデザイン
デザイン
ホーム > 全記事一覧 > 制作 > デザイナー > デザイン > WebサイトにおけるOOUIの必要性

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37
このエントリーをはてなブックマークに追加
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を実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WEB用に使われる画像形式の基礎と特徴
マークアップ
Webデザイン
公開日: 2019年04月19日
最終更新日: 2022年01月17日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【コーディング】実装に悩んだ時に使える便利なCSSテクニック
マークアップ
Webデザイン
公開日: 2018年02月09日
最終更新日: 2018年02月09日
【コーディング】実装に悩んだ時に使える便利なCSSテクニック
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
これは便利!デザイナー向け【chrome拡張機能】7選!
デザイン
デザイナー
デザイン
Webデザイン
公開日: 2017年10月11日
最終更新日: 2022年01月17日
これは便利!デザイナー向け【chrome拡張機能】7選!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーのお仕事Q&A
デザイン
デザイナー
デザイン
公開日: 2017年11月11日
最終更新日: 2017年11月11日
デザイナーのお仕事Q&A
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
このフォントどうやって使うの?ダウンロードしていいの?【正しいフォントの使い方】
デザイン
デザイナー
デザイン
Webデザイン
公開日: 2020年12月07日
最終更新日: 2020年12月07日
このフォントどうやって使うの?ダウンロードしていいの?【正しいフォントの使い方】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
色の機能と与える印象を知って、上手に配色しよう!
デザイン
デザイン
公開日: 2017年06月21日
最終更新日: 2017年06月21日
色の機能と与える印象を知って、上手に配色しよう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
なんか物足りない…デザインにひと工夫!簡単テクニック10選
デザイン
Webデザイン
公開日: 2018年01月25日
最終更新日: 2022年01月17日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
グリットデザインを使いこなそう!
デザイン
Webデザイン
公開日: 2017年08月10日
最終更新日: 2017年08月10日
グリットデザインを使いこなそう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
「アイデアの参考に!」現役デザイナーが選ぶ【参考サイト】8選
デザイン
Webデザイン
公開日: 2019年03月18日
最終更新日: 2022年01月17日
「アイデアの参考に!」現役デザイナーが選ぶ【参考サイト】8選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
なんで?ホームページのデザインにこだわるべき理由とポイント
デザイン
デザイン
公開日: 2018年03月09日
最終更新日: 2018年03月09日
なんで?ホームページのデザインにこだわるべき理由とポイント
オンスタ運営
全記事一覧

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

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

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

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