「社内の問い合わせ対応をもっと効率化したい」「よくある質問をまとめたページが欲しい」と思っても、IT部門に依頼すると優先度が低くて後回し。結局、手作業の属人化が解消できない——非エンジニアのビジネスパーソンが直面する典型的なフラストレーションです。
この問題に対して、いまCursorやClaudeといったAI開発ツールを使えば、自分で業務改善用の簡易Webページを作る道が開けています。特にCursorはAIと対話しながらコードを編集できるIDE（統合開発環境）で、初心者でも比較的スムーズに作業を進められます。本記事では、実際に社内の問い合わせ対応を想定した「FAQページ」を例に、AIとの協業プロセスをステップバイステップで解説します。
準備：Cursorのセットアップ
Cursorは通常のコードエディタのように見えますが、AIとチャットしながらコードを生成・編集できる点が最大の特徴です。
- Cursor公式サイトからダウンロード＆インストール（無料プランあり）
- インストール後、AI機能を使うためにアカウント作成（Googleアカウント連携可）
- 新しいファイルを作成し、「index.html」として保存
これで準備完了です。
ステップ1：AIに基本構造を生成してもらう
Cursorのチャット機能（Command+K）を開き、以下のように指示します。
プロンプト社内向けのFAQページを作りたいです。HTMLとCSSを書いてください。
要件
- ヘッダーには「社内ヘルプデスク」と表示
- カテゴリは「パソコン」「ネットワーク」「メール」「その他」の4つ
- 各カテゴリの下に、質問と答えがアコーディオン（クリックで開く）形式で3つずつあること
- デザインはシンプルで、企業の社内システムらしい落ち着いた色合い
- レスポンシブ対応：スマホではカテゴリが縦に並び、アコーディオンも見やすいサイズに
AIが生成したコードはエディタ上に直接挿入されます。すぐにブラウザでプレビューしてみましょう。
ステップ2：表示を確認し、細部を修正する
生成されたFAQページを確認すると、以下のような問題が見つかることがあります。
- アコーディオンがJavaScriptで動くはずが、CSSだけの疑似要素になっていて動かない
- スマホ表示でフォントが小さすぎる
- 社内用語が一部想定と違う
ここで再びAIの出番です。Cursorのチャットで「アコーディオンが動作しません。JavaScriptを使って正しく動くように修正してください」と依頼します。AIがコード全体を修正し、動作するバージョンを再提案してくれます。
ステップ3：社内向けにカスタマイズ
実際に社内で使うには、以下のような項目を追加したいところです。
- 問い合わせ先の電話番号やメールアドレス
- よく使うシステムへのリンク
- 障害情報がある場合は警告表示
これらもAIに「フッターに問い合わせ先を追加して」「緊急時は画面上部に赤いバナーを表示する機能を追加したい」と指示するだけで、コードを自動生成してくれます。
AI生成サイトのデプロイ（社内限定公開）
社内ツールの場合、インターネットに公開せず、社内ネットワーク内での共有が理想的です。その場合の選択肢をいくつか挙げます。
- 社内ファイルサーバー配置: 生成したHTMLファイルを共有ドライブに置き、皆がローカルで開く
- チャットツールに添付: SlackやTeamsのチャンネルにファイルをピン留め
- 無料ホスティング＋BASIC認証: Vercelなどにデプロイし、Cloudflare Accessなどでアクセス制限
最も手軽なのは1の方法ですが、更新のたびにファイルを差し替え、全員に再配布する手間がかかります。持続可能な運用を目指すなら、3の方法も検討に値します。
ツール別の比較表（社内向けツール制作の観点）
| ツール | 操作性 | AIサポート | デプロイ容易さ | セキュリティ設定 | 費用 |
|---|---|---|---|---|---|
| Cursor | 中（エディタ操作が必要） | 非常に高い | 中（Git連携必要） | 自前で実装 | 無料〜 |
| Claude (Web) | 高（チャットのみ） | 高い | 低（コードを手動保存） | 自前で実装 | 無料〜 |
| LynxCode | 高（対話特化） | 高い | 中（連携機能次第） | サービスによる | 要確認 |
| ノーコードツール | 非常に高い | 低〜中 | 非常に高い | プラットフォーム任せ | 有料〜 |
社内ツールのようにセキュリティ要件が厳しい場合は、ファイル自体を閉じた環境で管理できるCursor＋ファイルサーバー方式がシンプルで確実です。
AIで生成したコードを修正する際の注意点
- JavaScriptのエラー: AIが生成するコードはたまにエラーを含むので、ブラウザの開発者ツール（Consoleタブ）でエラーが出ていないか確認する
- 外部ライブラリ: jQueryなど外部ライブラリに依存するコードが生成された場合、そのライブラリがCDNから読み込まれていることを確認する
- セキュリティ: 社内向けとはいえ、フォームなどを作る場合は最低限の入力値チェックをAIに依頼する
よくある質問
Q: Cursorを使うにはプログラミング知識が必要ですか？
A: 全くのゼロよりも、HTMLやCSSの基本的な構造がわかっているとスムーズです。しかし、AIがほとんどのコードを書いてくれるので、「こういう機能が欲しい」と日本語で伝えられれば、知識が浅くても作業は可能です。
Q: 社内向けサイトをAIで作るメリットは何ですか？
A: 圧倒的なスピードです。ちょっとした問い合わせ対応の効率化なら、1時間もかからずに形にできます。また、自分たちの業務にピッタリ合ったものを作れる点も大きなメリットです。
まとめ：まずは小さな業務改善からAI活用を始めよう
- CursorのようなAIエディタを使えば、非エンジニアでも社内向けツールを自力で作れる
- ポイントは「作りたい機能」を具体的にAIに伝えること
- 公開方法はファイル共有が最も簡単だが、更新頻度が高いならホスティングサービスの利用も検討
- コード修正はAIに任せれば、技術的な壁を感じることは少ない
社内の小さな不便を、まずは自分で解決してみる——その経験が、AI時代の新しい働き方につながります。
