公開URL：https://tensaku.preview-dev.website/ 【概要・担当】 他者制作のデザインをもとにした、架空サービスの自主制作です。実案件ではなく、デザイン制作は担当していません。 レスポンシブ実装、アニメーション、導入事例ページの追加、WordPress独自プラグイン、ヘッドレスCMS、フォームのHubSpot連携、公開・納品環境の整備を担当しました。掲載企業・効果・数値はすべて架空のデモ内容です。添削サービス自体を開発した作品ではなく、その紹介サイトの実装です。 【実装のポイント】 ■ 更新担当者に合わせたCMS設計 導入事例・FAQ・バナー・トップの写真をWordPressで管理。事例は企業情報・業種・課題・活用方法・効果・数値・画像等を専用項目に分け、入力例・必須項目・代替テキストの案内を設けました。トップの利用者の声と一覧・詳細は同じ事例データから生成。FAQや写真は一覧画面で編集でき、ドラッグに加えて上下ボタンでも並べ替えできます。バナーには表示期間の設定を用意しました。 ■ CMSと公開環境を分離 独自ドメインの契約・管理はレンタルサーバー会社に残し、DNS設定で公開サイトをCloudflare Pagesへ接続。WordPressはレンタルサーバーで入力・データ提供を担当し、Astroがビルド時に取得・静的生成します。画像も取り込み・リサイズ・WebP化して配信。公開済みのページ・画像の表示は、WordPressの応答に依存しません。 ■ ステージングから本番への公開フロー CMS保存後の確認用ステージングと、本番公開の操作を分離。保存ごとの自動再構築と、変更をまとめて反映する方法を選べます。FAQ・バナー・トップの写真は編集中と本番用の値を分け、意図しない変更の混入を抑制。本番公開操作には専用権限・nonce検証を設けています。 導入事例はWordPressで公開中の内容を本番ビルド時に取得します。公開中の事例への変更は、次回の本番ビルドに反映されます。 GitHubとCloudflare Pagesを連携し、コード変更の確認用プレビューとmain更新後の本番ビルド・配信に対応。CMS更新のDeploy Hookとは別の経路です。 ■ データの検証とエラー対応 REST APIは待機上限・一時エラー時の再取得・ページ分割取得を実装。Zodで必須項目・型・画像・スラッグ等を検証し、不正な公開データではビルドを停止。書きかけの下書きはステージングで警告して除外するなど、公開用と確認用を区別しています。CMSの管理項目・保存時処理はテーマに依存しないPHPの独自プラグインで管理しました。 ■ デザインを保ったHubSpot連携 利用申し込み・資料請求は埋め込みではなく、独自フォームからHubSpot Forms APIへ送信。アクセストークンをブラウザーに置かない公開送信APIを採用しました。姓・名、会社名、メール、電話、都道府県、複数選択等をHubSpotの項目へ対応付けています。 HTML標準の検証と項目別の日本語エラー、全角メール・電話番号の補正、電話番号の表記統一、送信中の連打抑制、失敗時の入力保持・再試行を実装。成功応答後に完了ページへ進みます。 受付後の担当者通知・自動返信も設定。送信成功・失敗時の画面動作は、APIの模擬応答でも検証しています。 ■ 保守・納品・品質確認 SassはFLOCSS構成・BEM命名。フォントの自前分割配信、WebP、ページ情報・FAQに基づくJSON-LD生成を用意しています。ビルド済みHTML・CSS・JavaScript、またはGulp／webpackのソース・設定を含む納品に対応。CMSからの更新反映を続ける場合はAstroの取得・ビルド環境も必要です。 自動テスト148件通過・1件スキップ（14ファイル、通信の模擬応答・既存GAS・整形等を含む）。Astroの型・テンプレート検査もエラー0・警告0を確認しました。 【公開環境の評価】 MDN HTTP Observatory：A+・120点、12項目合格（2026年10月27日16:31 JST）。HTTPヘッダーの評価であり、脆弱性診断ではありません。 PageSpeed Insights：PC99・モバイル62。LCPはPC0.6秒・モバイル7.2秒、CLSはPC0.001・モバイル0（2026年10月27日16:32 JST、トップページのラボ計測）。モバイルの初期表示速度は改善余地があります。 【使用技術】 Astro／WordPress／PHP／HTML／SCSS／JavaScript／TypeScript WordPress REST API／HubSpot Forms API／Zod／Sharp／Swiper／JSON-LD Vitest／Cloudflare Pages／GitHub／Gulp／webpack 参考価格は、デザイン支給で同程度の構成・機能を実装する目安です。仕様により個別にお見積もりします。