リニューアルポートフォリオ
以前作成したポートフォリオのリニューアル版になります。 オープニングアニメーションの追加などを前提としてトップページの再設計を行いました。 アニメーションにはGSAPを使用し、スクロールと連動するアニメーションを実装しています。
サイトURL
https://portfolio.kaze-develop.com/GitHub URL
https://github.com/kaze-wind-dev/renewal-portfolio制作期間
2025/09/09～2025/09/28
制作背景・課題
前回作成したポートフォリオでは、アニメーション実装までを考慮することができませんでした。 また、以下の点が課題となっていたため元のサイトをもとに新たに作成することとしました。 ■課題 ・アニメーションの実装を前提とした設計になっていない ・コンテンツの内容がわかりづらい箇所がある ・視認性、可読性に欠ける箇所がある ・ページネーションが無限表示れる可能性があり、番号付きの要素しかない ・Zenn記事の取得に件数指定ができず、トップページで全件取得している ・お問い合わせフォームのエラー出力が1つの項目づつしかできず、煩わしい ・フォントの読み込みが原因でサイトパフォーマンスに大きく影響している
学んだこと・成果
■設計の重要性 前回の制作では実装を急いだため、後からのアニメーション追加が困難でした。 また、コントラストについて意識していなかったため、コントラストの確保とデザインの両立が難しいことを実感しました。 ■アクセシビリティ対策 カレントページの設定や英字部分のaria-labelやaria-hiddenの設定、リンク箇所のテキストなど、ページ全体を通して見直しました。 今まで意識していない細部まで設定することができ、どこでどのように設定していくのがよいのか、より具体的に考えて実践することができました。 ■ユーザビリティの改善 記事の無限表示のリスクを解消し、カレント表示をさせるなどユーザーが迷わないナビゲーション設計を実現しました。 また、お問い合わせフォームのエラー出力を1度に行うように変更することで、使いやすさの向上を目指しました。 ■パフォーマンス最適化 フォントの読み込みの設定が誤っていたため、読み込みファイルが異常に多くなっており、これを解消したところ、サイトパフォーマンスが大きく向上しました。 フォント読み込みがサイトパフォーマンスに与える影響を実感しました。
技術スタック
- Next.js
- microCMS
- TypeScript
- Sass
- GitHub
- Vercel