投稿日
グルテンフリーのお店を探せる「GF Only」というWebサイトを公開しました！
2026年は「Webアプリやサイトを10個作る！」という目標を掲げ、AIとともに開発を続けています。7つ目はグルテンフリーに対応したレストランやカフェ、ショップだけを集めたWebサイト「GF Only」です！
作ったもの
エリアやカテゴリーからお店を検索できます。英語にも対応！
そもそも、なぜこのサイトを作ろうと思ったのか。実は私、数年前から身体が小麦粉を受け付けない体質（いわゆるグルテン不耐症）になってしまい、もっぱらグルテンフリーの食品を選ぶ生活を送っています。最近は米粉パンや小麦粉不使用の商品が増えていて、本当にありがたい限りです！
ですが、お買い物や外食のとき、困ったことに直面することがよくあります。「米粉パン！」と大きく打ち出されているのに、裏の表示をよく見たら普通に小麦粉が配合されていたり…。Googleマップで「グルテンフリー」と検索しても、実際には普通のラーメン屋さんがヒットしてしまったり。そんな経験から、完全にグルテンフリーのお店だけを厳選して集めた、安心して使えるWebサイトを作りたい！という自分ごとな思想から、このプロジェクトがスタートしました。
技術スタックと開発プロセス
今回も1か月で形にするというスピード感を重視したため、いつもどおり現在のモダン開発において最強と思われる布陣を敷きました。構成は以下の通り：
開発の第一歩として、まずはAI（Claude）に全体の開発手順をタスク化して書き出してもらいました。「1か月のゴールから逆算して、今日はここまでやろう」というプランニングを最初に行うことで、モチベーションを切らさずにゲーム感覚で開発できます。毎回このプランニングがあるので進めやすいですね。
microCMSのAPIスキーマを用意
まずはデータの土台作りから。microCMSを使って、「エリア」「ジャンル」「店舗情報」という3つのAPIを用意することにしました。ここで必要なデータ構造（スキーマ）を考えるのも、もちろんClaudeさんにお手伝いしてもらいました。作成手順も完璧な指示で、microCMSの情報もしっかり網羅しているClaudeさん。ありがとうありがとう。
後々ラクをするための工夫として、最初の設計段階から英語ページ用のフィールドを各項目に用意しておきました。さらに、「将来的にはマップ上にピンを立てて視覚的に探せるようにしたいな」という野望があったので、店舗の場所を記録する緯度・経度のフィールドも忘れずに仕込んでおきました。
店舗データの用意とプロトタイプ
データの箱ができたら、まずは自分が実際に行ったことのあるお気に入りのお店を数店舗、テストデータとして入力してみました。ここで一旦Claude Codeで一気にコーディングを依頼。ホームと検索結果ページ、店舗詳細ページを作ってもらいました。
画面を確認すると、ちゃんとデータが連携されて店舗情報が表示されている！この段階ではデザインを一切指定していない骨組み状態ですが、動くものがすぐに出来上がるのは、やっぱり感動しちゃいます。
英語ページ
今回は右上の言語スイッチャーで日本語と英語を切り替えられるようにしました。後からサイト全体を多言語化しようとすると、コードの構造を大幅に書き換える必要が出てきて、AIも混乱しがちです。英語対応もしたいと思ったら、たとえ中身は後回しにするとしても、最初のデータ設計とルーティングの段階でAIに組み込んでもらうと楽…な気がします。
デザイン
骨組みができたので、ここからはWebデザイナーとしても楽しい見た目のフェーズです。今回はデザインのアイデア出しもAIに任せてみようか！と思い、まずはGeminiで試してみることに。プロンプトは以下：
グルテンフリーのお店を集めたレストランやショップの検索サイトを作る。親しみやすさや安心感のあるデザインにしたい。ホームのデザインを画像で生成して。
どんなもんか試したかっただけということもあり、かなり雑な指示w
すると、こんな感じの画像を生成。うーん、可愛すぎるというか、少し子供っぽくなってしまいました。
続いて、同じ内容でChatGPT Images 2.0にデザインを任せてみました。
おお、なかなかいい感じ。採用！この画像をベースにDESIGN.md を作ってもらい、そのMDファイルと生成した画像を添付してコーディングも任せましたが…。
手抜きプロンプトが招いたカオスなコーディング
なんか全然違う…。Tailwind CSS を使うよう指示しているはずなのに、なぜか style 属性にCSSを書いちゃってたり。なんでや！デザインの画像生成は雑な指示でもいけたのにね？まぁ画像生成は雑なプロンプトでも綺麗に出してくれますが、それをコードに落とし込むときは、丁寧な手綱引きが絶対に必要だという学びになりました。
結局、自分でTailwindのクラスに書き換えた方が早い…ってことで、細部はガリガリと手作業で直しました。どこをAIに任せて、どこから手作業に切り替えるかの判断の速さも、現代のコーダーに必要なスキルなのかもしれません。
その後、なんとかなったバージョンがこちら。
ロゴ
ついでにロゴもAIで作っちゃおうと思い、ChatGPT、Adobe Firefly、Geminiなど、いろんなAIに任せてみたんですが、どれも複雑過ぎたり、ひと目見て何を表しているのかわからなかったり…ということで全部ボツ。
Adobe Firefly バージョン。
Gemini バージョン。
なので、Illustratorでこんな感じのシンプルなものを自作しました。やっぱりブランドの核心を突くようなデザインは、自分で手を動かすのが一番気持ちいいですし、納得がいきますね。あわせて、SNSでシェアされたときに表示されるOGP画像もサクッと作成しました。
公開！
デザインの調整が終わり、いよいよ公開！VercelのダッシュボードからmicroCMSのAPIキーなどの環境変数を設定して、デプロイ。今回は独自ドメイン（gfonly.jp）も取ってみたので設定しました。
無事に公開が完了し、さてさて店舗を少しずつ増やしていこうかしらと思っていた矢先、アクセス解析を見てびっくり。まだSNSなどで何も告知してないのに海外からのアクセス多数！なぜ？？アクセス最多がアメリカ。ついでフランス、ポーランドなど。ドメインの新規登録ログやクローラーの巡回かなとも思うのですが、観光で計画を立てている方もいるのかも？このへんはもう少しデータが集まったら検証したいですね。
作ってみた感想
これまでは作って終わり！ということが多かったのですが、今回の「GF Only」はお店の追加や更新、削除などのメンテナンスも入るので、ゆっくりながらも育てていこうと思いました。グルテンフリーは自分ごとでもあるので楽しみながら運営できそう。行ってみたいお店もたくさん！
今後は、当初の計画通りマップ上へのピン表示や、スマホのGPSを使った現在地から近いお店の自動表示機能なども追加していきたいなーと思っています。お楽しみに！
「こんな機能あったらいいな！」とか「このお店おすすめ！」ってのがあればぜひ教えてくださいね！
もし「AI開発の参考になった！」「グルテンフリーの活動を応援したいな」と感じていただけましたら、以下のリンクから私にコーヒーを一杯分の応援をしていただけると、次のアプリ開発とサイト運営の大きな励みになります！ありがとうございます！