Web制作の実績がないと、ポートフォリオへ載せるものがありません。だからといって、架空の依頼主や売上を作れば、仕事を任せる判断材料そのものが嘘になります。
私もWeb制作の実案件はまだありません。そこで、このサイトを自主制作として公開し、企画、実装、修正、公開方法を記録しています。完成画面だけでなく、どこを自分で決め、どこをAIへ任せたかまで説明できる状態を目指しています。
未経験の最初のポートフォリオは、作品数より、1サイトをどこまで自分の言葉で説明できるかが大切です。
架空サイトは、架空だと書けば使える
練習用の店舗やサービスを作る場合は、冒頭に「自主制作」「架空サイト」と明記します。実在する会社のロゴ、住所、口コミを無断で使いません。
想定例（架空）
架空の弁当店「まちかど弁当」の1ページサイトを作るとします。目的は、近所の会社員が昼休み前にメニューと予約方法を確認できることです。
店舗名、価格、電話番号、写真はすべて練習用だと示します。「予約が増えた」などの成果は書きません。公開前なら、フォームは送信せず見本表示にする方法もあります。
最初に載せる6項目
ポートフォリオの作品説明には、次を入れます。
| 項目 | 書く内容 |
|---|---|
| 想定した依頼 | 誰の、どんな課題を解決するページか |
| 担当範囲 | 企画、文章、デザイン、実装、公開のどこまでか |
| 制作物 | URL、ページ数、対応画面 |
| 使用技術 | HTML、CSS、Astro、WordPressなど |
| AI利用 | 下書き、実装、確認のどこで使ったか |
| 修正記録 | 指摘、原因、直した内容 |
「全部担当」と書くより、素材や文章を仮で用意したこと、AIが生成した部分を分けるほうが、任せられる範囲が伝わります。
完成画面より、修正前後が仕事に近い
実務では、最初の案をそのまま納品するとは限りません。要望を聞き、既存部分を壊さず、期限内に直します。
架空サイトでも、次のような修正を一度入れます。
- 料金を一つ変更する
- お知らせを最上部へ追加する
- 問い合わせ先をフォームへ変える
- 長い商品名でも崩れないようにする
変更前後の画像と、「なぜ直したか」を一文で載せます。AIへ頼んだ場合も、指示文を短く示し、最後に自分が確認した項目を書きます。
スマートフォンの確認内容を見せる
「レスポンシブ対応」と書くだけでは、何を見たのか分かりません。
- 横にはみ出さない
- 文字を拡大しても読める
- ボタン同士が近すぎない
- メニューをキーボードで操作できる
- 電話番号やフォーム先が正しい
確認した端末や画面幅も残します。自動テストだけでなく、公開URLを実際に触ったことが分かる説明にします。
このサイトを作品として見せるなら
AI副業実践ノートでは、Astro、MDX、GitHub、Cloudflare Pagesを使っています。2026年8月27日現在、26記事、カテゴリ、法務ページ、RSS、サイトマップを含む静的サイトです。
一方で、2026年8月25日に確認した検索クリックと収益は0件でした。「収益サイトを成功させた実績」にはできません。公開できる仕組みを作り、文章と内部リンクを改善している自主制作として扱います。
Web未経験の会社員がCodexでこのサイトを作った記録には、公開後に直した失敗も載せました。完成品だけより、判断と修正の跡を見せられます。
応募前に第三者へ読んでもらう
URLだけを渡し、何のサイトか、依頼できそうな作業は何かを聞きます。説明しないと伝わらない担当範囲があれば、作品紹介へ足します。
作品を一つ説明できたら、Web制作の初案件へ応募する前に決めることで、提案、見積もり、納品範囲を整理します。学習から制作までの順番は、AIを使ったWeb制作副業の実行手順へ戻って確認できます。