名称未設定アートワーク_6

スケッチノート | 「オブジェクトベースUIの基礎と事例」 上野学さん(ソシオメディア)

こんにちは、くぼみ(@kubomi____)です。

先日大阪で開催された、ソシオメディアの上野学さんの講演、
「オブジェクトベースUIの基礎と事例」に参加してきました。

テーマは OOUI (Object Oriented User Interface) オブジェクト指向ユーザーインターフェースと呼ばれる、「オブジェクト(ユーザの関心の対象物)を手がかりに操作設計されたユーザーインターフェース」です。

ソシオメディアではこれまでデザインコンサルティングを行うために数百の業務アプリケーションを見てきましたが、世の業務アプリケーションのおよそ8割はタスクベース(ユーザーの業務の流れの順番)のUI構成になっていると思われます。それらのほとんどは、オブジェクトベースのUI構成に変えるだけで劇的に改善できるのです。デザインはトレードオフの集合であり、常に有効なテクニックというものはほとんどありませんが、「タスクベースからオブジェクトベースへの転換」だけは、半ば機械的に行えることでもあり、もう銀の弾丸と言っていいほど汎用的で強力なUI改善法なのです。(イベント概要より)

GUIの元来の姿であるオブジェクトベースUI。「UIの当たり前」であるべきなのに、なぜか世界はタスクベースのUIに溢れている。その失敗は、ユーザの要求をUI設計に落とし込む過程で起こるが、それは、多くの人がその設計方法を知らないから起こる。。

今回の講演では、そのオブジェクトベースUIの基本的な考え方と設計プロセスを、事例とともに解説するというものでした。

素晴らしい会でした。オブジェクトベースUIの考え方にとどまらず、上野さんの思想や哲学に触れることができて、UIに対しての視点を新たにできました。関西での講演は珍しいとのことで、オーディエンスの熱量も、ものすごかったです。

講演のスケッチノート

今回のスケッチノートの一番の目的は、自分の理解と学習です。「ファクト」と「講演者の主張や意見」を区別して書くことを心がけました。ここにプラスして「自分の意見や感想」を加えられると、かなり身になるスケッチノートになるはずですが、今回は時間がなかったので、感想はこのnote内で最後に書きます。

配色について。いつもは「明るい背景 + 本文は黒 + 強調色」という配色ですが、今回は最近主流になってきているダークモードUIを意識して、「暗い背景 + 本文は白 + 強調色」にトライしてみました。不慣れなのでちょっと違和感がありましたが、、明るい背景の場合と暗い背景の場合では、色の使い方が少し変わってきます。たとえば明るい色は膨張色で、暗い色は収縮色であることなどを意識すると、本文の白ブラシの太さは、黒で描くときよりも太めに描くとしっくりきました。

感想

UIデザインの仕事に就いて数年たちますが、正直なところ「勘」に頼ってデザインの判断をすることが多くありました。しかしそれがいかに危険なことかということを学びました。一般的なUIは、理由があって生き残っているデザイン。私が勘で思いつくことはきっと誰かも試している。生き残らなかった理由がある。「デザイナーの直観」はもちろん大切だけれど、それを「汎用的なルール」に落とし込めるかどうかで、デザインの質と再現性に大きな差が出るということを職場でもよく言われます。今まで「あっこうしたらいけるじゃん」と思いつきで決めたデザインの数々。。とくに最近、比較的大規模なUIリデザインのプロジェクトに関わっているので、このタイミングでオブジェクト指向の理解を深められる機会にめぐまれてとてもラッキーでした。

また、上野さんとのお話の中で、ソフトウェアデザインは、あらゆるデザインの中で唯一、無制限なものに制限を与えることで生まれるものである、というお話があり、UIデザインの可能性に今まで以上にワクワクしました。ハードには必ず制限がつきまとい、制限の中でデザインをしなくてはいけない。もちろんその制限を強みに変換したりするのが、デザイナーにとっての挑戦的で面白いところではあります。しかしソフトウェアのデザインは、無制限に制限を与えるというのがデザインの役割であり、それはもはやひとつの世界をデザインするということなのだと。それってとってもカッコいい!と、改めてUIデザインが好きになりました。


オブジェクトベースUIに興味がある方は、凝縮された上野さんのブログがおすすめです。


関連記事

ふだんはUIデザインの仕事をしていますが、最近こうやってイベントで自分の勉強用のスケッチノートを描いたり、イベント会場とリアルタイムに共有するためのグラフィックレコーディングをしたりしています。

Twitterアカウントはこちら



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

より具体的な絵のコツをtwitterで発信します!フォローお願いします! https://twitter.com/kubomi____ 頂いた「サポート」は、グラレコ活動費に充てさせていただき、noteに還元したいです。よろしくお願いします!

嬉しいです!よろしければシェアもお願いします( ^ω^ )
142
伝わる絵や図を手早く描くコツをご紹介します┃本業はUI / UX デザイナー┃グラフィックレコーディング / ビジュアルシンキング / ビジョンデザイン┃日本語 / 英語┃講演や会議のグラレコ / 大学や企業向け研修┃twitter @kubomi____

この記事が入っているマガジン

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。