ヒアリング項目をHTMLファイル化したら捗った話｜Markdown・Excelとの比較

仕事でお客様にヒアリングをする機会があります。

前任者が担当していた頃は、ヒアリング項目をMTGのたびにその場で考えていました。

その結果、項目は毎回ブレるし、担当者が変われば内容がまったく違うヒアリングになる、という状態のまま業務を引き継ぎました。

この記事は技術解説ではなく、ヒアリングをテンプレート化する過程で「なぜHTMLファイルに行き着いたか」という判断の記録です。

まずMarkdownでテンプレ化した

引き継いだ直後にやったのは、ヒアリング項目をMarkdownでテンプレート化することでした。

項目をブレさせないためには、まず「どのMTGでも同じ項目を聞く」状態を作る必要があると考えたからです。

VSCodeでMarkdownファイルを作り、プレビュー表示にしてMTGに臨みました。

ですが、実際に使ってみると視認性がよくありませんでした。

特に画面を投影しながらお客様と一緒に見る場面では、チェックボックスや選択項目が並んでいても「今どこを埋めているか」がひと目でわかりません。

エンジニア同士なら気にならない見た目でも、一般ユーザーの方からすると読みにくい資料になっていたと思います。

次に考えたのがExcelでした。

チェックボックスや入力欄をセルで作れば、Markdownより視認性は上がりそうです。

ただ、Excelはお客様の環境によって表示崩れが起きやすく、ファイルを開くための前提（Officeのライセンスや互換ソフト）もこちらでは制御できません。

そこで「ブラウザさえあれば誰でも同じ見た目で開けるHTMLファイルにすればいいのでは」と考えました。

チェックボックス、選択式（プルダウン）、自由記述という3種類の入力形式が必要だったので、これは普通のHTMLフォームで十分表現できます。

Claudeに「ヒアリング項目をHTMLファイルにしたい」と依頼したところ、この構成のフォームを一瞬で作ってくれました。

ヒアリングシートのHTMLフォーム(未記入状態)。案件名・実施日の入力欄、チェックボックスの導入目的、プルダウンの導入時期、自由記述の課題欄が並ぶ

見た目はこの通りシンプルです。

MTG中はこの画面を投影しながら、該当する項目にチェックを入れたり、自由記述欄に要点をその場で打ち込んだりしていきます。

チェックした項目は色が変わるようにしてあるので、投影した状態でも「今どこにチェックが入っているか」がお客様側からも見てわかります。

ヒアリングシートのHTMLフォーム(記入済み状態)。導入目的のチェックボックスが2つ選択され、導入時期は「半年以内」、課題欄・特記事項欄にも文章が入力されている

運用を始めてすぐに気づいたのが、ブラウザでHTMLファイルを開いて中身を編集しても、大元のHTMLファイルは更新されないという当たり前の挙動でした。

ブラウザはあくまでファイルを「表示」しているだけで、画面上でチェックを入れたり文字を打ち込んだりしても、それはブラウザのメモリ上の状態にすぎません。

タブを閉じれば入力内容はすべて消えます。

これでは「MTG中に記入 → そのままファイルとして残す」という目的を果たせません。

そこで、フォームの右下に「この内容で保存（ダウンロード）」というボタンを追加しました。

ボタンを押すと、その時点でのチェック状態・選択内容・自由記述の中身をすべてHTMLの属性やテキストとして書き込み直し、新しいHTMLファイルとしてローカルにダウンロードする仕組みです。

これによって、MTGが終わった時点の状態がそのまま1つのHTMLファイルとして手元に残るようになりました。

この仕組みを使った今後の流れは、次のようになりそうです。

お客様との認識齟齬をなくすという意味では、4.の「その場で記入した内容をそのまま共有する」がいちばん効きそうだと考えています。

議事録を別途作ってまとめ直す手間がなく、ヒアリングした内容がそのまま合意事項として残る運用になるためです。

社内向けのちょっとしたフォームや、営業・ヒアリング資料をテンプレート化したい人には、この「HTML1枚 + ダウンロードボタン」という構成は試す価値があると思います。

HTMLファイル側の具体的な実装（ダウンロード機能の作り方）は、技術寄りの内容なのでZennの記事にまとめました。実装に興味がある方はあわせてご覧ください。