1. プロジェクトの背景と目的
就職活動を進めるにあたり、自身の技術的な基礎知識や設計に対する考え方を具体的にお伝えできるよう、ポートフォリオサイト自体の企画・設計・実装に取り組みました。
既存のテンプレートやCMSに頼るのではなく、「どのような要件があり、どんな制約やセキュリティリスクが存在するかを整理した上で、最適な技術を選定する」 ことを学習のテーマとして開発を行いました。
2. アーキテクチャと技術選定
graph TD
subgraph Client ["クライアント (ブラウザ)"]
UI["Astro 5 (静的HTML配信)"]
Style["Tailwind CSS v4 (明朝体・モノトーン・赤)"]
Form["お問い合わせ UI + Turnstile"]
end
subgraph Edge ["エッジサーバーレス基盤"]
CF["Cloudflare Pages Functions (/api/contact)"]
Bot["Cloudflare Turnstile (ボット判定)"]
end
subgraph Delivery ["メール配信"]
Resend["Resend API (暗号化メール送信)"]
Mailbox["管理者メールボックス"]
end
UI --> Form
Form -->|HTTPS POST| CF
CF -->|トークン検証| Bot
CF -->|APIキー認証| Resend
Resend --> Mailboxフレームワークの選定理由
- WordPressの見送り:
- 個人サイトの運用において、PHP本体やプラグインのセキュリティアップデートの継続的な負担を避けるため。
- Next.jsの見送り:
- ドキュメント中心の静的サイトであるため、サーバーサイドレンダリング（SSR）や複雑な状態管理は過剰と判断し、配信するJavaScript量を抑えるため。
- Astro 5 の採用:
- 静的HTMLを基本とする軽量な配信性能（Zero-JS by Default）。
- Content Layer によるTypeScriptとZodを用いた型安全なドキュメント管理の実現。
3. プライバシーとセキュリティへの配慮
お問い合わせフォームの実装においては、セキュリティとプライバシー保護を最優先に考えました。
- 自前エッジAPIの構築: 訪問者の連絡先情報が不透明な第三者の中間サーバーを経由することを避けるため、Cloudflare Pages Functions によるサーバーレス関数を作成し、Resend の公式APIと直接連携させました。
- ボット対策: Cloudflare Turnstile を導入し、利用者に過度な負担をかけずにエッジ側でスパムアクセスを遮断しています。
- 自動返信メールの意図的な見送り: 第三者のアドレスを入力された際のメール踏み台攻撃（スパムリレー）を防ぐため、あえて不特定多数への自動返信は行わず、ブラウザ側での明確なサンクス画面表示と管理者への通知のみに絞り込みました。
4. デザインとタイポグラフィ
就職活動というフォーマルな目的に合わせ、派手な装飾を控えた落ち着いたトーンを意識しました：
- タイポグラフィ: 和文に
Noto Serif JP（明朝体）を採用し、ゆったりとした行間と文字間隔で読みやすさを重視。 - カラースキーマ: 墨色と白のモノトーンを基調に、視線誘導の要所にのみ深紅のアクセントを控えめに配置。
- 見出し設計: 威圧感を与えないよう、本文と調和する控えめなフォントサイズに抑制。
5. 制作を通じて得られた学び
- 表層的なデザインだけでなく、セキュリティ要件や運用のしやすさ、表示速度など、Webサイトに必要な要素を総合的に検討しながら開発を進める大切さを実感しました。
- 基礎的な仕様理解を疎かにせず、丁寧で読みやすいコードとドキュメントを残す習慣を、実務でも活かしていきたいと考えています。