災害時にAIで情報共有サイトを爆速開発！「イマココナビ」に学ぶ緊急時のWeb制作術

AIが拓く災害時Web制作の新境地：3.5時間でサイト構築の衝撃

熊本地震の発生直後、AIを活用してわずか3時間半で情報共有サイト「イマココナビ」が立ち上げられた事例は、Web制作に携わる私たちにとって非常に示唆に富んでいます。このサイトは、被災者が必要とするニッチな生活情報をリアルタイムで共有することを目的とし、すでに16万人以上が利用しています。行政ではカバーしきれない「子供が遊べる公園」や「爬虫類のペットフード売り場」といった情報を、被災者主導で共有できる点が大きな強みとなっています。

このプロジェクトを主導したのは、Webマーケティング会社代表の加悦美里さんです。彼女は、地震発生直後にSNSでの情報共有の限界（タイムラグや情報の乱立）を痛感し、即時性の高い情報確認の場が必要だと判断しました。そして、仕事柄AIを使ったサイト制作経験があったことから、スマホを使ってAIに「地震発生時に価値ある情報をまとめられるサイトを作りたい。みんなが書き込め、見られるようにしたい」と指示。約20回の指示の繰り返しを経て、驚異的なスピードでサイトを完成させました。

「イマココナビ」から学ぶ、災害時にWeb制作で何ができるのか

「イマココナビ」の事例は、災害時におけるWeb制作の可能性を大きく広げるものです。具体的に何ができるのかを掘り下げてみましょう。

• 圧倒的なスピードでの情報プラットフォーム構築: 従来の開発プロセスでは考えられない短時間で、必要な機能を備えたWebサイトを立ち上げることが可能です。これは、緊急性の高い災害時に特に重要となります。
• 被災者主導の情報共有基盤の提供: 行政では拾いきれないような、非常にニッチで個人的なニーズに対応する情報（例: 高齢者でも運べる小容量のペットボトル水の配布場所、特定のペットフード販売店）を、被災者自身が投稿・共有できる仕組みを提供できます。
• リアルタイムな情報更新とニーズへの柔軟な対応: SNSの課題であった情報のタイムラグや乱立を解消し、即時性の高い情報を集約できます。また、発災後の時間の経過とともに変化する被災者のニーズに合わせて、ジャンルを柔軟に拡充する運用が可能です（例: 発災1週間後に託児所や子供が遊べる公園の情報欄を追加）。
• 「情報」をライフラインとして機能させる仕組み: 災害時において「情報」は物資と同じくらい重要なライフラインとなります。このサイトは、情報の流通を促進し、被災者の「目に見えない支え合い」を形にする役割を果たしています。

どう使える？Web制作者・開発者が実践できること

この事例から、私たちWeb制作者や開発者が具体的にどう行動できるか、いくつかの視点から考えてみましょう。

• AIを活用したプロトタイプ開発の習熟: 「イマココナビ」はAIへの指示出しだけでサイトを構築しました。日頃からAIツール（生成AIなど）を使ったWebサイトやWebアプリケーションのプロトタイプ開発を練習し、緊急時に即座に活用できるスキルを磨くことが重要です。具体的な指示の出し方や、意図するアウトプットを引き出すためのプロンプトエンジニアリングのスキルは、今後ますます価値が高まります。
• シンプルなUI/UX設計の追求: 災害時は誰もが精神的に疲弊しており、複雑な操作は困難です。「イマココナビ」が多くの人に利用されたのは、直感的で使いやすいインターフェースが貢献したと推測されます。緊急時でも迷わず使える、シンプルかつ機能的なUI/UX設計を常に意識し、開発に活かす訓練が必要です。
• オープンソースや既存サービスの活用検討: ゼロから全てを開発するのではなく、既存のCMS、フレームワーク、API、あるいはオープンソースの地図サービスなどを組み合わせることで、開発期間を大幅に短縮できます。緊急時には、完璧なものを目指すよりも、まずは機能するものを迅速に提供することが求められます。
• オフライン対応や低帯域環境への配慮: 災害時はインターネット接続が不安定になることもあります。オフラインでも一部の情報が見られるPWA（Progressive Web App）の検討や、低帯域環境でも高速に表示されるような軽量なサイト設計も、今後の災害対策では不可欠となるでしょう。

試すならどこから？緊急時Web制作の第一歩

「イマココナビ」のような緊急時対応のWeb制作を試すなら、まずは以下のステップから始めてみてはいかがでしょうか。

• AIプロンプトエンジニアリングの基本を学ぶ: ChatGPTやClaudeなどのLLMに「災害時に役立つ情報共有サイトの構成を考えて」「特定の情報を投稿・閲覧できるシンプルな掲示板サイトのHTMLとCSS、JavaScriptを生成して」といった具体的な指示を出し、実際にコードを生成させてみましょう。生成されたコードをローカルで動かし、修正を加える練習をすることで、AIとの協調開発の感覚を掴めます。
• 既存のCMSやノーコード・ローコードツールの習熟: WordPress、STUDIO、BubbleなどのCMSやノーコード・ローコードツールは、プログラミング知識が少なくても迅速にサイトを構築できます。これらのツールを使って、災害時の情報共有を想定したデモサイトを実際に作ってみることで、緊急時にどれくらいのスピードで何ができるかを把握できます。
• 災害時を想定した情報共有シナリオの検討: 実際にどのような情報が必要とされ、どのように共有されるべきかを具体的に想像し、そのシナリオに合わせたサイトの機能やコンテンツを設計してみましょう。「行政が提供できないニッチな情報」とは何か、具体例をリストアップするだけでも良い訓練になります。
• 地図情報サービスAPIの活用検討: Google Maps APIやMapboxなど、地図情報サービスをWebサイトに組み込むことで、避難所や物資配布場所、営業店舗などの位置情報を視覚的に分かりやすく提供できます。これらのAPIの基本的な使い方を学ぶことは、災害時サイト制作において非常に有用です。

「イマココナビ」の事例は、AIの進化とWeb制作の迅速化が、社会課題解決にどれほど貢献できるかを示しています。平時からこれらの技術に触れ、スキルを磨くことが、いざという時の大きな力となるでしょう。