--- title: 構造化しないUI date: 2024-07-23T00:53:24.000Z updated: 2026-04-20T00:27:22.777Z tags: - ui url: https://baku89.com/ja/%E6%A7%8B%E9%80%A0%E5%8C%96%E3%81%97%E3%81%AA%E3%81%84UI --- # 構造化しないUI ![](https://wp.baku89.com/wp-content/uploads/2026/04/669f00192324b4001d30675f.png) [Spatial Memory](/Spatial_Memory) ツリービューやフレームに紐づいたタイムラインマーカーのように、綺麗に構造化されたUIよりも、タイムラインの上から落書き出来たり、フッテージを2次元的に配置出来たりと、雑に並置するUIのほうが、場当たり的な制作の心地よさが高まる。 - 制作におけるオブジェクトは、綺麗に秩序だてられたものではないことの方が多い - 思いつくままに書きつけて、そこに後から構造を見出す - デジタル化のつらさの一側面は、そうしたふとした思いつきを、UIのフォーマットに符号するように構造化するよう常に迫られ続けるところにある * オブジェクトの階層関係を意識すること自体が認知負荷となる - 例) - このト書きはどのカットに属するのか - このタイムラインマーカーはどのフレームで、どの尺存在するのか - このフッテージはどのビン（フォルダ）に属するのか - 制作の「計画・構想」（プリプロダクション）段階であるほど、記号は整理されていない。そしてUIがもたらす構造化圧力は発想の妨げになる - アニメの絵コンテなんかでも、コマをぶち抜く縦パンの絵に罫線を跨いでト書きが殴り書きされていたりする - 構造化しきれない部分に潜む勢い、ノリみたいなものが、こう、結構だいじ（あ、語彙が） - ![](https://wp.baku89.com/wp-content/uploads/2026/04/669f030ab6459a001dd3b6fa.png) - - ![](https://wp.baku89.com/wp-content/uploads/2026/04/669f03647bef8d001c3859bc.png) - トップをねらえ2 ### そもそも構造化する意味がどこまであるのか - 別に整理されてなくても良い - 構造化したいのは、主にソフトウェア開発者側の都合 - 整理することはそれ自体が快であり、自己目的化しがちである - Notion整理術とか - 整理させ過ぎないアフォーダンス - 整理することににユーザーを注力させず、思いつくままに雑然と並べても、必要なものを必要な時に探し出せる仕組みを整える - Cosenseはそれが上手く出来ている - OCRや意味理解技術が十分進歩すれば、iOS 18の電卓のようにフラットに書きつけたところからAIがゲシュタルトを見出すようになる。人間が構造を与える必要がなくなる - ![](https://wp.baku89.com/wp-content/uploads/2026/04/669f05d7ea3dc3001ceb7671.png) ### 実装例 - [Koma](/koma)におけるタイムライン落書き機能 - キックに相当するコマを強調したり、イージング曲線を書きつけたり - マーカーのように見えるのは、そのコマが撮影対象になったときに読み上げるテキスト - マーカーもまた、上下方向に自由にずらして配置出来るのが結構便利 - こうした、構造化する際に普通削ぎ落とされるノイズに、 - ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-669f0080cee77f001dbe7896-scaled.png) - [Unim](/unim)におけるフッテージビン - ツリービュー上にフォルダしなくてもいい - 単に近しいものを固める - ![](https://wp.baku89.com/wp-content/uploads/2026/04/669f00109d4d16001ddee664.png) - Miroのようなブレインストーミングツール ### 構造化しないUIのための設計原則 #### 離散的な構造から連続的な構造へ - レイヤーカラーやマーカー色は、十数種類のパレットからではなくカラーピッカーから自由に選べる - ツリービューではなく、ノードビュー - ノードの配置や大きさは連続的に変更できる - データ表現を常に揃えさせるのではなく、グリッド定規や整列機能など、「揃える」ためのツールをUI側で充実させる - サムネイルやアイコンの重視 #### データ表現をセマンティックにしすぎない - 強調、H3, H2, H1ではなく、文字のスタイルを直接変更出来るようにする - 「見てくれ」から解釈を引き出すのはユーザーであって、ソフトウェアではない - 赤く塗ったノードはOKテイク - 小さくしたノードはバックアップ素材 - 素材は写っている人物ごとに近いところに固めておく #### 余計な情報を残せるようにする - 文字はテキストボックスだけではなく、直接手書きできるようにする - マーカーは自由に上下に動かせる ## Related Work ![](https://wp.baku89.com/wp-content/uploads/2026/02/IMG_6678-scaled.jpeg) - [What is the space for? The Role of Space in uthring Hypertext Represents | Proceedings of the sixteenth ACM conference on Hypertext and hypermedia](https://dl.acm.org/doi/10.1145/1083356.1083378) - [spatial representation](/spatial_representation)