Web制作のポートフォリオには、依頼者が作業を任せられる根拠を載せます。未経験のうちは作品数を並べるより、一つのサイトで考え方と確認手順を見せる方が作りやすいです。

私もエンジニアやWebデザイナーの実務経験がない状態から、このサイトを作りました。公開画面だけでは、Codexへ何を頼み、私がどこを確認したか伝わりません。そこで制作記録を記事にし、直した内容まで残しました。

この記事では、架空案件を実績に見せる方法は扱いません。練習制作だと明記したうえで、依頼者が確認したい情報をそろえます。

最初の作品は、4ページのサイトでよい

練習用サイトには、役割の違う4ページを作ります。

ページ 見せる作業
トップ 情報の優先順位、見出し、行動ボタン
サービス紹介 文章、画像、料金や特徴の整理
記事詳細 長文、表、内部リンク、スマートフォン表示
お問い合わせ 入力項目、注意書き、送信後の案内

業種は、仕事内容を想像できるものから選びます。近所の美容室、個人の教室、地域の工務店などを題材にする場合も、実在する店名や写真を無断で使いません。

架空の事業者名を付け、文章と画像の出典を管理します。問い合わせフォームは、実際に送信できない練習版ならその旨を画面に書きます。

作り始める前に、依頼内容を自分で書く

練習制作でも、依頼者がいる前提で条件を作ります。

想定する依頼者：
サイトを読む人：
一番伝えたい内容：
作るページ：
支給された想定の素材：
自分が担当する範囲：
対応しない機能：
公開予定日：

この条件があれば、色や写真だけで迷い続けません。問い合わせを増やすサイトなら、電話番号やフォームへ移動しやすい順番を考えます。記事を読んでもらうサイトなら、カテゴリと関連記事を用意します。

AIへ制作を頼むときも、この依頼内容を先に渡します。「おしゃれなサイト」と書くより、読者と目的を指定した方が完成を判断できます。

画面と一緒に担当範囲を書く

ポートフォリオを見る側は、完成画面のうち何を本人が作ったか知りたいはずです。

作品ごとに、次の内容を添えます。

  • 企画、文章、デザイン、実装の担当範囲
  • 使用した技術と外部サービス
  • AIへ頼んだ作業と、自分で判断した作業
  • 制作中に見つけた問題と修正内容
  • パソコンとスマートフォンで確認した項目
  • 制作期間と、次に直したい点

テンプレートを使った場合は、テンプレート名と変更した範囲を書きます。AIが作った画像や文章も、自分で確認した内容を説明します。

「すべて自分でコーディングした」と見せる必要はありません。依頼者は、使った道具より、納品後も説明と修正ができるかを見ます。

制作中の失敗を一つ残す

完成画面だけを載せると、問題が起きたときの対応が見えません。

このサイトでは、公開後に次の修正を行いました。

  • 記事の公開日を実際の日付へ直した
  • 運営者名を「編集部」から個人名へ変えた
  • 独自ドメインに合わせてcanonicalを変更した
  • スマートフォンで横にはみ出す箇所を直した

ポートフォリオでも、修正前の状態、原因、直した方法、確認結果を一件だけ記録します。たとえばボタンが画面外へ出たなら、対象端末の幅と変更したCSSを書きます。

失敗を並べる必要はありません。再現できる説明が一つあれば、画面を見て直せることが伝わります。

スマートフォンで4つの場所を確認する

公開後は実機かブラウザの端末表示で読みます。

  1. メニューを開閉できるか
  2. 長い見出しと表が横へはみ出さないか
  3. ボタンを指で押せる大きさか
  4. フォーム入力中に項目が隠れないか

文章もスマートフォンで読むと、長い段落や不自然な改行を見つけやすくなります。句読点の直後に改行を連発せず、一つの段落で一つの話を進めます。

画像には代替テキストを付け、色だけで状態を示しません。キーボード操作と見出し順も確認します。

公開URLと制作記録をセットにする

ポートフォリオには、完成サイトのURLと制作記録のURLを並べます。

完成サイト：［URL］
制作記録　：［URL］
担当範囲　：企画、文章、デザイン、実装、公開
使用技術　：Astro、TypeScript、MDX
制作区分　：自主制作
AIの利用　：構成整理、コード作成、文章の推敲

コードを公開できるならGitHubも添えます。APIキー、顧客情報、広告コードの管理情報を含めないことを確認してから公開します。

実案件は、依頼者から掲載許可を得た範囲だけを載せます。管理画面やアクセス数を勝手に公開してはいけません。

このサイトを制作例にするなら

AI副業実践ノートには、記事一覧、カテゴリ、運営者情報、法務ページ、RSS、サイトマップがあります。記事の表示に加え、追加と更新を続ける仕組みまで作りました。

Codexでアフィリエイトサイトを作った記録には、最初の依頼、技術構成、公開後の修正を載せています。ポートフォリオへ使う場合は、この制作記録と公開URLを一組にします。

同じ構成を別の題材でも作り、文章とデザインを変えれば、再現できるか確かめられます。

応募先へ送る直前に読む

ポートフォリオが完成したら、スマートフォンで全ページを読み、外部リンクとフォームを試します。問い合わせ先が現在も使えることも確かめます。

作品の説明では、自主制作と実案件を分け、担当範囲とAIや素材の利用元を書きます。画面画像に個人情報、管理画面、秘密情報が写っていないか、最後にもう一度見てください。

作品を用意した後は、Web制作副業で最初の1件を取る方法で提案文と見積もり項目を確認できます。学習中で作る内容が決まらない場合は、AIを使ったWeb制作副業ロードマップから4週間の練習範囲を決めます。

一つのサイトを公開し、説明できない部分を洗い出して修正記録まで残すと、次の制作でも同じ確認手順を使えます。