はじめに：なぜ「計画」が最優先なのか？
Webポートフォリオは、あなたのキャリアにおける「設計図」です。この設計図がないままコードを書き始めると、目的と異なる作品を選んだり、アピールが曖昧になったりして、時間と労力を無駄にしてしまいます。
本マニュアルは、次の「応用編」「実践編」へスムーズに進むための土台作りを目的としています。まずは手を動かすのをやめて、「思考」に集中しましょう。
STEP 1：制作の「目的」と「ターゲット」を定める
サイトが成功した状態とは、具体的にどういう状態か。その答えによって、サイトのデザインの方向性と伝えるべきメッセージが変わります。
| 目的 | 主なターゲット | ターゲットが最も重視する点 |
| 就職・転職 | 採用担当者、現場のディレクター | 論理的な思考プロセス、制作範囲の明確さ、基礎技術の正確性 |
| 案件獲得 | サービスを探している一般企業や個人 | 実績の量と幅、問い合わせやすさ、信頼感のあるデザイン |
アクション： ターゲットが重視する点から逆算し、あなたの「最もアピールしたい強み」を明確な一言で定義しましょう。
STEP 2：掲載作品の「選定基準」を確立する
量よりも質、そして「語れる」作品を選びます。あなたの専門性と強みを決定づける作品を厳選しましょう。
- 目的に合致しているか？
- 最新のスキルを証明できるか？
- 制作背景を論理的に説明できるか？
ポイント： 作品選定後、次の「応用編」で深掘りするために、作品タイトル、担当範囲、制作期間、使用技術などの基本情報を収集しておきましょう。
STEP 3：ポートフォリオの「制作方法」を決定する
あなたが目指すキャリアによって、最適な制作方法は異なります。Webデザイン・開発職を目指す方は、フルスクラッチ（自作）を選択することが、何よりの技術証明となります。
アクション： Webデザイン・開発職を目指す方は、フルスクラッチ（自作）を選択し、「実践編」でWeb制作の基礎技術を習得することを推奨します。
STEP 4：サイト全体の「構成」と「ワイヤーフレーム」を計画する
最終的に作るサイトの全体像を目に見える形にします。これが【基礎編】の最終成果物です。
- 標準的な5ページ構成： HOME, ABOUT, WORKS一覧, DETAIL（作品詳細）, CONTACT。
- ワイヤーフレームの作成： ノートやツールを使い、各ページにどの情報をどこに配置するかを簡単な図（ワイヤーフレーム）として書き出しましょう。
アクション： ワイヤーフレームを作成し、【基礎編】の計画を完了させましょう。
基礎編 完了：次のステップへの切り分け
計画と設計図が完成しました。次に進む前に、以下の表でどちらの能力を優先して鍛えるか確認しましょう。
| マニュアル | 目的（証明する能力） | 評価される質問の軸 | 次の行動 |
| 応用編 | 思考力・戦略性 | 「なぜ」それを作ったのか、論理的に答えられるか。 | 制作物を深く言語化する（書く作業） |
| 実践編 | 実装力・技術力 | 「どう」レスポンシブを実現したのか、正確に実現できるか。 | HTML/CSS/JSでサイトを構築する（コーディング作業） |