アウトライナーでどんどん書いていってアウトラインを作ったとする。その内容が自分の中でホットな間はそれで困らないのだが、少し時間が経ってから見返すと、全体のメリハリが一目でわからなくなり内容の認識に手間取ることがある。

　HeadingやColor、太字や斜体などを駆使してアウトラインの見た目をリッチにするという手もあるが、あんまりごてごてとやってもかえって把握しづらいし、ノードの操作が硬直的になるからノードの役割がはっきり決まっている場合以外はその手は使いにくい。

　CSSの上書きによる全体のスタイルの調整で解決することはできないだろうか。

　

　内容が一目でわからないというのは、単純に言えば「どこからどこまでがどういう一塊かわからない」ということだ。DynalistやWorkflowyのようなプロセス型アウトライナーは全てのノードが同じ見た目をして同じように扱えるのが良いところだが、それゆえに文字とインデントしかヒントがないということになり全体がのっぺり見えることがある。

　このことに対して二つの道を考えた。

　まずひとつは子項目を含めてノードを枠で囲ってしまうこと。そうすればその枠内が親子関係上一塊であることが一応明確になる。ちょっと設定が雑だがイメージとしては以下のような感じ（サンプルの文言が不自然だがこれは一番最後の例のために用意したもの）。

　塊は認識できるが、階層が深くなっていくと枠が何重にもなってしまうのが気になる。もうちょっと綺麗にしようはあるものの、そうしたとしてもあんまり嬉しい感じではない。

　かなり前だが、子項目部分に不透明度を下げた色をつけるというのも試したことがある。階層が深くなればなるほど色が重なって濃くなっていくという形だ。

　これはやや極端に色を付けた例。仕組みとして悪いとは思わなかったが、視覚情報が増えすぎて疲れてしまう感じがあったので程なくしてやめた。

　

　もうひとつ考えたことは、「メリハリがわからない」という状態を視線誘導で解消するみたいなものだ。具体的には、各ノードの本文を文字列のサイズ依存で枠で囲み、行というより粒状の見た目にしてみる。

　枠で囲むとその範囲にピタッと視線が定まる感じがあり、またインデントが明確になるので大量に並んでいてもある程度把握が容易になる。話題の一塊をまとめて括っているわけではないが、何もしないよりは認識しやすくなる。

　スマホアプリとしてリリースされているアウトライナーでもこのように各ノードを内容のサイズに合わせて囲っているものがある。パッと見た時は枠が煩わしい印象を覚えたが、目が滑らないようにノードをはっきり視認したいという要求を抱いた上でデザインを自分好みに調整したならば、これはなかなか悪くない感じがする。

　なお足したCSSは以下の通り。画像では他に適用しているスタイルが反映されているがそれについては省略。

.Node-renderedContent {
    outline: solid 1px #bbb;
    width: fit-content;
    padding-right: 6px;
    padding-left: 2px;
    max-width: 100%;
    border-radius: 3px;
}

　実際、何ヶ月か前に書いてそのままになっていたアウトラインが読みにくく感じて手を加えるのを億劫に思っていたが、このようにスタイルを変えたら随分認識が楽になって作業が進んだ。

　しばらく続けるとまた何か思うところが出てくるかも知れないが、とりあえずはこのまま使ってみようかと思う。