思わず誰かに見せたくなる、未公開の会社ホームページを完成させよう
今日手元に残るもの
ブラウザで開き、スマホ幅で見てボタンを押せる未公開の会社サイト
時間の目安
最初の完成まで 30〜45分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
ブラウザで開き、スマホ幅で見てボタンを押せる未公開の会社サイト
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
必要なファイルは、下からダウンロードできます。
この課題で使うファイル
ひだまり美容室の架空データから、必要なものだけ用意しました。
材料の入れ方TXTはコピー ／ 資料はこのページから取得
- 1TXTはこのページで中身をコピーし、入力欄へ貼る
- 2上の一覧から指定された資料だけを取得し、入力欄へ添付する
- 3材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ドラッグできない時は、入力欄のクリップまたはファイル選択を使います。スマホは「ファイル」から共有できます。
AIが資料を読めない時は、必要部分を貼るか添付し直します。読めない内容を推測させません。
ChatGPTの設定と詳しい使い方ファイル変更を何度も行うため、有料版がおすすめです。使える量はプラン画面で確認してください。
実際のファイルやコードを扱うなら、Codexがおすすめです。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。TXTを貼り、指定資料を添付してから、下の文を送ります。
今渡したHPメモと会社案内、料金表だけで、スマホで見た時に誰かへ見せたくなる、ブラウザで押せるホームページをつくって。トップ、サービス、料金、流れ、よくある質問、問い合わせは入れて。ほかの顧客や経理資料は使わないで。まだ公開しないで。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
ブラウザで開き、スマホ幅で見てボタンを押せる未公開の会社サイト
自分で試すのは、これだけ
手元のページをブラウザで開く
トップ、サービス、料金、流れ、よくある質問、問い合わせの6つがそろっているか上から順に見る
画面をスマホ幅にし、文字や画像の切れを見る
メニューと問い合わせボタンを実際に押す
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
何の会社か分からない
「最初の画面だけで何の会社か分かるようにして」
スマホで迷う
「相談ボタンを親指で押しやすい場所に出して」
内容が怪しい
「指定した3ファイルにない料金や実績は書かないで」
06
やりがちなミス
見つけた数：0 / 4
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
ブラウザとスマホ幅でページを開けた
トップ、サービス、料金、流れ、よくある質問、問い合わせの6つがそろっていた
メニューと問い合わせボタンを押せた
指定した3ファイルだけを使い、未公開のまま保存できた
Workで作った物を保存するプロンプト
このホームページ一式と、使った3ファイル名と、まだ公開していないことを、完成フォルダの「HP」へ保存して。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
最初の画面に出す「誰の何を助ける会社か」だけを自分の仕事へ置き換えます。公開は別の課題です。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方は、次の進み方を一つ選びます。
次にすること
このホームページに、1分で入力できる練習用の相談欄を足そう
今作った物の、ここを使います
今作った未公開の「HP」一式へ、練習用の問い合わせ欄だけを足します。
できるようになること
スマホで短く入力できる、送信前の相談欄を試せます。
作品を育てる追加プロンプト
「今の作品を育てる」を選ぶ方だけ、下の文を使います。
追加のプロンプト
今のホームページに、名前、連絡方法、相談内容だけの練習用問い合わせ欄を足して。スマホで1分以内に入力できるように。まだ本当に送らないで。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す