ポートフォリオサイトの実践制作

ポートフォリオ制作 — Figmaマスターコース集大成プロジェクト

このレッスンはFigmaマスターコースの最終レッスンです。これまで学んできたFigmaの基本操作・デザイン原則・カラー理論・タイポグラフィ・コンポーネント・Auto Layout・プロトタイプ・デザインシステム・Dev Modeのすべてを統合して、実際に公開できるポートフォリオサイトを制作します。ポートフォリオはあなたのスキルを証明する最も強力なツールです。採用担当者やクライアントがあなたを評価する際に最初に目にするものです。このレッスンを通じて、完成度の高いポートフォリオを仕上げましょう。

ポートフォリオ制作フロー — 5ステップ

---

STEP 1: プロジェクト計画

目的と対象者を定義する

ポートフォリオを誰に見せるかによって、デザインの方向性が大きく変わります。

掲載作品の選定基準

掲載するプロジェクトは多ければいいわけではありません。3〜5件の厳選されたプロジェクトを深掘りする方が、10件の浅い紹介より評価されます。

選定チェックリスト:

• ◆ターゲットが求めるスキルを示しているか
• ◆デザインプロセスを語れるか（なぜこのデザインにしたか）
• ◆Before/Afterや課題解決の文脈があるか
• ◆実際に公開・使用されたプロジェクトがあれば優先する

💡 学習中の作品しかない場合でも問題ありません。「既存サービスのリデザイン（Instagram・Spotifyなど）」「架空のプロジェクト」でも、十分なプロセスとデザイン判断の根拠があれば評価されます。

必要ページのリスト化

最低限必要なページ構成は以下の通りです。

• ◆Hero / トップ — 名前・肩書き・キャッチフレーズ・CTA
• ◆About — 自己紹介・スキル・使用ツール
• ◆Works — 作品一覧（サムネイル+タイトル+ジャンル）
• ◆Work Detail — 各プロジェクトの詳細ページ
• ◆Contact — お問い合わせフォームまたはメールリンク

---

STEP 2: ワイヤーフレーム作成

モバイルファーストで設計する

スマートフォンから設計を始めることで、情報の優先順位が明確になります。モバイル画面（390px幅）に収まらない情報はそもそも不要である可能性が高いです。

ワイヤーフレームのルール:

• ◆色は使わない（グレースケールのみ）
• ◆画像はプレースホルダー（グレーの四角形）で代替
• ◆テキストは実際の文字数に近いダミーテキストを使う
• ◆UIの構造と情報の流れに集中する

情報の優先順位とスクロール設計

ユーザーがページを上から下に読む動線を考え、最も伝えたいことを画面の最上部（Above the fold）に配置します。

Heroセクションで伝えるべき3要素:

1. ◆誰であるか（名前・肩書き）
2. ◆何ができるか（専門性・スキル）
3. ◆次に何をすればよいか（CTA：「作品を見る」「連絡する」）

⚠️ ポートフォリオで最も多い失敗は「自分が伝えたいことを詰め込みすぎること」です。採用担当者がポートフォリオを見る時間は平均30秒〜2分です。一目で「何者か」「何ができるか」がわかる設計を優先してください。

---

STEP 3: UI設計（高忠実度モックアップ）

デザイントークンの設定

ワイヤーフレームが完成したら、デザインシステムのレッスンで学んだデザイントークンをFigmaファイルに設定します。

ポートフォリオ用カラーパレット例:

カラーパレットはシンプルに保つことを推奨します。使う色が多いほどデザインが散漫になります。ポートフォリオでは2色+ニュートラルが黄金比です。

タイポグラフィの設定

フォントはGoogleフォントから2種類以内に絞ります。見出し用と本文用で異なるフォントを使うのが一般的です。

日本語ポートフォリオのフォント選択:

• ◆見出し: Noto Sans JP / BIZ UDPGothic（太字で視認性が高い）
• ◆本文: Noto Sans JP Regular（読みやすく統一感がある）
• ◆英字アクセント: Inter / Plus Jakarta Sans（現代的で洗練された印象）

Hero セクションのUI設計ポイント

背景に大きなグラデーションやジオメトリックパターンを使うことで、シンプルな構成でも視覚的なインパクトを作れます。ただし、テキストの読みやすさ（コントラスト比 4.5:1以上）を必ず確認してください。

Works セクションのカードデザイン

作品カードは統一したサイズとスタイルで作成します。Auto Layoutを使ったグリッドレイアウトにすると、作品が増えても崩れません。

カードに含める要素:

• ◆プロジェクトのキービジュアル（横長画像またはモックアップ）
• ◆プロジェクト名
• ◆ジャンルタグ（UI Design / Mobile / Web など）
• ◆簡単な説明（1〜2行）
• ◆「詳細を見る」リンク

💡 作品の画像がまだない場合は、Figmaで制作したデザインのスクリーンショットをデバイスモックアップ（iPhone・MacBookのフレーム）に配置すると、プロフェッショナルな印象になります。Figma Communityに無料のモックアップフレームが多数公開されています。

---

STEP 4: 実装連携

FigmaデザインをHTMLに変換する方法

ポートフォリオの公開方法によって実装アプローチが変わります。

方法1: HTML/CSSで自分で実装（推奨）

Dev Modeで各要素のCSSを確認しながら、自分でHTMLとCSSを書く方法です。実装力もアピールできるため、特にフロントエンドよりの職種を目指す場合に最も評価されます。

方法2: ノーコードツールで実装

WebflowやFramer（旧Framer Sites）はFigmaデザインをそのままWebサイトとして変換できます。コーディングスキルがまだ低い段階でも品質の高いサイトを公開できます。

方法3: Figma Community / Behanceに掲載

ウェブサイトを作らずに、Figmaのコミュニティやデザイナー向けポートフォリオサービスに掲載する方法です。迅速に公開できますが、URLが独自ドメインではないため自由度は低くなります。

CSSの実装チェックポイント

Figma Dev Modeから取得したCSSを使って実装する際のよくある注意点です。

• ◆font-family のWebフォント名をGoogle Fonts CDNのものと合わせる
• ◆Figmaのpxはそのままrem/emに変換することを検討する（16px = 1rem）
• ◆Auto Layoutのフレームは display: flex に対応しているが、flex-wrap は手動で追加が必要
• ◆グラデーションはFigmaのCSSをそのまま使える場合が多い

---

STEP 5: 公開方法

GitHub Pages（無料・カスタムドメイン対応）

GitHubのリポジトリにHTMLファイルをpushするだけで username.github.io のURLで公開できます。独自ドメインとの連携も可能です。

手順の概要:

1. ◆GitHubにリポジトリを作成（[username].github.io という名前）
2. ◆HTML/CSS/画像ファイルをpush
3. ◆Settings → Pages → Source: main branch を設定
4. ◆数分後に https://[username].github.io でアクセス可能

Vercel / Netlify（無料・デプロイが速い）

GitHubリポジトリと連携して、pushのたびに自動デプロイされます。Next.js / React / Vue などのフレームワークを使って制作した場合に特に便利です。

Figma Communityへの公開

HTMLではなくFigmaのデザインファイル自体を公開したい場合は、Figma Community（figma.com/community）に投稿できます。他のデザイナーがテンプレートとして利用できるようになります。

💡 公開後も継続的に更新することが重要です。少なくとも3ヶ月に1回は最新の作品を追加し、スキルの成長を示しましょう。採用担当者は「直近のアップデート日」も確認しています。

---

ポートフォリオのよくある失敗と対策

失敗1: 「デザインだけ」で終わる

UIのビジュアルだけを見せるポートフォリオは差別化が難しいです。「なぜこのデザインを選んだか」「どのような課題を解決したか」というプロセスと根拠を必ず添えましょう。

失敗2: 読み込みが遅い

画像の最適化を怠ると、ページの読み込みに数秒かかります。PNG画像はWebP形式に変換し、サイズは1MB以下を目標にします。

失敗3: モバイル対応を忘れる

採用担当者がスマートフォンで確認することは珍しくありません。必ずモバイルブラウザで表示確認をしてください。

失敗4: 連絡先がわかりにくい

せっかく内容がよくても、連絡先を見つけるのが困難なら機会を逃します。どのページからでも1クリックで連絡できる動線を作りましょう。

⚠️ ポートフォリオは完璧になってから公開するのではなく、70%完成したら公開することを推奨します。公開してからのフィードバックが最良の改善材料です。「準備中」と書いたまま公開しない状態より、不完全でも公開している状態の方が機会を生みます。

---

🏋️実践ワーク

1. ◆新しいFigmaファイルを作成し、「Planning」「Wireframe」「UI」「Prototype」「Documentation」の5ページ構成を作ってください。
2. ◆Planningページに掲載する作品3件の一覧表（作品名・ジャンル・目標・アピールポイント）をFigmaのテキストで作成してください。
3. ◆Wireframeページにモバイルサイズ（390px）でトップページのワイヤーフレームを作成してください（ツールはFrame + Rectangle + Textのみ使用）。
4. ◆UIページにデザイントークン（Color Styles 5色以上）を登録し、Heroセクションの高忠実度モックアップを作成してください。
5. ◆Dev ModeでナビゲーションバーのコンポーネントのCSSを確認し、実際にコードエディタで再現してみてください。

📝まとめ

ポートフォリオ制作は「プロジェクト計画→ワイヤーフレーム→高忠実度UI→実装連携→公開」の5ステップで進めます。掲載作品は3〜5件に絞って深掘りし、デザインの見た目だけでなくプロセスと判断の根拠を伝えることが評価につながります。このコースで学んだすべての技術——デザイントークン・Atomic Design・Auto Layout・Dev Mode——をポートフォリオ制作に活用して、あなたのFigmaスキルを世界に示してください。Figmaマスターコースの全レッスンを修了おめでとうございます。