WEB工房しずおかのロゴ

WEB工房しずおか

5年続く自社メディアで挑む！WordPress→Gatsby→Astro移行と生成AI×料理レシピの技術検証記

WEB
AstroLLMwebdev
Koshio

自社オウンドメディアの技術変遷と生成AI検証

みなさん、こんにちは！WEB工房しずおかの開発チームです。

WEB制作会社として日々の受託開発に取り組む一方で、技術スタックの検証やマーケティング実験の場として、私たちは5年以上にわたり自社オウンドメディア「おうちでつくるテレワークレシピ（以下、テレワークレシピ）」を運用・育ててきました。

テレワークレシピ

今回は、5年間のサイト運用と技術スタックの軌跡（WordPress → Gatsby.js → Astro）と、代表のバックグラウンドを活かした「ドメイン特化型一次情報 × 生成AI」のマルチモーダル検証プロセスについて詳しくご紹介します！

Webメディアの技術選定に悩んでいる方や、実務における生成AI活用のリアルな現場に興味がある方はぜひ参考にしてみてください。

1. 5年の軌跡：なぜWEB制作会社が「料理メディア」を運用するのか？

「WEB制作会社がなぜレシピブログ？」と疑問に思われるかもしれません。実はこれには明確な理由とバックグラウンドがあります。

  1. 代表自身の専門知識（一次情報）の存在 弊社代表は、大学で食品栄養科学分野を専攻しており、栄養学や調理に関する専門的な知見を有しています。「実務で培ったWEB技術」と「代表自身の専門ドメイン」を掛け合わせることで、嘘のない確実なコンテンツ（一次情報）を発信できるメディアとしてスタートしました。
  2. リアルなアクセス環境での技術検証場（R&D） 単なるデモサイトではなく、検索流入や実際のユーザーアクセスが存在する「生きているメディア」を持つことで、SEO施策、表示速度、自動デプロイ、AI検証などの実験結果をリアルなデータとして収集できます。

5年前の開設当初は WordPress を採用し、キービジュアルやテーマ構築では外部エンジニア・デザイナーへ発注を行いながら、GitHubにコミット履歴を残しつつ開発を進めてきました。

2. 技術スタックの変遷：WordPress → Gatsby.js → Astro

メディアの成長とフロントエンド技術の進化に伴い、技術スタックも大きく進化させてきました。

[2021年〜]  WordPress（動的CMS・外注連携・オリジナルテーマ構築）
   ↓
[2023年〜]  Gatsby.js（SSG化・GitHub Actions自動デプロイパイプライン構築）
   ↓
[2026年〜]  Astro（軽量SSG・Zero JS・Content Collectionsによる型安全な開発）
  • WordPress時代: 動的サイトとしての限界やセキュリティ対策、表示速度の観点から静的サイト生成（SSG）への移行を決意。
  • Gatsby.js時代: SSGによる超高速化と、GitHub Actionsを活用したConoHa VPSへの自動デプロイ環境を構築。構築手順やパイプラインの知見は弊社の技術ブログ記事（GitHub ActionsでConoHa VPSへ自動デプロイ）として社内外に還元しました。
  • Astro時代（現在）: Gatsbyのエコシステム停滞に伴い、注目の静的サイト生成フレームワーク Astro へ完全リニューアル。ローカルAIを活用した移行プロセスについても記事（脱Gatsby.js！Astro×ローカルAIで爆速構築する次世代Markdownブログ開発記）としてまとめています。

長期的なコードベースとGitHubのコミット履歴、そして段階的な移行記録そのものが、弊社の開発技術とアジリティを証明する大切な資産となっています。

3. 生成AI×料理コンテンツ：マルチモーダルAIの実用性検証

最新のリニューアルと並行して取り組んでいるのが、オウンドメディア運用における生成AIの実用性検証です。

単にAIに文章を書かせるのではなく、実際の現場でどこまでAIが「使えるパートナー」になるのかを以下のプロセスで実験しています。

検証①：完成料理の画像から「レシピ逆引き」は可能か？

実際に調理・盛り付けを行った料理の写真をマルチモーダルAI（Vision対応LLM）に読み込ませ、食材や調理工程、栄養バランスをどこまで正確に推定・言語化できるかを検証しました。

[人間が調理・撮影] ──> [完成料理画像] ──> [Vision AI解析] ──> [レシピ草案・工程生成] ──> [専門家による校正・追記]
  • 検証結果: 盛り付け画像から基本的な具材や調理法の推論精度は非常に高く、レシピの「下書き」を作成する速度が劇的に向上しました。

検証②：作業風景やアイキャッチの画像生成AI検証

調理プロセスを説明するための作業イメージやアイキャッチ画像について、画像生成AIを用いて生成し、記事の補足素材として耐えうるかをテストしました。

検証結果：生成AIはオウンドメディアの救世主となるか？

結論として、AI単体での自動化は不可能だが、専門家の一次情報（人間の実体験・実写真）と組み合わせることで強力なアクセラレーターになるという知見を得ました。

  1. 実写写真（オリジナル一次情報）の不可欠性: SEO（E-E-A-T）や読者の信頼性を担保するため、自分で実際に調理・撮影した「1枚以上の一次情報写真」は絶対に外せません。
  2. AIの役割は構造化と下書き: 「人間が撮影した写真＋大まかな調理メモ」をAIに入力し、Markdown形式やレシピフォーマットへ構造化させる作業において、生成AIは絶大な威力を発揮します。

4. 今後の展望：実験場としてのオウンドメディア

自社メディア『テレワークレシピ』は、単なるレシピサイトにとどまらず、WEB工房しずおかの技術力を磨き上げるための「研究開発ラボ」です。

今後は以下の領域についても継続して技術検証を行っていく予定です。

  • AIエージェントによるCMSワークフローの完全自動化
  • Astroの最新機能（Server ActionsやIslands Architecture）の追加検証
  • エッジコンピューティングやCDNキャッシュ戦略の最適化

受託開発で培った確かな技術と、自社メディアで日々積み重ねている実践的な検証ノウハウ。これらを組み合わせることで、クライアント企業様へより高品質でモダンなWebサイト構築・オウンドメディア提案をお届けしていきます。

高速なWebサイト制作、静的サイト（SSG）への移行、Headless CMSや生成AIを活用したメディア構築をご検討の際は、ぜひWEB工房しずおかにお気軽にご相談ください！