Shota Matsuda 松田 聖大
@shotamatsuda
Followers
1,237
Following
104
Media
268
Statuses
18,977
デザインとエンジニアリングの間を彷徨う。Director / Design Engineer at Takram
Tokyo or Kyoto, Japan
Joined April 2007
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
No Riley
• 550825 Tweets
Chile
• 194726 Tweets
Perú
• 125829 Tweets
#NuNew1stConcert
• 90923 Tweets
Oilers
• 84631 Tweets
#holoJustice
• 54553 Tweets
Game 7
• 52524 Tweets
Edmonton
• 49827 Tweets
Panthers
• 44888 Tweets
Gigi
• 33787 Tweets
Jacob Fatu
• 32204 Tweets
#กดบัตรDREAMCATCHER
• 21118 Tweets
EVANGELISTAS FURIOSOS
• 17356 Tweets
エンゼルス
• 16639 Tweets
ラグビー
• 14076 Tweets
MINA IN MALAYSIA
• 13393 Tweets
Pinned Tweet
去年の秋冬に作っていた JAXA の H3 ロケット打ち上げをリアルタイムに可視化するシステムのプロジェクトを公開しました。種子島宇宙センターに設置され、打ち上げライブ中継の中で運用されていく予定です。どこかでデザインと開発プロセスや詳細を解説したいなあと思います。
1
30
93
実は H3 FIP の開発を始めた当初は、ロケットの実飛行経路とイベントは計画飛行経路やシーケンスとほぼ完璧に一致することを知らず、その副作用で、ちょっとした経路やシーケンスのずれもテレメトリに基づいて可視化しています。今回の打ち上げでようやくそれを見られました。完璧でしたね！
1
107
396
@rocket_EE_okada
はい、機体位置もシーケンスのイベント発生位置もテレメトリの座標に基づいています。特に機体位置と経路は計画からズレると ↓ の右のようになり、H3 試験機 1 号機では第 2 段点火のタイミング以降に見られました。
1
53
178
おそらく、自分でも妙なことをしていると自覚しているカナ書体のこととと思いますが、これは Cartograph CF という欧文書体に含まれるカナ字体です。数値情報（X 時刻や速度・高度など）にも用いています。和欧カナはそれぞれ異なる書体です。
JAXAのこのフォントってなんだろう？って話があって、ウチにある書体だと「ロゴG」を70%長体かけたのが一番それっぽい（けどそのものではい）まで来たんだけど、何かわかる？ #フォント | H3ロケット試験機2号機打上げライブ中継
@YouTube
より
0
0
14
1
21
174
以前に似たような UI を実装したことはあるのだが、マニアックな太陽高度 + 時刻調整 UI を作った。
2
13
154
Takram がサポートをした freee のリブランディングがローンチされました。ブランドコアから、ロゴ・シンボル・デザインフィロソフィ・イラストレーションなどを、freee の皆さんと一緒に議論・制作をしました。プロセス自体がとても刺激的で、私は今は freee のファンです。
0
5
84
4 月 10 日から今年度の国交省の PLATEAU プロジェクトに関わっていまして、そこで作っているものをオープンソースで公開することになっています。ということで、Takram ではかなりイレギュラーですが、プロジェクト途中のリポジトリを公開しました。
4
21
82
去年の夏頃に書いた Cesium と Three.js を使って PLATEAU データを表示するチュートリアルが PLATEAU のウェブサイトに掲載されました。チュートリアルをなぞれば誰でもこの画面まで作れるはずです。ただしシンタックスハイライトされないので辛い。
1
8
52
弊社、「振り子を振る」とよく言うので、振り子を振りながら状態遷移を位相空間（phase space）にプロットしたかったのですが、世に良いものがなかったので作りました。単振り子を振るときに参照ください。
0
6
50
どうも深刻なバグはなさそうということで、内閣府のコロナが経済に与える影響を可視化するサイト V-RESAS のフロント開発を担当しました。 UI デザインは Takram の
@kanakt
。実装や設計の裏側とかも話す機会があるといいな。ところどころ面白いです。
0
9
46
@rocket_EE_okada
H3 試験機 1 号機の配信では、H3 FIP は X+600 頃までしか放送されなかったので、やや分かりに��いかもしれません。配信後は、JAXA の報告書にある通りの軌道を描いていました。
0
14
33
Framer Motion 使いやすい。細かな制御はどうしても Imperative にならざるを得ないので、なかなか融通が効かないところ（+ バグ + バグっぽい挙動）はあるけれど、8 割方とても快適に React でアニメーションを記述できる。超おすすめ。
0
4
30
この手のは TF1 の時に教えてよって話ですよね。1 年前に H3 FIP の解説記事の下書きを書いたものの、打ち上げが成功するまで公開する気分になれず。不安に目を凝らすシステムではなく、美しく分かりやすく伝えることで、宇宙に興味や注目が集まる一助になることが目的でしたので。
もう大丈夫かも。
@rocket_EE_okada
はい、機体位置もシーケンスのイベント発生位置もテレメトリの座標に基づいています。特に機体位置と経路は計画からズレると ↓ の右のようになり、H3 試験機 1 号機では第 2 段点火のタイミング以降に見られました。
1
53
178
0
6
27
2017 年度に経済産業省が「地域未来牽引企業」を選定しました。それらの企業を、帝国データバンクのデータベースを用いて可視化するウェブサイト「LEDIX」の制作を Takram が担当しました。
0
4
27
贈答用として購入されることの多い久保田萬寿。そのギフト用パッケージ & ショッパーのデザインを Takram が担当しました。6〜8 月の限定で全国の久保田店で発売されます（されています）。
0
2
26
freee の経営の自由に対する考えの深さ、その本質的な価値を実際に届けるためのアクションまでなめらかに繋がるカルチャーにとても共感しながらプロジェクトを進めました。ブランドサイトや映像は freee の皆さんが制作されたもので、ブランドの展開や進化に感動しています。
0
3
26
H3 FIP、時間が掛かった点のうち、気づきにくいのはラベルの重なり除去。インタラクティブであれば、変化の起点が操作であることが分かるので、ただ重なりを除去するだけで良いが、非インタラクティブでは不要な変化を起こさないことが重要だった。不要な順序の入れ替えが起こらない様子がこれ。
1
3
26
今週PLATEAU VIEW 3.0がリリースされましたね。去年の4〜9月に、そのデザインと技術、目標を定めるためにプロトタイプを作っていました。昨日のTakram Nightイベントのために動画にまとめたよ。
0
7
23
あの、タイトルの軌跡がグワーンって繋がってる Generative Design の第2版です。全体的に p5.js をベースにして書き直されていますよ！ 英語・日本語訳は年末にかけて出るそうです。
Takramの松田
@shotamatsuda
によって開発された作品｢Planck｣が、『Generative Gestaltung』の新版に掲載されました。地理に紐付いた大規模なデータを視覚化するためのフレームワークです。さまざまな手法を使用し、分析的かつ没入的な視覚体験を実現するように設計されています。ぜひご覧ください。
0
2
13
0
4
19
度々言っているけれど、プログラミングで一番難しくて重要なことの一つは名付けだと思っている。概念の区切りの定義と、それを指し示す言葉の選定。妥当でない言葉を用いてしまうのは、決して時間が無いからではなくて、そもそもそのアイデアを理解できていなかったり、概念を知らなかったりするから。
0
2
18
ちと Takram でのソフトウェアエンジニアリングについて Podcast 録ったのでそれについて補足。まず、編集行為と完成形（に極めて近いもの）の再現の間のコストを圧倒的に下げることは、プロトタイピング全般に適用される話ですよね。ソフトウェアだけでもエンジニアリングだけについての話でもない。
0
4
17
プログラミング本をほとんど読んだことがなくて、プログラミング言語が必ず公開している言語仕様、リファレンス、チュートリアルをとにかく読み込むようにしている。それで、ほとんどのことが分かってくる。
0
5
17
TAMRON SP 15-30mm F/2.8 出ましたね。これで Takram デザインの大三元揃いました。
0
5
16
抽象化が苦手そうだなと思う人は、多く、自然言語の（とはいえ英語の）語彙が少ない傾向を見ます。適切な意味フレームを持つ語彙を知っていると、処理に基づいた意味の海に境界を引くコストは低くなります。
0
3
16
そろそろ私なりの JavaScript によるクリエイティブコーディングについてまとめたスライドを作った方がいいなあと思ってきた。
0
1
16
詳細は別途書くとして、TF2 の映像で「あれっ？」と思うかもしれないのは、速度・高度と 3D 表示の変化が若干遅れること。これは、断続的に受信するテレメトリを滑らかに補間するためのバッファリング時間分の遅れです。反対に X 時刻と上部のタイムラインは、射場系と同等のリアルタイム性です。
1
1
16
話題の Google Photorealistic 3D Tiles を表示してみた。めっちゃ浮気してる感ある。PLATEAU とは違い、タイルセットの LOD に従ってモデルの精細さが全て異なる作りになってますね。
4
0
13
常に重要なのは、アイデアとプロトタイプと最終成果物との間に生じる時間的なラグを最小化することにあって、それ以外の目的についてのことはあまり知らなかったりします。
0
3
10
ジョン前田先生の Design In Tech Report 2018、どんなことがどのスライドに書かれてるかを言い当てられるくらいにはリファクタしました。
0
2
12
なんか社内の人が使えるフレームワーク作って、それを利用したプロジェクトが良い感じになっても、自分にとってほとんど功績にもならない感じが嫌すぎる。
0
2
11
消費行動はとても合理的に発生するので、ブランド力の影響が及ぶ範囲は、合理的に検討した時にイーブンになるときの最後の判断です。商品の提供価値が劣っているときに、それをブランドの力で埋められる価値もあるでしょうが、やがて失われていく信用ではないかと思ったりします。
0
3
11
PLATEAU VIEW、昨日のTakram Nightでは、さすがに技術詳細を解説することはできなかったので、別途記事書かないとですね（H3 FIPもまだ）。両方ともCesiumを使っていて、2021年の秋冬にH3 FIP、2023年の春夏にPLATEAU VIEWなので、個人的には地続きです。
0
3
9
エラーは大きく分けて syntax か semantics に起因するものであり、前者なら規則、後者なら論理構造をよくよく見直せば策が見えてくるんですが、エラー文の分解が追いついていない状況。
0
1
10
デザインと開発は私一人でやったりしたのですが、議論に参加してもらいつつ、種子島宇宙センターの案内もしていただいた JAXA の皆さん、契約関係やインベストメント、ウェブ公開を手伝ってくれた Takram の皆さん（そもそも個人では話すら来ないでしょうから）多方面に感謝です。
0
0
10
多少遅らせてでも、情報を滑らかに変化させることのほうが重要と考えたということです。↓ の動画でそれがよく分かるのではないかと思います。
0
2
9
Mac の Zoom で Virtual Camera が使えなくて悲しい人は codesign --remove-signature /Applications/zoom.us.app で署名を消してしまえば使えるようになりますよ。5.0 で確認しました。それ以前もこれで使えてたのかな？
0
0
9
ついでに絶賛開発中で、動かないボタン多数の状態ですが、プロトタイプも見られるようになっています。 今のところ見所はパフォーマンスの良さと HBAO くらいかなと思います。
0
1
8
プロプライエタリなものでも、技術の一部を切り出して OSS 化するのがおすすめ。公開する技術領域を最小化する圧力がかかるので、ソフトウェアの目的が自ずと明確になる。ソフトウェアの目的は狭ければ狭い方が良い。
0
2
6
H3 FIP のデザイン・開発プロセスや技術詳細の解説記事を書いていっている。思ったより大変で、もう少し時間が掛かるかなあ。
0
1
7
これは十数年間言い続けていることですが、解説本を読む時間を公式リファレンスやチュートリアルに費やした方がずっと学習効率は良いと思います。
0
2
7
可視化プロジェクトの全体の 1/3〜1/2 は、そのデータを使って、そのデータに最適で、目的に沿った表現が何かを探索することが占めます。
0
3
7
ロケットから送られてくるテレメトリーをリアルタイムに、宇宙空間で可視化するというのは、伝送系の各所で時間遅延があるため「今」の定義が複数あったり、地球が自転するため基準座標系が複数あったりするのが絡みます。
1
0
7
Planck フレームワークを切り出して公開していっています。さっき planck-core の README 書いた。徐々に全体を公開したいと思ってる。
0
2
6
公式のマニュアルやリファレンスの良いところは、ほとんどの場合、言語のコンセプト、何ができて何をしないのかが書かれていること。
0
1
6
どう見えるかはとても大事。格好いい使いかたを見せれば、格好いいシステムだと思う。演出によって観客に魔法をかける勢いでコンセプトを伝えないと、なかなかコンセプト本来の魅力って伝わらないと思うんですね。まず注目しない。だから知ろうとしない。知らないから魅力的じゃない。
0
2
6
OBS はオーディオが弱いので、Rogue Amoeba の Loopback を使おう。これはとても良い。硬直した Zoom 中に音楽流しつつ YouTube から環境音を流そう。
0
2
6
普段は固定している参照を浮かせて揺らさないといけないので、想像していたよりも掴み所のないものでした。JAXA の皆さんをはじめ、宇宙関係のお仕事はやはりすごい！と感じました。
1
0
6
PLATEAU のデータ、2020 から 2022 になって、空間分割が変わり、パフォーマンスが大きく落ちている。2020 も空間分割が雑で Culling されない問題があったが、それ以上に 2022 は分割しすぎで Draw コールが 3000 を超える + Refinement が ADD でデータ量が倍増している。
2
0
6
たまに掘り出してくるグリッド吸着+アンチエイリアスの比較。Quartz は垂直の吸着が強く、水平が弱い塩梅が絶妙だったりする。垂直水平を同様に吸着してしまうと書体の特徴が出にくいし、カーニングの自由度が下がるのよね。
0
2
5
中継の 1:39:36（X+00:16:44）頃に RCC で歓声が上がる直前に、上部のタイムラインのイベントは発火していますが、3D 表示内のイベントは若干遅れて発火しているのが分かると思います。
1
1
5
フリーレン25話のゾルトラークのくだり良いなあ。僕の場合はそれがインターネットやブラウザ技術、GPUであった感覚はある。その位置にAIが来ている実感もあるし、AIについて僕は思考する分だけ遅れる。そして多くの場合速射性が生死を分けるので、不用意にAIを乱発したりしない。
0
0
5
このあたりの社会的な問題を解決するのはデザインエンジニアリングを掲げる Takram が果たすべきミッションかもしれませんね。
0
0
4
徐々に、Planck のモジュールを切り出して公開していっています。まだドキュメンテーション無いのが多いですが、徐々に充実させていきます。そろそろ可視化に有用なインスタンシングをまとめたリポジトリを上げます。
0
4
4
好き
0
0
5
そういえば 来週 11 日から Media Ambition Tokyo @ 六本木で作品展示いたします。
0
2
5
学ぶことが目的だとあまり学べないというより、どれだけ学んだかの指標が普通は仕事以外に少ないのだと思う。
そしてそれはあまり幸福なことには見えない。
0
0
4
を評判を聞くかぎり、ちょっと踏み込んだ表現をするためには、WebGL を直に触る必要があるという��階層��造を作るのには選択がともないますよね。
0
0
4
公式クライアントに切り換えても重い。そして fontd が暴走してる。再起動を強制するとはおのれ覚えておけ。
0
0
4
結局デザイン的な話なのですな。まえに Gunosy 関係の人に「うちはデザインとかそんなに必要じゃないですから」って言われたんだが、まあそういう人に限って設計が不足しているものだと思います。
http://t.co/nvAYTc7R
0
0
4
��ラーに書かれている内容を読みましょう。エラーが何を言っているのかわからないと当然読みたくなくなるので、エラーメッセージの一語一句の意味を理解するために公式リファレンスを読み込むのもおすすめです。そもそもエラーの表示が分かりづらすぎることに非があることもたくさんありますが。。。
0
1
4
クライアントの企業さんが持て余しているデータの話を聞くたびに、可視化したらめっちゃ面白いのになーと思う。
0
2
4
こう見ると PLATEAU 2022 データセットの空間分割数の異常性がわかる。Google Photorealistic 3D Tiles みたいな分割数で Additive Refinement にしてくれないかなあ。
0
0
4
2 ヶ月ほど Cesium をベースに開発をしている。Sandcastle という技術デモの、やっていることは凄いんだがあまりにダサすぎる感じや、Github Issues のモデレータのポジティブな返答などを見ると、とても良いコミュニティなんだなあということが伝わってきてとても良い。
0
2
4
HHKB Studio を 1 週間ほど使ってみている。全体的に良いのだが、致命的な点は、有線 BT 切替と電源連動であり、Type-S よりさらに悪化してる。R 押しながら PC を起動等をするためには、かなりアクロバティックな操作が求められるし、何回かミスる。
0
0
4
あらゆる思考コストを低くすること：構文を覚えること。その言語の意味論を知ること。検索を素早く終える術を身に付けること。そういった周辺技術がとても大事だったりします。
0
0
4
私の出身地京都は山が多く、地形の法線を加味してシェーディングをしないと理解できないことが多い。しかしながら、Cesium のレンダリングパイプラインは地形に Image-based Lighting を適用しない（必要以上に陰が濃い）ので、ハックしないといけないかなと思っている。
1
0
4
まだまだ再設計・調整するところは多々ありますが、画面上部の操作部（Context Bar）を設計・実装しています。VIEW 2.0 では毎回検索パネルを表示して探さないといけない理不尽がありますが、それが随分と解消されているのが見て取れると思います。
0
0
4
くだらない見た目のために対応ブラウザを削るのが理解できないと言いますが、対応ブラウザを広げるための作業の方がよほどく���らないのですよ。
1
4
4
Planck でやろうとしたのは、ウェブ上での視覚化とその「表現」の探索で、目的も価値もどちらかというと後者がメインなですよね。なので OSS にしても良いのではと（個人的には）思っている。
0
0
3
デザインやりたいって人に限って自己主張が強すぎてデザインになってない。自己主張する場じゃないよ、デザインは。
0
2
4
コンパイル中などに流れる、大量のログの文字の羅列の移動は、それだけでたくさんの「意味のあるなにかが進んでいる」ということを予感させてくれます。これ以外に、同じ予感をさせてくれるものを私は知りません。動かなくとも、そういう役割が必要なことは多いです。
0
1
4
Cesium と Three.js を React で扱っていると、HTML の DOM とはほぼ関係なく、汎用的な宣言的プログラミングのフレームワークとして使っていることがわかる。React Three Fiber は完全にそうだし、Cesium もほぼフックと VFC で扱えるような感じになってる。
1
0
3
大学の頃「日曜日に一週間分の食事を作って冷凍して、残りの日はそれを溶かして食べています」という人がいた。
0
0
3
（Takram には東京とロンドンにオフィスがあるのですが）ロンドンとは形式知は共有できているのですが、暗黙知というか、実際に手を動かす中で「これが僕らにとってのベストプラクティス」だろうという共通認識が生まれにくいなあと思う。
0
0
3
「情報環世界」という名はイマイチだと思いますよ。だから、話を聞くたびに「実はそういうことではなくてね」ってコミュニケーションが発生しています。
1
0
3
よく Are you the real Matsuda Shota? と訊かれるんだけど、私もリアルですから！
0
0
3
デザインを任せたら、既存の文脈・制約も十分に把握せず、「いいねー」「いいよねー」ってキャッキャウフフしながら、自分らで作ったものの統一も見ずに進める姿をそっと見ないふりをしているこの頃。（匙を投げた。リミッター超えたら強制的に役から降ろす）
0
0
3