コーポレートサイト(NDA対処版)

公開用デモ:https://youwa-kenkou.pages.dev/

※NDA案件の文章・画像を全て公開用に入れ替えて再構成しています。

  • NDA
  • 中規模
  • Astro
  • gulp
時期
2025年10月
期間
約1カ月
規模
約32ページ
担当範囲
コーディング
技術
Astro / gulp / SCSS / FLOCSS

案件概要

30ページ規模のコーポレートサイトを制作しました。

工夫点 - Astroとgulpの両対応

納期が短い中、仕様が確定しておらず、ヘッダー等の共通要素が後から変更されることが多いという状況。
このスケジュールで中規模以上のサイトを作ると、下層が進むほど修正時の工数が増えて危険と判断。

制作会社様から頂くテンプレートはgulpでしたが、対策としてAstroを使いコンポーネント化していく事を提案しました。
※この会社様の案件で1度Astro対応があったため、会社自体は対応していると判断した経緯もあります

一方で、元々のgulpテンプレートでないと現場の不安もあります。
ディレクターから制作チームへの説明負担が出る可能性を考えました。

そのため、Astroビルド時に本来のgulpテンプレート版を自動的に出力する仕組みを作成。
ただ新技術を推奨するのではなく、現場の不安も解消しながら効率的に作業を進める事ができました。

実績公開のための工夫 - 生成AI活用

私は制作会社様のNDA案件を中心に活動しており、オープン公開できる実績がほぼありません。
しかし「判断基準になるものがあればいい」と考えると、内容を全て入れ替えればクローズドでは問題ない筈です。

手動で全て入れ替えるのは困難なため、生成AIの研究も兼ねて、エージェントとローカルAIにて内容入れ替えに挑戦しました。
※生成AIを使う場合のプライバシー問題がありますが、依頼者が不安になられる場合、使用範囲は配慮します。

  1. サイト構造を記述した情報を渡す
  2. 全ページの目的、テキスト、画像の内容をテキストでyaml書き出し
  3. サイトの内容と業界を把握させる
  4. 別の業界(建築)を想定し、全てのページの目的に合わせて文章をyamlで書き出す
  5. 画像内容のテキストを建築業の内容に変え、書き出し。このテキストを元にローカル画像生成のComfyUIで画像生成
  6. テキストと画像を入れ替える
  7. サイト名などが実在の会社と被らないかリサーチ・チェック
  8. headやogpなどSEO関連のチェック

このような工程を得て、公開可能な形に仕上げました。
コーディングの効率化にも役に立つ学びがあったと考えています。