00:00
[音楽]
こんにちは出口です
こんにちは本山です
「フィサイズFM」は本山と出口が最近気になっているサービスやデザイントピックスを取り上げて
のんびり話すポッドキャストです
よろしくお願いします
お願いします
本山さん最近なんか展示とかなんか行きました
美術館的なやつとかっていう話ですかね。
そう、そう、そう。
いや、なんか最近全然行ってないんだよね。
やっぱコロナになってから、あんま外出しないっていうのもあってさ、
あんま電車に乗りたくないのもあるし。
そう、だいたい都心じゃん、なんか。
まあ、そうですね、六本木とかね。
だから、そうそうそう。
あんまり行ってなかった。
行きたいなって思うやつ、いくつかあったりしたんだけど、
結局行ってないんだよね。
僕引っ越してから清澄白川なんですけど、今。
現代美術館が近くて、歩いて10分くらいで来るんですけど。
あーいいね。
で、なんか最近ライズマティクス展がやってたんで、
先々週ぐらいに行ったんですよ。
結構、なんか今もしかしたら混んでるかもしれないですけど、
その時は結構空いてて。
なんか前NFTの話したじゃないですか、いつかのエピソードで。
はい。
で、なんかそれを使った作品もなんか早速あったりとか。
へぇ~。
そう。あとなんか最近、あ、そのRizmatics店のなんかエントランスに、なんかまぁ、なんだろうな。
そのRizmaticsのロゴを使ったなんか作品が一個あったんですけど、
それを最近NFTでオークション形式で販売するっていうのをやってたりとか。
へぇ~。
それ実際には実販売してるわけじゃなくて
テストネットっていうなんかステージング環境みたいなところで販売してるんですけど
あとなんか面白かったのがなんかフェンシングのフェンシングあるじゃないですか
フェンシングの検索のトラッキングみたいなのやってるんですよねライザマが
でそれをいかになんかこう最初は失敗してたけど
いかに成功を持っていくかみたいな、そういうムービーが流れてて。
うーん。
最初は機械学習のこれを使ったけどうまくいかなくて、
最終的にこれを使ったら、
精度がこれぐらい向上してって言うような、そういうのも見せてくれてて、
それ結構個人的には面白かったですね。
いいですね。
Ryzoも確か、Perfumeとかもやってるんですよね。
そうそうそう、それもありました。
それもあったし、
あとなんか、あのー、
あの、なんて言ったらいいのかな、その、
Perfumeの振り付けやってる方の、なんか、ダンスチームみたいなのがあって、
03:03
なんかそこと一緒に、なんか、こう、テクノロジーも使った、そういうステージ、なんだろうな、
そうやってた、ライブやってたらしくて、
で、それをどうやって技術的にやってたのか、みたいな展示もあって、
実際なんかそのなんて説明口で説明すんな難しいんですけど
人はダンサーはいないんですけど
その舞台舞台照明とかその舞台装置だけが飾ったって
それが実際動く動いてるんですよ
でなんかなんかダンサーの人が箱に乗って
でその箱がなんかまあドローンみたいな感じで動くんですよね
でその箱がなんか4つぐらいあって
でその4つの箱がこうなんだろうな
意志持ってるみたいな感じで動くような スペース対応があって
それがずっと実演されてるみたいな
なかなかちょっと口では言いづらいですけど
なんかそういうのもあったり 面白かったですね
Riseまで
いいですね
たぶんゴールミックになると めっちゃこみそうな気がする
結構まだやってんだじゃん
たぶんまだ3月後半から始まったんで まだまだたぶんやると思います
6月20日までってなってるね
うん
だいぶまだ
ちょっと見に行きたいなこれ
よかったっすよ
家から近いのはいいなって
それいいですね
なんか結構
見たいやつって結構忘れるじゃないですか
見たいなと思ってたけど
もう終わってるみたいな
いやーこういう歩いて行ける距離にあるといいな
そうなんすよね
なんかフラット今日行くかーみたいな感じで
そうそうそう
それ結構引っ越して良かったことです
なるほどね いいね
今日の本題は?
今日は
ライゾマとは関係ないですけれども
うん
全然関係なくていいですよ
えーっと
今回ちょっと本読みまして
うんうん
オブジェクト思考UIデザイン
使いやすいソフトウェアの原理
ソシオメディアという会社が中心になって
上野さんという方がいるんですけど
ソシオメディアに
上野さんが中心になって多分書いている
オジェクト思考UIの本ですね
カバー表紙には銀の弾丸OOUIっていう
かなり挑発的な
挑発的なっていうか
大きく出たなっていう感じの
(笑)
奴が出てて、だいぶこう…ね
何なんですかね、これは
(笑)
僕なんかそんな…僕も読んでないんで
概要を教えてください
(笑)
06:00
銀の弾丸は、何の銀の弾丸かっていう話だと思うけど
若干言い過ぎな部分はあると思うんですけど
これがあればサービスが成功するわけじゃないです
全てのことが解決するわけじゃないと思うので
何の銀の弾丸かっていう部分があると思うんだけど
まあでも、そうだね、ざっくり思った感想としては
でもね、僕らとかって結構もう、なんだろう、そういうアプリだとか、普通のウェブサービスっていうのを、たくさん使ってるじゃないですか。
だからもう、だいたいね、そうなってるんですよ、基本的には。
オブジェクト指向UIっぽくなってるんですよ。ほとんどのサービスとかは。
もちろん、全部が全部そうなってるとは言えないんだけど、
なんか だいたいそういうふうになってて
で まあ 多分 普通のね これからデザイナーになるっていう
その学生の子とか 新卒の人とかも
普段から多分 スマートフォンアプリ いっぱい使ってると思うんで
それに習って作ってたら 大体それっぽい感じになってるんですよ
オブジェクト思考UIっぽい
ただ 多分 そこを オブジェクト思考UIだって思って
作ってはいないと思うんですよね
だから 別に読まなくてもいいってことはないかもしれないけど
なんだろう 多分 読んだほうがきちんとそういうことなのかっていうのを理解した上で
作っていけると思うんですよね だから そういう意味ではこういうおすすめなのかなって思いましたね
うん
なんだろう 簡単にオブジェクト思考 UI って何かって言ったら
うん
多分 基本的にはソフトウェアとか サービスとか
機械のシステムみたいな そういうものの デザインの話なんですよね
うんうんうん
まあ そのオブジェクト思考って 言ってるぐらいだから
実際のものと人の関係みたいなのを
こう なんだろう 抽象化してというか
うん
そこから考え出された思考というか 考え方みたいなものなので
だから別にコップと人の間に オブジェクト思考UIで考えるみたいなことは
ちょっとナンセンスっていうか 変な感じなんだよね
だってもうモノだから モノとして存在してる
どっちかっていうと 別に画面のインターフェースデザインっていう話には限らないんだけど
ソフトウェア的なデザインの話をベースに考えた方がいいかなと思いますね
オブジェクト思考UIっていうのは
うん
まあでもソフトウェアだからといって
必ずしも画面上のデザインの話だけではなくて
別に
09:00
例えば電子レンジとかも
ハードウェアではあるけど ソフトウェアで動いてる部分があるじゃないですか
はいはいはい
だからそこにも当てはまるっちゃ当てはまるのかな
もしかしたらね そういうことね なるほど
そうそうそう
でもね 本の中では基本的に画面のデザインの話がほとんどです
うんうんうんうん
で オブジェクト構成 UIって何かって言ったら
まあ、なんだろうね、簡単に言ったら、さっき言ったけど、その「ものを中心に考える」ってことなのかな。
「ものを中心に考える」っての変だな。
いや、言いたいことはわかるけど。
まあでもね、これ、一言でなかなか言い表せないんで、もうちょっと具体的に言っていくと、
一応原則みたいなものを 本の中で紹介してたんで
それを簡単に言うと
まず オブジェクトを知覚できて 直接的に働きかけられるみたいな
これなんだろう
もう分かりやすいのが PCのデスクトップとか見たら
多分分かると思うんですけど
今もそのデスクトップって 基本オブジェクト指向UIで考えられて作ってるんで
そのGUIとして
だからファイルとかホルダーっていう概念があって
そういうアイコンがあってっていうふうになってるじゃないですか
あれだからオブジェクトっていうものとして表現してるっていうことなんですよね
でそれをなんかクリックしたらなんか開くとかさ
そういうことですよね
それの逆が手続き的UIってやつですよね
そうですね
一応なんかタスク思考UIみたいな感じなの
マックとかで言うと上のメニューとか
そうそうそう
まあ完全手続き型とは言えないけど
まあでもなんかこう
まあでもあれか
ATMとかがいい例なのかな
まあそうですね
その手続き型って言ってるさっき言ってたやつもありますけど
そのだからオブジェクト指向UIの原則として
他にもだからそのまずオブジェクトを選択して
その後にアクションを選択するっていう
まあ操作の順序になっているかとか
っていうのもあるんですよね
さっきのMacの例で言ったら、アクションを選択してファイルをオープンするっていうのを選択して何をオープンするっていう風になってるから、それは逆のことになってる。
他にも原則としては、オブジェクト同士が互いに強調しながらUIを構成する。
これ何言ってるかっていうと、例えば、Finderとかって、例えば、カラムビューみたいなのがあったりするわけじゃないですか。
あれって回想構造っていうのを表してるわけですよね。
このフォルダの中にこれがあって、さらにそのフォルダの中にこれがあるみたいな一覧を表示するっていう。
オブジェクトの並びによってそれを表してるわけですよね。
12:03
っていう事とか、あと例えばドラッグ&ドロップも同じような事なんじゃないかなと思うんですけど、
ドラッグ&ドロップしたらこのフォルダに入るとか、オブジェクト同士が採用するみたいな。
ドラッグ&ドロップで言うと、オブジェクトっていうのはファイルと何になるんですか?
あ、フォルダってこと?
ファイルとフォルダーとなりますね。
なるほどなるほど。
もしかしたらファイル同士ってこともあるかもしれないし、ファイルとアプリケーションみたいなこともあるかもしれない。
そういうものがオブジェクト指向UIだっていうふうに書いてるんですけど、
うんうん
まあでも大体のものって今は特にアイフォンとかスマートフォンのアプリケーションって画面が小さくて
まあこうやれることが少ないっていうのもあるから
でデザインガイドラインとかそういうのに乗っ取って作ってるとほぼほぼオブジェクト指向UIっぽい感じになってるんですよね
まあそうですよね
なんかその辺はAppleが頑張ってくれたというか
HIMAインターフェクトガイドラインとかがねそうしてくれてるというか
そうね
たまにすごい変なやつとかもあるけどね もちろん 変なアプリとかも
でも大体のいいものだって言われてるような アプリとかは
基本的にオブジェクト志向っぽい UI になってるかなってふうに思いますね
なんか iOS の場合は 暇に対応するガードラインがあって
その上にアップキットとか、なんか、
UIキットとかがあって、っていうような、なんていうか、
思想もそうだし、その実装もなんか、
フレームワークがちゃんと準備されてるじゃないですか。
だから多分そこを一脱した、実装する方がコストが高いっていうか。
うん、そうね。
で、ただなんかそこになんかこう、なんていうんですかね、
React Nativeとか、なんかZamarinとか、
なんかそういう独自のフレームワークを持ち込んだりすると
なんかその原則から逸脱、良くも悪くもしやすかったりするっていうケースもあるかなっていう
なんかそれを見てて思ったのはやっぱここは
接触確認アプリか
接触確認アプリ
うん
うん
なんか結構これ手続き型UIっぽい感じだなと思って例として
まあ そもそも UI が そこまで 必要なものではないとは思うんですけど
本の構成としてね
ボリューム的に 本の半分ぐらいが ワークアウトっていって
なんか 練習問題みたいなものになってるんですよ
なんか このオブジェクト推し UI デザインっていう本は
で まあ そのなんか
練習問題兼 こういう場合どうするっていう事例集みたいな
そういう感じになってて
だから これを見てっていうのもあるんですけど
15:04
なんかその前に一応どういう風に設計していくかっていう部分もあるから
一応こういうのを読んでいくと
オブジェクト思考っぽく考えられていくんじゃないかなっていう部分は
あるかもしれないですね その接触確認アプリも
まあ一概にでもこの本でもその atm atm って なんかそこまでなんかオブジェクト思考である必要性がないっていう場合もあって
うーんその例えばオブジェクトがもう決まっ 決まりきっているとかね
ん なんだろうお金を取り扱うものだからお金は決まっている
その後どうするっていうだけしかないっていうんだったら、別にそこまでオブジェクト思考にこだわらなくてもいいみたいな、
いうようなことも確かに書いてあった気がする。
あ、そうなんだ。なるほどね。
まあでもさっき言ってたそのタスク思考的なもの、手続き型っていうようなものの例っていうのを、じゃあ他にも挙げられるかって考えた時に、
結構 その有名というか 一般的になってしまっているんだけど
なんか有名な例っていうのがあって
あの 自動販売機とかだいたいそうなんですよね
確かに
最近では逆のやつもあるんですけど 自動販売機って基本的になんかお金をまず入れるじゃないですか
お金を入れて商品を選ぶっていう
要は、購入するっていうアクションをしてから、何をっていうのを選ぶっていう。
アクションとオブジェクトが、アクション・オブジェクトっていう順番になってるんですよね。
でも最近は、スイカで使うっていうのもあって、
オブジェクトを選んでから、何を飲みたいか選んでから支払うっていうのもよくあると思いますけどね。
でも、自販機って一般的に昔から購入してから、お金払ってから、
っていうふうになってて あれはまあ手続き型の割とわかりやすい例っていうか
でねまあなんかねこれ まあいろいろ書いてあったんですけど
なんかねまあ僕が最終的に思ったというか 面白いなと思ったのはねぇ
そうなんかこう結局このオブジェクト思考UIっていうのは何かって考えた時に
人に死体を取り戻そうっていう考え方なのかなって思ったんですよね
なるほどね
オブジェクト思考なんだけど、物を中心じゃなくてもちろん人を中心に考えるっていうものであって
よくあるHCDみたいな、Human Center Designみたいなが
ユーザーに寄り添ったデザインだと言われるけど、
本当の人間を主体にして考えたものは、
18:01
ユーザーが自由に使えることができるというふうにも
捉えられるんじゃないかと書いてあって、
ナイフって結構抽象的な道具とも取れるんだけど、
ナイフってさ、結構抽象的な道具とも取れるんですよね。
確かに。
ナイフって、切ることもできるし、削ったりとか、例えば皮を剥いたりとか、いろいろな使い方ができるじゃないですか。
すごい中傷度が高い道具とも言えるんだけど
あれっていうのは だから ある程度握りやすいとかっていうさ
ユーザーに合わせた部分もあるけど
ユーザーがどういう風に使うかっていうのを選択したりとか
自らそれをどういう風に使っていくのかっていうのを
合わせることができるデザインにもなってるのは言えるんですよね
そうですね
これってだから オブジェクト思考の考え方にすごく近くて
オブジェクトがあって じゃあ どういうふうにアクションするっていうのは
後から選択できるんですよね
この本にも書いてあるんですけど
そのオブジェクト思考UIを考えていくにあたって
いくつかやり方みたいなステップとか いろいろ書いてあるんですけど
その中で 一貫して作用する原理
ルールっていうのを備えるっていうか 考えるみたいなっていうふうにがあってですね
そのオブジェクト自身の 一貫性ってことですか?
全体と言ってもいいのかもしれないですね
オブジェクトがどういうアクションができるかというのも含めて
どういう状態なのかとか
このオブジェクトとこのオブジェクト同士がどういうふうに採用するのかというのも含めて
ルールみたいな
多分それがシンプルに作れると
非常に人間にとってわかりやすくて
使いやすいもの
ユーザー自身が考えて 使えるようになるものに
なり得るんじゃないかなって 確か書いてあった気がするかな
要はアプリケーションがあったとして
ユーザーをこういうふうに使うよねっていう 決まりきったストーリーみたいなのを提供して
使っていくものじゃなくて
ユーザーがこれをどういうふうに使ったらいいっていうのが 分かりやすく理解できて
使えるっていう状態の方が いいんじゃないのっていう事ですね
そういうふうな場合は簡単に理解してもらえるルールっていうのと
オブジェクト、操作できる対象っていうのを与えると
いいんじゃないのかっていう考え方ですね
うん、うんうんうん
それがまさにオブジェクト指向UIっていう感じ
うんうんうん
なるほどな
なんかでもね、それ読んでて結構ね、今回っていうか
あんまり僕、最初に書いてある、 本の最初に書いてある、なんていうのあれ?
21:01
「はじめに」みたいな、あるじゃないですか。
あれ、結構僕、 結構読み飛ばすこと多いんですけど、
今回ちゃんと読んだんですよ。
ちゃんと読んで、なんだろう、 まあ、ふーんって思って読んだんですけど、
あとあと、これ、あーっと思ったところがあって、
その部分が、人っていうのは道具を作った、動物ではあるんだけど、
人と道具っていうのは、ともに進化し合っていくっていうものでもあるっていう話をしていて、
これなんか、前僕ディスポット制約のデザインみたいな話した時に、
デザインとか制約によって人の行動とか考え方を変えたり変わったりするみたいな話をしてたと思うんですけど
割とそれに近い話で
人はこれが欲しいと思ってナイフ的なものを使ったとして
でもこれなんかあの動物狩る時にも使えるじゃんみたいな感じで
違う使い方を生み出して
「でも動物飼う時だったら もっと絵が長い方がいいな」みたいなさ
その人と動物ってなんかこう
常に一気にできてるものじゃなくて
なんかこう 一緒に進化していくっていう
そういうものなんだよっていうのを言っていて
これなんかアラン・ケイって 結構有名な人いるじゃないですか
アラン・ケイっていう人が 『ユーザー・インターフェース』っていう本の中で
人間は道具を作った動物であるが、道具の使い方を学ぶことが私たち自身を変えるという点に、
道具と人間の本質があることを意味しているっていうのを言っていて、
これだなぁと思ったんですよね。
確かに。
確かに。
なんか言語家がすごいですね、上手いっていうか。
なんか感覚的にはなんかそういうのよくあるっていうか、そういうの目指したいなぁと思うというか、
なんていうか、多分手続き型UIにしちゃうと、
なんかもうユーザー、まずUIをこう生み出してるのは僕ら開発者じゃないですか。
で、手続き型UIにしてしまうと、なんかその開発者が考えた通りにしかユーザー使えないわけじゃないですか。
そうそうそうそう。
そこにキャップが生まれちゃうわけだけど、
やっぱりサービスとして美しいというか、
目指したいのは、ユーザー、開発者も思ってないような使い方、
いい方向で、ユーザーが学んで生み出してくれるような感じがいいなと思うんですよ。
そうそうそう。
24:00
これなんか今までそういう成功してきたサービスだとか
なんかそういうものにも結構そういうのよくあるじゃないですか
ありますよね
例えばなんだろうマイクラとかさ
うん
もうなんだろう
なんか多分思ってもない使い方してる人もいると思うんだよね
確かにねマイクラとかまさになんだろう
あの箱一つ一つがオブジェクトで
そのオブジェクト自身にスイッチとかオンオフできるとか
他のブロックと作用して他のブロックを吸着するとか
そういう性質が備わっていて
それを組み合わせて人によっては
原始的な回路を作っちゃうとか
電卓を作っちゃうとか
そうそうあれもさ最初から全部あったわけじゃなくて
なんかそういうのをなんかちょっとしたツイッチっぽいなんかブロック1個用意してあげたらなんか面白いことやり始めたから
なんかこういう方向性もあるんだっていうのに気づいてなんかそっちの方向にもちょっとアップデートしていくみたいなそういうことに似てるよね
あとなんかツイッターもさ そうじゃないですか
昔ってかなり原始的なサービスだったんだけど
その返信…リプライは確かあったのかな? メンションあったのか?
なんかリプライも割と原始的な感じだったんだけど
その辺を強化してたりとか
リツイートとかも最初はなかったんだけど
そういうことをやるユーザーがいるから それに合わせて進化していったみたいな
ハッシュタグもそうじゃなかったっけ?確か
うん そうですね
たぶんそこから今トレンドとかね そういうのに発展しているし
やっぱり人と道具っていうのが 共に進化していくっていうのが
オブジェクト思考UIの考えている 源流というか思想の中心にあるのかなっていうふうに思ったんですよね
なんか今 Facebookみたいなそのフィードに何か投稿が流れてくるようなものを作ってたんですよね 仕事でアプリを
で、よくあるのがそれをコピーする 一つ一つの投稿をコピーするっていうような
うん
あの、コピーをできるようにするっていうのが 毎回大台としてあって
で、ただちょっと実装的にまあ色々なんか 色々な事情があって
普通にあの iOS っぽくドラッグして コピーするっていうことが
まあちょっと難しい事情が 実装的にありそうだって話があって
うん
うん
だから単に iOS 的なコピーの挙動を実装する、
それでも頑張って実装するのか、
あるいはそもそもコピーができなかった、
何でコピーできるにしたいかといえば、
ユーザー自身が同じ投稿を複製して投稿したいみたいなニーズがあると。
だったら実装問題でそれが難しいのであれば、
複製する機能としてメニューに、
例えば投稿物をロングタップしてアクションシートで複製するみたいなのが出てきて、
27:04
それを押すと複製できるようにするみたいな。
そういうタイヤもありじゃないかみたいな話をしてて。
ただそれ、後者の方は手続き家というUIで、
ロングタップして選択してコピーするっていうiOSの標準の挙動は、
どちらかというとオブジェクト的だと思うんですよ。
結論としては、頑張って前者の方を、実装問題もありつつも、ちゃんと提供しようという風になったんですけど、
やっぱりそれって後者の方の複製するという機能を提供しちゃうと、それでしか適用できない、そのユースケースでしか。
例えば僕らのアプリなどでコピーしたものをLINEに貼り付けるとか、そういったことができなくなってしまうから、
だからそれって可能性を狭めちゃうというかってことだし
なるほどね
あと僕らの都合で言えば各ユースケースごとに機能を作らなきゃいけなくなっちゃう
例えばアプリ以外にコピーしたいときにはそれ専用の機能をつけなきゃいけなくなるとかもしかしたらあったりとか
だからその使い方に可能性の幅を持たせるってことは
将来的に僕ら開発者自身の作るものも少なくできるというか
っていうのはあるなっていうのを最近ちょうど話してて思い出しました
なるほどね
他にはサービス開発でこれに似たことというか
ツイッターもそうだと思うんですけど、サービスを作ってて、自分たちが思ってない使い方をし始めた時が、一番楽しくて。
うん、わかる。
そういう使い方するんだみたいな。前もそういう話は出口君としたかなと思うんですけど。
僕はホワイトボードアプリという、ちょっとしたスケッチができるアプリを、iPad用のアプリを作っているんですけど。
ダークモードを提供してたんですよね。
で、ダークモード提供してるんですけど、ペンの色まで反転しちゃうと変な感じになっちゃうから、キャンバスのダークモードというか、キャンバスは別にしたんですよ。
普通のアプリケーションの中のダークモードとキャンバス、その各部分ですね。
普通は白いところに描くじゃないですか
白いところに描くんで、ダークモードにしても、白いところに描いてるのは変わらないようにしたんですよ
ただそれでも、描くところもダークモードにしたいっていう人もいるかもしれないと思ったんで
30:08
キャンバス側のダークモードというか、背景を暗くするっていうことですよね
背景を暗い背景で描くっていうモードも提供し別の設定で提供したんですよ
でまぁその理由としてはまあ単純にその後でそのダークモードかどうかによってその書いたペンのデータっていうかそれを反転すると変な感じになっちゃったりするからそこを変えたくなかったんですよね
色とかを だからそうしたんですけど
なんかまあそれぐらいのものとしてだからダークモード用に背景暗くする
なんか 設定入れたぐらいの気持ちで入れてたんですけど
なんか それを応用して
そのなんだろう ミーティングとかで
まあ その使ってくれてたんですよね
そのスケッチアプリを メモとして メモ書きとして
で こう 白い背景で黒い文字で書くと
隣からも見えちゃうじゃないですか
まあ だいたい ちょっとチラッと見れば
何書いてるのかなって
ああ はいはい
見えちゃうんですけど
その背景を暗くする、背景暗くしてもその黒い文字が若干見えるんですよ、薄っすら。
なるほどね。
その若干明度が違うんで。
まあそういう風に、そういう風に設計してたんですけど、
だからそれを使って、背景暗くして、その黒い文字で書くことによって、
ははは、面白いですね。
その隣から見られないんだけど、後で、後で背景を白に変えることで普通に戻るっていう。
へぇー、面白い。
謎の横から見られない機能を実現してたんですよ。
へー面白い。
それは全然僕が思ってなかった使い方だったんで、非常にテンションが上がりました。
それがさっき言ってた人と道具が一緒に進化していっているという瞬間だなというふうに感じて。
確かにね、面白いですね。
道具によって人が進化 それのルールに合わせて コードを変えて進化していくっていう
もしその使い方にめちゃくちゃニーズがあったりとか 熱量が高ければ さらにそれをやりやすくするような
進化させてあげてたりできますもんね 改善
その道具の方がまた進化するっていう可能性があるわけですよ
結構 だから そういうようなことが 割と書いてあって
そのオブジェクト思考以外の本
なんか あんまり違うんじゃないかって 思うかもしれないですけど
割と そういうような考え方というか
そういうようなことが書いてあって
その後は だんだんどういうふうに 具体的に作っていくかっていう話になっていくんですけど
そこはね
やっぱりオブジェクト思考って もともとプログラミングの方が先なんですよね
33:02
そうです
プロジェクト思考っていう考え方自体は 別にプログラミングから生まれたものじゃないと思うんですけど
先に適応されたのが そのプログラミングの方なんですよね
だからやっぱりね 結構 内容的にもそれに近いような
なんか逃集してるような内容の書き方な感じがありましたね
別に これ オブジェクト思考っていうわけでもないのかもしれないけど
MVCモデルみたいなのがあるじゃないですか モデルビューコントローラーみたいな
ああいうような部分を踏襲してる ソフトウェアデザインのレイヤーっていう部分だったかな
元々 オブジェクト思考自体を アラン・Kが踏み出した…じゃなかったっけ?
確か
あ そうですね
それをプログラミング言語とかに適用したっていうのが 先にあったというか
うん
まあでも実際にじゃあどうやっていこうかって部分で確かね
まあそのモデルビューコントローラー モデルコントローラビューって言った方がいいのかな
で、モデルはそのままモデルだったかな
これでもあんまり変わらなくてそのプログラミングのほうの
まあ要はなんか定義というんですかね
オブジェクトの定義というか属性だとか
そういうものの定義の整理をするみたいな話だったかな
コントローラーに当たるのがインタラクションって言ってるけど、これはどういう機能とか関係性があるのか、そのオブジェクトが。
なるほど。
っていう話かな。
最後にビューに当たるプレゼンテーションってこれで言ってるけど、スタイルとかレイアウトの話が。
そういう順番で考えるよねっていう話をしていて、
具体的にね、本の中で紹介してたのは、実際にやる要件というか、
そういうのを例えば書き出して、名簿を見るとか、学生の名簿を見るとか、学生の属性を知るみたいな。
これ学校名簿アプリケーションの場合みたいなので例は書いてあったんですけど、
それを書き出して、それを名刺を抽出するところから始めるみたいな。
これオブジェクトが何かというのを特定しようとしてるんですよね。
なるほどね。
生徒っていうのは オブジェクトになり得るなみたいなとか
その後にそれらがどういうふうに 関係していくのかっていうのを図示していくみたいな
なるほどね
さらにどう機能とか属性として 整理できるかっていうの
この辺になってくると多分 コントローラーに当たるインタラクションの部分に入ってくるのかな
これでもあれですね 今 画面表示してもらっている整理のための図を見てると
これってなんかもう、UMLってあるじゃないですか。
なんか、モデリングをするための、どっちかと言えばソフトウェア工学寄りのものなのかな、道具なのかな。
36:03
それを、まあ多分使ってるんですよね、きっと。
その制御のために。
だから結構、そのいうソフトウェア工学的な部分が、
この本の中ではすごく 踏襲されているなという印象でしたね
これ結構こういう概念図というか サービスの全体の概念図というか
普段から毎回これ書いてるわけじゃないですけど
割と複雑になってきたら結構書いて考えることがよくあって
自然とやってたんだなと思いましたね
わかる。僕もなんかよくやるのが、37signals 今のベースキャンプの人が確かそういう、なんだったっけなぁ。
クックパッドの人でよくやってる人いたけど、なんかユーザーの行動と、それで起きる状態をなんかこう分けて書くみたいな、
そういうMLA的なものが確か37 Signals初で何かあってそういうのが
それを使ったりしてますね
ちょっと名前が今パッと出せないけど
あ、UIフローか
ああはいはいはい
だからなんか意外と結構こういうのって自然とやってるんだけど
改めて言われてそういうことなのかって思うところは結構ありましたね
うん、確かに。
そういう風に考えてたんだなっていうのが、改めて気づかされた部分というか。
うんうんうんうん。
あれですね、僕特にエンジニアから、
エンジニア、もともと最初エンジニアからキャリア始めたから、
なんかこう、結構自然だなって思いますね。
やっぱり考え方として、
なんか自然にやってたことをうまく言語化してもらえてる感じ。
うん そうね 僕も割と 最初 僕もデザイナーじゃなくて ほぼほぼエンジニアからスタートしてたから
割とそういう オブジェクト思考の プログラミングの勉強とかもしてて
デザインとか始めてるので また戻ってきたなっていう感じがしましたね
私なんかこう
まあ意識せずとも無意識だろうと
なんかこうUI的な考え方でデザインされた
UIって実装的にもしやすいと思うんですよね
あ そうですね
やっぱそこは逸脱してるものって
実装的にもちょっと無理しなきゃいけなかったりとか
うん
まあその無理が必要な場合もあるんですけど
必要ない場合もあったりして
で そん時ってたぶん
デザインの方をむしろ考え直した方がいいんじゃないか とかっていう場合があるなと思ってて
39:03
そうね
だから僕結構なんかUI考えるときって
むしろ実装する時はどうするかなみたいな シミュレーションをしながらやったり
まあ無意識にしてるんですけど
なんかそれってまあ大UI的な考え方なのかなって 聞いてて思いましたね
そうね
あと面白かったのが、同じようにどういう風に設計してるかっていうプロセスの中で、
なんかね、これ別にオブジェクト思考っていうことじゃないなって思ったところがあって、
上野さんがね、前ねツイッター外でつぶやいてたんですけど、実は。
っていうか上野さんよくOUIの話をつぶやいてたりするんで、
僕も見てますよ。
それが盛り込まれてる感じはするんですけど、全体的に。
デザイナーのアブダクションっていう説があってですね。
知ってる。
アブダクションって何かっていうと、要は、これウィキペディアを引用すると、
個別の事象を最も適切に説明し得る仮説を導出する論理的推論っていう、ちょっと難しいけど、
要は、どういう順序で考えたのか、みたいなことなのかな。
デザイナーのアブダクトションってどういう事かっていうと、どうやってデザインを考えるかの話であって、
これ別にOUIはそんなに関係ないと思うんですけど、
優れたデザイナーは中小から段階的に選択して最終的に具体に到達するんじゃなくて
一気に最もらしい具象を掴んでそこから最初の中小へとリバースエンジニアリングして
パスを通すというようなことを言ってるんですよね
これはスタートとゴールが最初と最後にあるんで
もちろん最後にいきなり完成形が いきなりバーンとできるわけじゃないと思うんですけど
プロトタイピング的な話に近い部分もありますよね
まずは当たりをしていくっていうか
当たりを作ってその後にちょっとあれ やっぱここでも通り詰まらないなみたいなので
ちょっと変えていくみたいな そういう作業みたいなことですよね
これ なんか この言語化できるのすごいなぁと思って
なんかこのツイートすごい好きだったですね
でもなんかやっぱ無意識にやりますよね これは
経験がある人ほど やっぱその引き出しが多いので
まぁ大体こういうのだったら こういうパターンに当てはめればうまくいくだろうっていう
なんとなくの感が働くんですよね
だから、まず、大体そういうものを作っちゃおうっていう風に作って、その上で細かい部分をチェックしていくというか、
42:01
やっぱりでも、この形だとうまく当てはまらないから若干変えなきゃいけないなっていうのを微調整していくっていうような。
そういう感じですよね、イメージとしては。
アブダクションね。
なんかでも、急にこの話がOUIのコードに入ってきてて、これ別にOUIじゃないし、今までむしろ逆にちゃんと積み上げていくみたいな。
これ、もともとの、どっちかっていうと、これってさっき言ってたのは、どういう風に概念的な部分から設計していくかっていう部分だったから、ちゃんと根元の部分をしっかり、土台がないと難しいよねっていう部分だと思うんですけど、
でも言っても中小から段階的に作っていくっていう話をしてたのに
いきなりこれが放り込まれて
でも優れたデザイナーは最初にバーンって作っちゃうんだみたいな話を
いきなり書いてるから「おお」って思って
でもそれはなんか
若干面白かったけどね
それが言いたかったことなんじゃないですか?きっと
でも実際そうだと思うし
「おおいう間」って積み上げてるだけでそれが正解かというとそうじゃないし
そうそうそういうことねでさあさっきもだからそのなんか一応モデルとかそのインタラクションプレゼンテーションっていう mvc の話したんですけどなんか本の中では別に何かどっから作ってもいいみたいなことを書いてて
まあそれを正当化しているっていうことなのかもしれんですねこのデザイナーのアブダクションっていうところで でもまあそれはそうじゃないですかなんか
人によって得意なMVCのビューから考える方が やっぱりやりやすいって人もいれば
モデルから考えるっていう人もいるだろうし
インタラクションが先に来るって人もいるかもしれないし
なんかでも面白かったの いきなりこれが出てくるから どうしたどうしたと思って
僕特に、その、多分本山さんってあんま他のデザイナーとそんな仕事する機会って少なくないですか?
まあ多くはないですね
UIデザイン、UIデザインって意味では
多くはないですね
で僕、エンジニアとして、その本山さんとも一緒に仕事したりとか、他の人とも仕事してて
なんかやっぱそこをデザイナーによってちょっと癖があるなと思うことがありますね
もとやまさんだと、なんか、すごくエンジニアリング的な考えをするから、
なんか、すごいやりやすいんですよ、その、なんだろうな。
その仕事の進め方的な意味でも近いから。
で、逆になんかこう、そのMBCで言えば、ビューから入る人とかだと、
なんか結構、現状とのギャップがある提案をしてくる、してきて、
その実現は大変なんだけど、
ちゃんとよくよくアブダクションして考えていくと、まあ筋が通ってるなあみたいな。
うーん。
まあ、今一生仕事してる人だとフィラースさんとかがそうなんですけど。
45:02
はいはいはい。
まあ、なんかそういうのを感覚的にやれちゃう人とかもいるのかもしれないですね。
そうそうそうそう。
まあ、それは人それぞれっていうことなのかなあ。
そう、だから別にそれは全然よしやしではないんだけ、
じゃなくて、なんか個性だから面白いなと思うんですけど。
なるほどね
あんまりオブジェクト思考なのかっていう話になってきちゃったけど
そうですね
でもね、この本の最後の章がまた面白くてですね
3章までがどうやって設計して作っていくかっていう話なんですけど
4章、5章がワーカウトっていう問題集というか実例集みたいなやつで
最後がオブジェクト思考UIのフィロソフィーっていう
またなんか面白い章になっていて
そもそもオブジェクトとは何かみたいなとか
オブジェクト思考の歴史みたいなところが
GUIの歴史みたいな
これGUIの歴史って言ってるけど
コンピューターの歴史にもかなり近い話が結構書いてありましたね
なんかだからあの有名な人だとダグラスエンゲルバートとか
バネバーブッシュとかアランケイとかそういう話が結構いっぱい書いてありましたね
なのでここもね結構普通に面白いと思いますねあんまり若い人でどれぐらい知ってるのかわかんないですけど
この辺もね読むとすごい面白いんじゃないかなと思いますねどういう経緯でなんか出来てきたのかとか
確かに 個人的にはその6章の歴史が一番先に読みたいなってなりました
まあ面白いと そんなにすごい細かく書いてるわけじゃないけど サクっと読めて面白い感じでしたね
オブジェクト思考とかの考え方の歴史というか もともとみたいなところもあったりしたから
イデアロンとか書いてあるけど
なんかまずはイデアロンから始まってんだみたいな書いてあって面白い
これ確かにクラストインスタンスの話だったかな
その経緯から確かそういう話も書いてあった気がするな
あとよくモードレスっていう話がよくあるけど
それの話も書いてあって
これも面白かったかな
オブジェクト思考はユーザーをモードから解放するって言っていて
アップルのHuman Interface Guidelineでも 一時期モードレスであれみたいなことが書いてあったんですよね 確か
うん
なんかユーザーは 彼らにコントロール権を与えるアプリを好んで
彼らから頻繁にコントロール権を奪うアプリを嫌う
ユーザーからコントロール権を奪う最も一般的な方法は
ユーザーに特定の進路を共有するモードを濫用することだっていう
うん
いわゆるモーダルをいっぱい使うなっていう話だったりとかすると思うんだけど
48:04
なんかそうっすよね
OUI的なことを意識しなくても自然とできるようになってきたけど
でもやっぱその中でも
Modalなものは全然占用できちゃうというか
そうそうそう まぁ未だに残ってる部分もあるしね
僕も若干ね
最近作ってるやつでModalにしてるなっていうのをね
帰り見たんだよね だからこれ読んでて
例えばモーダルウィンドウで 削除とコンファームを出すっていうのがよくあるじゃないですか
はいはいはい
あれも一種のモーダルなんですよね
モーダル何かって言ったら そのモードに入ったら
そのモードが終了するまで他の操作ができない っていうようなことをよくモーダルって言うんですけど
だからこの場合 削除の場合だったら 削除するか いや削除しないっていうキャンセルを選ぶかっていうのをしつつまで
他の操作ができないっていうことになるから モーダルになるんですよね
モードっていう状態に入ってるっていう
でもこれって
別にモーダルウィンドウ出さなくても
削除・コンファームはできるんじゃないの?
っていうのを言っていて
例えばiPhoneとかだと
リストで削除とかってできるんだけど
あれって別に
一応一気に削除できないように
例えばスワイプして削除ボタンを押すみたいな
ことをしてて
あれも一応コンファームにはなってるけど
別にモードに入ってないんだよね
他の操作もできるから
っていう、なんかそういう、なんかモードに入らなくてもそういうことができるんじゃないのっていうのを
確か、例として書いてあった気がするな
僕もなんか最近作ってるんですけど、確か、削除コンファーモーダルウィンドウを作った気がするから
これモーダルになってたわと思って
やべやべ、ベッジ持っとけと
いやでもやりがちですよね、なんていうか
気軽にアクションシート使っちゃったりとか
うん、うん
なので そういうところも意外と だから あんまりオブジェクト思考 UI って考えてないというか
あんまり知らずに使ってたりとか 作ってたりすることがよくあるんだけど
よりよく本を読んで知っていくと もうちょっと考えられるんじゃないの?
というふうに思うようなところは 結構ありましたね 本を読んで
うん
歴史の部分はちょっと いいですね 読みたいなと思いました
そうね
まあ有名どころがいっぱい出てくるんで まあこれ読んでその有名どころの本とかを
また読んでいくとまあ面白いかもしれないね
確かに
あとね結構その上野さんが講演とかもしてるんで 記事もいっぱい書いてるんですよね
そのtwitterでつべいてるだけじゃなくて
でね、僕が見つけた OUI の目当てっていう ソシオメディアのブログなんですけど
うん
ここにね
51:01
その本で書いてある1/3 くらい 書いてあるんじゃないかなってくらい書いてある
(笑)
書いてあって
(笑)
これ読むだけでもね だいぶ面白いと思う
うん
オブジェクトとは何かみたいなのが 書いてあったりとか
うん
割とこの本に書いてある内容をなんかこうつまんでここに書いてる。
まあ逆だと思うんですけどね。
ここに書いてるやつを引用してその本にしたんだと思うんだけど。
うんうんうん。
ああ、このお話とかで聞いたことあるな。
技術は人間によって発明されたのでない。
むしろ逆だっていう。
まあこれもさっきの僕が道具と人と道具が一緒に進化していくって話のところですね。
うんうんうん。
とか色々書いてある このブログね結構ボリュームあるんですけど この記事
まあでもこれ読むだけでもだいぶ面白いかなと思いますね これもあのショーノートに url を貼っておこうと思うのでよかったな
読むと面白いかもしれないな 本を書く本も読んだ方がいいかもしれないですけど
これだけでもね全然十分いいかなっていう っていう
銀の弾丸だったんでしょうか
でもあれですね、やっぱ自然にやってることを
改めて言語化してもらっているというか
むしろなんか僕らが、なんだろう、世代的に後の世代だから
自然にやれるようになったというか
そうだね
なんかそれが当たり前になっているっていうのが素晴らしいのかもしれないですね
仕事をし始めた時からiOSあったしな、僕とかも
まあ それ 言い 始め たら ね 僕 が 生まれ た 時 から もう コンピューター って いう の あっ た から ね
いや そう です よ なん か それ 前 の 人 が なん か そう いう の がんばっ て
積み上げ て き て くれ た から 生まれ た 時 に は マウス が あっ て さ GUI が ある ん です よ
そう です よ ね
そう な ん です よ ね
もう その 時 に は もう この 考え 方 って いう の は 生まれ て い て
それ に もう
なんか 乗っ取っ て 作ら れ 始め て い た わけ だ から それ は すごい
すごい こと だ ね
そうですよね
この4章5章は演習みたいな感じなんですね
そうですね演習みたいな感じでこの場合はどういうふうに考えるっていう
なんかヒントとか解説みたいなのが載ってるんで
まあだから普通にやってみるのも面白いと思いましたよ
僕もなんかちょっと読んだりとかやってみたいとかしたけど
なんか確かあれですよね ソシオメディアで研修とかもやってますよね こういうOUIワークショップみたいなやつとかも
ずっとちょっとつんどくし続けてるんで そろそろ手に取ろうかなと思いました
なんかさ 最初の方も言ったけど 結構なんだろう
今時 特にスマートフォンのアプリケーションって 画面が制限されてるから
54:03
画面内に収めるものが もう いっぱいって難しいじゃないですか
色んなボタンをいっぱいっていうのは できないから
画面のデザインって 今までのアプリケーションを使った経験とかで
軽く同じような感じで デザインってできちゃうんだけど
意外とその理由っていうか
そういうのがちゃんと考えられてないっていう人もいるんじゃないかなと思っていて
いやー なんか
なんでそうしてるのかっていうのを
わかる
なんかウェブの方、ウェブのそういう UI の方が難しくないですか?
なんか
うんうんうん
アプリに比べると
なんていうか
いや会社、前の会社とかでもなんかこう
まあ新卒のデザイナーの子で特にグラフィック寄りの子が入ってきた時に
うん
初めてUIデザインチャレンジするときに
やっぱウェブの方が難易度が高いというか
色んなことができすぎちゃう
もちろんモバイルiOSとかの方が
土台がしっかりしてるから
考えるべきことが少ないというか
画面小さいのがでかいと思いますよ
それは画面が小さいっていう制約があるので
デザインパターンがもう ある程度限られてるというか
もちろん新しく生み出せないことはないと思うんですけど
それが一番大きいと思いますね
今まであるパターンで大体作れてしまうっていう
そうですよね
ウェブの方は画面大きいから色々できるんだけど
別にiPhoneと同じ考え方で
シンプルにしようと思えばシンプルにできるんですよ
画面全部使わなくていいわけだから
別にね
だけど、まあ、なんかこう
色々できすぎてしまうから
なんか難しく考えてしまう
っていうのがあるかもしれないね
うん
なんかちょっとなんか
新卒の人とかインターンの人とかが
来たときに、こう
なかなかWebについて
教えるの大変だなって思うことが
あと実装的にも結構色々考えることが
Webの方が多かったりするじゃないですか
するじゃないですか。
ブラウザハブが変わるとかね。
まあでも、なんだろうね、
ウェブにしてもボバイルアプリケーションにしても、
例えばデザインパターンの引き出しをいっぱい持っておくっていうのは
すごく重要だと思いますけどね。
そうですね。
僕もなんか、よくピンタリストとか見てるもんね。
アイデア、デザインパターンのレイアウトアイデアみたいな感じで
ピンタリスト見たりとかもするからね やっぱり
僕もモバイルのギャラリーサイトとか よく見てますね
そういう引き出しを増やしていくっていうのは 重要 一つ重要だよね
もちろんそれを真似するだけじゃダメだと思うけど
57:01
新しいものを触ってみるっていうのは 大事ですよね
っていうオブジェクト指向 UI 銀の弾丸でした
銀の弾丸がどうしても僕が気になってしまう
たぶんね 冒頭の部分の話は なかなか声では伝わらなかったかもしれないです
どういうこと どういうこと
オブジェクトとはとか そんなへんの話が なかなか声だと伝わりづらい
オブジェクトとは まあね
上野さんのブログを見てもらうの早いかもしれないですね
そうですね
上野さんのブログを見るとかなりオブジェクトとはやばいんで
やばい、なかなか難しい漢字で書いてあるんで
何言ってるんだ、コイツって思ってたけど
オブジェクトとはの深さがすごいです
まずオブジェクトっていう単語を分解してオブとジェクトに分けるみたいな
本当にそこから5言から書いてるからさ
面白いんだけどね
まあまあ 読んでみてください
というところで
今日はこんなところで
リサイズヘムへのご質問やご感想は
#リサイズヘムでTwitterにつぶやいてください
お願いします
リサイズヘムは毎週金曜日に配信しています
Spotify iTunesのPodcast Google Podcast YouTubeでも配信していますので
よかったらチェックしてみてください。
ということで今回はここまで。また次回お会いしましょう。さようなら~
さようなら~
♪~
