ポートフォリオサイトv.1
Period: 2025/09/18~2025/09/23 実稼働5日
Role: デザイン, コーディング, 企画
Tools / Tech: HTML, CSS, Figma, VSCode, WordPless, JavaScript, PHP
プロジェクト概要と制作のポイント
本サイトは、自身の制作実績やデザインの考え方を効果的に伝えることを目的として構築したポートフォリオサイトです。単なる実績一覧ではなく、「制作背景や意図」「技術的な工夫」までをわかりやすく整理し、閲覧者にストレスなく情報が届く体験設計を重視しました。フロントエンドでは Tailwind CSS を用いて、開発効率とメンテナンス性を両立。
ユーティリティクラスによるレスポンシブ対応を行い、デバイスサイズに応じた最適なレイアウトと読みやすさを確保しました。
また、AOS(Animate On Scroll) を活用し、コンテンツの出現タイミングに自然なアニメーションを加えることで、静的なサイトに動きと奥行きを持たせています。
実績一覧ページでは、Ajax を用いた非同期フィルタリング機能を実装し、ユーザーがジャンルやカテゴリを選択した際にページ遷移なしで結果が反映されるよう設計しました。
これにより、コンテンツへのアクセス性と操作性が大幅に向上しています。
WordPress のカスタム投稿タイプ(CPT) と Advanced Custom Fields (ACF) を活用し、実績データを柔軟に管理できる仕組みを構築。ジャンルやタグの拡張性を持たせることで、制作案件が増えても簡単に更新・拡張できる設計としています。
全体として、デザイン・UX・アクセシビリティ・メンテナンス性のバランスを意識し、「見せ方」だけでなく「使いやすさ」まで踏み込んで制作したプロジェクトです。