見本のホームページを、自分の会社のホームページに変えてみよう
今日手元に残るもの
ブラウザで開ける会社ホームページ初版。見本の文章・画像・色がLv.72〜75の中身に入れ替わり、社内用のタブも残っている
時間の目安
最初の完成まで 30〜40分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
ブラウザで開ける会社ホームページ初版。見本の文章・画像・色がLv.72〜75の中身に入れ替わり、社内用のタブも残っている
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
Lv.71の切り替え付き「会社サイト」、Lv.73の「トップ原稿.md」、Lv.74の「本文セクション.md」、Lv.75の「見た目ルール」を同じWorkに置いて使います。
必要なファイルは、下からダウンロードできます。
この課題で使うファイル
ひだまり美容室の架空データから、必要なものだけ用意しました。
06HP.txt
材料の入れ方前の完成物を使う ／ TXTはコピー
- 1上に書かれた方法で、前の完成物を用意する
- 2TXTはこのページで中身をコピーし、入力欄へ貼る
- 3材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
コピーしにくい時は、TXTをファイルのまま添付しても構いません。
AIが資料を読めない時は、必要部分を貼るか添付し直します。読めない内容を推測させません。
ChatGPTの設定と詳しい使い方ファイル変更を何度も行うため、有料版がおすすめです。使える量はプラン画面で確認してください。
実際のファイルやコードを扱うなら、Codexがおすすめです。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。前の完成物と今回の材料をそろえてから、下の文を送ります。
このHPの希望メモも見たうえで、公開側の見本を、渡した原稿と本文と画像に全部入れ替えて。見出し、サービス3つ、料金、流れ、よくある質問の順で。見本に元から入ってた文章と写真は1つも残さないで。社内用のタブは今まで通り残して。まだ公開しないで。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
ブラウザで開ける会社ホームページ初版。見本の文章・画像・色がLv.72〜75の中身に入れ替わり、社内用のタブも残っている
まず自分で試す
できたページをブラウザで開き、上から下まで一度スクロールする
ページ内検索で「サンプル」のような見本の言葉を探す
社内用のタブを押し、「今日のルーティン」が今まで通り動くか確かめる
画像を1枚だけ別のものに差し替え、再読み込みで反映されるか見る
追加のプロンプト
当てはまるものだけ、上から順に送ります。
ブラウザで一通り見られたら
見本の名残がないか自分でも探して。それらしい会社名、住所、電話番号、口コミが1個でも残ってたら、どこにあったか一覧で出して。
送った後に試す
ページを上から下まで読み、知らない会社名や住所が出てこないか探す
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
順番がちぐはぐ
「上から、見出し、サービス、料金、流れ、よくある質問、連絡先の順に並べ直して」
文字が読みにくい
「背景の色と文字の色が近い。文字をはっきり読める濃さにして」
画像が伸びてる
「画像が縦に伸びてる。切り取ってでも、元の比率のままにして」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
ブラウザでページを開き、見出しからよくある質問まで通して読めた
見本の会社名・住所・口コミが1つも残っていないことを自分で探して確かめた
社内用のタブを押して、「今日のルーティン」が今まで通り開けた
Workで作った物を保存するプロンプト
このホームページ初版を、完成フォルダの「会社サイト」へ上書きで保存して。差し替えた文章と画像の一覧と、まだ公開していないことも書き添えて。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
まず今あるチラシやSNSのプロフィール文を1か所だけ、このページの見出しと同じ言葉にそろえます。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
この初版を、スマホの幅で見て直そう
続けるための追加プロンプト
追加のプロンプト
このページ、スマホの幅にしたらどこが崩れそう?崩れそうな場所を先に挙げてから、実際に狭い画面で見せて。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
今できたホームページ初版を、そのまま小さい画面で開いて直します。
できるようになること
パソコンでしか見ていなかったページが、スマホでも読める形になります。
この内容を詳しく学ぶ教材
Lv.77「スマホで見ても、文字も写真もきれいなページにしよう」