実績がないとき、何を見せる？Web制作の自主制作サンプルを仕事の説明に変える方法

「Web制作の仕事をしたいけれど、まだお客様から依頼を受けたことがない。何を見せればいいの？」

そんなときは、練習のために自分で作ったページを、「自主制作サンプル」として紹介する方法があります。

大切なのは、実績があるように見せることではありません。何を考えて作り、どこまで自分でできて、何を確認したかを、正直に伝えることです。

自主制作サンプルとは？

自主制作サンプルは、特定のお客様の依頼を受けた作品ではなく、自分で課題を決めて作った見本です。

たとえば「初めて来店する人が、営業時間とメニューを確認できる架空の喫茶店ページ」を作るとします。

これは実際のお店の制作実績ではありません。でも、どういう目的で情報を並べたのか、スマホでも読めるかなどを説明する練習になります。

実際に仕事を受ける前に、自分が確認できることと、助けが必要なことを見つける機会にもなります。

題材は「誰の何を助けるか」から選ぶ

はじめから複雑なシステムを作る必要はありません。まずは、一つの目的があるページを選んでみましょう。

• ・架空の喫茶店：メニューと営業時間を見つけやすくする。
• ・架空の体操教室：対象年齢と体験申込みの流れを伝える。
• ・架空の工房：作品の写真と、注文方法を紹介する。

題材を選んだら、次の3つを一行ずつ書きます。

「誰に見てもらうか」
「その人が何を知りたいか」
「読み終えた後、何ができるようにするか」

たとえば体操教室なら、「子どもの習い事を探す保護者が、対象年齢と体験方法を知れるようにする」という形です。

作品と一緒に、何を説明する？

画像を並べるだけより、次の内容を短く添えると、見る人が作った意図を理解しやすくなります。

作品名：はじめての体験が分かる体操教室の紹介ページ

制作の目的：保護者が対象年齢と体験までの流れを確認できるようにする。

自分が担当したこと：ページ構成、文章の下書き、表示の確認。

AIを使ったところ：構成や文章の案を考える補助。

確認したこと：スマホでも文字が読めるか、申込み案内の順番が分かるか。

未対応のこと：実際の申込み受付機能は付いていない。

これは記入方法を示す架空の例です。自分の作品には、実際に担当し、確認したことだけを書いてください。

サンプルを作るときの確認

使う写真や文章の条件を確かめる

実在するお店の写真、他の人の文章、ロゴなどを、見つけたからといって自由に使えるとは限りません。自分で用意するか、使用先や商用利用の条件を確認した素材を使いましょう。

AIで作った画像も、利用するサービスの規約や、人物・商標などの扱いを確認する必要があります。

「見た目」と「動く機能」を分ける

画像だけのデザイン案なのか、実際に操作できるページなのかを明記します。動いていないフォームを、使える機能として紹介しないでください。

自主制作だと分かるように書く

作品の近くに「自主制作」「架空の設定」と書きます。架空のお客様の声や評価を作り、実際の取引があったように見せることは避けましょう。

お客様から依頼を受けた作品を後で紹介する場合は、守秘や掲載の許可も確認します。

一つの作品から、次の一歩へ

作ってみた後に、「文章は考えられたけれど、スマホの表示確認で迷った」「見た目は作れたけれど、フォームはまだ分からない」と整理できれば、それも次に進むための情報です。

すべてを一度に覚えなくても大丈夫です。できたこと、確認できたこと、まだ相談が必要なことを分けて、次の作品や学習に生かしましょう。

無料ガイドでは、実績がない段階での仕事の考え方や、案件探しの基本を順番にお伝えします。

【参考資料】確認日：2026年10月28日

［参考1］MDN「はじめてのブラウザー横断テスト」
https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Testing/Introduction
［参考2］ココナラ「サービスを出品したい」
https://coconala.com/pages/guide_sell