はじめに
このガイドの目的
本書は、Webデザイナーやクリエイターが自分の作品を見せるためのポートフォリオサイト作りを、分かりやすく段階的に解説するガイドです。実際に評価されるサイトを作るための考え方と手順を、具体的な例とともに紹介します。
対象読者
Web制作の初心者から中級者、個人で作品を発信したい方、転職や受注に役立てたい方を想定しています。専門用語は必要最小限に抑え、実践で使えるポイントを優先しました。
本書の構成と使い方
全8章で、目的の明確化、ページ構成、ターゲット設定、参考サイトの集め方、コンテンツ整理、ワイヤーフレーム、デザインカンプまでを順に解説します。順番に読むと迷いにくく、必要な章だけ参照して進めても使えます。
このガイドを使うと
自分の強みが伝わるポートフォリオの設計図が作れます。読み手に分かりやすく、成果につながるサイトを目指しましょう。具体的な作業手順は次章から詳しく見ていきます。
そもそもポートフォリオサイトとは？何のために載せるのか
定義と役割
ポートフォリオサイトは、仕事での成果やスキル、人柄をまとめて見せる個人のWebサイトです。履歴書や職務経歴書では伝わりにくい「実際に何を作れるか」を具体的に示せます。見る人にとっては、能力の即時確認ツールになります。
誰のために役立つか
転職希望者、フリーランス、副業を探す人は特に有益です。採用担当者やクライアントは、制作物やプロセスを見て即座に判断できます。デザイナーならデザイン力、コーダーなら実装力も評価対象になります。
具体的に何を載せるか（例）
- 代表作品（リンク・スクリーンショット）
- 役割や使用ツール（何を担当したか）
- 制作意図と成果（目的、数値や反響）
- 制作過程（ワイヤー、ラフ、前後比較）
- 連絡先と仕事の進め方（料金感や対応可能範囲）
見せ方で評価されるポイント
見やすい情報設計、作品の選び方、説明の分かりやすさ、ページの読み込み速度、スマホ対応などが評価に直結します。作品だけでなく説明の書き方や導線も重要です。
まずできる改善点
最新の実績を優先的に載せる、ターゲットに合わせて作品を絞る、問い合わせを目立たせる、各作品に簡潔な成果を添えると効果が上がります。
Webポートフォリオに載せる基本コンテンツとページ構成
Top（トップ）
入り口となるページです。代表作の大きなビジュアルと短いキャッチを置き、訪問者が次にどこへ行くか分かる導線を作ります。例：代表作品のスライダー＋「作品を見る」ボタン。
Projects（作品一覧）
作品を一覧で見せます。カード形式で画像・タイトル・短い説明・タグを付け、フィルタや並び替えを用意すると見やすくなります。
Individual Project（個別作品）
各作品の詳細ページです。課題、アプローチ、成果（数字や画像）、制作プロセスを順に書きます。ビフォー・アフターや使用したツールの記載があると説得力が増します。
About（プロフィール）
自己紹介、スキル、提供サービス、経歴の要点を書きます。写真やダウンロード可能な履歴書、クライアントの声（推薦文）を載せると信頼性が上がります。
Contact（問い合わせ）
問い合わせフォーム、メールアドレス、SNSリンクを必ず載せます。依頼の流れや対応可能な業務範囲を短く示すと返信率が上がります。
補助コンテンツ
ブログやコラムで制作の考え方や技術紹介を定期的に載せると、検索流入と信頼に繋がります。
ページ構成のポイント
・モバイル優先で読みやすくする。・各ページに明確なCTAを置く。・読みやすい文章と高品質な画像で第一印象を整えます。
載せる前に必須のステップ1「ターゲットを絞る」
なぜターゲットが大切か
ポートフォリオは誰に見せるかで伝え方が変わります。採用担当者はスキルと協調性を重視しますし、個人事業主や中小企業のオーナーは実務での成果や費用対効果を気にします。最初に対象を定めると、載せる作品、説明の深さ、サイトのトーンを無駄なく決められます。
主なターゲット例とポイント
- Web制作会社の採用担当向け：技術スタック、役割、チームでの貢献を明確に。コードやプロセスを簡潔に見せる。
- 個人事業主・中小企業のオーナー向け：課題解決や売上に近い成果を強調。導入効果や費用感を伝える。
- デザイン事務所・広告代理店向け：表現力やコンセプト、クライアントワークの幅を見せる。ビジュアルとストーリーを重視。
ターゲットを決めるための質問
- 誰が最終決定者か？
- 何を期待しているか（技術・デザイン・費用対効果）か？
- どの業界の仕事を増やしたいか？
実践のコツ
- 一番重要なターゲットを1つに絞る。
- 作品はそのターゲットの課題に合わせて選び、説明は役割と成果を中心に書く。
- 複数ターゲットがある場合はセクション分けか別サイトを検討する。
チェックリスト
- ターゲットを一言で定義したか
- その人が関心を持つ作品を上位に並べたか
- 説明に成果や役割を明記したか
- トップにターゲット向けの短い挨拶を置いたか
- 複数ターゲットなら分け方を決めたか
ステップ2：参考サイトを集めてレイアウトや見せ方を決める
なぜ参考サイトを集めるのか
最初から全部オリジナルにするのは時間と労力がかかります。参考サイトを集めると、自分が目指す見せ方や構成を素早く見つけられます。良い要素を真似て、自分らしく組み替えるのが近道です。
参考サイトの探し方と選び方
- 検索ワード例：「ポートフォリオ デザイナー」「Web 制作 作品集」など。SNSやギャラリー（Behance、Dribbble）も使います。
- ノーコードツールのテンプレート（STUDIOなど）も視野に入れると実装イメージがつかみやすいです。
- ターゲットに近い業種や、好みのテイストを基準に5〜10件を選びます。
観察するポイント
- ナビゲーション：項目の数・順序・導線のわかりやすさ
- 作品の並べ方：グリッド／リスト／カルーセル、1件あたりの情報量
- 余白感：窮屈か余裕があるかで印象が変わります
- タイポグラフィ：見出しと本文のサイズ・行間
- 配色・写真：統一感とアクセントの使い方
- コピーと導線：導入文やCTAの言葉遣い
- モバイルでの見え方と読み込みの軽さ
参考サイトの整理方法
ブックマークやスクリーンショットに加え、気になった理由をメモします。スプレッドシートや専用のムードボードにまとめると比較しやすいです。
自分用にカスタマイズする方法
良い部分をそのまま真似するのではなく、要素ごとに「自分はどう変えるか」を決めます。色や写真、言葉で個性を出し、使うテンプレートは必要に応じて調整します。著作権や独自表現には注意してください。
実践のコツ（チェックリスト）
- 参考は5〜10件に絞る
- 見やすいレイアウトを3パターンメモする
- モバイル表示を必ず確認する
- テンプレートは参考にしてカスタマイズする
- なぜ良いかを短くメモする
- コピーとCTAの言葉を参考サイトから学ぶ
ステップ3：コンテンツを洗い出す（何を載せるか決める）
まずは紙やメモに全部出す
最初に頭にあることを片っ端から書き出します。自己紹介で伝えたいこと、提供できるサービス、掲載候補の作品、実績の概要、問い合わせ方法などを漏れなく書きます。手を動かすと考えが整理されます。
書き出す具体項目（例）
- 自己紹介の要点（強み・専門分野・仕事に対する姿勢）
- 提供サービスの種類（例：サイト制作、UI設計、コピーライティング）
- 作品リスト（タイトル・短い説明）
- 各実績の詳細（役割・期間・成果・使用ツール）
- お客様の声や数字で示せる成果
- 必要なページ（トップ、作品、料金、FAQ、連絡先）
作品の取捨選択基準
全て載せずに、ターゲットに響くものを優先します。質が高い、役割が明確、最近のもの、バリエーションがある作品を基準にします。迷ったら『この仕事で何を示したいか』を基準にします。
各作品に付ける情報
- 短いキャッチ（何をしたか）
- 背景と課題
- 自分の役割と工夫点
- 結果（数値や感想）
- 使用したツールや期間
実務準備と優先順位付け
画像やスクリーンショット、原稿、クライアント許諾など実物を揃えます。公開優先度を決め、まずは掲載しやすいものから準備すると作業が進みます。
迷いを減らす小ワーク
各作品に『掲載する・保留・非掲載』の印を付け、掲載するものから順に説明文を1つずつ作成していきます。これで決定が早くなります。
ステップ4：ワイヤーフレームで「載せ方の骨組み」を作る
目的
ワイヤーフレームは見せ方の設計図です。何をどこに、どの順で配置するかを決め、デザインや実装の工数を減らします。ページごとの導線や情報の優先順位を可視化します。
準備するもの
- 紙とペン、またはFigmaやSketch、Adobe XDなどのツール
- 先に決めたコンテンツリスト（載せる作品・テキスト・リンク）
作成手順
- ページごとに目的を明確にする（例：トップ＝印象づけ、作品一覧＝探索しやすく）
- ブロックごとに要素を置く（ヘッダー、作品サムネ、導線、フッター）
- 優先度の高い情報を上部または左側に配置する
- PCとスマホのレイアウトを別枠で作り、要素の並び替えを検討する
レイアウトの具体例
- トップ：ヒーロー画像、ピックアップ作品、実績、問い合わせボタン
- 作品一覧：カード型グリッド（2〜3列PC、1列スマホ）
- 作品詳細：画像＋説明＋制作ポイント＋関連作品
- プロフィール：短い紹介文＋連絡先
スマホ対応のポイント
- 横幅を狭く想定して縦スクロールを優先
- 重要な操作（問い合わせボタン等）は指が届きやすい位置に
注釈と優先順位付け
ワイヤーに注釈を付け、リンク先や挙動（モーダルか別ページか）を明記します。優先度でサイズや配置を調整します。
テストと修正
紙でプロトタイプを試作し、第三者に操作してもらい問題点を洗い出します。ここで見つかった改善はワイヤーに反映します。
デザイン・実装への引き渡し
ワイヤーに寸法や余白、テキストの長さ目安を記入し、デザイナー・エンジニアへ渡します。これでデザインカンプ作成と実装がスムーズになります。
ステップ5：デザインカンプを作る（ビジュアルと世界観を整える）
目的
ワイヤーフレームの骨組みに色・文字・画像を載せて“完成見本”を作ります。見る人に与えたい印象（プロフェッショナル／親しみやすさなど）を決め、サイト全体で統一します。
手順（簡潔）
- 世界観を決める：カラー、タイポグラフィ、写真のトーンを揃えます。例：落ち着いた印象なら薄いグレーとセピア調の写真。
- コンポーネント化：ボタンやカード、見出しなどをパーツ化して使い回します。整った印象になります。
- レイアウト調整：余白とグリッドで情報の優先順位をはっきりさせます。スマホ表示も同時に作ると後が楽です。
作品サムネイルの見せ方
- 正方形・横長など統一した比率にする。視線が揃い見やすくなります。
- モックアップや拡大ショットを混ぜ、注目させたい作品を目立たせます。
ノーコードテンプレートを使う場合
テンプレートは便利ですが色・余白・フォントは必ず調整してください。同じテンプレートでも個性の出し方で差がつきます。
納品と確認
デザインカンプは実装の設計図です。画像やカラーコード、フォントサイズを揃え、必要なら簡単なアニメーション指示を付けておきます。実装後に実際のブラウザで確認し、微調整を繰り返してください。
