WordPressで作るポートフォリオサイトの完全構築ガイド

2026.06.04

WordPressで作るポートフォリオサイトの
完全構築ガイド

今回の記事は「WordPressは入れたけど、ポートフォリオって何をどこに配置すればいいの？」「作品をどう見せたらプロっぽくなる？」というような感じにサイトの作り方がわからないという方向けに作成しました。

この記事で得られるゴールはサイト構成（設計図）から、WordPressの標準ブロックを使った具体的な実装方法まで解説しますので、これを元に作成していけば簡単なポートフォリオサイトが作れるようになります。

橙（とう）
橙（とう）

「WordPressの準備はできたけど、いざポートフォリオを作るとなると、真っ白な画面を前に手が止まっちゃうんだよね…」

ルウルウ
ルウルウ

「素人がいきなり作り始めるからだ。ポートフォリオには『内定が出る・仕事が獲れる』ための鉄板の配置（レイアウト）がある。それをまずは頭に入よう！」

1. 全体設計：ポートフォリオに必要な4つの基本ページ

いきなり作り始める前に、サイト全体で必要なページを整理します。

  • ① トップページ（HOME）: サイトの顔であり、全体のナビゲーション。
  • ② 作品一覧・詳細ページ: 最も重要なメインコンテンツ。
  • ③ プロフィールページ: 「誰が作ったか」「どんなスキルあるか」を伝えるページ。
  • ④ お問い合わせ（Contact）: 仕事の依頼や連絡を受け付ける窓口。

①「トップページ（HOME）」の構成と作り方

トップページの最上部に位置する「メインビジュアル（MV）」は、サイトに訪れた人が一番最初に目にする、いわば「サイトの顔」です。ここでは、ひと目であなたが「何のデザイナーなのか」が伝わるキャッチコピーと背景画像を設定します。

  • ① メインビジュアル（MV）
    • 配置するもの: キャッチコピー（例：「想いを形にするWebデザイナー」）と、自分の世界観を表す背景。
    • WPでのやり方: 「カバーブロック」を使用。背景に画像やグラデーションを敷き、その上に「見出しブロック」でキャッチコピーを重ねる。
  • ② 注目作品（Featured Work）
    • 配置するもの: 過去のベスト作品3〜4選。
    • WPでのやり方: 「カラムブロック（3分割または4分割）」を配置。それぞれの中に「画像ブロック」と「ボタンブロック（詳細ページへのリンク）」を入れる。
  • ③ スキル・強み（Skills）
    • 配置するもの: 使えるツール（Photoshop, Figma, WordPressなど）や得意なこと。
    • WPでのやり方: 「カラムブロック」に「アイコン（または画像）」と「段落（テキスト）」をセットで並べる。
  • ④「お知らせ（News） / ブログ」※こちらは無理に作らなくてもOK！
    • 配置場所: トップページの「スキル・強み」の下あたり。
    • WPでのやり方: 「最新の投稿ブロック」または「クエリーループブロック」を使用。
    • 理由: ポートフォリオが「作ったきり放置されているサイト」に見えるのを防ぐためです。「〇〇のサイトを制作しました」「デザインの勉強会に参加しました」といった最新情報を数件出すだけで、サイトの生存感（＝今も活動していること）をアピールできます。

①〜④まで順にやり方を解説していきます…がまずは以下コラムをご覧ください↓↓↓

💡 【初心者向け】トップページを作る「2つのルート」どちらを選ぶ？

  • ルートA：テーマの標準機能を使う（簡単！）
    WordPressの「外観」＞「カスタマイズ」から設定するルートです。手軽ですが、画面の構成や編集ボタンの位置がお使いのテーマ（Cocoon、Lightning、SWELLなど）によって完全にバラバラというデメリットがあります。
  • ルートB：固定ページをHOMEにする（こだわり派向け）
    自分で「固定ページ」を新しく1枚作り、それをトップページに設定するルートです。「コーディングの知識が必要では？」と思うかもしれませんが、今回はどのテーマでも100%使える「WordPressの標準ブロック」だけをパズルのように組み立てていくので、専門知識はゼロで大丈夫！テーマに縛られない自由なポートフォリオが完成します。
橙（とう）
橙（とう）

「へぇー！2つのやり方があるんだ。テーマの機能を使うルートAの方が簡単そうだけど…ボクのテーマだと画面が少し違うみたい？」

ルウルウ
ルウルウ

「当然だ。ルートAはテーマ（CocoonやSWELLなど）ごとに設定画面の名前もボタンの場所もバラバラだからな。
そこで今回は、どんなテーマを使っていても100%完全に同じプロ級の見た目が作れる『ルートB（固定ページで作成ルート）』をベースに解説していくゾ！」

🔗 どうしてもテーマ標準の機能（ルートA）でサクッと作りたい方へ 「今回はとにかく一番簡単に、テーマ標準の機能だけでトップページを形にしたい！」という方は、以下の別記事でテーマ別のカスタマイズ方法を詳しく解説していますので、そちらを参考に進めてみてくださいね。
[関連記事：【テーマCocoon】WordPressの初期設定のままトップページを整える方法（準備中）]

① メインビジュアル（MV）の作り方

この記事のベースである「ルートB」では、新しく作った固定ページ（タイトルは「HOME」など）の編集画面を開いて、上から順番に標準ブロックを積んでいきます。まずはサイトの顔である「メインビジュアル」からスタートです！

📌 配置するもの
  • キャッチコピー： ひと目で何ができる人か伝える言葉（例：「想いを形にするWebデザイナー」）
  • 背景画像（または色）： あなたのデザインの世界観を表す画像、またはシンプルなグラデーション。
🛠️ WordPress標準ブロックでのメインビジュアル実装手順（3ステップ）
ステップ1：土台となる「カバーブロック」を入れる
  1. 編集画面の左上にある +（ブロック挿入）ボタンを押し、「カバー」ブロックを探して追加します。
  2. カバーブロックの中に「アップロード」ボタンが出るので、背景にしたい画像を選ぶか、あるいは好きな「色（単色またはグラデーション）」を選択します。
ステップ2：中に「見出しブロック（H1）」を重ねる
  1. カバーブロックの真ん中をクリックすると、その中に文字が打てるようになります。
  2. /見出し と入力するか、+ ボタンから「見出し」ブロックを追加します。
  3. 右側の設定パネルで、見出しのレベルを「H1」に変更します（※これがこのページの正式なタイトルになります）。
  4. ここに、あなたのキャッチコピー（例：「想いを形にするWebデザイナー」）を打ち込みます。
ステップ3：文字を中央揃えにして、色を整える
  1. H1見出しブロックのツールバーから「テキスト配置を変更」を選び、「テキスト中央揃え」にします。
  2. 文字の色を「白」など、背景に対して一番クッキリと目立つ色に調整します。
  3. 背景画像が明るすぎて文字が読みにくい場合は、カバーブロック自体を選択し、右側パネルの「オーバーレイの不透明度」を50%〜70%程度に上げて、背景を少し暗く（または白く）沈めましょう。
💡 【重要】テーマごとに異なる「余白（パディング）」の壁

固定ページのテンプレートを「1カラム」や「フルワイド」に設定しても、お使いのテーマによっては左右にわずかな隙間（余白）が残ることがあります。 特に Cocoon などのブログ寄りテーマでは、デザインの保護機能として余白が残る仕様になっています。

もし「どうしても画面の左右ピッタリに画像を広げたい！」という場合は、以下のCSSコードを追加CSSに記述することで、テーマの制限を解除して完全にフルワイド表示にすることができます。

CSS

/* トップページ（HOME）の余白を強制リセットするコード */
.home #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.home #content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
✍️ 追加CSSはどこに書けばいいの？
橙（とう）
橙（とう）

「余白を消すCSSコードは分かったけど、これってWordPressのどこに貼り付ければいいの…？ コードを触るの、ちょっと怖いんだけど！」

ルウルウ
ルウルウ

「安心しろ。テーマのシステムファイルを直接書き換えるような危険な真似はさせん。
WordPressには、誰でも安全にデザインを上書きできる『追加CSS』という専用の部屋が最初から用意されている。そこにコピペするだけだ！」

🛠️ 追加CSSにコードを貼り付ける手順
  1. WordPressのダッシュボード（管理画面）から、「外観」＞「カスタマイズ」をクリックします。
  2. 左側に並んでいるメニューの中から、一番下あたりにある「追加CSS」という項目を開きます。
  3. 文字が入力できる白いボックスが表示されるので、先ほどのCSSコードを一番最後（何も書かれていない場所）にそのままコピペします。
  4. コピペしたら、左上の「公開」ボタンを必ず押してください。

💡 もっと詳しく知りたいへ：WordPressのCSSはどこに書くのが正解？

今回は一番手軽な「追加CSS」にコードを貼り付けましたが、実はWordPressにはCSSを書き込める場所が「4つ」あります。

  1. WordPress標準の「追加CSS」
  2. プラグイン「WPCode」（コード管理に便利！）
  3. 子テーマの「style.css」
  4. テーマ固有のカスタムCSS欄

カスタマイズの規模や、今後やりたいことに合わせて「どこに書くのが自分にとってベストなのか」を分かりやすく比較した解説記事を別で用意しています。

「コードの管理で失敗したくない」「もっとWordPressのカスタマイズの仕組みを深く理解したい！」という方は、ぜひこちらの記事も合わせて読んでみてくださいね。あなたのサイト運営のレベルが一段上がります！

🔗 [関連記事：WordPressのCSSはどこに書くのが正解？4つの記入場所と失敗しない選び方]

② 「作品一覧」ページの構成と「伝わる」レイアウト

ただ作品のスクショを貼るだけではNG。「どう考えて作ったか（思考のプロセス）」を見せるための構成です。

  • 配置すべき5大要素:
    1. 作品のメインビジュアル: サイトの全体スクショやモックアップ画像。
    2. プロジェクト概要: 制作期間、使用ツール、自分の担当範囲（デザイン、コーディングなど）。
    3. 目的・ターゲット（重要！）: 「誰のどんな課題を解決するために作ったか」。
    4. デザイン・技術のこだわり: フォント選定、配色、工夫したコードのポイント。
    5. 制作を終えての振り返り: 学んだことや、改善点。

2. ブロックエディター（Gutenberg）をフル活用した作品ページの作り方

📌 【重要】テーマによる違いについて： 世の中にはSWELLやCocoonなど様々なWordPressテーマがありますが、この記事では**どのテーマでも100%使える「WordPress標準ブロック」**を使って解説します。お使いのテーマ固有の便利ブロックがある場合は、適宜置き換えて作ってみてくださいね！

標準ブロックをどう組み合わせればプロっぽく見えるか、具体的なテクニックを解説します。

  • 「テーブルブロック」で概要をスッキリ見せる
    • 制作期間や担当範囲などは、箇条書きよりも表（テーブル）にした方が一気にオフィシャル感が出ます。
  • 「グループブロック」＋「背景色」でセクションを区切る
    • 「目的」や「こだわり」のセクションごとに、グループブロックで囲んで薄い背景色をつけることで、縦に長いページでもメリハリがついて読みやすくなります。
  • 「メディアとテキストブロック」で画像と文字を美しく並べる
    • 左にデザイン画像、右にその解説テキスト、というレイアウトが崩れずに一瞬で作れる神ブロックとして紹介します。

まとめ：ポートフォリオは「作品」ではなく「あなたの説明書」

  • 綺麗にデザインすること以上に、「制作の背景（論理）」をしっかりテキストと画像で伝えることが、採用担当者やクライアントに刺さるポートフォリオサイトになります
Topへ