ポートフォリオサイトをSWELLで作りたいけれど、「どんな構成が正解なのか」「何から手を付ければいいのか」が分からず、手が止まっていないでしょうか。
SWELLでポートフォリオサイトを作るメリット

まずは、数あるWordPressテーマの中から、なぜSWELLを選んでポートフォリオを作るのかを整理しておきます。どんな人と相性が良いのかをイメージしながら読んでみてください。
SWELLで作るポートフォリオが向いている人
SWELLとポートフォリオの相性が特にいいと感じるのは、次のようなタイプの人たちです。自分がどこに当てはまりそうか、ざっくり確認してみてください。
| タイプ | SWELLでポートフォリオを作るメリット |
|---|---|
| Webデザイナー | セクションごとのレイアウトが組みやすく、ブロック操作だけで「それっぽい」デザインに整えられる |
| コーダー・エンジニア | 必要ならコードも書けるが、細かいレイアウトはSWELLに任せて作業を時短できる |
| ライター・マーケター | 文章と事例を読みやすく並べやすく、実績紹介ページをテキスト中心でしっかり作れる |
| 写真家・イラストレーター | 横幅いっぱいに画像を見せやすく、ギャラリー的な見せ方と相性が良い |
| これから副業したい人 | 用意されたブロックを使っていくだけで、テンプレをなぞる感覚で見栄えのするポートフォリオが作れる |
私はWeb制作寄りのライターですが、「デザインを凝りたいわけではないけど、素人っぽくは見せたくない」という微妙なわがままを、SWELLがちょうどいい感じに受け止めてくれました。後からセクションをドラッグで入れ替えたり、よく使うパーツをブロックパターンとして保存して別案件で使い回せるのも、ポートフォリオとの相性がいいと感じるポイントです。
他のテーマと比べたときのざっくり特徴
テーマ選びで迷っている方のために、ポートフォリオ用途に絞ったざっくり比較も載せておきます。あくまで実務で触ってきた体感ベースですが、方向性の参考になるはずです。
| テーマ名 | デザインの自由度 | 操作の分かりやすさ | ポートフォリオ向きのポイント |
|---|---|---|---|
| SWELL | 高い | 分かりやすい | ブログもサイト型も作りやすく、ポートフォリオ用のトップページが組みやすい |
| 無料テーマ全般 | 低〜中 | 普通 | ブログ用が多く、ポートフォリオにするには自分で工夫が必要なことが多い |
| 海外製有料テーマ | 高い | やや難しい | 高機能だが説明が英語中心で、慣れないと設定に時間がかかりやすい |
ざっくり言うと、SWELLは「ブログ寄りにもサイト寄りにも振りやすいオールラウンダー」です。ポートフォリオサイトのように、トップページで世界観を見せたい場合でも、ページビルダーを使わずにブロックエディターだけで組めるので、WordPressに慣れていない人でも扱いやすい部類だと思います。
SWELLで作るポートフォリオの基本構成とページ設計

ここからは、SWELLでポートフォリオサイトを作るときの「基本の型」を固めていきます。最初に構成を決めておくと、後から迷いにくくなります。
SWELLで作るポートフォリオに最低限そろえたい5ページ
ポートフォリオ用のサイト構成として、まずは次の5ページがあれば十分です。SWELLなら、すべて固定ページと通常の投稿の組み合わせで作成できます。
| ページ名 | 役割 | ポイント |
|---|---|---|
| トップページ | 自己紹介とサービス内容のダイジェストをまとめる | 最初の画面で「何者か」「何ができるか」が分かるようにする |
| 制作実績一覧 | 過去の作品・案件を一覧で見せる | サムネイルと案件名だけでもいいので、まずは数を見せる |
| 実績詳細ページ | 1案件ずつストーリーを深掘りして説明する | 課題→提案→成果の流れで書くと伝わりやすい |
| プロフィール | 自分の経歴・スキル・考え方を伝える | 顔写真やラフな自己紹介があると安心感が出る |
| お問い合わせ | 依頼や相談の入り口になる | フォームに加えてメールやSNSも案内しておく |
この5ページに慣れてきたら、料金表やよくある質問を別ページに分けるのもありです。ただ、最初から全部盛りにするとほぼ確実に手が止まるので、まずはこの5つに絞って公開を目指すのがおすすめです。
職種別に変えたいSWELLポートフォリオの見せ方
職種によって、ポートフォリオで「一番見てほしいポイント」が少しずつ変わります。ざっくりとした例を挙げると、次のような感じです。
- Webデザイナー
実績のサムネイルと、デザインの意図やコンセプトをしっかり見せる。作品数が少なくても、1件ごとの説明を厚めにして「なぜこうしたか」を書く。 - コーダー・エンジニア
「どの言語・フレームワークが使えるか」「どの規模のサイトを担当したか」を、プロフィールと実績で分かりやすく整理する。 - ライター
アイキャッチ画像よりも、「どんなテーマの記事をどの媒体で執筆したか」を重視。媒体名や記事のジャンルをしっかり書く。 - 写真家・イラストレーター
作品の見せ方が最優先。横幅いっぱいの画像やギャラリー表示を中心にして、説明文は必要最低限にする。
SWELLならどのパターンもブロックだけで再現できます。大事なのは、誰かのポートフォリオをそのまま真似するのではなく、「自分は何を一番見てほしいのか」を先に決めて、そのためのレイアウトを選ぶことです。
SWELLで作るポートフォリオの作り方7ステップ

ここからは、SWELLを使ってポートフォリオサイトを作る具体的な流れを7ステップに分けて解説します。全部を完璧にこなそうとするより、「一周回してから微調整する」くらいの気持ちで進めると楽です。
ステップ1:SWELLで作るポートフォリオのゴールを決める
いきなりデザインから考え始めると、ほぼ確実に迷子になります。最初にやるべきは、「このポートフォリオで何を達成したいのか」を決めることです。例えば、次のどれを狙うのかで、見せ方が変わってきます。
- 制作会社や事業会社への転職用ポートフォリオ
- フリーランスとしての案件獲得を狙うポートフォリオ
- 副業として小さめの依頼を少しずつ受けたい人向けのポートフォリオ
ゴールが決まると、「トップで何を最初に伝えるか」「どんな実績から並べるか」が自然と決まっていきます。私も最初は何も考えずに作り始めてしまい、途中で方向転換して作り直すことになりました。ゴール決めは、地味ですがかなり効きます。
ステップ2:SWELLのポートフォリオに載せる材料をそろえる
次に、ポートフォリオに載せる材料をざっくり集めておきます。SWELLの管理画面に入る前に、メモやスプレッドシートなどに書き出しておくと、作業がかなりスムーズになります。
| 項目 | 具体例 | 備考 |
|---|---|---|
| プロフィール文 | 簡単な経歴、得意分野、好きなこと | 長くなりすぎないように2〜3段落にまとめる |
| 実績リスト | 案件名、担当範囲、URL、サムネイル画像など | 公開NGの案件は、内容をぼかしたり名称を変えて記載する |
| キャッチコピー | 「◯◯が得意なWebデザイナー」など一言で伝わる肩書き | トップの一番目立つ部分に使う |
| 料金や目安予算 | LP◯円〜、サイト一式◯円〜など | 細かい料金表でなく、あくまで目安でOK |
| お問い合わせ方法 | フォーム、メールアドレス、SNSアカウントなど | 1つに絞らず、複数用意しておくと安心感が増す |
私もこの準備をサボったときは、管理画面とテキストエディターを行ったり来たりして、結局何時間もかかりました。先にテキストを固めておくだけで、SWELL上での作業時間はかなり短くできます。
ステップ3:トップページのレイアウトを決める
ここから、SWELLの固定ページを使ってトップページを作っていきます。最初に、どんな順番でセクションを並べるかを決めてしまうと、作業が一気に楽になります。定番の構成は次のようなイメージです。
| セクション | 目的 | よく使うSWELLのブロック |
|---|---|---|
| ファーストビュー | 何者か・何ができるかを一瞬で伝える | カバーブロックを全幅表示にして、テキストとボタンを重ねる |
| 自己紹介 | 人柄と簡単な経歴を伝える | カラムブロックで、片側に写真・片側にテキスト |
| サービス紹介 | どんな仕事を受けているかを整理して伝える | ボックスメニューやカラム+アイコン |
| 制作実績ダイジェスト | 実績一覧ページへの導線を作る | 投稿リストブロックのカード型表示 |
| お客様の声や数字 | 信頼感や安心感を補強する | 吹き出し・リスト・数字を強調する装飾 |
| お問い合わせ導線 | 行動を後押しする | ボタン付きのCTAブロックなど |
SWELLのブロックエディターは、「セクション単位でブロックの塊を作る」と考えると扱いやすいです。一度レイアウトが決まったら、セクションごとにパターン登録しておけば、別ページや別サイトでも使い回せるようになります。
ステップ4:制作実績(WORKS)一覧ページを作る
ポートフォリオで一番見られるのは、制作実績のページです。ここは「数」と「探しやすさ」が大事なので、仕組みから整えておくと後が楽です。
- 固定ページで「制作実績」ページを作る
- 中身はSWELLの投稿リストブロックで自動表示する
- 個別の実績は「投稿」もしくはカスタム投稿で管理する
最初のうちは、通常の投稿に「実績」というカテゴリーを付けて管理するだけでも十分です。記事数が増えて管理しづらくなってきたら、カスタム投稿タイプで「実績」専用の投稿タイプを作ると、ブログ記事ときれいに分けやすくなります。
ステップ5:実績詳細ページの書き方を決める
実績詳細ページでは、「どんな見た目のサイトを作ったか」だけでなく、「どんな課題にどう向き合ったか」を書いておくと、依頼を検討している人に刺さりやすくなります。おすすめの型は次のとおりです。
- 案件概要(クライアントの業種、サイトの種類など)
- 目的(問い合わせを増やしたい、予約数を増やしたいなど)
- ターゲット(誰に向けて作ったサイトなのか)
- 担当範囲(デザイン、コーディング、ライティングなど)
- 工夫したポイント(レイアウト、導線、コピーの工夫など)
- 成果(分かる範囲で、どんな変化があったか)
このフォーマットを1つ作っておき、SWELLの再利用ブロックに登録しておけば、案件ごとにコピペして書き換えるだけで実績ページを量産できます。私も実際にこのやり方に切り替えてから、実績追加のハードルがかなり下がりました。
ステップ6:プロフィールとサービス紹介を整える
トップページの自己紹介だけでは情報が足りないので、きちんとしたプロフィールページとサービス紹介ページも用意しておくと安心です。
プロフィールでは、「どこで何をしてきた人なのか」「なぜ今この仕事をしているのか」を、少しストーリー仕立てにすると覚えてもらいやすくなります。趣味や好きなものなど、仕事以外の一面を少し入れると、人柄も伝わりやすいです。
サービス紹介では、あまり細かく書きすぎず、「LP制作◯◯円〜」「WordPressサイト構築◯◯円〜」といったざっくりしたメニューと、自分が特に得意なジャンルをまとめておくくらいで十分です。詳しい見積もりは個別に相談してもらう前提で書いておくと、あとから調整しやすくなります。
ステップ7:お問い合わせ導線とフッターを整える
最後に、お問い合わせフォームとフッター周りを整えて、ポートフォリオとしての信頼感を仕上げていきます。
- 固定ページでお問い合わせフォームを用意し、送信テストをしておく
- トップページの最後に「お問い合わせはこちら」ボタンを置く
- ヘッダーメニューにも「お問い合わせ」を必ず入れる
- フッターに名前、肩書き、簡単なプロフィール、SNSリンクをまとめる
「どこから問い合わせればいいのか」が一目で分かるだけで、ポートフォリオの成約率は大きく変わります。逆に、フォームが目立たないだけで、機会損失になってしまうことも多いので、ここは少しだけしつこいくらいでちょうどいいです。
SWELLブロックを活かしたポートフォリオの見せ方

次に、SWELLのブロックをどう組み合わせれば、ポートフォリオらしい見せ方になるのかを具体的に見ていきます。ここを押さえておくと、「とりあえず並べただけ感」から一歩抜け出せます。
全幅のセクションで世界観を作る
ポートフォリオらしさを一瞬で出してくれるのが、横幅いっぱいを使ったビジュアルです。SWELLでは、カバーブロックやセクション用のブロックを全幅に設定することで、簡単に印象的なファーストビューが作れます。
- トップの最初のセクションを全幅のビジュアルにする
- 背景に写真やコラージュ画像を置き、その上にキャッチコピーとボタンを重ねる
- 写真家やイラストレーターであれば、代表作を大きく1枚見せる
あれもこれも詰め込みすぎると逆に伝わらなくなるので、「一言メッセージ+ボタン」くらいに絞るのがおすすめです。私も最初はテキストを盛り込みすぎてごちゃっとしてしまい、思い切って減らしたら一気に印象が良くなりました。
投稿リストブロックで実績一覧を自動生成する
SWELLのポートフォリオで特に頼りになるのが、投稿リストブロックです。カテゴリーやタグを指定するだけで、カード型の一覧を自動で並べてくれます。
よく使う設定のイメージを表にまとめると、こんな感じです。
| 設定項目 | おすすめ設定例 | ポイント |
|---|---|---|
| 表示タイプ | カード型 | サムネイルとタイトルが一目で分かりやすい |
| 対象の投稿 | カテゴリーで「実績」を指定 | 通常のブログ記事と混ざらないように分けておく |
| 表示件数 | 6〜9件 | 多すぎると読みづらいので、最初は少なめから |
| 並び順 | 日付の新しい順 | 今の実力に近い新しい実績から見てもらえる |
| カラム数 | パソコンは3列・スマホは1列 | スマホで縦に読みやすくなる |
私のサイトでは、トップページの途中に「制作実績」の投稿リストを新着3件だけ表示し、「もっと見る」ボタンから実績一覧ページへ飛ばす形にしています。こうすることで、トップは軽く、気になった人だけが一覧に進める導線を作れます。
SWELLで作ったポートフォリオを育てる運用のコツ

ここからは、公開したあとのポートフォリオをどう育てていくかという視点でお話しします。「公開した瞬間がスタート」という感覚で付き合っていくと気が楽です。
公開直後にやっておきたいチェック
ポートフォリオを公開したら、次のポイントは最低限チェックしておきたいところです。
- スマホで全ページをスクロールして、読みにくい箇所や文字の詰まりがないかを見る
- リンク切れがないか、ボタンから正しくページが開くかを確認する
- お問い合わせフォームのテスト送信をして、メールが届くか確認する
- トップのファーストビューだけ見て「何をしている人か」分かるか、第三者に見てもらう
- プロフィール文が長すぎず、スキルが一目で伝わるかチェックする
SWELL自体はスマホ表示にも強いテーマですが、画像サイズや文章量は人によって違うので、実機でのチェックは欠かせません。ここを丁寧にやっておくと、印象の悪いところを早めに潰せます。
実績が増えたときの見直しポイント
ポートフォリオは、一度作って終わりではなく、少しずつ育てていく前提で考えると気が楽です。実績が増えてきたときに見直したいポイントを整理すると、次のようになります。
| 状況 | 見直したいポイント | 具体的なアクション例 |
|---|---|---|
| 実績が3件たまった | トップに載せる実績を入れ替える | 一番自信のある案件を先頭にし、古いものは一覧ページ側に寄せる |
| 実績が5〜6件たまった | カテゴリーやタグの整理 | 業種別・制作内容別に分類し、見たい実績に辿り着きやすくする |
| 新しいスキルを身につけた | プロフィールとサービス内容のアップデート | 使えるツールや対応範囲を追記し、古くなった表現を直す |
| 単価を上げたいと思った | 料金と実績のバランスの見直し | 単価に見合わなくなった古い実績は下げ、今のレベルに近い案件を前面に出す |
このように、「節目のタイミングで少しだけ手を入れる」というスタイルだと、負担が少なく続けやすいです。SWELLは編集画面の操作も軽いので、ちょっとした修正もすぐに反映できます。
SWELLで作るポートフォリオに関するよくある質問

最後に、SWELLでポートフォリオサイトを作るときによく聞かれる疑問を、Q&A形式でまとめておきます。
Q1. ブログと同じサイトの中にポートフォリオを作っても大丈夫ですか?
A. 問題ありません。むしろ、ブログとポートフォリオを同じドメインにまとめている人は多いです。SWELLはブログとサイト型の両方に向いたテーマなので、「ブログで集客→ポートフォリオページで実績を見せる」という動線も作りやすいです。
その場合は、投稿のカテゴリーを「ブログ」「実績」と分けておき、ポートフォリオ側のページでは「実績」だけを投稿リストで表示するように設定しておくと、見せ方が整理されます。
Q2. ポートフォリオ用にカスタム投稿タイプを作ったほうがいいですか?
A. 最初から必須というわけではありません。WordPressの操作に慣れていないうちは、通常の投稿とカテゴリーだけを使って運用しても十分です。
実績の数が増えてきて、「ブログ記事ときちんと分けたい」「管理画面をスッキリさせたい」と感じるようになったタイミングで、あらためてカスタム投稿タイプを検討するといいと思います。SWELL自体はカスタム投稿にも対応しているので、後から分けることも可能です。
Q3. 実績がほとんど無い状態でもポートフォリオは公開していいですか?
A. むしろ、少ない状態でも公開してしまったほうがいいと私は思っています。実績が1〜2件だけでも、「自分はこういう仕事をしていきたい」という方針を書いたポートフォリオを先に出しておくと、そのページを見た人から声がかかるきっかけになります。
実績が増えたら、あとからいくらでも追加・修正できます。完璧になってから公開しようとすると、永遠に公開できないので、「最低限の型ができたら一度外に出す」くらいの感覚で進めてみてください。
まとめ|SWELLで作るポートフォリオづくりを今日から動かそう
この記事の内容を整理します
- SWELLは、ブロックを組み合わせるだけでサイト型のポートフォリオが作りやすいテーマ
- 基本構成は「トップ・実績一覧・実績詳細・プロフィール・お問い合わせ」の5ページがあれば十分スタートできる
- 実績詳細は「課題→提案→成果」の型で書くと、依頼を検討している人に伝わりやすい
- 全幅セクションや投稿リストブロックを活かすと、世界観と実績を分かりやすく見せられる
- ポートフォリオは一度作って終わりではなく、実績やスキルの変化に合わせて少しずつ育てていくもの
今日からできる最初の一歩としては、「トップページのセクション構成」と「実績詳細ページのフォーマット」をメモアプリなどに書き出してみてください。それを見ながら、SWELLの固定ページを1つずつ作っていけば、気がついたときには自分だけのポートフォリオサイトが形になっているはずです。




