Part2:ポートフォリオ用1ページ構成カンプをFigmaで作る手順
ポートフォリオのデザインカンプとは？
ポートフォリオは、自分のスキルや実績を伝えるための重要なツールです。特にWeb系の職種では、見た目の印象や情報の伝え方がそのまま評価につながることも少なくありません。
ここではFigmaを使って1ページ構成のポートフォリオサイトのデザインカンプを作成する手順を紹介します。実際に使用した構成やレイアウトの考え方も交えて解説しますので、これから自分のポートフォリオを作ろうと思っている方はぜひ参考にしてください。下記のようなデザインカンプを作る工程を行います。
ステップ1：まずは構成を考える（情報設計）
Figmaで作り始める前に、まずは「どんな内容を掲載するか」を整理することが大切です。
今回は、以下のようなセクション構成で1ページにまとめました。
ロゴとグローバルナビゲーションを配置します。ロゴはイラストレーターやfigmaを使って作成しましょう。
印象づけるビジュアル画像をPhotoshopを使って作成します。またキャッチコピーも設置します。自分の写真をアレンジしたり、自分らしさをアピールするオリジナルの要素を設置します。
キャッチコピーは、仕事への考え方を文章で紹介します。実際に実績のある方はその取り組み方もアピールしていきましょう。実績のない方は、初心者なりの目線で、ユーザに沿った作成を心がけているところをアピールしましょう
Webサイトが作成できることをアピールするためにLPのデザインやコーディングまで完了したサイトを表示。コンセプトや工夫した点なども掲載。コーディングができない場合は、サイトデザインをしっかりとアピールしましょう。
制作実績としてアピールしやすいのが、ロゴやバナーです。このバナーは、Photoshopで作成し、何時間かかったなどの説明やコンセプトも掲載しましょう。
現在仕事で使っているツールや言語を掲載します。得意なツールや言語は大きく強調してアピールしましょう。
簡単な経歴や人物像を紹介。ネット上で公開するポートフォリオの場合は、詳細な情報は載せないようにしましょう。
PHPなどを使ったお問合せフォームや、GoogleFormで作成します。ウェブサイトの場合、メールアドレスを直接掲載するのは避けましょう。SNSのメッセージ欄への誘導なども良いですね。
この順序にすることで、第一印象 → 実績 → スキル → 信頼感 → 行動（問い合わせ）という流れが自然に伝わるように意識しています。
ステップ2：レイアウトグリッドをFigmaで設定する
構成が決まったら、Figma上にレイアウトグリッドを設定します。レイアウトグリットを使うことで、デザインの3大要素である整列が整います。
今回は、Bootstrapと連携しやすい12カラムのグリッドを使っています。
上記のようにfigmaのプロパティにある「レイアウトグリッド」を使い12カラムのガイド設定を行なっておきます。下記は、デスクトップのデザインを作る際の12グリットの設定です。
- コンテナ幅：1140px（または任意）
- グリッド：12カラム
- ガター：16px〜24px（好みに応じて）
このグリッドを使うことで、後のコーディング時にBootstrapの指定のclass名col-3 や col-6 などで分割がしやすくなり、レスポンシブ対応も想定しやすくなります。
レイアウトグリッドの設定方法は下記をご参照ください。
ステップ3：セクションごとにデザインを進める
ここからは、実際にFigmaで各セクションのカンプを作っていきます。
キービジュアル
- 第一印象を決める重要な部分
- 写真 or シンプルな背景に、キャッチコピーや名前を配置
- フォントサイズや文字間のバランスに注意
仕事への姿勢（About）
- 文章中心のセクション
- 行間や余白をしっかり取り、読みやすさを重視
- シンプルなレイアウトでも印象に残るように
Works（Web制作実績）
- 実際のWebサイトのキャプチャ＋簡単な説明文
- 左側に実績のキャプチャ 右側にコンセプトを2カラムで並べ、視線の流れを意識
- コーディング後のサイトリンクをボタンなどで配置しておけるとなお良い
Works（ロゴ・バナーなどの画像実績）
- Photoshop／Illustratorで作成したバナーなどを一覧で掲載
- サイズは揃え、グリッドレイアウトで美しく見せる
- 使用したツールや、制作時間・コンセプトや工夫点を簡潔に添えると◎
スキル紹介
- アイコン＋テキストで視覚的に伝える方法が効果的
- 使用ツール／対応できる領域などを明確に
上記のようなアイコンは、下記のサイトよりダウンロード可能です。
プロフィール
- 名前、簡単な経歴や現在の活動内容など
- フォーマルすぎず、親しみやすい印象がポイント
お問い合わせ
- PHPなどでフォームを作成するとプログラム面もアピールできる
- PHPで設置できない場合は、SNSリンクなどで対応
- Googleフォームなどの活用もあり
ステップ4：色やフォントを選ぶ
デザイン全体のトーンを決める上で、カラーとフォントの選定は重要です。
カラーパレット
- 自分の「ブランドイメージ」に合った配色にする
- Adobe ColorやCoolorsなどのカラーツールを使うと便利
- ベースカラー1色＋アクセントカラー1～2色が基本
フォント
- Google Fontsを使うと実装が簡単
- 本文と見出しでフォントを使い分けると視認性が上がる
- 例：Montserrat, Open Sans, Robotoなど
ステップ5：調整と整え
最後に、全体のバランスを見ながら調整していきます。
- セクション間の余白の統一
- 色・フォントサイズ・行間の一貫性
- モバイルでも見やすいような要素配置の意識（※実装時に対応）
この時点でFigmaカンプは完成となります！
このあとは・・・
完成したカンプは、次のステップでHTMLとCSS（今回はBootstrap）を使ってコーディングしていきます。
Figmaで12カラムを意識して作っておくと、col-6やcol-4などのクラス指定にスムーズに反映できます。
このあたりは、別記事として「コーディング編」で詳しく紹介していきます。