Claudeを使ってお客様向け作業手順書をHTMLで作り直してBlob Storageで配布するようにした話

こんにちは、非エンジニアのHarada です。

背景：スプレッドシートのチェックリストに限界を感じた

私のチームでは、お客様にAzureサブスクリプションの商流移行をご案内する際、作業手順をスプレッドシート形式のチェックリストとして配布していました。

しかしこれ、運用していくなかでいくつかの問題が出てきました。

• チェックボックスが機能しない：お客様環境ではGoogleスプレッドシートを直接渡せないため、PDF化して配布。結果、チェックボックスはただの見た目になっていた
• 情報が一箇所に集まりすぎている：事前確認・移行前作業・当日・移行後の確認がすべて同一シートに並んでいて、「今自分はどこのフェーズにいるのか」がわかりにくい
• 配布のたびに手間がかかる：更新のたびにPDF化→再配布が必要。お客様もわざわざファイルをダウンロードして開く必要があった

そこで、HTMLファイルで手順書を作り直し、Azure Blob Storageで配布するという方法に切り替えました。

やったこと

1. HTMLで手順書を作成

VSCodeでHTMLファイルを作成しました。

私は非エンジニアで、HTMLファイルに触れるのはこれが初めてでした。それでも Claude（AI）にサポートしてもらいながら、デザインのコーディングから画像の挿入、ファイルの文字コード変換まで進めることができました。「こういうデザインにしたい」「この項目を追加したい」と会話形式で伝えるだけで、AIがコードを書いてくれるのは非エンジニアにとって大きな助けになりました。

工夫したポイントは以下の通りです。

フェーズ別に段階構成にした

フェーズごとにカラーを分けることで、お客様が「今どこのフェーズか」を一目で把握できるようにしました。

スクリーンショットを挿入した

操作手順が必要な箇所にはAzureポータルの画面イメージを挿入。文章だけでは伝わりにくい操作手順をビジュアルで補完しました。

FAQセクションを追加した

過去のお客様からの問い合わせをもとに、よくある質問と対応方法をまとめたセクションを末尾に設けました。問い合わせ対応の工数削減につながることを期待しています。

★イメージ

2. Azure Blob Storageで配布

作成したHTMLファイルは、すでに別資料の配布に使用していたAzure Blob Storageの既存コンテナにアップロードしました。

これにより：

• URLを共有するだけでお客様に最新版を届けられる
• ファイルを更新すればURLはそのままで内容が即時反映される
• PDF化・再配布の手間がなくなる
• お客様はリンクをクリックするだけで手順書を確認しながら作業できる（ファイルのダウンロード不要！）

つまづいたこと＆どう解決したか

非エンジニアが初めてHTMLファイルを触ったので、当然つまづきました。同じように挑戦する方の参考になればと思い、ハマったポイントを正直に書いておきます。

文字化けが直らない

HTMLファイルをVSCodeで開いたら日本語が全部文字化けしていました。原因はファイルの文字コードがShift JISになっていたこと。<meta charset="UTF-8">をHTMLの先頭に追加し、UTF-8で保存し直すことで解決しました。

画像が表示されない

最初は画像をHTMLファイルに直接埋め込む方法（Base64エンコード）を試みましたが、データ量が多すぎてうまくいかず断念。最終的にHTMLファイルと画像ファイルを同じフォルダに置いて相対パスで参照する方法に落ち着きました。

結果

手順書の配布フローがシンプルになり、更新コストが大幅に下がりました。
また、お客様側もPDFをダウンロードして開くという手間がなくなり、URLをクリックするだけで手順書を確認しながら作業を進められるようになりました。PDFのようなページ区切りを気にせず、スクロールしながらシームレスに作業できる点も地味に大きな改善です。顧客体験の改善という観点でも一定の効果があると考えています。

非エンジニアでもAIを活用すれば、HTMLとBlob Storageの組み合わせは十分実用的な選択肢になります。同じような課題を抱えている方の参考になれば幸いです。