Touchable HTML · Field Note 01

画像インフォグラフィックではなく、
触れるHTMLで説明する理由

一枚の絵は、結論を伝えるのは得意です。けれど「そこへどう辿り着いたか」という過程には弱い。説明をHTMLにして部品化すれば、書き手の側に固定されていた読む順番と粒度を、手放せます。この記事は、その主張を文章で述べるだけでなく、同じ題材を二つの見せ方で並べて、あなた自身の手で確かめられるようにしました。

構造の人 Lab ／読了の目安 5分／触れる実演つき

トップへ戻る

The Flat Image

一枚の絵が、取りこぼすもの

チャートやグラフで埋まった一枚の額装インフォグラフィックの前に立つ人が、その表面を指で触れている。図は平面のまま動かない。 — 平らな絵は、眺めて終わる。

業務の説明資料で、フロー図やインフォグラフィックは重宝されます。全体が一目で入る。印刷できる。誰かに見せたとき「分かった気」になりやすい。これは画像の強みで、否定するものではありません。

問題は、その「分かった気」が結論の輪郭に偏ることです。矢印が三本並んでいても、なぜその順番なのか、どこで分岐するのか、ある一手順だけを深く知りたい人はどこを見ればいいのか——絵はそれらを一様な解像度で塗りつぶしてしまいます。誰が開いても、同じ大きさ・同じ順番で受け取るしかありません。

つまり一枚の絵は結論に強く、過程に弱い。情報の粒度と読む順番が、最初から書き手の側に固定されているのです。

See for yourself

同じ題材を、二つの見せ方で

題材は、この Lab そのものが勧めている「AIに頼んでアプリ(触れるHTML)を作る」の全体像です。まったく同じインフォグラフィックを、一枚の画像と、触れるHTMLの二通りで用意しました。仕組みの流れを再生したり、各工程の中身を開いたりできるのは、HTML側だけです。

一目で分かる画像対順番と深さを選べるHTML

その一画像インフォグラフィックとして見る

全体像はひと目でつかめます。でもどこも押せない——流れを再生することも、工程を開くことも、注意点を畳んでおくこともできません。

「話すだけで、自分用のアプリができる」というインフォグラフィック。必要なもの(パソコン・ターミナル・AIアシスタント)、仕組み(ふつうの言葉で頼む→AIが作業する→触れるHTMLができる)、注意点、まずはここから、を一枚にまとめた静止画像。 — 画像インフォグラフィックとして見たところ。

止まった一枚に対して、読む人にできることはありません。どこから読むか、どこまで掘り下げるか——順番も深さも、画像が決めたままです。

その二触れるHTMLとして見る

これをそのままHTMLにしました。見た目は〈その一〉の画像とまったく同じ。でも、こちらは動きます——下の ▶ を押すと、各パネルへ順にスクロールしながら、必要なもの → 仕組み → 注意点 → 使い始め、と一つずつ案内します。

話すだけで、自分用のアプリができる

コードを書かず、ふだんの言葉でAIに頼むだけ。

必要なもの

パソコン・スマホターミナル(CLI) AIアシスタント

仕組み

1ふつうの言葉で頼む

2AIが作業する

3触れるHTMLができる

注意点

1日に使える量(トークン)に上限がある。大物は計画的に。

AIに任せきりにせず、できた結果は自分の目で確かめる。

まずはここから

小さな「触れるHTML」を、ひとつ作ってみる。完璧でなくていい。動かして直すのが一番の近道。

ここから、さらに動きを足せます

各工程をタップして、中身を開く

上の「仕組み」の ① ② ③ は、タップすればそこで何が起きているかを開いて読めます。一枚の絵では、こうして掘り下げることはできません。

詳しさも、あなたが選べる

順番だけではありません。同じ「仕組み」を、粗くも細かくも——下のつまみを動かすと、文も、行数も、色までいっせいに変わります。一枚の絵は、これを一つの詳しさで固定したままです。

説明の詳しさ

いま：ざっくり 表示中の説明：3 行

頼む「経費の表をブラウザで一覧に」のように、ふつうの言葉で頼むだけ。コードも専門用語も要りません。
作る AIがターミナルの中で、作って・直して・確かめます。あなたは進み具合を眺めているだけで構いません。
できるブラウザで開けば、押す・並べ替える・数字を変えるが動きます。画像と違い、読み手がその場で触れます。

スクロールで組み上がり、流れが光り、工程を開き、詳しさまで選べる——同じ内容でも、画像とは「読み方の自由」がまるで違います。同じ要領で、注意点の補足も、業務ごとの分岐も、必要なだけ足していけます。

What HTML adds

HTML化すると、何ができるか

説明を画像から構造化されたHTMLへ移すと、絵では一つに固定されていたものが、いくつかの自由に分かれます。

読む順番は、自分で選ぶ

仕組みを順に再生して流れで掴む人もいれば、気になる工程だけ先に開いて読む人もいます。書き手が決めた一本道ではなく、自分の問いに沿って入口を選べます。

粒度も、自分で決める

全体は畳んだまま俯瞰し、必要な工程や補足だけ開いて深く読む。情報を削るのではなく階層化することで、初めての人にも、確認したいだけの人にも同じページが応えます。

過程を、検証可能にする

「なぜこの順番か」「どこで分岐するか」を、絵の余白に押し込めず、開けば必ず読める場所に置けます。結論の輪郭だけでなく、そこに至る筋道まで手渡せます。

In closing

まとめ — 主導権は、あなたの手に

一枚の絵は結論に強く、過程に弱い——だから説明を部品化されたHTMLへ移すと、画像では固定されていた読む順番や粒度を、手元から選べるようになります。その違いは、この記事の二つの実演がそのまま映しています。画像は触れても動かず、触れるHTMLは観点と深さを選べる。並べてみると、その差がそのまま見えてきます。

構造の人 Lab は、複雑な業務やルールを「誰もが辿れる構造」へ翻訳し、それを触れる形にして残していく場所です。一枚の絵で立ち止まらない説明を、一つずつ作っていきます。