はじめに
前回の記事ではFigmaの基本操作として、フレーム・テキスト・長方形の作り方・Inspectモードでのデザインデータ確認・AutoLayoutの使い方を解説しました。今回はその知識を活かして実際にポートフォリオサイトのデザインをFigmaで作っていく実践的な手順を解説します。「まずコードを書いてから見た目を整える」ではなく「Figmaでデザインを固めてからコードを書く」という流れを体験することで、制作の全体像が見えるようになります。
1. デザインを始める前に考えること
1.1 「誰に向けた」ポートフォリオか決める
デザインを始める前に、まず「このポートフォリオを誰が見るのか」を明確にします。
ターゲットによってデザインの方向性が変わる：
フリーランス案件を狙う場合：
→ 実績の数と質を前面に出す
→ お問い合わせへの導線を最短にする
→ 清潔感・信頼感を重視したデザイン
就職・転職活動に使う場合：
→ 学習の過程・成長を伝える
→ GitHub・技術ブログへのリンクを目立たせる
→ 会社の文化に合わせたデザインの方向性
Web制作の練習として作る場合：
→ 自分が好きなデザインで自由に作る
→ 実装したい技術を積極的に使う
1.2 参考デザインを集める（リサーチ）
いきなり作り始めるより、まず良いデザインを見て「こういう感じにしたい」というイメージを固めます。
参考デザインを探せるサイト：
① Dribbble（dribbble.com）
→ UIデザインのショーケース
→ 「portfolio website」で検索する
② Awwwards（awwwards.com）
→ 優秀なWebデザインの受賞作品集
→ クオリティが高くて刺激になる
③ Figma Community（figma.com/community）
→ ポートフォリオのテンプレートを探す
→ 「portfolio」で検索して参考にする
④ Pinterest（pinterest.com）
→ 「web portfolio design」で画像検索する
→ ムードボード作りにも便利
→ 5〜10サイト集めて「ここが好き」という要素を
メモしておく
2. カラーパレットとタイポグラフィを決める
2.1 カラーパレットを作る
デザインで使う色を最初に決めておくと作業がスムーズになります。
基本的なカラーパレットの構成：
① プライマリカラー（メインの色）1色
→ ボタン・リンク・アクセントに使う
→ 例：#1A5FC0（青）・#27AE60（緑）・#8E44AD（紫）
② テキストカラー 2〜3色
→ 見出し用：#111827（ほぼ黒）
→ 本文用：#374151（濃いグレー）
→ サブテキスト用：#6B7280（薄いグレー）
③ 背景カラー 2〜3色
→ メイン背景：#FFFFFF（白）または #F9FAFB
→ セクション背景：#F3F4F6（薄いグレー）
→ カード背景：#FFFFFF（白）
④ ボーダー・区切り線：#E5E7EB
合計7〜8色に抑えると統一感が出やすい
2.2 FigmaでカラースタイルとTextStyleを登録する
カラースタイルの登録方法：
① 長方形を作って色を設定する
② 右パネルの「Fill」の横の「・・・」をクリックして
「Create style」を選ぶ
③ 名前を付けて保存する
例：
「Primary/500」→ メインカラー
「Text/Primary」→ 見出しテキスト
「Text/Secondary」→ 本文テキスト
「Background/Default」→ デフォルト背景
→ 一度登録すると他の要素にも
すぐに同じ色を適用できる
→ 色を変えたいときはスタイルを変えれば
使っている場所すべてに一括反映される
💡 カラースタイルはCSSの変数（--color-primary）と同じ発想です： FigmaのカラースタイルはCSS変数と1対1で対応させておくと、デザインからコーディングへの変換がスムーズになります。
3. ワイヤーフレームを作る
3.1 ワイヤーフレームとは
ワイヤーフレームはデザインの前段階として「どこに何を配置するか」を大まかに決めるための設計図です。色やフォントの細かい調整はせず、レイアウトと構成だけを考えます。
ワイヤーフレームで決めること：
・ページ全体のセクション構成
・各セクションに何を載せるか
・テキストと画像のバランス
・ナビゲーションの配置
・CTAボタンの位置
決めないこと：
・具体的な色
・フォントの細かい設定
・写真・アイコンの詳細
3.2 ポートフォリオのページ構成を決める
一般的なポートフォリオのセクション構成：
① ヘッダー
→ ロゴ（名前）・グローバルナビゲーション
② ヒーローセクション
→ キャッチコピー・肩書き・CTAボタン
→ プロフィール写真またはイラスト
③ Aboutセクション
→ 自己紹介・スキル・経歴のサマリー
④ Skillsセクション
→ 使える技術・ツールをアイコンと一緒に表示
⑤ Worksセクション（制作実績）
→ サムネイル・タイトル・使用技術
→ 詳細ページへのリンク
⑥ Blogセクション（任意）
→ 最新記事3〜4件をカード形式で表示
⑦ Contactセクション
→ お問い合わせフォームまたはメールアドレス
⑧ フッター
→ コピーライト・SNSリンク
3.3 Figmaでワイヤーフレームを作る手順
手順①：ページのフレームを作る
→ Fキー → キャンバスをドラッグ
→ 右パネルのPresetから「Desktop（1440×900）」を選ぶ
手順②：セクションを長方形で配置する
→ Rキーで長方形を描く
→ セクションの高さを大まかに設定する
→ 塗りを薄いグレー（#F3F4F6）にする
手順③：テキストでラベルを付ける
→ Tキーでテキストを追加する
→「ヒーロー」「About」「Works」などラベルを入れる
手順④：ざっくりした要素を配置する
→ 見出しテキスト（大きめの長方形でOK）
→ 本文テキスト（細長い長方形を複数並べる）
→ ボタン（角丸の長方形）
→ 画像（対角線を引いた長方形＝プレースホルダー）
→ カード（小さめの長方形を並べる）
手順⑤：全体バランスを確認する
→ ズームアウトして全体を俯瞰する
→ セクションの高さ・要素の大きさが
おかしくないか確認する
4. ヘッダーとヒーローを作る
4.1 ヘッダーを作る
ヘッダーの作り方：
① フレームの一番上にAutoLayoutで横並びのフレームを作る
② 左側にロゴ（名前テキスト）を配置する
→ 例：「Taro Yamada」フォントサイズ：20px・Bold
③ 右側にナビゲーションリンクを横並びで配置する
→ AutoLayoutでgap：32pxに設定する
→ 「About」「Works」「Blog」「Contact」
④ ヘッダー全体のAutoLayout設定：
→ 方向：横（Horizontal）
→ Padding：24px（上下）・80px（左右）
→ Justify content：Space between（左右端に振り分け）
→ 幅：1440px・高さ：80px
⑤ 背景色を白（#FFFFFF）にして
下に薄いボーダー（#E5E7EB）を引く
4.2 ヒーローセクションを作る
ヒーローの作り方：
左側（テキストエリア）：
① AutoLayoutで縦方向のフレームを作る
② キャッチコピーを追加する
→ 例：「Web制作・React開発」
→ フォントサイズ：56px・Bold・行間：1.2
③ サブテキストを追加する
→ 例：「HTML/CSSからReact・TypeScriptまで
幅広く対応するWebデベロッパーです。」
→ フォントサイズ：18px・Regular・行間：1.7
④ CTAボタンを追加する
→ テキスト「制作実績を見る」
→ 背景：プライマリカラー・角丸：8px
→ AutoLayoutでpadding：14px（上下）・28px（左右）
右側（画像エリア）：
① 200〜300px×200〜300pxの円を作る
② 薄いグレーで塗る（プロフィール写真のプレースホルダー）
③ 後で実際の写真に差し替える
全体レイアウト：
① 左右を横並びにするAutoLayoutフレームを作る
② padding：100px（上下）・80px（左右）
③ 背景を白またはとても薄い色にする
5. Aboutセクションを作る
Aboutセクションの作り方：
① セクション全体のフレーム：
→ 幅：1440px
→ 背景：薄いグレー（#F9FAFB）
→ padding：96px（上下）・80px（左右）
② セクションタイトル：
→ 「About」または「私について」
→ フォントサイズ：36px・Bold・中央揃え
→ 下に装飾ライン：幅48px・高さ4px・プライマリカラー
③ 2カラムレイアウト：
→ 左側：プロフィール写真（角丸の長方形）
→ 右側：自己紹介テキスト
右側のテキストエリア（AutoLayout縦方向）：
→ 名前：28px・Bold
→ 肩書き：16px・プライマリカラー
→ 自己紹介文：16px・行間：1.8
スキルバッジ：
→ 「React」「TypeScript」「WordPress」などを
AutoLayoutで横並びに配置
→ 各バッジ：角丸16px・背景は薄いプライマリカラー
→ テキスト：14px・プライマリカラー
6. Worksセクションを作る
6.1 制作実績カードを作る
制作実績セクションは最もよく見られる部分です。丁寧に作りましょう。
制作実績カードのデザイン：
カード全体：
→ 幅：360px（3カラムなら3枚並ぶ）
→ 角丸：12px
→ 背景：白（#FFFFFF）
→ シャドウ：0px 4px 16px rgba(0,0,0,0.08)
上部サムネイル：
→ 高さ：220px
→ 角丸：上だけ12px
→ 薄いグレー（後で実際の画像に差し替え）
→ 対角線を引いて「画像プレースホルダー」とわかるようにする
下部テキストエリア（AutoLayout縦方向）：
→ padding：24px
→ gap：12px
① タグ（使用技術）：
→ 「React」「Next.js」など小さなバッジ
→ 文字サイズ：12px・背景：薄いプライマリカラー
② プロジェクト名：
→ フォントサイズ：20px・SemiBold
③ 説明文：
→ フォントサイズ：14px・グレー（#6B7280）
→ 2〜3行
④ 詳細リンク：
→ 「詳しく見る →」テキストリンク
→ プライマリカラー・14px
6.2 カードを3列に並べる
カードグリッドの設定：
① 3枚のカードを並べる親フレームを作る
② AutoLayout設定：
→ 方向：横（Horizontal）
→ gap：32px（カード間の余白）
→ Wrapping：Wrap（画面幅が狭くなると折り返す）
③ 各カードの幅は固定（360px）にする
④ 「もっと見る」ボタンを下部中央に配置する：
→ アウトラインボタン（背景なし・枠線あり）
7. お問い合わせセクションとフッターを作る
7.1 お問い合わせセクション
Contactセクションの作り方：
① 背景：プライマリカラーの薄い版（#EBF3FF）
または濃いダークカラー（ダークテーマ系）
② 中央揃えのレイアウト：
→ 見出し「お気軽にご連絡ください」
→ サブテキスト（対応できる仕事の内容など）
→ CTAボタン「お問い合わせフォームへ」
③ またはフォームを直接配置する：
→ 名前・メール・メッセージのフィールド
→ 幅：600px・中央揃え
フォームフィールドのデザイン：
→ ラベル：14px・SemiBold
→ 入力欄：高さ48px・角丸8px
→ ボーダー：1px・#D1D5DB
→ フォーカス時のボーダー：プライマリカラー（コーディング時に設定）
→ テキストエリア：高さ150px
7.2 フッター
フッターの作り方：
① 背景：濃いカラー（#111827）
② テキスト色：白・薄い白
② AutoLayoutで横並びのフレーム：
→ 左：「© 2025 Taro Yamada」
→ 右：SNSアイコンリンク（X・GitHub・Zennなど）
SNSアイコンは：
→ コミュニティプラグイン「Iconify」から取得する
→ またはシンプルな丸で代替する
8. スマートフォン版を作る
8.1 モバイルフレームを追加する
モバイルデザインの作り方：
① 新しいフレームを作る（390 × 844）
② デスクトップの各セクションをコピーして
モバイル用に調整する
主な変更点：
・2カラム → 1カラムに変更する
・フォントサイズを少し小さくする（見出し：36px→28px）
・paddingを小さくする（80px→24px）
・カードを1列に並べる
・ナビゲーションをハンバーガーメニューに変える
（Figmaではクリックで開くアニメーションも表現できる）
💡 デスクトップ版を作ってからモバイル版を作る順番が効率的です： コードを書くときと逆の順番ですが、Figmaでデザインを確認するときは「大きい画面でレイアウトを固めてから小さい画面に最適化する」のがスムーズです。
9. コンポーネントを整理する
9.1 再利用する部品をコンポーネント化する
コンポーネント化しておくもの：
① ボタン（Button）
→ プライマリ・セカンダリ・アウトライン・サイズ違い
② バッジ（Badge）
→ スキルタグ・技術スタック表示
③ カード（WorkCard）
→ 制作実績カード
④ セクションタイトル（SectionTitle）
→ 見出し＋装飾ライン
⑤ フォームフィールド（Input）
→ テキスト入力・テキストエリア
コンポーネント化の手順：
① 要素を選択 → Ctrl（Command）+ Alt（Option）+ K
② 左パネルのAssetsタブに保存される
③ 他の場所に使いたいときは
Assetsタブからドラッグ&ドロップ
10. デザインの最終確認チェックリスト
10.1 デザインの完成度を確認する
完成前の確認ポイント：
① 余白の一貫性
✓ セクションのpadding（上下）は統一されているか
→ 96pxなら全セクション96px
✓ テキストと隣の要素の間隔が統一されているか
② 色の一貫性
✓ プライマリカラーが決めた1色だけになっているか
✓ テキストの色が3色以内に抑えられているか
✓ カラースタイルを適用しているか
③ タイポグラフィの一貫性
✓ 見出しのフォントサイズが階層通りになっているか
H1 > H2 > H3 > 本文
✓ フォントファミリーが1〜2種類に統一されているか
✓ 行間が適切か（本文：1.6〜1.8）
④ インタラクション
✓ ボタンにホバー状態のデザインも作ったか
✓ リンクテキストに下線またはカラーがあるか
⑤ アクセシビリティ
✓ 文字色と背景色のコントラストが十分か
✓ ボタンのクリックエリアが十分な大きさか
（最低44×44px）
⑥ スマートフォン版
✓ モバイル表示でレイアウトが崩れていないか
✓ テキストが小さすぎないか（最小14px）
✓ ボタンが押しやすいサイズか
11. デザインをコーディングに繋げる
11.1 Figmaからコーディングへ移行する手順
デザインが完成したらコーディングへ：
① FigmaのInspectモードで数値を確認しながら
HTMLとCSSを書く
② 使う色をCSSの変数（カスタムプロパティ）に定義する：
:root {
--color-primary: #1A5FC0;
--color-text: #111827;
--color-text-sub: #6B7280;
--color-bg: #FFFFFF;
--color-bg-sub: #F9FAFB;
--color-border: #E5E7EB;
}
→ FigmaのカラースタイルとCSS変数を対応させる
③ セクションのpaddingをまず書いて
全体のリズムを整える
④ コンポーネント（ボタン・カード）から先に作る
⑤ レイアウトはFlex・Gridを使って実装する
→ FigmaのAutoLayoutはFlexboxと対応している
⑥ 作りながらFigmaのデザインと見比べる
→ ズレを発見したらInspectで数値を再確認する
まとめ
今回はFigmaを使ってポートフォリオのデザインを作る実践手順を解説しました。ポイントをまとめると：
- デザインを始める前に「誰に向けたポートフォリオか」を決めてリサーチで参考デザインを集める
- カラースタイルとTextStyleを最初に登録しておくとCSS変数との対応が取りやすくなる
- まずワイヤーフレームでレイアウトと構成を固めてから色・フォントの詳細を詰める
- AutoLayoutをFlexboxと対応させて考えると、デザインからコーディングへの変換がスムーズになる
- 制作実績カードはシャドウ・角丸・padding・タグなど細かいディテールが完成度を左右する
- デスクトップ版を作ってからモバイル版に最適化する順番が効率的
- ボタン・カード・フォームフィールドなどをコンポーネント化しておくと変更管理が楽になる
- FigmaのカラースタイルとCSSのカスタムプロパティを1対1で対応させるとデザインの変更がコードにも反映しやすい
次の記事では、フリーランスとしてWeb制作の案件を獲得するための準備と心構え、営業方法の基本を解説します。お楽しみに！
コメント