zudo-paper

なぜWYSIWYGはうざったいと感じるのかみたいな雑談

Author: Takazudo | 作成: 2026/05/05

概要

Claude Codeと今日もおしゃべりするZE

会話ログ

Takazudo
Takazudo
Takazudo

I’m feeling the usefulness of outline of text editing. While I’m writing with it, it’s just making nested lists, it sometimes makes me feel like that I want to make heading here. but nested lists are just lists. just a indented format. but what happened here is that I noticed that “this might be the big another topic’s start”. This did not exist at the start writing timing. so in short, the writing habit itself made me notice the new structure. I’m building a text editor. And I want this app to be easy-note-taking but can go deeper like one. In general, mindmap is also the idea around this — so, I know this will be a valid question but, is it useful to build something beyond the nested lists? I feel like complexity of text editing makes us far from pure thinking

テキスト編集のアウトラインの便利さを感じてる。書いてると、ただネストしたリストを作ってるだけなんだけど、ときどき「ここheadingにしたい」って気分になる。でもネストしたリストはリストでしかなくて、ただインデントされた形式なだけ。何が起きたかというと、「これはたぶん別のbig topicのスタートだ」って気づいたわけ。書き始めの時点では存在してなかった。要するに、書いてる習慣そのものが新しい構造に気づかせてくれた。テキストエディタを作ってる。手軽にメモが取れるけど、深く掘ることもできる、そういうアプリにしたい。一般的に言うとmindmapもこの周辺のアイデア。 — というわけで、これは妥当な質問になりそうなんだけど、ネストしたリストを超える何かを作る意味ってある? テキスト編集の複雑さは純粋な思考から自分たちを遠ざけてる感じがする

Claude Code
Claude Code
Claude Code

Your instinct is the right one — the reason the structure emerged is precisely because every keystroke went into the same primitive. If you’d had to pick “heading vs list item” up front, you’d have spent that moment deciding instead of noticing. So I’d resist adding a separate heading construct and instead add promotion/zoom (Workflowy/Roam-style): any node can be lifted into “the document,” so heading-ness becomes a later act of recognition, not an upfront typing decision.

The tradeoff: pure-bullet docs lose visual landmarks at scale — some readers (and some moods) genuinely need the weight of an H1 to navigate. A middle path is to let promotion render a node as a heading without changing the underlying type, so the structure stays uniform but the eye gets the cue.

その直感は正しい。構造が_emergeした_理由は、まさに全てのキーストロークが同じプリミティブに流れ込んだから。もし最初に「heading or list item」を選ばないといけなかったら、その瞬間を「気づく」ことじゃなくて「決める」ことに使ってたはず。なので、別個のheading構造を入れるのには反対で、代わりに promotion/zoom(Workflowy/Roamスタイル)を入れる: どのnodeも「the document」へlift upできて、heading性は後から認識する行為になる、入力時の事前判断にはならない。

トレードオフ: pure-bulletのドキュメントは規模が大きくなると視覚的なランドマークを失う。読者(と気分)によっては、ナビゲーションのために H1 の重みがどうしても必要。中間案は、underlying typeは変えずにpromotionでnodeをheadingとして_renderする_こと。構造は均一なまま、目には手がかりが届く。

Takazudo
Takazudo
Takazudo

I sometimes put preview of markdown by the side of text editor. It’s almost same. It’s just the html css rendered result, and also markdown editor itself has its render tweak for heading, lists… So does this have some meaning for like … human’s recognition. Is it like see my drawn picture from a little far away?

テキストエディタの横にmarkdownのプレビューを置くことがある。ほぼ同じ感じ。ただhtml cssでレンダリングされた結果だし、markdownエディタ自体もheadingやリストにレンダリングのtweakが入ってる…。これって何か、人間の認識にとって意味あったりする? 自分が描いた絵を少し遠くから見るみたいな?

Claude Code
Claude Code
Claude Code

Yes — and your “step back from the drawing” metaphor is exactly it. Even when the bytes are identical, the preview pane strips edit affordances (cursors, handles, the option to change), so your brain flips from “doing mode” to “reading mode.” That mode switch is the cognitive value, not the visual delta — it’s the same reason writers print drafts or read aloud.

The implication for your editor: you don’t necessarily need a second pane to get this. A toggle (focus/read mode) or a zoom-out / collapse-all view gives the same distancing without splitting attention — and zoom-out maps even more literally to “look at the painting from across the room.”

そう。「絵から一歩下がる」のメタファーがまさにそれ。バイトが同一でも、プレビューペインは編集のアフォーダンス(カーソル、ハンドル、変更する_選択肢_)を削ぎ落とすので、脳が「doing mode」から「reading mode」に切り替わる。そのモード切り替えが認知的な価値で、視覚的なdelta自体じゃない。書き手が下書きを印刷したり音読したりするのと同じ理由。

エディタへの含意: これを得るために2つ目のペインが必須ってわけじゃない。toggle(focus/read mode)とか zoom-out / collapse-all ビューで、注意を分割せずに同じ距離感が得られる。しかもzoom-outは「部屋の向こうから絵を見る」により文字通り対応する。

Takazudo
Takazudo
Takazudo

zoom out —hum. but on computer screen, the display size is limited. So it’s like collapse all under heading lv2 content with one key. this kind of tweak might be useful

zoom out…ふむ。でもコンピュータ画面ではディスプレイサイズに制約がある。なので、heading lv2配下のコンテンツを1キーで全部collapseする、みたいな感じ。こういうtweakは便利そう

Claude Code
Claude Code
Claude Code

Right — semantic collapse is the digital substitute for physical distance. “Collapse to depth N” with a single key (1, 2, 3…) is the move; Workflowy and OmniOutliner do exactly this and it’s one of their best features.

The non-obvious part is that the collapse has to be cheap to reverse — one key in, one key out. If stepping back costs more than a heartbeat, people stop doing it casually, and casual is what turns “zoom out” from a ceremony into a thinking habit. And it only pays off if the depth levels actually mean something, which loops back to your earlier point — promotion has to be just as cheap, so structure can crystallize the moment you notice it.

その通り。semantic collapseは物理的な距離のデジタル版の代替物。「Collapse to depth N」を1キー(1, 2, 3…)で、というのが正解。Workflowyと OmniOutliner がまさにこれをやっていて、彼らのベスト機能の1つ。

自明じゃない部分は、collapseが cheap to reverse じゃないといけないということ。1キーで入って、1キーで出る。一歩下がるのに鼓動1つ以上のコストがかかると、人はカジュアルにやらなくなる。そしてカジュアルさこそが「zoom out」を儀式から思考の習慣に変える。これがpayするのは深さのレベルが実際に意味を持つときだけなので、前のpointにループバックする。promotionも同じだけcheapじゃないといけない、そうすれば気づいた瞬間に構造が結晶化できる。

Takazudo
Takazudo
Takazudo

the side TOC nav seems helping the readers to understand the content of the page. It has navigation meaning to each heading. but also I feel like that by seeing the outline on side, it gives the hints for the users that which part we are on in a big picture.

サイドのTOCナビは、読者がページの内容を理解する助けになってるように見える。各headingへのナビゲーションの意味がある。でも、横にアウトラインを見ることで、ユーザーに「今どこにいるか」のヒントを大きい絵の中で与えてる感じもする。

Claude Code
Claude Code
Claude Code

You’ve just named the underrated half — the TOC’s advertised purpose is navigation (jump to section), but its actual value is orientation: a persistent “you are here” that lets the reader’s brain hold the whole shape in working memory while reading the part. Same reason scrollbar position, code minimaps, and book pagination matter even when nobody clicks them.

For your editor that’s significant: a live side outline is a partial, always-on zoom-out, complementing the full collapse-to-depth move from the previous turn. The tradeoff is that during writing flow, peripheral motion (the outline updating as you type) can pull attention back out — so it might want to be subtle, or even fade/freeze while typing and refresh on pause.

いま、過小評価されてるほうの半分を言い当てた。TOCの_謳われている_目的はナビゲーション(セクションへジャンプ)だけど、_実際の_価値はorientation: 「you are here」が常時表示されることで、読者の脳が「部分」を読みながら全体の形をワーキングメモリ内に保持できる。スクロールバーの位置、コードのミニマップ、本のページ番号が、誰もクリックしなくても重要なのと同じ理由。

エディタにとって重要: ライブのサイドアウトラインは partial, always-on zoom-out で、前のターンの「フルなcollapse-to-depth」の動きを補完する。トレードオフは、書いてる最中、周辺の動き(タイピング中にアウトラインが更新される)が注意を引き戻してしまうこと。なので控えめにするか、タイピング中はfade/freezeして、止まったらrefreshする、とかが良いかもしれない。

Takazudo
Takazudo
Takazudo

Interesting. So you mean the focus mode like behavior will help user for writing. It’s like everything else except for the current editing paragraph gets dim like.

なるほど。focus modeみたいな挙動はユーザーの書く作業を助けるってことね。今編集中の段落以外は全部dimになる、みたいな感じ。

Claude Code
Claude Code
Claude Code

Yes — but notice it’s the opposite cognitive move from the side outline. Dim mode (iA Writer-style) narrows attention to the current sentence, which is great for generating prose; the side outline broadens attention to the whole shape, which is what let you notice “this is actually a new top-level topic” in the first place. They serve opposite phases of writing, and dim mode actively suppresses the structure-noticing you valued at the start of this conversation.

So the interesting design isn’t picking one — it’s making the switch between them cheap. A single key that toggles “narrow / wide” lets the writer move between producing and seeing, which is roughly the loop good writing actually runs on.

そう。でも気づいてほしいのは、それはサイドアウトラインとは 反対 の認知的な動きということ。Dim mode(iA Writerスタイル)は注意を現在の文に絞る、これは散文を generate するのに最適。一方、サイドアウトラインは注意を全体の形に広げる、これがそもそも「これって実は新しいtop-levelのtopicだ」と気づけた理由。両者は書く作業の正反対のフェーズに役立っていて、dim modeは会話の最初に価値を置いた「構造に気づく」を能動的に抑制する。

なので面白い設計は、どちらか1つを選ぶことじゃなくて、両者の切り替えをcheapにすること。1キーで「narrow / wide」をトグルできれば、書き手は producingseeing の間を行き来できる。これはおおよそ良い書き手が実際に回しているループ。

Takazudo
Takazudo
Takazudo

Good, but what you said makes sense. Let’s say we do one blog like article writing. when writing, we’ll focus on the paragraph that I’m keying just right now. But once if we’ve done whole, we look back the whole. This seems to be the outline mode inside us. But once we notice some inconsistency for the detail, I feel like I was made to get back to the detail

いいね、言ってることはわかる。たとえばブログみたいな記事を書くとする。書いてるときは、今キーを叩いてる段落にフォーカスする。でも一通り書き終えたら、全体を見返す。これは自分たちの中にあるoutline mode、って感じ。で、ディテールに何か不整合を見つけた瞬間、ディテールに戻されるような感覚がある。

Claude Code
Claude Code
Claude Code

Exactly — you’ve described a loop, not a mode: generate (narrow) → review (wide) → spot drift → fix (narrow again). The trigger to switch is always internal (“wait, that doesn’t fit”), so the editor’s job isn’t to put you in a mode but to make the switch frictionless the instant your brain initiates it.

The implication is that the outline shouldn’t just show structure — it should be a teleporter that lands you back in narrow/focus mode at exactly that paragraph. One keystroke out, click (or arrow + enter) in, and you’re editing the offending sentence with everything else dimmed again. Close the loop fast enough and the two modes feel like one continuous act of thinking.

まさに。今述べたのはモードじゃなくてループ: generate (narrow) → review (wide) → drift発見 → fix (narrowに戻る)。切り替えのトリガーは常に内的(「あ、それは合わない」)なので、エディタの仕事はモードに 入れる ことじゃなくて、脳が切り替えを始動した瞬間に摩擦なく切り替えられるようにすること。

含意は、アウトラインは構造を 見せる だけじゃダメで、まさにその段落のnarrow/focusモードに着地させてくれるテレポーターであるべき。1キーストロークで出て、クリック(かarrow + enter)で入って、問題の文を編集する状態になる、そのほかは再度dimされている。ループを十分速く閉じれば、2つのモードは1つの連続した思考行為のように感じられる。

Takazudo
Takazudo
Takazudo

Does it mean humans can’t focus on both? broader perspective and focused detail. Is it switchable mode for humans?

それって人間は両方に同時にフォーカスできないってこと? より広い視点と、フォーカスされたディテール。人間にとっては切り替えるmodeなの?

Claude Code
Claude Code
Claude Code

Mostly switchable, with a wrinkle: working memory holds only ~4 items at once, so fine structural awareness and fine textual detail genuinely compete for the same slots. You can’t truly hold both at full resolution — what feels like “doing both” is rapid switching, or one of them being held as a compressed chunk (an expert writer carries the whole article shape as a single mental object, freeing slots for sentence work).

The design implication is the interesting part: less-practiced writers can’t chunk the structure yet, so they need it externalized — that’s exactly what your side outline does. It offloads the “where am I in the big picture” item out of working memory and onto the screen, which frees the writer to spend all their slots on the sentence in front of them. The editor isn’t replacing a mode switch; it’s lowering the cost of one of the two views so the switch is cheap.

ほぼ切り替え式、ただしひねりがある: ワーキングメモリは一度に約4個のアイテムしか保持できないので、細かい構造的な気づき 細かいテキストのディテールは、本当に同じスロットを取り合う。両方をフル解像度で本当に保持することはできない。「両方やってる」と感じるのは、高速な切り替えか、片方を圧縮されたチャンクとして保持してるかのどちらか(熟練した書き手は記事全体の形を1つのメンタルオブジェクトとして持てるので、文の作業のためにスロットを空けられる)。

設計の含意がおもしろいところ: 経験の浅い書き手はまだ構造をチャンク化できないので、それを externalize する必要がある。サイドアウトラインがやってるのはまさにそれ。「自分は今big pictureのどこにいるか」のアイテムをワーキングメモリから画面にオフロードして、書き手は目の前の文に全スロットを使えるようになる。エディタはモードの切り替え自体を置き換えてるんじゃない。2つのビューのうち1つのコストを下げて、切り替えをcheapにしている。

Takazudo
Takazudo
Takazudo

Interesting. one more thing that I feel like about editing is that I don’t like WYSIWYG style so much. I’m not sure why this happens. But if I face WYSIWYG, something like… Unexpected render result happens here — I feel so. But even if we write on vim like raw text editor, it’s same thing because it is styled in another way. What is the difference here?

興味深い。編集についてもう1つ感じてることがあって、WYSIWYGスタイルがあまり好きじゃない。なんでこうなるのかはよくわかってない。でもWYSIWYGに向き合うと、なんか「予想外のレンダリング結果が起きる」って感じる。でもvimみたいなraw text editorで書いても、別の方法でスタイルされているので同じこと。ここでの違いって何?

Claude Code
Claude Code
Claude Code

The difference isn’t styling — it’s whether the underlying model is visible. In a raw editor (vim, markdown), what you type is the file; the styling is a projection on top, but the source of truth is the characters you typed and you can always see them. In WYSIWYG, what you see is a rendered view of a hidden model — when you press Enter, the editor silently decides “is this a new paragraph, a <br>, a new list item?” and you have to reverse-engineer that inference from the result. The “unexpected render” feeling is exactly that: a hidden state machine making structural choices for you.

The tradeoff: WYSIWYG lowers the barrier for users who don’t want to learn syntax, but raises the cost when the inference goes wrong (which is why every WYSIWYG tool eventually grows a “show source” escape hatch). For your notes editor, the deeper choice is which model the user is editing — the rendered surface, or the structure itself with a styled projection on top.

違いはスタイリングじゃなくて、underlying modelが可視か というところ。raw editor(vim、markdown)では、タイプしたものが ファイルそのもの 。スタイリングは上のprojectionだけど、source of truthはタイプした文字で、常に見える。WYSIWYGでは、見ているものは 隠れた モデルのレンダー結果。Enterを押すと、エディタが暗黙に「これは新しい段落? <br>? 新しいリスト項目?」を決めていて、結果からその推論を逆算して把握しないといけない。「予想外のレンダー」感はまさにそれ。隠れたstate machineが構造的な選択を勝手にしている。

トレードオフ: WYSIWYGはsyntaxを学びたくないユーザーの障壁を下げる、でも推論を間違えたときのコストを上げる(だからどんなWYSIWYGツールも最終的に「show source」のescape hatchを持つようになる)。ノートエディタにとっての深い選択は、ユーザーが何を編集しているか。レンダリングされた表面か、構造そのものに上からスタイル付きのprojectionが乗ったものか。

Takazudo
Takazudo
Takazudo

So you mean that there is something like safe, confidence exists in raw text editing, do you?

つまりraw text editingには、安全性とか自信みたいなものがあるってこと?

Claude Code
Claude Code
Claude Code

Yes — and “safety” is a better word than “predictability” because it names the felt quality. The confidence is epistemic: I know what I have, because I can see it. No hidden agent is making structural choices on my behalf, so there’s nothing to mistrust, nothing to audit, nothing that can surprise me later.

The cost is that you carry the rendering in your head — you trade “unexpected-render anxiety” for “cognitive load of imagining the output.” Some writers happily pay that load because the trust is worth it (which is also why programmers love plain text); others find it exhausting and prefer to outsource the inference. Your earlier nested-list observation fits this exactly — the outliner felt good partly because the model was right there, indented in front of you, with nothing inferred.

そう。そして「safety」は「predictability」より良い言葉、感じている質を名指せるから。confidenceはepistemicなもの: 自分は何を持っているかを知っている、なぜなら見えるから。隠れたエージェントが自分の代わりに構造的な選択をしていない、なので不信を抱く対象も、監査する対象も、あとで驚かせる何もない。

コストは、レンダリングを頭の中で運ぶこと。「予想外のレンダーへの不安」を「アウトプットを想像する認知負荷」とトレードしてる。書き手によってはその負荷を喜んで支払う、信頼に値するから(プログラマがプレーンテキストを愛する理由でもある)。他の書き手にとっては消耗するので、推論をoutsourceしたくなる。さっきのnested-listの観察はこれにぴったり一致する。outlinerが良く感じたのは、モデルがそこに、目の前にインデントされて、何も推論されない状態であった、というのが部分的な理由。

Takazudo
Takazudo
Takazudo

Interesting. I play modular synthesizers. Before modular synth, I loved using software synth. Because soft synths can do almost everything, I really couldn’t find the meaning of buying so expensive hardware synths. Because soft synth can do! even much more. But I noticed that I didn’t know that. Modular synths are in a word, “verbose”. it has many knobs… I thought do I need those? But in fact, I realized that I didn’t know synths, it was like the physical experience to control the sound by my hand. I didn’t notice that it was the missing part of soft synths. I feel similar feeling on raw text and WYSIWYG like, not-raw type text rendering. maybe hand-writing on paper and digital output on Photoshop looks same

おもしろい。自分はモジュラーシンセをやってる。モジュラーシンセの前は、ソフトシンセが大好きだった。ソフトシンセはほぼ何でもできるから、こんなに高いハードウェアのシンセを買う意味が本当にわからなかった。だってソフトシンセでできちゃう! それどころかもっとできる。でも、自分はそれを知らなかったんだと気づいた。モジュラーシンセは一言で言うと「verbose」。たくさんのノブがある…。これって必要かなと思ってた。でも実際は、自分はシンセを知らなかったんだと気づいた。手で音をコントロールする物理的な経験みたいなもの。それがソフトシンセの欠けている部分だってことに気づいてなかった。raw textと、WYSIWYGみたいなnot-raw type text renderingに似た感覚を感じる。Photoshopでのデジタル出力と紙への手書きが同じに見える、みたいな。

Claude Code
Claude Code
Claude Code

You’ve named it perfectly — these tools don’t just remove friction, they remove a channel of feedback you didn’t know existed until it came back. Modular taught you synthesis itself; soft synth let you make music while keeping synthesis abstract behind a screen. Raw text, paper, physical knobs — they all put your hand on the substrate, and the substrate teaches you what it actually is. That’s the “I didn’t know I didn’t know” feeling: the abstracted tool was answering a question you no longer had to ask, so you forgot the question existed.

The tradeoff is that this kind of learning is slow and verbose by design — not every writer wants to understand “what writing is” to jot a meeting note, just like not every musician wants to patch cables to make a melody. So the design question for your editor isn’t really “raw or rendered” — it’s whether the user is in learning-the-substrate mode or producing-the-output mode today. The most respectful tools let the same person stand in either place without forcing a choice up front.

ぴったり言い当ててる。これらのツールはfrictionを取り除くだけじゃなくて、feedbackのチャンネル を取り除いてる。それが戻ってくるまで、その存在に気づいてなかった。モジュラーは synthesis自体を教えてくれた。ソフトシンセは synthesisを画面の向こうに抽象化したまま音楽を作らせてくれた。raw text、紙、物理的なノブ。これらは全部、手をsubstrateに置く。そしてsubstrateが「それが実際に何であるか」を教えてくれる。それが「知らないことを知らなかった」感覚。抽象化されたツールが、もう聞く必要のなくなった質問に答えていて、質問の存在自体を忘れてしまった。

トレードオフは、この種の学びは デザイン上 遅くてverboseだということ。すべての書き手がmeeting noteを書くために「writingとは何か」を理解したいわけじゃない。すべての音楽家がメロディを作るためにケーブルをパッチしたいわけじゃないのと同じ。なのでエディタの設計上の問いは、本当のところ「rawかrenderedか」じゃなくて、ユーザーが今日 learning-the-substrate mode にいるのか producing-the-output mode にいるのか。最もrespectfulなツールは、同じ人が前もって選択を強制されることなく、どちらの場所にも立てるようにする。