ポートフォリオサイトを1週間で完成させる学習スケジュール

Posted on by

〜最短で「見せられる作品」を作るロードマップ〜

はじめに：ポートフォリオは“スキルの証明書”

Webデザイナー・エンジニアを目指す人にとって、
ポートフォリオサイトは「自分を売り込む最強の武器」です。

履歴書よりも雄弁に、あなたの実力やセンスを語ってくれます。
しかし、多くの人がこう悩みます。

「何から手をつければいいかわからない」
「デザインに時間をかけすぎて完成しない」
「そもそも1週間で作るなんて無理では？」

結論から言うと、正しい順序で学べば1週間でも十分に完成します。

この記事では、初学者〜中級者向けに、「実際に形にできる」学習スケジュールを日ごとに解説します。

1週間で完成させるための3つのルール

まずは、時間を無駄にしないための前提ルールを確認しましょう

① 完璧を目指さない：「出す」ことを最優先に

1週間で目指すのは、完成度100%ではなく「公開できるレベル」です。
デザインや微調整は、後から何度でもアップデート可能。

まずは「世に出せる状態」をゴールに設定しましょう。

② 目的を明確にする

ポートフォリオには目的があります。
誰に見せたいのかを決めると、構成とデザインが明確になります。

目的例
就職・転職向け自己紹介＋スキル＋制作実績＋問い合わせ
フリーランス向け実績＋サービス内容＋SNS導線＋CTA
学習記録用成長過程＋勉強内容＋ブログ形式

目的を絞れば、必要なページ構成も絞れます。

③ 使用ツールを固定する

ツールを増やすほど迷走します。
下記のように1つずつ選びましょう

  • デザインツール： Figma
  • 開発環境： VS Code
  • コーディング： HTML / CSS / JavaScript（最低限）
  • 公開方法： Netlify または GitHub Pages

ツール選びに迷わないことで、制作スピードが劇的に上がります。

7日間スケジュール（1日3〜5時間想定）

Day 1：構成を決める＆ワイヤーフレーム作成

目標：設計図を作ること。デザイン前に“構成を整理”する。

やること

  1. 目的とターゲットを明確に（誰に何を伝える？）
  2. ページ構成を決める（例：TOP／WORKS／ABOUT／CONTACT）
  3. 手書き or Figmaでワイヤーフレームを作成

ポイント
構成をシンプルに。「1ページ完結型（LPスタイル）」でもOK！
最初は「作品を3つ紹介＋自己紹介＋問い合わせ」で十分。

Day 2：Figmaでデザインを作る

目標：デザインを“形”にして、コーディング準備を整える。

やること

  1. カラーパレット・フォントを選定（Google Fonts推奨）
  2. ワイヤーフレームをもとにレイアウトを整える
  3. コンポーネント（ボタン・カードなど）を整理
  4. 画像素材を用意（Unsplash / Pexels / 自作）

デザインのコツ

  • メインカラー＋アクセントカラーの2色で統一
  • 余白とフォントサイズの一貫性を重視
  • “見やすさ”＞“派手さ”

Figma上で「Auto Layout」を使うと、コーディング時に構造が読みやすくなります。

Day 3：HTMLで骨組みを作る

目標：全ページの構造をマークアップ。

やること

  1. header／main／footerの3ブロック構成を作成
  2. sectionタグでコンテンツを区切る
  3. h1〜h3見出しで情報の階層を整理
  4. 画像・テキストを仮配置
<section class="works">
  <h2>WORKS</h2>
  <div class="work-list">
    <div class="work-item">
      <img src="work1.jpg" alt="制作事例1">
      <p>Webサイト制作（架空企業）</p>
    </div>
  </div>
</section>

HTML段階で意識すること

  • “意味的なタグ”を使う
  • 画像にはaltを必ず入れる
  • <div>乱用はNG。構造を意識して整理。

Day 4：CSSでデザインを再現する

目標：見た目を整える。

やること

  1. Figmaデザインをもとに色・余白・フォントを再現
  2. Flexboxでレイアウトを組む
  3. ボタン・見出し・カードなどパーツを統一化
  4. メディアクエリでスマホ対応

レスポンシブ対応の例：

@media (max-width: 768px) {
  .work-list {
    flex-direction: column;
  }
}

CSSのコツ

  • まずPCデザインから → スマホへ（モバイルファーストでも可）
  • Figmaのpx値をそのまま使わず、感覚的に調整OK
  • デザイン再現率より“見やすさ”を優先！

Day 5：JavaScriptで動きをつける

目標：最低限のUI演出を実装する。

やること

  1. ハンバーガーメニュー（SP用）
  2. スクロール時のフェードイン
  3. ページトップに戻るボタン

例：スクロール時フェードイン

const fadeElems = document.querySelectorAll(".fadein");
window.addEventListener("scroll", () => {
  fadeElems.forEach(el => {
    const rect = el.getBoundingClientRect().top;
    if (rect < window.innerHeight - 100) {
      el.classList.add("show");
    }
  });
});

CSS

.fadein { opacity: 0; transition: opacity 1s; }
.fadein.show { opacity: 1; }

動きが加わると、作品の印象がグッと引き締まります。

Day 6：コンテンツの整理＆微調整

目標：全ページの整合性を確認し、“見せる状態”に。

チェック項目

  • スマホ／タブレットで崩れていないか？
  • リンク先・画像・alt属性は正しいか？
  • 日本語フォントの行間・余白バランスは適正か？
  • ボタンや見出しのデザインが統一されているか？

ブラウザ確認ポイント

  • Chrome, Safari, Firefox（最低2つで確認）
  • デベロッパーツールでスマホサイズもチェック

Day 7：公開＆ブラッシュアップ

目標：世界に公開し、自分のポートフォリオとして使える状態に。

やること

  1. GitHubにソースをアップロード
  2. Netlify（またはGitHub Pages）でデプロイ
  3. SNSや履歴書にURLを記載

Netlify公開の流れ

  • 無料アカウント作成
  • GitHubと連携 → リポジトリ選択 → 自動デプロイ

これで、“URL付きの実績”が完成！

時間がない人向けのショートカット3選

① テンプレートを活用

FigmaやCodePenには、無料で使えるポートフォリオテンプレートがあります。
最初は「真似」から始めてOK。
→ 修正・改良を通してスキルが身につきます。

② コンテンツより構成を優先

文章や写真を完璧にしようとすると、時間が足りません。
まずは“枠”を作り、後で差し替える形で進めましょう。

③ カラー・フォントは既存ブランドを参考に

自分で配色を考えるより、実在する企業サイトの配色を参考に。
→ 一貫性が生まれ、時短＆クオリティアップ。

完成後にやるべき3つのアップデート

  1. 実績を追加する（新しい作品をどんどん載せる）
  2. ブログや制作ノートを追加する（学びの記録）
  3. Google Analytics・Search Consoleを導入して分析する

ポートフォリオは「作って終わり」ではなく、“育てるメディア”です。

まとめ：1週間でも「見せられるレベル」は作れる

ポートフォリオ制作で大切なのは、スピードよりも構成と順序。

  1. 目的を決める
  2. Figmaで設計する
  3. HTML/CSSで構築
  4. JSで演出を加える
  5. 公開して改善する

完璧よりも、まず形にする。
出すことで、学びが何倍にも深まります。