MENU
AIの最新情報・使い方・ツール比較
  1. ホーム
  2. ロードマップ
  3. ポートフォリオサイトの作り方。1ページの構成・テンプレート・配色・実装例【プログラミング独学ロードマップ 第3回】

ポートフォリオサイトの作り方。1ページの構成・テンプレート・配色・実装例【プログラミング独学ロードマップ 第3回】

ロードマップ
ノートパソコンに1ページ構成のポートフォリオサイトが表示され、横に配色パレットと筆が置かれたイラスト。画像内の文字：プログラミング独学／ポートフォリオの作り方／構成・テンプレート・配色・実装例

PR｜この記事にはアフィリエイト広告（A8.net）が含まれます。

HTML・CSS・JavaScriptの基礎と模写を終えたあと、「ポートフォリオサイトに何を書けばいいのか分からない」「デザインを勉強していないので手が止まる」というところでつまずく人が多いと思います。

ポートフォリオサイトは、1ページの縦スクロールで「ファーストビュー → 自己紹介 → 実績 → スキル → 問い合わせ」を並べれば形になります。デザインは自分で考えなくても、テンプレートを買う、無料配布のデザインカンプを使う、AIに相談しながら組む、の3つから選べます。この記事は、その順番と、画像・アイコン・ロゴの入手先、最低限入れておくと見栄えのする実装をまとめたものです。

この記事は、2020年に公開した「独学ロードマップ ポートフォリオ作成編」と「ポートフォリオサイト制作で勉強したこと」の2記事を1本に統合し、2026年9月22日の内容に書き直したものです。料金と無料で使える範囲は公式ページで確認しました。情報確認日：2026年9月22日。

独学ロードマップの第3回です。手を動かす順番があるので、まだHTML・CSSと模写が終わっていない場合は、第1回のHTML/CSS/レスポンシブ編と第2回のサイト模写編を先に読んでいただくと、この記事の前提がそろいます。

この回の到達点
  • 1ページ構成のポートフォリオサイトを、自分のパソコンの中（ローカル環境）で作り終える
  • 載せる内容・配色・画像とアイコン・ロゴを、自分で決めて用意できる
目次

ポートフォリオサイトとは？1ページに何を載せる？

ポートフォリオサイトは、自分の成果物とできることをまとめた1つのWebサイトです。制作の仕事を受けるときの資料や名刺の代わりになり、「何が作れる人なのか」を相手が短時間で判断できます。学習中の人にとっては、模写と違って自分で全部決める最初の成果物という意味もあります。

複数ページに分ける必要はありません。1ページの縦スクロール（LP形式）で、上から順に次の内容を置けば足ります。

ブラウザ枠の中に、上から順にファーストビュー、丸い顔写真と文章が並ぶ自己紹介、3枚の実績カード、4つのスキルアイコン、入力欄2つと送信ボタンの問い合わせ欄が積み重なった1ページ構成の図
  1. ファーストビュー：サイト名（または自分の名前）と一言のキャッチコピー。背景に画像か動画を敷く
  2. 自己紹介：何をしてきて、今は何ができるのか。顔写真がなければアイコンでよい
  3. 実績：作ったものを画像で並べ、それぞれにリンクと使った技術を書く
  4. スキル・できること：言語やツール、対応できる作業の範囲
  5. 問い合わせ：フォームかメールアドレス。ここが無いと連絡してもらえない

料金表を入れるかは、仕事を受ける準備ができているかで決めてください。学習中なら無理に載せず、問い合わせから相談してもらう形にしておくほうが書きやすいと思います。

実績がまだ模写だけという場合は、模写したサイトをそのまま実績として載せるのは避け、「模写課題」と分かる書き方にするか、この記事で作るポートフォリオサイト自体を1件目の実績として扱うのが無理のない形です。

筆者が2020年に作ったポートフォリオ（現在は公開していません）

参考として、筆者が2020年2月にWordPressで作ったポートフォリオサイトの録画を置いておきます。サイト自体はドメインを手放したため現在は公開していません。動画は2020年当時の画面です。

動画のとおり、1ページに上から順に並んでいるだけです。凝った仕掛けは入っていませんが、これで「作れる人」であることは伝わります。

先に参考サイトを見て、作るものの見当をつける

初めて作るときは、完成形のイメージがないまま手を動かすと途中で止まります。先に人のポートフォリオを10件ほど見て、「自分はこの並びにする」と決めてしまうほうが速いです。

ここに載っているのはデザインを仕事にしている人のサイトです。同じものを作ろうとすると手が止まりやすいので、「文字の大きさの差」「余白の広さ」「1画面に置く要素の数」くらいに絞って見てください。

ポートフォリオに限らず、国内サイトのデザインをまとめて見たいときは次の2つのギャラリーが便利です。どちらも更新が続いていて、SANKOU!には「ポートフォリオサイト・プロフィールサイト」のカテゴリーがあります。

  • SANKOU!：Webデザイン制作の参考になる国内のサイト集
  • Web Design Clip：日本のWebデザイン集。カテゴリーや色から探せる

デザインに凝って時間を使い切り、完成しないまま終わるのが一番もったいないパターンです。「今の実力で作り切れる範囲」に線を引いてから始めてください。

デザインはどう決める？テンプレート・配布カンプ・自分で組む

デザインを勉強していない段階では、白紙から考えるより、すでに整っている見た目を土台にするほうが確実です。2026年9月時点で現実的な選択は次の3つです。

スクロールできます
選び方費用の目安向いている人残るもの
HTMLテンプレートを買う1点ごとの買い切り見た目を最優先で早く仕上げたい既存コードを読んで直す力
無料配布のデザインカンプから作る0円デザインからコーディングする練習をしたいカンプを見てHTML/CSSに起こす力
自分で組む（AIに相談しながら）0円時間が取れる、判断の理由まで知りたいレイアウトと配色を自分で決める力

HTMLテンプレートを買う場合（ThemeForest）

海外のテンプレート販売サイトで最大手が ThemeForest（Envato Market）です。2026年9月22日に確認した時点でも1点ごとの買い切りで販売していて、サイトトップに表示されていた価格はサイトテンプレートが$12〜$24、WordPressテーマが$59〜$79でした（米ドル、税・手数料別）。

同じEnvatoには、素材を定額で使える別サービス Envato Elements もあります。こちらは月額のサブスクリプションで、Coreプランが年払いで月$16.50からでした。素材が使い放題になる仕組みで、Envato Market（ThemeForest）での買い切り購入とは別勘定になると明記されています。ポートフォリオを1つ作るだけなら、サブスクではなくThemeForestで1点買うほうが安く済みます。

ThemeForestでテンプレートを見る

テンプレートは便利ですが、そのまま使うと学びが残りません。長所と短所を分かったうえで使ってください。

テンプレートの長所と短所

長所：完成までが早い。プロが書いたHTML・CSS・JavaScriptを読めるので、構造やクラスの付け方の勉強になる。

短所：一から作るより身につく範囲が狭い。海外向けのデザインが多く、日本語を入れると文字の詰まりや行間が不自然になることがある。

買ったあとは、次の6か所を自分の内容に置き換えます。ここを変えないと、他の人のポートフォリオと見分けがつかないものになります。

  • 文章（英語のダミーテキストを全部日本語に置き換える）
  • 画像（後述の商用利用可の素材に差し替える）
  • 色（次の章の3色の考え方で決める）
  • アニメーション（動きを足す・減らす）
  • アイコン
  • 使わないセクションの削除（残したままにすると中身のない箱が並びます）

無料配布のデザインカンプから作る場合

テンプレートは「完成したHTML・CSSを買って直す」方法なので、コーディングの練習という意味では物足りないことがあります。デザインカンプ（完成図）だけをもらって、HTMLとCSSは自分で書く方法もあります。

筆者も練習用のデザインカンプを無料で配布しています。ポートフォリオに載せてよい条件で公開しているので、コーディング練習用のデザインカンプ配布の記事を読んでいただくと、ダウンロードの方法と使える範囲が分かります。カンプを見ながら1ページ組み上げると、余白や文字サイズを自分で決める練習にもなります。

自分で組む場合に、AIをどう使うか

2026年は、デザインの相談相手としてAIを使えます。ただし、コードをまるごと書かせて貼るだけにすると、自分では書けないままになります。手を動かす順番は変えずに、詰まったところだけ聞く使い方が向いています。

  • デザインの相談：「ベースを白、メインを紺にしたい。アクセントに使える色を3案、理由つきで」のように、自分の案を出してから意見を求める
  • 自己紹介文の下書き：経歴と作ったものを箇条書きで渡し、200字にまとめてもらう。出てきた文はそのまま使わず、自分の言葉に直す
  • 詰まったときの質問：うまくいかないHTMLとCSSを貼って「なぜこの要素が中央に来ないのか」と原因を聞く。直したコードをもらったら、自分のコードとの差分を説明させると理解が残ります

AIが作った画像やイラストをポートフォリオに載せる場合は、使ったサービスの利用条件を必ず確認してください。無料プランでは商用利用や透かしの扱いが有料プランと違うことがあり、サービスによって条件が異なります。

ターミナルからコードを書かせたり直させたりする道具に興味がある場合は、Claude Codeの解説記事を読んでいただくと、できることと料金、作ったコードの扱いが分かります。生成AIの使い方そのものを体系的に学びたい場合は、DMM 生成AI CAMP 学び放題の解説記事でコースの内容と料金を確認できます。

配色は「ベース・メイン・アクセント」の3色で決める

色を場所ごとに思いつきで決めると、全体がまとまりません。役割の違う3色を先に決めて、それぞれの面積の比率を守るのが基本です。

  • ベースカラー（約70％）：背景や余白に使う、一番広い面積の色。白・黒・グレーのような無彩色や淡い色が扱いやすい
  • メインカラー（約25％）：サイトの印象を決める主役の色。最初に決める
  • アクセントカラー（約5％）：一番目立たせたい場所に少しだけ使う色。問い合わせボタンに効きます

この「70％・25％・5％」という比率と、それぞれの色の決め方は、Webデザインで押さえるべき配色（ベース、メイン、アクセント）の「3つのカラー」（エムハンド）で説明されています。色ごとの印象と実例も載っているので、メインカラーを決めるときに読んでいただくと選ぶ基準ができます。

この記事の以前の版からの訂正

2020年の版では比率を「75:25:5」と書いていました。合計が105％になる誤りで、出典の記事に戻って確認したところ、正しくはベース70％・メイン25％・アクセント5％です。

画像・アイコン・ロゴはどこで用意する？

商用利用可の写真・動画素材

Web上で見つけた画像を自由に使えるわけではありません。素材サイトを使い、そのサイトの利用条件を読んでから使ってください。2026年9月22日に各サイトで確認した内容です。

  • O-DAN：海外の無料写真素材サイトをまとめて検索できます。「商用利用可の無料写真素材のみ」を対象にしていると書かれています
  • タダピク：45サイトの横断検索。「商用利用可・クレジット表記不要のフリー素材・無料画像サイトだけを対象とした横断検索エンジン」と説明されています
  • 写真AC：日本の写真素材サイト。「商用利用もOK！」と明記。無料会員はキーワード検索が1日4回までなど利用制限があります
  • ぱくたそ：人物写真が多いサイト。利用規約に「誰でも自由に無料で何度でも利用いただけます」「商用利用可能です。ただし、商品化して販売できません」とあります
  • Pexels：写真と動画を無料でダウンロードでき、クレジット表記は任意。無加工のまま他のストックサイトで再配布・販売することは禁止されています

ファーストビューの背景に動画を使いたい場合も、素材は Pexels の動画から探せます。ライセンスのページに、写真と動画の両方が無料で商用利用でき、加工も認められると書かれています。

アイコンは Font Awesome を入れておく

SNSのリンクやメールのマークなど、アイコンを使う場所は必ず出てきます。画像ファイルを1枚ずつ用意するより、CSSで色や大きさを変えられるアイコンフォントのほうが扱いやすいです。定番は Font Awesome です。

2026年9月22日時点の最新は バージョン7 系（アイコン検索のバージョン選択に7.3.1が並んでいます）。無料プランは料金$0で、プロジェクトキット1つ・月1万ページビューまでという枠があります。無料で使えるスタイルは Solid・Regular・Brands の3種類で、Light・Thin・Duotone・Sharp などは有料プラン向けです。SNSのロゴ類は Brands に入っているので、ポートフォリオに必要な範囲は無料で足ります。

読み込みは、アカウントを作って発行される「キット」のタグを <head> に1行入れる方法が公式の案内です。

<!-- 公式の案内どおり、YOUR_KIT_CODE は自分のキットの文字列に置き換える -->
<script src="https://kit.fontawesome.com/YOUR_KIT_CODE.js" crossorigin="anonymous"></script>

<!-- 使うときは i タグにスタイルとアイコン名のクラスを付ける -->
<i class="fa-solid fa-user"></i>
<i class="fa-brands fa-github"></i>

ロゴは Canva で作れる

サイト名のロゴは、ブラウザだけで完結する Canva で作れます。無料プランは料金¥0で、ロゴのテンプレートやアイコン・イラスト、フォントを無料の範囲で使えます。クラウド保存は5GBまで、ブランドキットは1つ（色は3色まで）といった枠があります。有料の Canva Pro は年払いで1人あたり¥11,800でした（2026年9月22日に日本語の料金ページで確認）。

ロゴを作る前に知っておく条件

Canvaのロゴテンプレートは誰でも使えるため、テンプレートをそのまま使ったロゴは非独占的なものになり、商標として登録することはできないと公式ページに書かれています。ポートフォリオのロゴとして表示するだけなら問題になりませんが、屋号や商標を考えている場合はこの点を先に確認してください。

Canvaのロゴ作成ページを開く

ロゴが用意できない場合は、サイト名を太いフォントで大きく置くだけでも成立します。ロゴ作りで止まるくらいなら、文字のまま先へ進めてください。

見栄えのする実装例5つ（2020年に筆者が入れたもの）

ここからは、筆者が2020年のポートフォリオで実際に入れた5つを紹介します。どれも1ページのポートフォリオで効果が出やすく、初めてでも手が届く範囲です。細かい書き方は各公式ページと参考記事に任せて、何をどう使うかだけ書きます。

1. ファーストビューの背景を動画にする

ファーストビューに動画を敷くと、静止画より印象が変わります。素材は前述の Pexelsの動画 のように、無料で商用利用できるサイトから選びます。動画ファイルを video タグで背景として置き、その上に見出しを重ねる形です。

スマートフォンでは画面の高さが足りず、動画の見せ場が入りきりません。筆者は横幅540px以下では動画をやめて固定の画像に切り替えました。動画は読み込みの重さにも関わるので、スマートフォンで画像にする判断は今でも有効だと考えています。

2. 文字をタイピング風に表示する（CSSだけ）

サイト名とキャッチコピーの2行が、時間差で1文字ずつ打ち込まれるように表示され、末尾の縦線が点滅する動き

ファーストビューの2行を、時間差で1文字ずつ出す動きです。JavaScriptのライブラリを入れず、CSSの animation と @keyframes だけで作れます。仕組みは、文字を1行に固定して幅を0から100％まで広げ、steps() で段階的に動かすことで1文字ずつ現れるように見せる、というものです。

<div class="typing">
  <p>Masakazu.work</p>
  <p>Web制作で未来の元気をお手伝い。<span>|</span></p>
</div>
/* 2行共通の設定：1行に固定して、はみ出しを隠す */
.typing p {
  font-size: 1rem;
  color: #444;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 10s steps(60, end);
}
/* 1行目だけ大きく */
.typing p:first-child {
  font-size: 3rem;
  font-weight: bold;
}
/* 2行目は別のキーフレームで遅らせる */
.typing p:nth-child(2) {
  animation: type2 10s steps(30, end);
}
/* 末尾の縦線を点滅させる */
.typing span {
  animation: blink 1s infinite;
}
/* 1行目のタイミング */
@keyframes type {
  0%   { width: 0; }
  20%  { width: 0; }
  100% { width: 100%; }
}
/* 2行目のタイミング（1行目が終わってから動き出す） */
@keyframes type2 {
  0%   { width: 0; }
  50%  { width: 0; }
  100% { width: 100%; }
}
/* 縦線の点滅 */
@keyframes blink {
  to { opacity: 0; }
}

1行目と2行目で @keyframes の中の「幅0のまま待つ区間」を変えているだけです。2行目は50％の時点まで幅0で待つので、1行目が打ち終わってから動き出します。文字数に合わせて width と steps() の数を調整してください。

2020年の版から直した点

以前の版では @keyframes の終点を width: 100; と書いていました。CSSの長さには単位が必要なので、この指定は効きません。width: 100%; が正しい書き方です。

3. スクロールすると要素がフェードインする（AOS）

ページを下にスクロールすると、画像とテキストが下から浮かび上がるように薄く現れる動き

スクロールして画面に入った要素をふわっと表示する動きには、AOS（Animate On Scroll Library）を使いました。公式ページに掲載されているバージョンは2.3.1で、jQueryは不要です。

CSSとJavaScriptを読み込んで AOS.init(); を呼び、あとは動かしたいタグに data-aos 属性を付けるだけです。fade-up のほか flip や zoom 系も選べ、時間や遅れ幅も属性で調整できます。

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>AOS.init();</script>

<img src="img/logo.png" alt="" data-aos="fade-up" data-aos-duration="1000">

全部の要素に付けると動きすぎて読みにくくなります。セクションの見出しと実績カードなど、区切りになるところだけに付けるとうまく収まります。

4. アイコンを表示する（Font Awesome）

前の章で紹介した Font Awesome を、SNSリンクやプロフィールの人物マークに使いました。<i class="fa-brands fa-github"></i> のようにクラスを書くだけで表示され、大きさと色はCSSで変えられます。実績のカードに使った技術のアイコンを並べると、文字だけのときより中身が伝わります。

5. レスポンシブ表示（Bootstrapのグリッド）

ブラウザの横幅を狭めていくと、横に3つ並んでいたカードが縦1列に積み替わる動き

自己紹介から問い合わせまでの横並びは、Bootstrapのグリッドシステムで組みました。画面幅に応じて列数が変わる仕組みが用意されているので、メディアクエリを自分で書く量が減ります。日本語のBootstrap公式ドキュメントで2026年9月22日に確認した現行バージョンは5.3.8で、グリッドはこのバージョンにも含まれています。

筆者が使ったのは当時のBootstrap 4で、クラス名や一部の仕様は5系で変わっています。これから入れる場合は、Bootstrap公式サイトの現行版のドキュメントを見てください。CSSフレームワークは便利ですが、全部任せると自分でレイアウトを組む練習にならないので、実績の一覧のような繰り返し部分だけに使うのも一つの手です。

WordPressで作る場合に役立つ2つのプラグイン

筆者はポートフォリオをWordPressで作りました。HTMLとCSSだけで作るほうが学習としては素直ですが、WordPressにしておくと実績を管理画面から増やせます。その場合に入れた2つのプラグインを挙げておきます。どちらもwordpress.orgで配布されています（2026年9月22日に確認）。

スクロールできます
プラグイン何ができるか確認した情報
VK Link Target Controller一覧に並ぶ投稿タイトルのリンク先を、記事本文ではなく指定したURL（主に外部リンク）に変えられる。実績一覧から制作したサイトへ直接飛ばすときに使えるバージョン1.10.5、有効インストール3万以上、WordPress 7.1.1で動作確認済み
All-in-One WP Migrationサイト全体を書き出して、別のサーバーに取り込める。ローカルで作ったサイトを公開用サーバーへ移すときに使うバージョン7.111、有効インストール500万以上、WordPress 7.1.1で動作確認済み

ローカル環境は Local を使うのが手軽です。公式サイトに「Download for Free」と書かれていて、無料でダウンロードできます。WordPress用に作られた道具なので、以前このブログで案内していたMAMPのように自分でPHPやデータベースを組み合わせる手間がありません。

移行の順番も覚えておいてください。自分のサイトなら「ローカルで作る → 公開用サーバーにアップロード」で足りますが、仕事で他の人のサイトを触るときは「ローカルで作る → テスト環境にアップロードして確認してもらう → 本番へ切り替える」という段取りを取ります。確認なしで本番に上げて、表示が壊れたまま公開される事故を避けるためです。

作ったサイトをインターネットに公開するには

この回の到達点はローカル環境での完成ですが、公開の選択肢も先に知っておくと作りながら決められます。WordPressで作る場合は、PHPとデータベースが動くレンタルサーバーと独自ドメインを契約する形になります。HTMLとCSSだけの静的なサイトなら、GitHub Pages を使えばサーバー代なしで公開できます。

GitHub Pages について公式ドキュメントで2026年9月22日に確認した条件は、リポジトリを持つアカウントが GitHub Free（または GitHub Free for organizations）の場合、そのリポジトリは公開（public）である必要があるという点です。公開されるサイトの容量は1GBまで、帯域は月100GB、ビルドは1時間あたり10回という緩やかな上限があります。個人のポートフォリオなら十分収まる枠です。ソースコードが公開されることになるので、そこが気になる場合はレンタルサーバーを選んでください。

ポートフォリオサイトをGitHub Pagesとレンタルサーバーのどちらで公開するかと、その手順を知りたい方は、次の記事で確認できます。

関連記事
ポートフォリオサイトを公開する方法。GitHub Pagesで無料公開か、レンタルサーバーか。手順と費用の違い 自分のパソコンで作ったポートフォリオサイトを公開する方法を、GitHub Pagesとレンタルサーバー（エックスサーバー）で比較。費用・独自ドメイン・問い合わせフォーム・コードの公開の違い、公開前の確認、それぞれの手順と支払い総額を公式資料で整理しました。

エックスサーバーとConoHa WINGの料金・無料ドメインの条件・AIから公開する機能の違いを知りたい方は、次の記事で確認できます。

関連記事
エックスサーバーとConoHa WINGの比較。ブログやAIで作ったサイトに合うのはどちら？料金・無料ドメイン… エックスサーバーとConoHa WINGを、契約期間別の料金と支払総額、長期契約の割引とキャンペーンの期限、独自ドメインが無料になる条件、試し方、AIエージェントから公開する公式スキルで比較。用途別の選び方もまとめました。

まとめ

ポートフォリオサイトを作る順番をまとめます。

  1. 載せる内容を決める（ファーストビュー・自己紹介・実績・スキル・問い合わせ）
  2. 参考サイトを10件ほど見て、作り切れる範囲に線を引く
  3. デザインの土台を選ぶ（テンプレートを買う／配布カンプを使う／自分で組む）
  4. 3色の配色を決める（ベース70％・メイン25％・アクセント5％）
  5. 商用利用可の画像、Font Awesomeのアイコン、ロゴを用意する
  6. 動きを1〜2種類だけ足して、ローカル環境で完成させる

模写と違って、ポートフォリオは全部自分で決めることになります。決めきれない部分が出てきたときは、参考サイトを見る、配布カンプを使う、AIに案を出させる、のどれかで前に進めてください。完成したものが、次の1件目の実績になります。

教室やオンラインの個別指導で、講座単位で学びたい人へ（PR）

Winスクールは、全国の教室とオンラインで個別指導の授業を行うパソコン・ITスクールです。生成AI（ChatGPT・Copilot）の入門、Excel・PowerPoint と生成AIを組み合わせた講座、Webデザインやプログラミングの講座などを、講座単位で受けられます。

  • 無料カウンセリング・受講相談は約1時間で、教室に行くかオンラインで受けられます。目的に合わせた講座の提案を受けられ、公式サイトでは参加後の過度な勧誘はしないと案内されています。
  • 受講費用は講座ごとで、入学金・受講料・教材費の合計です（例：生成AI〔ChatGPT・Copilot〕は90分×3回で税込40,700円）。
  • 1回分の授業を無料で受ける体験レッスンは行っていないと案内されています。

ほかのスクールと料金や学び方を比べてから決めたい方は、生成AIスクールの比較記事で、料金・学べる範囲・無料相談の有無を同じ軸で確認できます。

Winスクールの講座と無料カウンセリングを見る

料金とカウンセリングの内容は2026年10月14日に公式サイトで確認したものです。申込み前に最新の表示を確認してください。

あわせて読む記事

ロードマップ
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次