コーポレートサイト(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を使う場合のプライバシー問題がありますが、依頼者が不安になられる場合、使用範囲は配慮します。
- サイト構造を記述した情報を渡す
- 全ページの目的、テキスト、画像の内容をテキストでyaml書き出し
- サイトの内容と業界を把握させる
- 別の業界(建築)を想定し、全てのページの目的に合わせて文章をyamlで書き出す
- 画像内容のテキストを建築業の内容に変え、書き出し。このテキストを元にローカル画像生成のComfyUIで画像生成
- テキストと画像を入れ替える
- サイト名などが実在の会社と被らないかリサーチ・チェック
- headやogpなどSEO関連のチェック
このような工程を得て、公開可能な形に仕上げました。
コーディングの効率化にも役に立つ学びがあったと考えています。