M.Kanagawa ポートフォリオサイト（このサイト）

概要

Web制作のご依頼をいただくための、個人のポートフォリオサイトです。Astroで静的サイトとして作り、Netlifyで公開しています。

コーディングはAI（Claude Code）を主体に行い、デザインの方向性・構成・文章・アニメーションの動きの調整・外部サービスの設定・最終確認を担当しています。

工夫したポイント

• 細部まで作り込んだアニメーション：GSAPで、ローディング画面、文字が1文字ずつせり上がる見出し、スクロールに合わせたフェードイン、プロフィール写真のモノクロへの変化、送信完了ページのチェックマークの描画などを実装
• 動きが苦手な方への配慮：スマホなどで「視差効果を減らす」設定をオンにしている端末では、移動・拡大・浮遊といった動きを止め、フェード（ふわっと現れる演出）だけで表示する。ローディング画面やメニューの開閉もフェードに切り替え、すべての動きを止めて味気ない印象にならないよう、配慮と演出のバランスをとった
• CSSだけで作ったモックアップ：制作実績のPC・スマホの枠は画像を使わずCSSで作成。マウスを乗せると、画面の中がスクロールしてサイト全体を見られる（タッチ操作の端末では動かさない）
• お問い合わせフォームを自前で構築：外部のフォームサービスを使わず、Netlify Functionsからメールサーバー経由で通知・自動返信メールを送信。reCAPTCHA v3でのスパム対策、入力内容のチェックも実装
• Instagramの投稿を自動表示：Instagram APIで1時間ごとに投稿を取得してNetlify Blobsに保存し、スライダーで表示。トークンの期限切れや取得の失敗があっても、サイトの表示が崩れないようにした
• 更新しやすい構成：制作実績はMarkdownファイルを1つ追加するだけで、一覧と詳細ページが自動で作られる。詳細ページのないこれまでの実績も、1行足すだけで一覧に追加できる
• 独自ドメインとメールの設定：ドメインとメールはXserver、サイトはNetlifyという構成。メールが止まらないよう、ネームサーバーは変えずにDNSレコードだけを切り替えた

使用技術

フレームワーク

• Astro（静的サイト）
• SCSS（BEM設計）

アニメーション・UI

• GSAP（ScrollTrigger）
• Swiper

サーバー・外部サービス

• Netlify — ホスティング・Functions・Blobs・独自ドメイン設定
• Instagram Graph API — 投稿の自動取得
• reCAPTCHA v3 — お問い合わせフォームのスパム対策
• Xserver — ドメイン・メール

制作環境・開発支援

• Claude Code（コーディング）