PractiX Code Lab

ポートフォリオ作成前にした準備作業

Share this post

🚪はじめに

管理人のTKGです。

今回は、ポートフォリオを作成するにあたり「どんな準備をしたのか」にフォーカスしてまとめてみました。

特に初めてフルスクラッチでポートフォリオを作る方にとって、最初に何から始めるべきか悩むことも多いかと思います。

この記事では、構想段階で意識したことや、準備フェーズで取り組んだことをまとめてご紹介します。

🎯想定読者

  • ポートフォリオをこれから作ろうとしている方
  • 個人開発を始める際の準備手順を知りたい方
  • Web制作やフロントエンド開発に関心のある方

📘本記事でわかること

  • ポートフォリオを作成する前の準備プロセス
  • 具体的な要件整理・設計の進め方
  • 開発初期の方向性決定の考え方

🔍準備フェーズでやったこと一覧

1. 🎯目的の明確化（なぜ作るのか？）

  • スキルを可視化して提示する場が欲しい
  • 名刺代わりになるWebサイトを作りたい
  • 技術スタックやアニメーション表現の練習も兼ねたい

この3つを軸に、必要な機能や優先度を整理しました。

2. 🧩参考ポートフォリオの調査

3. 📝要件定義の作成

  • Must：自己紹介、制作物一覧、レスポンシブ対応
  • Nice to Have：3D演出、アニメーション、パララックス演出

Notionを使って可視化・共有し、ブレない開発の軸にしました。

4. 🧠スキルの棚卸しと技術スタックの仮決定

  • 自分が「使える技術」と「これから学びたい技術」を棚卸し
  • その結果、React/Next.js＋Tailwind CSS＋GSAP/Framer Motion/three.js を利用することに

5. 🧱UIワイヤーフレームの作成（Figma）

  • 手書きスケッチではなく、Figmaで簡易ワイヤーフレームを作成
  • 要件定義で整理した必要ページ（TOP・WORK・ABOUT）の、各ページのセクション構成を整理・可視化

6. 🔁開発順序の仮設計

開発に取りかかる前に、大まかな作業の流れを以下のステップで整理しました。

このフェーズを丁寧に設計しておくことで、無駄な手戻りを減らし、検証・調整もスムーズに進めることができました。

✅ Step 1：骨格（ルーティング・ページ構成）の実装

  • まずは Next.js の app ディレクトリをベースに、必要なページのルートを設定。
  • トップページ（/）、制作物紹介（/work）、プロフィールページ（/about）など、最低限必要な構成を決定。
  • この段階ではデザインを一切入れず、プレーンなページ構成のままリンクとルーティングの接続だけ確認。

✅ Step 2：デザイン・UIの設計（Figma & Tailwind）

  • 全体の世界観や雰囲気を言語化し、それに沿った配色・余白設計・アニメーション方針を検討。
  • Figma上で各ページのワイヤーフレームを作成し、実装に落とし込みやすい形に。
  • Tailwind CSSでベースのスタイルを整備し、「共通レイアウト」や「コンポーネント設計」への落とし込み準備。

✅ Step 3：共通レイアウトとナビゲーションの実装

  • layout.tsx にヘッダー／フッターを設置し、各ページで共通の見た目が整う状態に。
    • 最終的にデザインを調整しフッターを削除
  • レスポンシブ対応を意識して、モバイル・PCでレイアウトが崩れないベースを構築。
  • ナビゲーションの挙動やアクティブインジケータの挙動を調整。

✅ Step 4：主要ページごとのセクション実装（コンテンツの仮埋め）

  • 各ページにセクション単位で仮のデータやプレースホルダーを入れて、コンポーネント分割の単位を検証。
  • 制作物紹介ページでは、「カード型 or スライダー表示」などUI方針の実装と検証。
  • 一部ページでは、ダークモード対応や**アニメーション対応の可能性もこの時点で見極め。

✅ Step 5：アニメーション／インタラクション実装

  • GSAPやFramer Motionを使い、ページ遷移やマウスホバー時の演出を追加。
  • 3D表現が必要な場合はこのタイミングでthree.jsを導入し、視覚的な特徴を強化。
  • 見た目の印象を左右する重要フェーズなので、デザインとの整合性を繰り返しチェック。

✅ Step 6：細部の調整・デバイス対応・初期バグ修正

  • スマホでの表示確認／ブラウザ間の見た目確認／初期読み込み時の演出などを全体で確認。
  • アイコンや余白・ラインの位置ズレ、タイミングの違和感などを調整。
  • 表示速度やスクロール挙動も含めてUX全体を再チェック。

✅ Step 7：デプロイ＆公開

  • Vercel にデプロイし、公開環境でのパフォーマンスやバグの最終チェック。
  • SNSでのシェアカードや OGP設定もここで調整。
  • 最終的に「誰が見てもバグに見えない」状態まで仕上げて初期版リリース完了。

🔧Tips：やってよかったこと

  • Notion管理
    • 要件・進捗・参考資料すべてNotionで管理。情報整理と振り返りに便利。
  • 迷ったら公開前提で考える
    • 閲覧者の目線で判断することで、UI/UXの判断基準がブレにくくなった。
  • 目的設定⇒コンセプト設計⇒要件整理⇒デザインの順で整理した点
    • 重要なものから順に決定していったため、デザインや機能を追加したくなった際、「これは目的に沿った機能か？」「コンセプトにあっているか？」などと照らし合わせながら、機能の取捨選択できた。

🚀ポートフォリオ成果物リンク

👉 Takashi Sekiguchi | Portfolio

🏁おわりに

「ポートフォリオを作る」と聞くとすぐにコードを書き始めたくなるかもしれませんが、最初にしっかり準備しておくことで、開発中の迷いや手戻りを減らすことができます。

この記事が少しでも「どう始めるか」の参考になれば幸いです。

Share this post