ホームkeyboard_double_arrow_rightナレッジブログkeyboard_double_arrow_rightWebサイトにおけるOOUIの必要性

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

佐藤大介
  • デザイン
  • Webデザイン
公開: 2021.08.18 更新: 2022.01.17

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サイトにおいても、このようなユーザーの要求を単純に実現することに向かうのではなく、ユーザーが自然にオブジェクトを持ってタスクを達成できるか、という観点を失ってはいけません

制作の流れについて
  • 制作の流れ
  • 制作フェーズ
  • 運⽤フェーズ
  • お問い合わせ
  • 会社概要
GrowGroupの会社概要をはじめ、
成功事例などをご紹介しています。
  • 会社概要
  • 制作実績
  • 事業コンセプト
  • 会社概要
見積もりを依頼する見積もりを依頼する
顧客の課題解決を行い、成果を上げたGrowGroupの成功事例
GrowGroupは、ただただ制作するだけではありません。ご依頼の背景、⽬的からWebサイトの⽅向性を⾒極め「⽬的の達成」を第⼀に制作しています。

著者情報

弊社エンジニアが執筆したWordPress標準デザイン講座が出版されています弊社エンジニアが執筆したWordPress標準デザイン講座が出版されています
メルマガ登録に登録するメルマガ登録に登録する