ポートフォリオサイトにおける技術選定とセキュリティ設計の背景

はじめに

ポートフォリオサイトの制作にあたり、単に使い慣れたツールや流行の技術をそのまま採用するのではなく、**「サイトの目的や要件、セキュリティ面での制約を整理した上で、適切な技術を選定すること」**を意識しました。

本記事では、このポートフォリオサイトを構築するにあたって検討した技術選定の理由と、お問い合わせフォームにおけるセキュリティ設計の思考プロセスについてまとめます。

1. フレームワーク選定の検討プロセス

静的コンテンツの配信を中心とするポートフォリオサイトにおいて、各フレームワークの特徴とトレードオフを以下のように整理しました：

候補技術	メリット	今回の判断理由
WordPress (PHP)	制作が容易、プラグインが豊富	個人サイトの運用保守において、PHP本体やプラグインのセキュリティアップデート負荷を避けるため見送り。
Next.js (React)	SSRや動的ルーティングなど多機能	本サイトは静的ドキュメントの閲覧が主体であり、動的SSRや複雑なキャッシュ機構は過剰と判断。ブラウザへ配信するJavaScript量を抑えるため見送り。
Astro 5 (採用)	Zero-JS by default 高速な静的配信、Content Layer	コンテンツ駆動のサイトに適しており、静的HTMLによる軽量な配信が可能。TypeScriptによる型安全なドキュメント管理が標準で整っているため採用。

技術選定においては、「何ができるか」だけでなく、**「今回の目的において、何が不要で、何が運用の負担になるか」**を整理することを大切にしました。

2. お問い合わせフォームのセキュリティ設計

静的サイトにお問い合わせフォームを設ける際、外部の無料フォーム転送サービスを利用する方法が手軽ですが、就職活動サイトとしての利用を想定したとき、以下の懸念がありました：

検討した点: 採用担当者様にご入力いただく企業名や連絡先情報が、運営実態の不透明な第三者の中間サーバーを経由・蓄積されることへの不安。

そこで、外部サービスに依存せず、**「自前で管理するエッジ関数と信頼性の高いメール配信基盤」**を連携させる構成をとりました。

graph LR
    Recruiter["訪問者・採用担当者様<br>(入力フォーム)"] -->|HTTPS暗号化通信| Edge["Cloudflare Pages Functions<br>(エッジサーバーレスAPI)"]
    Edge -->|トークン認証| Turnstile["Cloudflare Turnstile<br>(ボット判定)"]
    Edge -->|APIキー認証| Resend["Resend API<br>(メール配信)"]
    Resend --> Admin["管理者メールボックス"]

Cloudflare Pages Functions: サーバーレスで動作し、不要な中間データベースを持たずにリクエストを中継します。
Cloudflare Turnstile: ユーザーに難解な画像認証を求めることなく、エッジ側で機械的なスパムアクセスを遮断します。
Resend: 開発者向けメール配信APIを用い、暗号化通信によって安全にメールボックスへ通知を届けます。

あえて自動返信メール（サンクスメール）を採用しなかった理由

Webフォームでは送信直後に受付完了メールを自動送信する仕様が多く見られますが、本サイトでは意図的に実装を見送りました。これには以下のセキュリティ上の理由があります：

スパムの踏み台・反射攻撃（Email Relay Attack）の防止: 悪意のある第三者が、他人のメールアドレスを入力してスパム広告や嫌がらせ文面を送信した場合、当サイトのサーバーが意図せず「迷惑メールの配信元（踏み台）」として利用されてしまうリスクがあります。
ドメインやIPの信頼性（レピュテーション）保護: 万が一踏み台として悪用された場合、送信元ドメインやメール基盤がプロバイダ各社のブラックリストに登録され、正常なメール送受信に支障をきたす恐れがあります。

【導き出した対応方針】 不特定多数への自動返信というリスクを抱えるのではなく、**「送信完了時にはブラウザ上で受付状況と入力データが明確に確認できるサンクス画面を表示し、バックエンドは管理者宛ての通知のみに絞り込む」**という設計を採用しました。

機能を闇雲に追加するのではなく、潜在的なリスクを考慮して「あえて作らない」という判断を行うことも、システム設計において重要な視点だと考えています。

3. Docs as Code（ドキュメントのコード管理）

Astro 5 の Content Layer API を活用し、制作物の詳細や技術記事を Markdown / MDX 形式でGitリポジトリ内で管理しています。

Zodスキーマにより、タイトルや制作期間などのメタデータをTypeScriptで静的型検証。
Javaの学習を通じて培った「型安全性を意識する習慣」を、コンテンツ管理の基盤にも適用しています。

4. サイト全体のトーン＆マナー

就職活動というフォーマルな目的に合わせ、以下のようなデザイン原則を設けています：

タイポグラフィ: 日本の書籍文化に親和性のある Noto Serif JP（明朝体）を基調とし、落ち着いた印象を演出。
見出し設計: 大きすぎる見出し文字を避け、本文と調和する控えめなサイズ感（text-2xl 〜 text-3xl）に抑制。
色彩: モノトーンを基調とし、視認性を高めたい箇所にのみ深紅のアクセントを控えめに配置。

まとめ

本ポートフォリオサイトの開発を通じて、単に画面を組み立てるだけでなく、**「要件に応じた技術選定を行い、セキュリティや可読性に配慮して実装を進めること」**の大切さを学びました。

今後も基礎的な知識と技術への真摯な姿勢を大切にしながら、実務に貢献できるWebフロントエンド開発に取り組んでいきたいと考えています。