東京旅行旅のしおり（Web版）制作RTA

今年の夏季休暇、私は友人と東京観光をすることになりました。
そのとき欲しくなるのが「旅のしおり」です。
タイムスケジュールや行程が一覧で見えると、やっぱり便利です。
しかも今回は友人と共有したり、その場でマップを開いたりしたいので、紙よりWebで公開できるタイプが欲しいです。欲しいですよね。

しかし、そう思い立ったのは旅行2日前です。

この短時間で作れるのか……？できるのか……！？できらぁ！

ということで、作ることにしました。
ただ、時間はほぼありません。デザインはFigmaでやるにしても、実装まで自分でやる余裕なんてありません。

そこで今回は、思い切って「情報整理から実装まで、かなりの部分をAIに任せてみる」ことにしました。どこまで任せていいのか手探りだった記録を、ここから書いていきます。

▼今回使用した主なアプリやサイト一覧

• データ収集、画像生成、コーディング対応：ChatGPT
• 主なデザイン部分：Figma
• アイコン：icooon-mono
• 背景用パターン：Hero Patterns
• 公開：Netlify

• Hero Patterns by Steve Schoger / CC BY 4.0

旅程決め〜情報整理に悩む

まずは大枠の旅程を整理しました。今回は数日間の東京旅行です。友人と「どこ行きたい？」を出し合いながら、日ごとにざっくりエリアを決めていきます。

行きたい施設や、大体の時間帯、移動のイメージもこのタイミングでラフに固めておきます。ここはまだAIの力を借りるというより、自分たちの「行きたい」を出し合う、純粋に楽しい工程でした。

旅程が見えてきたところで、次はFigmaでデザインに着手します。日程ごとのカードや、スポットの詳細表示のイメージを組み始めます。

ただ、ここで一つ悩みが出てきました。「営業時間」「URL」「補足情報」といった情報を、スポットの数だけ調べてFigma上に打ち込んでいく必要があります。時間はあまり残っていません。

そこでChatGPTに、スポット情報の管理方法について相談してみました。返ってきたのは「Excelで管理して、それを流し込む形にすればいい」という提案です。情報を一覧で管理できれば、抜け漏れにも気づきやすくなります。

Excelでの情報整理

Excelを使うと決めてから、運用のルールを決めました。

たとえば「浅草寺」「国立科学博物館」「水族館」のように、名前だけをExcelに並べていきます。あとの営業時間・公式URL・補足情報といった項目は、ChatGPTに調べてもらって埋めてもらう形にしました。

（※画像内の営業時間・電話番号などの情報は、執筆時点のものです。実際に訪れる際は、公式サイトなど最新の情報をご確認ください）

ここで一つ、地味に大事な指示をもらいました。「同じ名前のお店は、支店名まで書いてください」というものです。たしかに、店名だけだと「どこの支店の話か」が分からず、営業時間や電話番号を調べる側も困ってしまいます。実際、私が名前だけ書いたお店が、調べていくと同名の別店舗だったケースもありました。

画像ファイル名の命名もAIに任せてみた

Excelで行き先データを整理する中で、使う画像のファイル名もそのタイミングで決めてもらうことにしました。

進め方はこんな流れです。

• Excelで各スポットの情報を整理しつつ、使用する画像のファイル名も一緒に決めてもらう
• 必要な画像を自分で集めてZIPにまとめ、ChatGPTに渡す
• AIが画像を見て「どのスポットの写真か」を自分で判断し、決めたファイル名にリネームして返してもらう

これで、画像を一枚ずつ手作業でリネームする手間がなくなりました。

ただ、ここは一つ要確認ポイントが出ました。AIの自己判断に任せた結果、店舗の画像が入れ替わっているケースがあったのです。あんみつのお店の写真と、蕎麦屋の写真が逆になっていました。

というわけで、AIに命名を任せた画像は、最後に自分の目で一通り見比べてから使う、というひと手間を入れることにしました。

ここまでで、旅程を決めて、Excelで情報を整理し、画像の命名までAIに任せる、という流れを見てきました。

正直、この時点でもうかなり時短できている実感がありました。一件ずつ調べる作業、画像を一枚ずつリネームする作業。地味だけれど積み重なると時間を食う作業を、まとめてAIに渡せたのが大きかったです。

ただ、ここまではまだ「情報を整理する」段階の話です。実際にこれをWebサイトの形にしていく作業が、ここから待っています。

Figmaでスマホ用デザイン

情報整理と並行して、Figma上でスマホ用のデザインを組んでいきました。

まず、私と友人それぞれが使っているスマホの機種を確認し、その画面サイズに合わせてデザインすることにしました。旅行中に実際に見るのは自分たちのスマホなので、汎用的なサイズより、使う本人たちの端末に合わせた方が確実です。

作ったのは、日程ごとのカード、各スポットの情報を表示するポップアップ、そしてポップアップを開くためのボタンといった要素です。ただ、時間があまりなかったこともあり、機能はかなりそぎ落としました。あれもこれもと盛り込むより、必要な情報だけを出すシンプルな構成に絞っています。

トップページのメイン画像と、各日程カードの先頭に使う画像は、ChatGPTで生成しました。旅行の雰囲気に合う画風で、一枚ずつ用意していきました。

日程カードをタップすると、その日のタイムラインが時間順に表示され、移動手段のアイコンで区切られる形にしています。各予定をさらにタップすると、営業時間・電話番号・公式サイト・メモといった情報がポップアップで出てくる、という構成です。

旅のしおり内で使用したアイコン素材は『ICOOON MONO』からお借りしました。シンプルで使いやすいアイコンを、PNG・SVGなどで無料ダウンロードできます。

背景の装飾には、無料のSVGパターン素材を配布している『Hero Patterns』を使用しました。色を変更してCSSとして使えるので、Web制作でも手軽に取り入れやすいサイトです。

• Hero Patterns by Steve Schoger / CC BY 4.0

ここまでは、いつものデザイン作業の延長線上でした。ただ、次の「情報とデザインをどう結びつけるか」のところで、AIにかなり助けられることになります。

ボタン名でのリンク管理

Figmaでのデザインが進んだところで、次に考えたのが「どのボタンをどの情報に結びつけるか」という管理の部分です。

普通であれば、「このボタンはこのURL」「このレイヤーはこの用途」といった対応関係を、一つひとつ人力で管理する必要があります。スポットの数だけボタンがあるので、地味にしんどい作業になりそうでした。

そこで今回は、Figma上のボタンの名前そのものをキーにして、リンク先を管理する形にしました。ボタン名と、Excelで整理した情報を紐づけておけば、「このボタン=このスポット」という対応表を別に作らなくて済みます。

さらに、そのボタン名自体の命名や整理も、AIに任せました。画像ファイルの命名と同じように、Excel内で管理しつつ、「どういう名前にすれば分かりやすいか」という部分まで含めて相談しながら進めました。

これで、人力での対応付け作業がかなり減りました。今回の制作の中で、一番「これは楽になった」と感じたポイントです。

AIへの実装依頼〜細かい修正

Figmaでのデザインと、ボタン名での管理方針が決まったところで、いよいよ実装です。

とはいえ、私はコードを書きません。今回もそこは変わらず、Figmaで作ったデザインを見せながら、自然言語でAIに実装をお願いする形で進めました。これまで作ったデザインや素材、情報等を元にChatGPTに「このデザインの通りに動くWebページにしてください」というところから始めて、あとは出てきたものを実際に触って確認していく流れです。

完成した画面をブラウザで見ながら、気になったところをその場で伝えて直してもらいます。

• 「ここの余白、もう少し狭くして」
• 「12pxくらいで」
• 「まだ広いから10pxに」

というように、具体的な数値を交えながら指示を出すと、テンポよく調整できました。コードのどこを直せばいいかを自分で探す必要がなかったのも、地味に助かったポイントです。

見た目を確認する→気になる部分を言葉で伝える、他に必要な情報や素材があったら渡す→直してもらう、を繰り返しながら、少しずつ完成に近づけていきました。

初めてのNetlify公開

デザインと実装ができたところで、最後に残っていたのが「公開」です。ここは今回、初めて挑戦する工程でした。

Webサイトを作った経験自体はあっても、それを実際にインターネット上に公開するところまでは、これまでやったことがありませんでした。「どうやって公開するのか」「友人が見るときにログインは必要なのか」といった、初歩的なところから分からない状態です。

ここも、AIに聞きながら進めました。公開先としてNetlifyというホスティングサービスを教えてもらい、手順を一つずつ確認しながら作業を進めていきます。調べ物で手が止まる場面もなく、質問すればすぐに次の一手が分かる状態だったので、初めての工程でもスムーズに進められました。

最終的に、URLを一つ発行して完了です。友人が見るときもログインは不要で、URLを開くだけで旅のしおりが表示される状態にできました。

まとめ

今回、旅行直前というかなり限られた時間の中で、旅のしおりをWebサイトの形にして公開まで進められました。

振り返ってみると、時短できた一番の理由は、AIがコードを書く速さそのものではなかったように思います。むしろ大きかったのは、制作の周りにある地味な作業――施設情報を一件ずつ調べる、画像をリネームする、ボタンとリンク先を対応させる、公開方法を調べる――といった、積み重なると時間を取られる雑務を、まとめてAIに任せられたことでした。

実際に使ってみても、これは正解だったなと思う場面が多かったです。公開したURLはスマホのホーム画面にアプリのように置いておいたので、行き先を確認したいときにパッと開けて便利でした。友人と二人で見られる状態にしておいたので、「手が空いてる方が確認する」という使い方が自然にできたのもよかった点です。

ついでに、旅程表以外に「買い物メモ」をチェックリスト形式で追加実装してみたのですが、これも同じようにお願いするだけで、特に詰まることなく形にできました。一つ仕組みができると、そこに機能を足していくのも思ったより軽い作業でした。

この任せ方ができると、初めての工程が混ざっていても、思っていたより早く形にできるんだな、というのが今回の一番の実感です。

次に何かを作るときも、まずは「この作業、AIに任せられないか」を最初に考えてみようと思います。