公開URL：https://aobotan-koumuten.preview-dev.website/ 【概要・担当】 他者制作のデザインをもとに、実務を想定した施工事例ページと検索機能を追加設計・実装した、架空の工務店の自主制作サイトです。デザイン制作は担当していません。 担当：レスポンシブコーディング、アニメーション、モーダル、施工事例一覧・詳細・絞り込み・ページ送り、お問い合わせフォームのフロント・バックエンド処理、CSP設定、開発・納品環境の整備。 【実装のポイント】 ■ CSV・Markdownから施工事例を生成 事例概要・分類・写真情報はCSV、長文の本文はMarkdownで管理し、一覧・詳細・関連事例を生成します。ID重複、未定義カテゴリ、本文・画像参照の不備などをビルド前に検出する仕組みを用意。事例追加や更新の手順も文書化しています。更新には再ビルドが必要です。 ■ 複数条件の絞り込みとURL復元 工事種別・エリア・建物種別で絞り込み。同じ分類内はOR、異なる分類間はANDで判定します。選択中の条件・該当件数・該当なしの案内・条件解除・ページ送りを実装し、URL共有や再読み込み、戻る／進む操作でも状態を復元します。データ検証・検索条件・ページ送りの関連テスト64件を確認しました。 ■ 初期表示と操作性への配慮 絞り込みの領域を初期HTMLで確保し、URL反映と初回描画が完了してから操作を有効化。JS無効時は全件一覧を閲覧できます。選択条件の解除時やページ切り替え時のフォーカス、件数の通知、キーボード操作にも配慮しています。 ■ お問い合わせフォームとGAS連携 必須項目・形式・確認チェックを検証し、入力欄の近くにエラーを表示。送信時は最初のエラー項目へフォーカスを移し、不備がある場合は送信を停止します。送信中表示、重複送信の抑制と、成功後の完了ページへの遷移も実装。GAS側でも再検証し、受付内容のスプレッドシート記録、管理者通知・自動返信の処理を用意しています。制御文字の除去、式注入対策、ハニーポット、簡易レート制限、reCAPTCHA v3検証も実装。 ■ 開発・納品環境への対応 共通パーツを管理・修正しやすくするためAstroを使用し、CSSはFLOCSSの構成とBEMの命名規則を採用。納品用ファイルの生成を自動化し、HTML・CSS・JavaScriptのみ、またはGulp／Gulp＋webpackで継続開発できるソース・設定付きで納品できます。これらの形式では納品先にAstroは不要です。Astroソース一式の納品にも対応します。 ■ 表示負荷・構造化データ・セキュリティ 画像のWebP対応・遅延読み込み、日本語フォントの分割配信、ページ情報からのJSON-LD自動生成を実装。CSP・HSTS等を設定し、HTTPセキュリティヘッダー評価のMDN HTTP ObservatoryでA+・120点、12項目すべて合格しました（2026年10月19日）。 PageSpeed InsightsはPC95点、モバイル65点、CLSはいずれも0（2026年10月19日10:49 JST、トップページのラボ計測）。計測値は環境により変動します。モバイルの表示速度には改善余地があります。 【使用技術】 Astro／HTML／SCSS／JavaScript／Google Apps Script TypeScript：ページ設定・事例データの型定義・構造化データ生成等に使用。 データ管理：CSV／Markdown　納品環境：Gulp／webpack ※掲載事例・写真はデモ用です。紹介画像は撮影用に一部の余白を調整しています。