2 年ぶりの社員旅行で長崎に行きました。前回は、写真を投稿してミッションを達成していく専用アプリを制作しましたが、今回も社員旅行に合わせて新しい Web アプリを用意することに。

今回はこのアプリを題材に、弊社で始める新サービス「AIプロトタイプ壁打ち」を社内で検証しました。普段は広報を担当し、開発を専門としていない私がクライアント役となって Claude で作ったプロトタイプを持ち込み、エンジニアとアートディレクターの支援を実際に受けながら、社員旅行で使えるアプリへ仕上げました。

本記事では、AIプロトタイプ壁打ちの流れと、アプリが完成するまでの過程を紹介します。

01 「AIプロトタイプ壁打ち」とは

Claude のようなツールを使えば、専門的な知識が十分になくても、画面や基本的な動きを備えたプロトタイプを作れます。ただ、それを公開し、実際に人に使ってもらうとなると、見た目を整えるだけでは済みません。

入力したデータはどこに保存するのか。利用者以外から見えないようにするにはどうすればよいのか。必要な機能を実現するには、どのサービスを組み合わせればよいのか。AI に聞けば実装方法は返ってきますが、その内容が適切かどうかを判断するには専門的な知識が必要です。

「AIプロトタイプ壁打ち」は、AIで作ったプロトタイプをもとに、実現したいことや利用する場面をヒアリングし、技術、デザイン、使いやすさ、セキュリティなどの観点から、実用化までに必要なことを整理するサービスです。

まだ要件が固まっていない段階でも、「このまま進めて大丈夫か」「次に何をすればよいか」といったところから相談できます。

今回は「月額顧問：ライト」に相当

AIプロトタイプ壁打ちには、支援内容に応じて次の 3 つのプランがあります。

• 単発セッション： ヒアリング、90 分のセッション、簡易レポート
• 月額顧問・ライト： Slack での随時相談、隔週 1 回のセッション
• 月額顧問・スタンダード： Slack での随時相談、週 1 回のセッション

今回はこのうち、「月額顧問：ライト」に相当する内容で社内検証を実施しました。

実際のクライアントとのやり取りを想定した上で、技術担当者もデザイナーもいない企業の担当者として、私がクライアント役を務めました。支援を担当したのは、弊社のエンジニアとアートディレクターです。

初回の壁打ちだけでなく、技術構成の提案、開発環境やバックエンドの土台づくり、その後の Slack やミーティングでの相談、デザインレビューまで、アプリの完成に向けて継続的にサポートを受ける形で進めました。

02 社員旅行用アプリのプロトタイプを作る

作りたかったもの

社員旅行用アプリには、集合時間や座席表などをまとめた旅のしおりに加えて、旅行をより楽しむための機能も取り入れることにしました。

前回のアプリでは、写真を投稿しながらミッションを達成し、共通の話題や目標をつくることで、自由行動中にも一体感が生まれるようにしました。今回も目的は変えず、別のアプローチを試すことに。

そこで参考にしたのが、写真を共有し、1 日の記録を動画で振り返れる setlog です。この体験をベースに、それぞれの場所で過ごす様子を共有し、あとから1日の旅を動画で振り返れるアプリを目指しました。

まずは 4 つの画面を作成

作りたいもののイメージを Claude に伝え、まずは次の 4 画面を作成しました。

• スケジュール： 旅行のスケジュールや座席表を確認する
• 投稿： 参加者が投稿した写真を見る
• マップ： 自分や参加者の現在地、観光スポットを表示する
• メンバー： 参加者の一覧を確認する

Claude に指示しながら調整を重ねるうちに、画面を切り替えたり、サンプルの投稿やメンバー情報を表示したりできるようになりました。保存はされませんが、モーダルが開いて投稿することもできます。一見すると、あとは見た目を整えれば、そのまま使えそうな状態です。

このプロトタイプを持って、最初の壁打ちに臨みました。

03 プロトタイプを持ち込んで相談

相談にあたって共有したのは、Claude で作ったプロトタイプと、アプリの概要や必要な機能をまとめたガイドラインです。

初回のセッションは、Zoom を使ったオンラインミーティング形式で実施。当日はプロトタイプの画面を共有し、実際に操作しながら、各画面の狙いや実現したいことを説明しました。

この時点で、目指すアプリの方向性は決まっていましたが、Claude にどのような指示を出せば実現できるのか、必要な技術やサービスをどう組み合わせればよいのかはわからない状態でした。

今回相談したこと

主な相談内容は次のとおりです。

• 旅行らしい楽しさのあるデザインにしたい
• マップ上に観光スポットを分かりやすく表示したい
• 投稿された写真を時間帯ごとにまとめたい
• 決まった時間に投稿を促す通知を送りたい
• 社員だけが利用できるログインを用意したい
• 社員旅行の 3 日間を中心に使うため、運用費をできるだけかけずに実現したい

機能やデザインだけでなく、利用人数や期間、費用面も含めて相談しました。

質問への回答に加えて、画面を見て気づいた課題や、開発を進めるうえで確認すべき点についても意見をもらいました。要望をそのまま形にするのが難しい場合には、何を実現したいのかを確認しながら、別の方法を一緒に考えてもらえたのも助かった点です。

初回の相談で整理したこと

初回のセッションで整理した内容のうち、特に大きかったのが、マップの表現方法と、複数人で利用するためのバックエンドです。

マップは実際の地図をベースに

当初は、地図全体をイラストで表現したいと考えていました。しかし、位置や縮尺を正確に合わせる必要があり、制作の負担も大きくなります。

そこで、実際の地図を使い、観光スポットのマーカーをイラストにする方向で進めることになりました。

複数人で使うにはバックエンドが必要

この時点では、投稿データをブラウザ内に保存していたため、内容を確認できるのは自分の端末だけでした。

参加者全員で利用するには、次のような準備が必要です。

• 投稿データを共有するためのデータベース
• 写真や動画を保存するためのストレージ
• 社員だけが利用できるようにする認証
• アプリを公開するための環境

一見すると使えそうな画面ができていても、実際に複数人で利用するには、データの保存や共有、ログインなどを担うバックエンドが欠かせません。

このほか、通知の実現方法や利用できるサービス、費用を抑えるための条件なども確認しました。初回のセッションで整理した内容をもとに、後日、具体的な技術構成と完成までのロードマップを提案してもらいました。

04 提案をもとに開発の土台を整える

社員旅行の参加人数や 3 日間という利用期間、投稿される写真の枚数を踏まえ、アプリの公開とデータ保存には主に次のサービスを組み合わせることになりました。

• GitHub：ソースコードを管理し、Vercel と連携する
• Vercel：アプリを公開し、データの送受信やログインなどの API を動かす
• Neon：メンバーや投稿、リアクションなどのデータを保存する
• Cloudinary：写真や動画を保存し、サイズや形式の変換、配信を行う

GitHubへ変更を反映すると、Vercelを通じてアプリが自動的に更新されます。投稿された文字情報やリアクションは Neon へ、写真や生成した動画は Cloudinary へ保存する構成です。

利用するサービスが決まったあと、各アカウントを作成し、案内を受けながら設定を進めました。
GitHub と Vercel を連携した公開環境、Neon のデータベース、Cloudinary へ写真を送る API は、壁打ちを担当したエンジニアが構築。

こうして、Claude で機能を追加できる状態から開発を引き継ぎました。

想定される使用量も確認

無料枠で運用できるかを判断するため、Neon のデータ量と Cloudinary の画像保存量を中心に試算してもらいました。

想定したのは、参加者 30 人が 1 人 50 枚ずつ投稿する、合計 1,500 枚です。写真をそのままCloudinaryへ保存すると約 6GB になりますが、アップロード時にサイズや画質を調整すれば、1 枚あたり 300〜500KB、全体で最大約 750MB まで抑えられます。

Neon に保存するメンバーや投稿などの文字情報は、約 1 MB を想定しています。今回の人数と利用期間であれば、提案時の無料枠で運用できる見込みとなりました。

ただし、Cloudinary では保存容量だけでなく、画像や動画の変換、配信などでもクレジットを消費します。そのため、実装後も利用状況を確認しながら運用することが前提です。
無料プランの内容や利用条件は変更される場合があります。最新の情報は、Neon と Cloudinary の公式ページをご確認ください。

自分では、どのサービスを選び、どう組み合わせれば実現できるのか判断できなかったのが、利用規模や費用を踏まえた構成を提示してもらい、実現可能だと確認できたことが大きな助けになりました。

05 相談しながら機能を実装

引き継ぎ後は、提案された構成をもとに、引き続き Claude で開発を進めました。

初期のプロトタイプでは、サンプルの投稿やメンバー情報を表示していました。これを Neon や Cloudinary、Vercel 上の API とつなぎ、参加者が投稿した写真やリアクションを全員で共有できる状態へ変えていきます。

実装中にエラーが起きたときは、まず Claudeと 試行錯誤。それでも解決できないことや、実装方法を判断できない点は Slack で相談し、必要に応じて Zoom などで画面を共有しました。

開発途中で課題と方向を確認

開発が進んだところで、実装できた機能と作業中に出てきた課題を共有しました。

この時点では、メンバー情報の変更が反映されない、ローカル環境でログインを確認できない、マップの画像表示に時間がかかるといった問題が発生していました。エンジニアに原因や確認方法を教えてもらい、データベースの扱い方や開発環境の整え方、Google Maps API への切り替えについて相談しました。

デザインについても、旅行らしい楽しさと画面全体の統一感を両立させる方法を相談。参考画像を使って方向を伝える方法に加えて、色や文字、余白などのルールを Markdown にまとめ、AI への指示に利用する Design.md についてレクチャーしてもらいました。

ここで整理した内容を Claude への指示に落とし込み、マップや通知、動画などの実装を進めました。

仮置きのマップをGoogle Mapsへ

開発中のミーティングで整理した内容をもとに、プロトタイプで使っていた無料のマップライブラリから、Google Maps API へ切り替えました。

Google Cloud の API キーと Map ID は自分で用意し、教えてもらった設定方法を Claude へ伝えて実装。初回の壁打ちで決めた「実際の地図にイラストのマーカーを配置する」という方針を、実際の画面へ反映していきました。

観光スポットだけでなく、投稿された場所や、位置情報の共有を選んだ参加者もマップ上に表示。完成前のレビューでは、地図を引いたときに近くの投稿をまとめるマーカークラスタリングや、投稿場所を示す写真アイコンの大きさについてもアドバイスを受けました。

観光スポットのイラストマーカーは ChatGPT で作成し、Claude を使ってアプリへ組み込んでいます。

通知を送る方法を使い分ける

旅行中に写真を投稿してもらうため、約 1 時間ごとに通知を送り、通知から投稿画面を開けるようにしました。

開発時の Vercel の Hobby プランでは、Cron 機能を利用できる頻度が 1 日 1 回まででした。そこで、投稿を促す通知には外部サービスの cron-job.org を利用し、決まった時間に Vercel 上の通知用 API を呼び出す構成にしています。

通知を送る時間は、初日と 2 日目が 9 時から 21 時まで、最終日は 9 時から 17 時まで。無料枠を利用しながら、必要な頻度で通知できる方法を選びました。

動画生成はClaudeと試行錯誤

もう一つ実装したかったのが、1 日の投稿をまとめた動画です。Cloudinary の動画変換機能を使い、投稿された写真をつなぎ合わせてダイジェスト動画を生成しました。

単純に写真を順番に並べるのではなく、「みんなの動画」には次のようなルールを設けています。

• 同じ時間帯では、同じ人の写真を 1 枚まで使用する
• 同じ時間帯から 1 〜4 枚を選び、複数枚の場合はコラージュにする
• 使用する写真の組み合わせを参加者ごとに変える
• 最後に、その日のベストショットを表示する

縦横比の異なる写真をどう配置するのか、コラージュを何枚で構成するのか、写真ごとの表示時間をどうそろえるのかなど、実装には細かな調整が必要でした。動画が表示されない、長さがそろわないといった問題が起きるたびに、状況を Claude へ伝えて修正を繰り返しました。

当初は、自分の投稿だけをまとめた「自分の動画」も用意し、参加者が何度でも作り直せる仕様にしていたのですが、動画を生成するたびに Cloudinary のクレジットを消費します。開発中のテストですでに一定量を使用していたこともあり、このままでは旅行中に上限へ達する心配もありました。

自分の投稿だけを振り返るより、参加者全員の写真をまとめた方が、別々に行動した時間も含めて「みんなで旅行した」感覚が伝わります。そこで、「自分の動画」は最終版から外し、「みんなの動画」のみに絞りました。

「みんなの動画」は、夜間処理を 1 日 1 回実行して参加者ごとに生成し、翌日に表示します。一度決まった写真の組み合わせを再利用することで、同じ動画が何度も生成されないようにしました。

完成前にアプリ全体をレビュー

主要な機能がそろった段階で、エンジニアとアートディレクターによる全体レビューを実施しました。

レビューの対象は、機能が想定どおり動くかだけではありません。画面ごとの役割が伝わるか、アプリ全体のトーンが揃っているかまで確認します。

特に見直したのが、ページごとの情報の見せ方です。投稿画面とメンバー詳細は似た構成になっていたため、それぞれの目的に合わせて分けることに。色の明るさや装飾、文言も整え、必要な機能は残しながら、事務的だった印象をやわらげていきました。

レビューによって修正すべき点が明確になり、Claude への指示にも落とし込みやすくなりました。指摘された内容を反映し、修正版を Slack で確認してもらいながら、社員旅行で使う最終版へ仕上げました。

06 完成した社員旅行アプリ

こうして、最初はサンプル情報を表示するだけだった 4 つの画面が、参加者全員で使えるアプリになりました。
ブラウザ上で動く Web アプリですが、旅行中は iOS・Android ともにホーム画面へ追加し、アプリアイコンから起動してもらいました。

最終版は、長崎の海をイメージした青を基調に、イラストやキャラクターを取り入れた明るいデザインで統一しています。ここからは、完成した各画面と機能を紹介します。

社員だけが使えるログイン画面

社員共通の合言葉を入力し、参加者一覧から自分の名前を選んでログインします。
合言葉はサーバー側で確認し、一度ログインすると状態が保存されるため、次回からは入力しなくても大丈夫です。

ヘッダーには、弊社の公式キャラクター「Sくん」「2ちゃん」「Fさん」が、眼鏡橋で記念撮影を楽しむ様子を描いたイラストを配置しました。長崎らしい風景と社員旅行の楽しさが伝わるよう、ChatGPT へ構図や修正内容を伝えながら作成したものです。

ちなみに初回ログイン時には、通知と位置情報共有について確認します。どちらも任意で、許可しなくてもアプリを利用できます。
設定はメンバー画面の自分のページから、いつでも変更可能です。

旅行中に必要な情報をまとめたスケジュール画面

この画面を見れば、旅行中に必要な情報をひととおり確認できるよう、2泊3日の予定を日ごとにまとめました。集合時間や移動予定に加えて、バスや食事の座席表も掲載。座席表は画像を拡大して確認できます。

観光スポットの項目を開くと、見どころや公式サイトへのリンクを表示。さらに、端末の日付と時刻に合わせて現在の予定を自動で判定し、進行中の項目がひと目でわかるようにハイライトしています。

写真を投稿して共有

投稿画面では、一度に最大 4 枚の写真を選び、タイトルやコメント、場所を付けて投稿できます。投稿された写真は投稿時刻に沿って並び、ほかの参加者は絵文字でリアクションできます。

写真にはポラロイドのような白い余白を設け、壁に貼った写真のように少しずつ角度を変えて表示。タイトルを付けると、タイトルステッカーとして写真の上に重なります。一般的な SNS とは少し違う見せ方で、旅の思い出を眺める楽しさを加えています。

投稿時には、あらかじめ登録した観光スポットの一覧から場所を選び、写真と紐づけることも可能です。位置情報の共有を許可している場合は、投稿時に取得した位置情報も記録され、関連する写真をマップから確認できます。

その日に最も多くのリアクションを集めた投稿は、ベストショットに選出されます。

さらに決まった時間に届く通知から投稿画面を開けるほか、投稿ボタンを画面下部に固定し、旅行中でもすぐに写真を共有できるようにしました。

1日の旅を動画で振り返る

翌朝になると、前日に参加者全員が投稿した写真から、1日を振り返る「みんなの動画」が自動で作られます。

動画に使う写真は、1時間ごとに区切って選びます。

• 同じ時間帯では、同じ人の写真を1枚まで使用する
• 各時間帯から1〜4枚を選び、複数枚の場合はコラージュにする
• 写真の組み合わせを、動画を見る参加者ごとに変える
• 最後に、その日のベストショットを掲載する

全員が同じ動画を見るのではなく、それぞれ少しずつ異なる1日を振り返れる仕組みです。自由行動で別々の場所にいた時間も、参加者全員の写真を通して一つの旅として楽しめるようにしました。

観光スポットと投稿をマップ上で結びつける

マップ画面は、

• 観光スポットを探す
• 投稿された写真を場所から見る
• 位置情報を共有している参加者を確認する

といった使い方ができます。

2 日目の自由行動に先立って参加者へ行き先を聞き、訪れる可能性のある観光地をあらかじめ登録。それぞれの特徴を取り入れたイラストをChatGPTで作り、マーカーとして配置しました。
実際の地図を使いながらも、旅行アプリらしい楽しさを感じられるようにしています。

観光スポットのマーカーを開くと、場所の紹介と、そこに紐づいた投稿をまとめて確認できるほか、スポットを選ばずに投稿した写真も、投稿時に取得した位置情報をもとにカメラアイコンで地図へ反映。近い場所に投稿が集まっている場合は一つのマーカーにまとめ、地図を拡大すると個別に見られます。

位置情報を共有している参加者は、本人のアイコンで現在地を確認できます。共有は任意で、自分のページからいつでも切り替えられます。自由行動中でも、ほかの参加者がどこで何をしているのかを、場所と写真の両方から知ることができ、行動を共にしていなくともみんなで旅行してるような気持ちになれるようにしました。

メンバーごとに旅の写真を振り返る

メンバー画面では、参加者を投稿数の多い順に並べ、投稿数と上位3名のメダルを掲載しました。

メンバーを選ぶと、その人が投稿した写真が 3 列のグリッドに並びます。複数枚をまとめた投稿には印を付け、開くと一枚ずつ確認できるようにしました。
投稿画面が旅全体の出来事を追う場所であるのに対し、メンバー詳細は一人ひとりの視点から旅行を振り返る画面です。

自分のページからは、投稿のタイトルやコメントの編集、写真の削除も可能です。初回に設定した通知と位置情報共有も、ここから変更できます。

07 社員旅行で実際に使ってみた

完成したアプリは、2 泊 3 日の社員旅行で実際に使用しました。3 日間で投稿された写真は合計 377 枚。初日は 112 枚、自由行動の 2 日目は 218 枚、最終日は 47 枚でした。最終日は旅行日程そのものが短く、疲れもたまっていたためか、利用は少なめです。

最も投稿が集まった 2 日目には、参加者がそれぞれの場所で過ごす様子を写真で共有しました。
マップを見て近くにいることに気づき、一緒に食事へ行った参加者もいたようです。

別々に行動していても、写真や場所を通して互いの様子が伝わり、目指していた自由行動中の一体感につながったと思います。

アンケートで好評だったこと

旅行後のアンケートでは、全体として満足度は高く、良かった点として次のような意見が寄せられました。

• アプリを開けば、旅行中に必要な情報を確認できる
• スケジュールがまとまっていて、旅のしおりとして使いやすい
• 自由行動中に、ほかの参加者の様子を写真で見られる
• 投稿へ気軽にリアクションできる
• 1 日の写真を、翌日に動画で振り返れる
• タイトルやコメントと写真の組み合わせを楽しめる
• デザインがよく、操作も分かりやすい

予定の確認だけでなく、参加者同士で旅の出来事を共有し、あとから振り返るところまで一つのアプリで体験できた点が評価されました。

改善点や次回に向けて

一方で、実際に使ったからこそ見えた改善点もあります。

• 画面の読み込み： 投稿画面を開くたびに読み込みが発生するため、キャッシュを保持してほしい
• 写真を共有する場所： Slackの写真共有チャンネルと役割が重なり、どちらへ投稿するか迷う場面があった
• 投稿画面の見せ方： 投稿数ランキングやメダルは目的が伝わりにくく、ベストショットを上部に固定したことで、最新の投稿を追いづらい

また、次回も社員旅行用のアプリを作る場合のアイデアとして、次のような機能が挙がりました。

• 集合時間の変更などをアプリから一斉に知らせる
• 自由行動の予定や食事の参加者を事前に募集する
• 行きたい場所や買いたいお土産を共有する
• 近くにいる参加者を知らせる
• アプリ内でチャットする
• 投稿した写真を社内の共有ドライブへ保存する
• 旅行先で使えるARフォトフレームを用意する

いずれも参加者から寄せられたアイデアです。
どれを取り入れるかは未定ですが、今回見つかった改善点とあわせて、今後のアプリづくりに活かしたいと思います。

08 AIで作ったプロトタイプを実用化するには

AIを使えば、開発の専門知識がなくても、画面や基本的な動きを備えたプロトタイプを作れます。だからといって、そのまま公開して使えるわけではありません。

Web上にどのように公開するのか。入力されたデータや画像をどこへ保存するのか。バックエンドには何が必要なのか。誰がアクセスできるようにするのか。実用化にあたっては、セキュリティや費用、公開後の運用まで含めて検討する必要があります。

デザインについても、画面を作るだけでなく、それぞれの役割や情報の優先順位、操作の流れを整理し、アプリ全体の見せ方を整えなければなりません。

「AIプロトタイプ壁打ち」では、プロトタイプと利用条件を確認しながら、公開・運用までに必要なことを技術とデザインの両面から整理します。

まだ形になっていなくても相談できます

• AIで試作したものの、次に何をすればよいか分からない
• 作ったものをどのように公開すればよいか分からない
• データの保存方法やバックエンドの構成に不安がある
• セキュリティや公開後の運用について確認したい
• 技術的に実現できるのか、費用がどのくらいかかるのか知りたい
• 画面は作れたものの、使いやすさやデザインにまとまりがない

要件が固まっていなくても、プロトタイプが途中でも構いません。作りたいものや現在困っていることから、お気軽にご相談ください。