💻 システム開発

SCALE_HPデモ_最新基準点

最終更新 2026年06月03日 ／ 31_システム開発部/_SCALE_HPデモ_最新基準点.md

SCALE 新コーポレートHP デモ 最新基準点

最終更新: 2026-05-18（クリーン作り直しに方針転換）

概要

SCALE 新コーポレートHP のデモ。SpiralAI(go-spiral.ai/STUDIO)凍結流用は破棄し、SCALE独自の軽量・レスポンシブ静的サイトとして新規クリーン制作。

中身は仮（大串提供の5ページ仕様を反映）。実コンテンツ・実画像（ロゴ／経営メンバー写真）は後日差替。画像は .ph プレースホルダ枠。contactフォームはバックエンドなし（デモ完了表示のみ）。

本番URL

  • https://scale-hp-demo.pages.dev/（Cloudflare Pages project=scale-hp-demo）
  • ルート全200: /(TOP) /about /service /recruit /contact
  • 完成後の最終デプロイ予定: https://scale-group.co.jp/

なぜ作り直したか（重要な経緯）

凍結方式（SpiralAIのSTUDIO DOMを固めてテキスト/画像差替）は、STUDIOデザインが元コンテンツにピクセル単位で溶接されているため、1つ直すと別の崩れが出る無限ループ（空→黒スラブ→濃色面→空枠）。大串が AskUserQuestion で「クリーンに作り直す（推奨）」を選択 → SpiralAI非依存・IPリスクなしの自社制作へ。

作業ディレクトリ

/Users/oogushiyuuki/株式会社SCALE/hp-demo/

パス 役割
index/about/service/recruit/contact.html 各ページ（header/footer 同一マークアップ内包）
assets/style.css デザインシステム（CSS変数・レスポンシブ・reveal）
assets/app.js ヘッダー追従/モバイルメニュー/スクロールreveal/デモフォーム
_capture/ 旧凍結パイプライン（不使用・残置のみ）

デプロイ手順

cd "/Users/oogushiyuuki/株式会社SCALE/hp-demo"
rm -rf _dist && mkdir _dist && cp *.html _dist/ && cp -R assets _dist/
printf '/*\n  Cache-Control: no-store\n' > _dist/_headers
wrangler pages deploy _dist --project-name scale-hp-demo --branch main --commit-dirty=true

デザイン

  • ブラック基調 #0d0d0f / アクセント #c97a52（暖色オレンジ）/ テキスト白
  • フォント Noto Sans JP / 静かで凛としたトーン
  • レスポンシブ（モバイルはハンバーガー全画面メニュー）
  • スクロールでフェードイン（IntersectionObserver、prefers-reduced-motion対応）

検証済み（2026-05-18）

  • 全5ルート HTTP 200 / SpiralAI残存ゼロ / コンソールエラーなし
  • デスクトップ・モバイル両方でレイアウト良好、ハンバーガー開閉OK、contactフォーム送信→完了表示OK

次のステップ（実コンテンツ確定時）

  • ロゴ画像・経営メンバー写真・各種画像を .ph プレースホルダに差し込み
  • contactフォームの送信先（バックエンド/メール）接続
  • scale-group.co.jp への本番デプロイ