初めてのAI Web制作、何を作ればいい？仕事の前に試したい小さな制作課題
「AIでサイトが作れると聞いたけれど、最初に何をしたらいいのだろう」
そんなときは、実際のお客様の仕事をすぐに受ける前に、架空のお店を紹介する１ページを作ってみませんか。
この練習で大切にしたいのは、見た目を作ることだけではありません。誰に何を伝えたいのかを考え、出来上がったものを確かめるところまで、自分で一度たどることです。
AIに手伝ってもらいながら、これまで触れたことのなかった制作に一歩踏み出せる。そこに、AIクライアントワークにつながる学びの面白さがあります。
今回作るものを決める
ここでは、架空の小さな雑貨店の紹介ページを例にします。実在のお店、実際の顧客情報、権利関係を確認していない写真は使いません。
読む人は「どんなお店かを知りたい人」。伝える内容は次の４つです。
- ・お店の名前と、どんなものを扱っているか
- ・商品の雰囲気や、お店の特徴
- ・架空の営業時間
- ・来店前に確認してほしいこと
今回は練習なので、お問い合わせフォームや決済機能は作りません。自分が確認できる範囲を決めて、小さく完成させるためです。
１ AIに、目的と完成条件を伝える
いきなり「おしゃれなサイトを作って」と頼むより、目的と必要な内容を一緒に伝えると、出来上がりを判断しやすくなります。
例えば、次のような依頼文から始められます。
――――
架空の雑貨店を紹介する、１ページの練習用サイトを作りたいです。
読む人は、初めてお店を知る方です。
店の紹介、商品の雰囲気、架空の営業時間、来店前の案内を載せてください。
スマートフォンでも読みやすく、落ち着いた清潔感のある見た目にしてください。
実在する店名、住所、電話番号、無断で使った写真は入れないでください。
できあがった後に、どこを確認すればよいかも、初心者に分かる言葉で教えてください。
――――
AIが出した文章や数字は、自分が用意した条件と一致するかを確認します。存在しない住所や電話番号が作られたら、そのまま載せず、練習用と分かる表現に直します。
２ 読む人としてページを確かめる
ページが表示できたら、制作者として眺めるだけでなく、初めて訪れた人の立場で読んでみましょう。
例えば、こんな順番です。
- １．一番上を見て、何のお店か分かるか。
- ２．商品の紹介に進み、文字が背景に埋もれていないか。
- ３．スマートフォンの幅でも、文字や画像が画面からはみ出さないか。
- ４．リンクがあれば、押した先が想定どおりか。
- ５．練習用の店・数字・画像を、実在の情報だと誤解させないか。
可能なら、パソコンだけでなく手元のスマートフォンでも見てみてください。一つの機種で表示できたことと、すべての端末で問題がないことは同じではありません。
３ 直した理由を一つ残す
例えば、スマートフォンで文章が小さく見えたら、AIに「スマートフォンでは本文が読みづらいので、文字サイズと余白を調整したい」と相談します。
直った後は、「何を見て、なぜ直したのか」を一行だけメモしてみてください。
例：スマートフォンでは行が詰まって読みにくかったので、本文の文字サイズと行間を見直した。
この一行があると、次に別のページを作るときも、同じ視点で確認できます。仕組みがまだ分からない場合は、変更された箇所の説明をAIに聞き、意味を確かめてから次に進めば大丈夫です。
練習と、お客様への納品は違う
練習では、自分で完成条件を決められます。一方、お客様の仕事では、目的、使える素材、予算、納期、確認する人、修正の範囲などを一緒に決める必要があります。
また、ログイン、個人情報、決済などが関わるサイトは、見た目だけでは安全性を判断できません。自分だけで確認できない場合は、知識のある人に協力を頼むことも大切です。
練習を一回終えたら、すぐにすべての案件を受けられるという意味ではありません。ただ、自分がどこまで分かり、何を確認したいのかを知るための一歩にはなります。
次の一歩
自分で作りながら「この確認でよいのかな」と迷うときは、月額相談で制作の進め方やAIへの伝え方を相談できます。制作作業そのものを全部または一部依頼する場合は、内容を確認したうえで別途お見積もりします。
まず仕組みを順番に知りたい方には、全８通の無料ガイドも用意しています。
参考：Mozilla MDN「HTML: コンテンツの作成」（確認日：2026年10月28日）
https://developer.mozilla.org/ja/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content
参考：W3C WAI「Webアクセシビリティの簡易チェック」（英語、確認日：2026年10月28日）
https://www.w3.org/WAI/test-evaluate/preliminary/
