要点
- AIで文書の量が増えるほど、頭の中で情報を組み立てる負担も増えます
- Mermaidの図は、文章から構造を読み解く作業を読み手の代わりに担います
- さらに配色を整えると図が見やすくなり文書への抵抗感も減ります
生成AIのおかげで、仕様書や設計メモを短時間で書けるようになりました。
一方で、丁寧すぎるほどの文章が次々に生まれ、読む側が追いつけないと感じる場面も増えています。
この記事では、VS Code拡張のMarkdown Preview EnhancedとMermaidを使い、ドキュメントを読むときの認知負荷を軽くするアプローチを紹介します。
AIで増えたドキュメントと認知負荷
Nielsen Norman Groupは、UIの認知負荷を「システムを操作するために必要な精神的リソースの量」と説明しています。人間の脳にも処理能力の限界があり、いくら早くて精度の高いものが出来上がってもそれを認知するためにはエネルギーが必要です。
AIが書く文章は、どこが要点なのか見えにくくなりがちで、読み手はそれらの関係を頭の中で図に組み立て直さなければなりません。文書が増えるほど、この組み立て作業が積み重なり、読むこと自体が億劫になっていき、最終的には「認知的降伏」に繋がります。
今回はそうした課題をマークダウン内で使える表現を工夫することで軽減したいと思い、おすすめのVSCodeプラグイン「Markdown Preview Enhanced（以下MPE）」やわたしが最近作成した「md-theme」リポジトリを紹介したいと思います。
Mermaidで「頭の中の組み立て」を肩代わりする
MPEは、VS Code上でMarkdownをプレビューする拡張機能です。コードブロックの言語名をmermaidにするだけで、下記のようにプレビュー上に図が描画されます。
flowchart LR
A[受付API] --> B[処理サービス]
B --> C[(データベース)]
B -. 失敗時 .-> D[通知]Mermaidの公式には、たくさんの図が用意され、いろいろな用途で自分の頭の中を整理するために役立ちます。
デフォルトテーマのままでは残る負荷
ただMPEのままだと配色やスタイルに一貫性がなく、資料として共有するには少し不恰好なドキュメントのままです。
また、ドキュメントを見返す際にも不揃いなデザインのため、小さな思考のノイズが溜まります。
視認性と統一感を高めるテーマギャラリー「md-theme」
そこで今回、MPEの設定ファイルを少しカスタマイズして、手軽に整ったドキュメントを生成するために、md-themeを作成しました。
それこそ、その設定ファイルをAIにお願いすれば・・ということもあるかもしれませんが、実際に設定ファイルをカスタマイズする際には、図の種類ごとに色を確認する必要があり、時間がかかりました。
また、変数とスタイリングを分離するなどリファクタリングを通して整えたコードでもあります。
現在はtheme-clean、theme-design、theme-ocean、theme-salesの4種類があるので、MPEプラグインをインストールした後に~/.local/state/crossnote/内のお好きなテーマフォルダの下記のファイルを上書きすればOKです。
-
primitives.less：主色・補助色・警告色などのカラーパレット -
style.less：見出し、引用、表などプレビュー本文のスタイル -
config.js：MermaidのthemeVariablesと、図の種類ごとの細かな調整
また、リポジトリ内にはSAMPLE.mdもあるので、プレビューを確認することもできます。
ぜひご興味があればお試しください。
Top comments (0)