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
なんか物足りない…デザインにひと工夫!簡単テクニック10選
Webデザイン
デザイン
公開日: 2019年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
【コーディング】実装に悩んだ時に使える便利な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
ビジネスに役立つデータの可視化法7つのポイント
デザイン
デザイン
マーケティング
公開日: 2020年12月21日
最終更新日: 2020年12月21日
ビジネスに役立つデータの可視化法7つのポイント
d.sato

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
【超初心者向け】Adobe XDの自動アニメーションを1分で作ってみよう!
デザイン
公開日: 2020年11月10日
最終更新日: 2020年11月10日
【超初心者向け】Adobe XDの自動アニメーションを1分で作ってみよう!
h.onishi

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デザイン
デザイン
公開日: 2016年12月08日
最終更新日: 2022年01月17日
これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション
オンスタ運営

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デザイン学習に役立つサイト4選(国内外問わず)
Webデザイン
オンライン学習
デザイナー
制作
公開日: 2019年11月12日
最終更新日: 2022年01月17日
webデザイン参考まとめ!webデザイン学習に役立つサイト4選(国内外問わず)
  • # 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
なんか物足りない…デザインにひと工夫!簡単テクニック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デザインの世界に飛び込むあなたへ!WEBデザイン制作時に知っておくべき用語集【WEB】
Webデザイン
デザイナー
デザイン
公開日: 2018年03月01日
最終更新日: 2018年03月01日
WEBデザインの世界に飛び込むあなたへ!WEBデザイン制作時に知っておくべき用語集【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
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
Webデザイン
デザイン
公開日: 2019年03月26日
最終更新日: 2022年01月17日
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
オンスタ運営

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デザイン
デザイン
デザイン
公開日: 2017年09月13日
最終更新日: 2017年09月13日
小っちゃいけど重要!Webデザインにおけるアイコンの活用方法と注意点
オンスタ運営
全記事一覧

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

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

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

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