1. 開発環境の準備

まずは開発環境を整えるところからスタートしました。
エディタには Cursor を使用し、AIによるサポートを活用しながら効率的に開発を進めました。
HTML・CSS は問題なく扱える状態でしたが、JavaScript は都度調べながら進める場面も多く、サポートを得ながら実装を進めました。

Next.js については、書籍や実際に制作している方の動画を参考に学習を進め、実際に小さなプロジェクトを作りながら「どのように記述し、どのように表示されるか」を体感的に理解していきました。

2. コンセプトとデザイン設計

ポートフォリオ制作のテーマは「眺めたくなるサイト」。
単なる実績のまとめではなく、自分らしさが伝わり、見ていて楽しいポートフォリオを目指しました。

• CMSによる管理
  制作実績やコンテンツは CMS で管理し、追加や更新がしやすい構成にしました。
• 読みやすさ・操作性の工夫
  情報量が多くなっても迷わず操作できるよう、メインメニューの横に 追従メニュー を配置し、ナビゲーション性を高めました。
• 各ページのデザイン方針
  • TOPページ：テキスト量が多くないため、中央 440px 幅にコンテンツを集約した 3 カラムデザインを採用。
  • Serviceページ：React の特性を活かし、横スクロールで動きを持たせた構成にしました。
  • 背景演出：「Nagameru AQUA」というコンセプトに合わせ、魚が自然に泳ぐようなアニメーション背景を設定し、世界観を強調しました。

3. Figmaによるデザイン作成

全体のデザインは Figma を用いて設計しました。
この段階では、「実装可能かどうか」も常に意識し、

• 実現できそうなアイデアは採用
• 表現が難しそうなものはデザイン段階で除外

という取捨選択を繰り返しました。
このプロセスにより、「デザインと実装の橋渡し」を意識した設計力が身につきました。

4. 実装とブラッシュアップ

デザインが固まった段階から、1ページずつ段階的に実装を進めました。
実装の過程では、Next.js で実現できることや、通常の JavaScript との違い・共通点を意識しながら本やWebサイトから知識を吸収し、実際のコードに反映させました。

この反復の中で、フレームワークとライブラリの役割の違い、コンポーネント設計の考え方、ページ遷移やパフォーマンスの最適化など、多くの実践的な知識を得ることができました。

学びと今後に向けて

制作を通して、
「デザインを実装に落とし込む力」と「Next.jsを活かした構築力」
を大きく伸ばすことができました。
単なるサイト制作にとどまらず、
「ユーザー体験」「操作性」「世界観の表現」をトータルで考えられるようになった点が、このポートフォリオ制作の大きな収穫です。