公開URL：https://caresend.preview-dev.website/ 【概要・担当】 他のデザイナーが制作したデザインをもとに、実務での利用を想定した料金シミュレーターやフォーム機能を追加設計・実装した、架空サービスの自主制作サイトです。デザイン制作は担当していません。 担当：コーディング、レスポンシブ対応、アニメーション、料金シミュレーター、フォームのフロント・バックエンド実装、表示負荷への配慮、CSP・セキュリティヘッダー設定、開発・納品環境の整備。 【実装のポイント】 ■ CSVで更新できるステップ式料金シミュレーター 派遣地域・職種・人数・稼働時間・日数から月額を試算します。条件入力から連絡先の送信、結果表示までを段階的に案内し、資料請求フォームとタブで切り替えられる構成にしました。人数・時間・日数は範囲内から選択する方式としています。 職種別単価と地域別の補正率をCSVで外部管理し、再ビルドせずファイルの差し替えで更新できます。必須列・ID重複・数値範囲・CSVの引用符構文を検証し、データ不備や取得失敗時には試算を停止。計算・CSV処理・画面制御を分離し、計算や入力の境界値をテストしています。 ■ フォームの操作性とバックエンド対策 入力検証、送信中表示、重複送信の抑制を実装。送信中の条件変更を防ぎ、送信時の条件を保持して結果に反映します。reCAPTCHAの読み込み・トークン取得と送信処理に待機上限を設け、失敗時に再試行できる構成です。メールアドレス・電話番号の全角入力を半角へ補正し、氏名・会社名は元の表記を保持します。 GAS側でも入力を再検証し、制御文字の除去、式注入対策、ハニーポット、簡易レート制限、送信までの時間検証を実装。reCAPTCHA v3のサーバー側検証も組み込んでいます。 GASで受付内容・試算条件をスプレッドシートに記録し、管理者通知・自動返信メールを送る処理も実装しています。 ※試算はデモ用の仮単価による参考値です。 ■ 改修しやすい設計と納品環境への対応 共通パーツの管理・修正をしやすくするため、開発にはAstroを使用し、コンポーネント化しています。CSSはFLOCSSの構成とBEMの命名規則を採用。 納品先の環境に合わせたファイル一式を生成する仕組みを実装。ビルド済みHTML・CSS・JavaScriptのみの納品や、Gulp／Gulp＋webpackで改修を続けられるソース・設定ファイル付きの納品に対応しています。いずれも、納品先でAstroを導入する必要はありません。 ビルド済みファイルはSass・Node.jsを導入せずに設置・直接編集できます。Gulp／webpack形式でソースを再ビルドする場合はNode.js等が必要です。Astroでの継続開発を希望する場合は、Astroのソース一式でも納品できます。 納品先での編集対象と更新手順を明確にし、直接修正した内容が再ビルドで上書きされないよう、運用方針を確認して引き渡します。 ■ 表示負荷・構造化データ・操作性への配慮 画像のWebP対応と日本語Webフォントの分割配信を実施。reCAPTCHAはフォーム操作時に遅延読み込みします。ページ情報やFAQからJSON-LDを自動生成し、更新時の記載のずれを減らしています。 タブのキーボード操作、ステップ切り替え時のフォーカス移動・進捗通知・エラー項目への案内、端末の「動きを減らす」設定にも対応しています。 ■ CSP・セキュリティヘッダー CSPはdefault-src 'none'を基本に、必要な読み込み元と通信先を個別に許可。script-src・style-srcでunsafe-inlineを使用せず、HSTSなども設定しています。 HTTPセキュリティヘッダーの評価ツール「MDN HTTP Observatory」でA+・120点を取得し、12項目すべて合格しました（2026年10月18日）。 【使用技術】 Astro／HTML／SCSS／JavaScript／Google Apps Script TypeScript：料金計算・CSV読込／検証・ステップ制御、ページ設定・構造化データ生成に使用。 開発・納品環境：Gulp／webpack 【検証】 料金計算・CSV処理・画面制御の関連テスト41件を実施しました。 【制作姿勢】 法人BtoBサイトの構築・改修経験を生かし、見た目に加えて操作性・更新運用・保守・引き継ぎまで考えて実装しています。要件の確認・共有を大切にし、工程単位のご依頼にも対応します。