00:06
はい、4月25日、火曜日ですね。 遅刻は朝9時12分になりました。
今日もなんか暑くなりそうな1日ですね。 これは見た感じです。
はい、おはようございまーす。みなみのkeeth、くわはらです。
ではでは、本日も朝活を集めていきたいと思います。
すいません、昨日はですね、完全に他の作業をしてたら時間が完全に過ぎてしまってですね、
今日はしっかりやっていきたいと思いますが、
今日は前回の引き続きですね。
まあ、クリエイティブコーディングをされている方のブログになるんですけども、
On Prototypingという記事ですね、今回は読んでいこうかなと思っております。
前回がDrawing with Codeでしたね。
これもすごく興味深い記事で、全部で4つに分かれてましたけども、
今日もがっつりその方が書かれた別の記事なので、それも読んでいこうかなと思っております。
はい、一応なんかこれ翻訳の記事だったというところですね。
原文は一応20年に英語で書かれているんですけども、
これをDeepLでガーッと翻訳したというところだそうです。
では早速いきましょう。
私は人生のかなりの時間をデザイナーとして過ごしており、
プロトタイピングに多くの時間を費やしています。
私はプロトタイピングをデザインプロセスの重要な一部として楽しんでいるので、
プロトタイミングとデザインを2つの個別のステップではなく、
シームレスなプロセスとして統合することを奨励したいとずっと思っております。
デザイナーにはもっとプロトタイプを、
エンジニアにはもっとデザインすることを推奨したいんです。
へー、面白いですね。
そこで私がどのようにプロトタイプを作成しているか、
いくつかメモを残すことにしました。
誰かがこれを面白いと思ってくれれば幸いですと。
前置きは今ので一つ目ですけど、
一つ目はWhat are Prototypesですね。
はい。
私にとってはプロトタイピングとは、
検証されていないアイディアを創意工夫で具現化し、
デザインや製品に応え厳密に検証する行為になります。
プロトタイプはどんなものでも作ることができます。
コードであれ、紙であれ、動きであれ、目的にかなうものであれば、
なんでも優れたプロトタイプになります。
JavaScript、C++、Unity、プロセッシング、タッチデザイナー、
フィグマ、紙、ペン、ハサミ、ノリ、フレキシー、プレキシーグラスなど。
使えるものはなんでも使えますし、
自分の道具を工夫することもよくあります。
はいはい。
続いてプロトタイプtoスケッチですね。
UX業界ではプロトタイピングの主な目的は、
多くの場合デザインの検証になりますと。
UXデザイナーがUIをデザインし、
UXエンジニアがそれを実装してテストし、
フィードバックを集めますと。
これは間違いなく有効で貴重なプロセスですが、
私が最も楽しんでいるプロトタイピングには、
少し違ったアプローチというのがあります。
それはプロトタイピングを紙にスケッチするときのように、
未知のものを探求し、
アイデアを伝えるプロセスとして活用することですと。
続いて、
I prototype because I don't know the answer yet.
答えがわかんない。
私たちは最終的に物事がどのようになるべきかが、
わからないときにスケッチをします。
スケッチは安く早く、
簡単に破棄して繰り返すことができます。
03:01
紙に書いた最初の一筆から、
私は自分の絵そのものに反応し始めます。
紙の上の線は、
次の絵をどこに書けばいいかという指針になります。
そして、
そうしているうちに、
今まで見えていなかったものが見えてくるのです。
スケッチというのは、
正確な答えがなくても、
どの方向性を探ればいいのかわかるだけで、
最も効果的なのです。
プロトタイピングも同じです。
正確な答えがなかったとしても、
どの方向性を探ればいいか。
結局、
頭の中でやるよりも、
目で見たりとか、
実際に手を貸していくうちに、
答えが見えているとか、
方向性が定まってくるというのは、
よくある話ですよね。
エンジニアでもそうですし、
デザイナーでも同じだと思うので。
困ったら、
デザイナーはもっとプロトタイプを、
エンジニアはもっとデザインを、
と言われていたので、
デザイナーに向けた言葉のように聞こえますね。
最初の定義からすると。
エンジニアも実際に作っていく中で、
設計をどうするかとか、
コンポーネントの流度をどうするか、
全体設計とか、
システムの構成をブラッシュアップしながら、
僕らも作っていくので、
プロトタイプを作っていくのが結構いいかもしれないですね。
続いて、
Choosing My Adventureですね。
だから私は始める前に、
使用を決めない傾向があります。
行動を見て何を作らなければならないのか、
というのを考えるのです。
問題を定義することは重要ですが、
答えやプロセスを定義することは重要ではありません。
前に進むためには仮説が必要です。
仮説は証明されるか、
反映されるかです。
どちらにしても良い進展です。
私は誰かに指示されるのを待つのは好きではありません。
私は人と一緒にアイディアを出すのが大好きです。
そして議論を進めるためにアイディアを構築します。
これはみんなそうなんじゃないですかね。
これはみんなそうなんじゃないですかね。
クリエイティブな仕事をしている人は。
続いて、
プロトタイプは議論の音を
省略することができます。
1つの言葉が引用されています。
If a picture is worth
1,000 words,
a prototype is worth
1,000 meetings,
Tom and David
Kerryのアイディアの
引用です。
1つの絵は1000個の言葉の
価値があるし、
1つのプロトタイプは
1000個のミーティングの価値がある。
ミーティングに値するということですね。
なるほど。
ホワイトボード、最近では
iPadでも良いですけど、に素早くスケッチすることで
多くの時間を節約することができます。
プロトタイプが実際に動いているのを
見ることは、整理した文章や文句よりも
ずっとよくアイディアを伝え、
より信頼性の高い迅速な意思決定に
つながることがよくあります。
この言葉は僕もすごく共感ありますね。
1枚ペット、
Mockでも良いし、
青写真でも良いし、
紙芝居形式でも良いんですけど、
今僕らが作っているシステム的なもの、
もちろん要件定義とかでは
テキストでやったりしますけど、
それって結局こんな感じですよっていうのを
手書きでホワイトボードをぺぺぺって書いて
そこに付箋をぺぺぺって貼ったりするとか
06:01
そんなんでも良いんですけど、
本当に絵を描くだけで結構議論って進むし
そうそうこんな感じだよねっていうのが
一気に進むんですよね。
同じことをただ絵でやっているか文字で
やっているかに過ぎないんですけど、
これも本当にすごくわかります。
1つのプロトタイプが1000個のミーティングに
値するっていうのはすごく面白いですね。
1000まで行くかどうかは別ですけど、
でもこれもやっぱりそうですよね。
ミーティングでやいのやいのやってるけど
結局プロトタイプを1個ポッと作って
先方に投げて確認してもらった方が
一気にものを達成するって本当に
これも一緒だなと思いました。
続いてのセクションは
プロトタイプするLet me exhaust possibilities
最後の2点は
ややコーティングに特化したものです。
私は怠け者です。
私はいつもより少ない労力で
より多くのことを行うための
より簡単で迅速な方法を探しているのです。
多くの組み合わせがある複雑な問題
UXデザインの問題のほとんどはそうですけど
に取り組むとき
私はコードに頼り
コードに私の仕事をさせます。
アルゴリズムを使えば手作業よりも
はるかに簡単にバリエーションを作り
それより路正然と説明することができます。
続いて
プロトタイプは私をリゴラスにさせます。
私はごまかしが好きではありません。
コードが好きなのは
重要なディテールから目を逸らすことが難しくなるからです。
コードでスケッチしていると
非論理的なデザインは組めません。
私の論理が破綻していれば
プロトタイプも破綻しています。
それでも悪いデザインを作ることはできます。
でも実際に動くものを見れば
それは一目瞭然で
なぜダメなのかが
ずっと分かりやすくなります。
そしてやはりプロトタイプはデザインの検証には
最適なのです。きちんと作り込んだら
テストの準備に入ります。
はい。
That's all my rambling
以上私の取り留めない話でした。
未知のものを試作し旅を楽しみましょう
というところですね。
あと以下2つなんか引用されてますね。
2つって言っているかごめんなさい。
1個でした。
この文章はもともとあるプレゼンテーションの台本で
実際のプロジェクトの写真や動画がたくさん掲載されていました。
機密事故が多いため
ここでは掲載しませんが
以下のビデオで私の仕事の例をたくさん見ることもできますので
2021年の
YouTubeの動画の
リンクが貼られてますね。
はい。
興味ある人は見てみてください。
Too Many Devices
The Google Ambient Labs Team
っていうところですね。
次のところに
行こうと思うんですが
長いなぁ
次のセクションが
Sketching with Math and
Quantum Physics
っていうものなんですけど
めちゃくちゃ
いろんな記事のリンクが
貼られてまして
それぞれ1個1個について
この人の考察とかが書かれている感じですね。
めっちゃすごいんで
全部読みたいんですけど
あさかふぶっとこれになってしまう可能性がある
どうなのって感じはしますけど
ニュートンとベクトル
09:01
ベクトル場っていうのがあるんですけど
ニュートン力学みたいな
アカデミックな内容もあれば
波の向きとか振動と伝播とかですね
距離ですね
距離を四角化するとか
符号付き距離関数とかありますね
サインドディスタンスファンクション
数学やってる人はあれってなるかもしれないですけど
とか光ですね
光と屈折もしくは反射
物体を照らすとかですね
2Dグラフィックスと光って何でしょうみたいな
僕らがやっているクリエイティブコーディングに対しての
いろいろいろいろピックアップというか
カテゴライズしたものを一つ一つ記事にしている
っていうところですね
これも僕らからするとすごく
クリエイティブコーディングやってるメンバーからすると
これはもう知見の方向でしかないので
全部読みたいってのはその通りだと思いますけど
もしこの分野に
世界に飛び込んでない方は
ちょっと冗長になって長いかもしれないですね
あと
ここまで来るとかなり
具体性が上がってきてですね
ソースコードたくさんだったり
画像たくさんだったり
本当に理論的なところも結構入ってくるので
ちょっとアサガツの音読でやるのは結構
しんどいものがあるので
かなり短くて申し訳ないですけど
今日はここで締めようかなと思います
一応あれですね
スケッチングウィズマサンの詳しいフィジックス
それぞれの項目についての
別の記事のリンクは皆さんのほうで読んでください
ってことにして
一応ここの題目だけの
簡単なペライチのまとめもあるので
どうでしょう
改めてスケッチングウィズマサンの詳しいフィジックスですけど
コードを使った作品や
アニメーション制作の参考用に
物理や数学関連サンプルなどをまとめてみました
世の中を正しく理解したり
問題を解決したりすることが
目的ではなく
面白そうなものを正確かお構いなしに
スケッチすることが目的なので
詳しいつまり疑似ですね
疑似物理学というふうにこの人は読んでいます
アイディアの種的なものが多いので
解説は雑ですけど
詳しい解説や参考サイトの翻訳などは
リクエストがあればどうぞと
中身の多くはスケッチングウィズマス
詳しいアンドフィジックスですね
っていう別の
これまた記事ですね
別でまたブログがまとまってて
それをですねもうちょっとようやく
翻訳したものに過ぎないかもしれないですね
をもとに解説の
当時しゃべった内容のメモをもとに
膨らませてみましたと
少しずつコンテンツを移植したり
新しく書き足していったりしようと思っていますと
これは主に英語がオリジナルですけど
日本語が先のものもあります
翻訳はどちら向きにも
DeepLの助けを借りて
作りましたと
コートのサンプルは特に断りがない場合は
P5JSを用いていますが
できるだけどんな環境でも
適用できるように書いてみましたと
古いサンプルも多くクオリティの保証はもちろんできません
私は数学者でも
コンピューターエンジニアでもありません
これはあくまでビジュアル畑の人間から見て
便利だと思ったアイディアをまとめたものです
コミュニティの指摘だったり学習に役立つ
もっと良い例やリンクなどがあれば
ぜひ送ってくださいというところで
締められておりました
いかがだったでしょうか
見てみてください
めちゃくちゃこれすごいですよ
12:01
一個一個かなり細かいし
専門家ではないけど
ちゃんと理論的なところにしっかり踏み込んだり
数式だったり引用とか
もしっかり貼られていて
これかなり勉強になると思うので
クリエイティブコーディングしない方でも
こういうコンピューターとか
サイエンス分野や
ちょっとでも関わっている方は
これ読んで勉強しても損はないんじゃないかなと思います
直接的に使わないとは思いますし
直接使わないから
役に立たない話をするんだったら
じゃあなんで僕ら数学やるって
例の議論に戻る感じはあるんですけど
大人になったら数学の大事さは
みなさんなんとなく感じていらっしゃると思うので
そういう意味でこの辺を知っておくというのは
結構面白いかもしれないですね
僕は単純に数学が大好きで
勉強が上がるタイプの人間なので
だからなんですけど
ではちょっと2日間渡って読んできました
この方のブログですけど
KINDINFOさんですね
すごく勉強になったし
もしこのクリエイティブコーディングの世界に
来てみたい方
改めてご自身で読んでどう感じるかっていうのを
ぜひぜひ自分の言葉で感じていただくのが
いいと思います
最初のドローイングwithコードというところですね
そこから僕はやっぱり面白かったですね
僕らが当たり前にやっていることに対して
当たり前とか人間はできているけど
それをコンピューターとか
手続き的に本来やろうとした瞬間に
僕らがやっていることをちゃんと
解像度を上げて
自分たちで理解していくということですね
昨日も読みましたけど
例えば絵の具ですね
筆を使って絵の具で絵を描くという行為を
コンピューターとかデジタルで
どう再現するかとなった時に
そもそも筆の表現をどうやってやるか
スタートするんですよ
当たり前に筆という道具があって
紙の上に置けば
色が
絵の具がそっちの紙に付着して
固定して色となるという話になるんですけど
まず筆を表現するために
たくさんのすごい小さな円を
マウスのすぐ近くに
集合させてそこにポンと置くと
しかもその線も
筆は一応線は全部同じですけど
絵の具の付着度合いなんてランダムだと思うので
ランダムにその円のサイズを変えるとか
しかもその
かすれ方とか濃淡の話も出てくるので
そこもランダムで変えなきゃいけないよねと
でまたその筆をパッと
紙の上に置いてそこから
手を横にずっと引きずれば
そのまま筆も引きずられて線が
描かれますね筆で
それと同じようなことを僕らもマウスで
マウスドラッグした瞬間から
ずっとマウスを移動させて
同じように筆で絵を描くみたいな再現は
一応できなくはないんですけど
時間経過によってだんだんだんだんその線が
細くなったりとかかすれていったりとかするじゃないですか
などですね
その辺のランダム性とかその時間経過
ってところのどの
円に対してどの時間経過
をランダムでその感覚
ですねを定義するか
っていうのは結構バラバラなので
一個一個手続き的にちゃんと再現を
していこうとすると僕らが当たり前に
やってることってすごい複雑で高度なこと
なんだなっていうこともあるし逆に
絵を描くっていう
例えば鉛筆でもいいですし筆でもいいんですけど
を使って何かを描くっていう
15:01
行為のすごい高度な
複雑なステップとかいろんなものが
現象が起きてるっていうことを
解像度上がって見えてくるんですよね
すごく面白いので
コーディングやってる方は
ぜひクリエイティブコーディングの世界にも
ちょっと足踏み込んでほしいなと
僕らと同じような感動とか
面白さっていうのを味わってもらいたいなっていう
この辺の議論を議論で
雑談でいいので
お話なんか誰かとしたいなと思っております
というところで
今日の朝勝はすいません
後半ずっとだらだら雑談でしかなかったんですけど
終了したいと思います
改めまして今日の参加者は
多分オンライン上にいるスーさんですね
ご参加いただきありがとうございました
火曜日ですね
今日も一時頑張っていけたらと思いますし
もう4月が本当終わりが見えてきましたね
早いっすね
新卒が入ってきた会社さんもたくさんあると思うんですけど
大体1ヶ月ぐらい過ぎ始めて
皆さんとの1ヶ月の振り返りが
スタートすると思いますので
この辺見ていただけると思いますし
ではでは
今日の朝がそこで終了したいと思います
お疲れ様でした
