社内で使うアプリの隣に、お客様が見るホームページを作ろう
今日手元に残るもの
上のタブで「社内用のルーティン」と「お客様用の表紙」を行き来できる会社サイト初版。表紙は3つの見本から選んだ1つで、チェックの記録は社内側にだけ残る
時間の目安
最初の完成まで 15〜20分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
上のタブで「社内用のルーティン」と「お客様用の表紙」を行き来できる会社サイト初版。表紙は3つの見本から選んだ1つで、チェックの記録は社内側にだけ残る
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
Lv.70で保存した「ルーティンアプリ_完成版」(アプリ名は「今日のルーティン」)と、同じ場所に残した引き継ぎメモを、そのまま同じWorkで開いて続けます。
材料の入れ方前の完成物を使う
- 1上に書かれた方法で、前の完成物を用意する
- 2材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ChatGPTの設定と詳しい使い方ファイル変更を何度も行うため、有料版がおすすめです。使える量はプラン画面で確認してください。
実際のファイルやコードを扱うなら、Codexがおすすめです。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。上に書かれた前の完成物を用意してから、下の文を送ります。
この「今日のルーティン」、社内用としてはこのまま残したい。同じ入れ物に、お客様が見る表紙のページを足して。上に「社内用」「お客様用」の切り替えを付けて、押したら行き来できるように。表紙のデザインは、会社らしいの、お店らしいの、専門サービスらしいの、3つ見本を出して選ばせて。チェックの記録は公開側に絶対出さないで。まだURLは誰にも配らない。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
上のタブで「社内用のルーティン」と「お客様用の表紙」を行き来できる会社サイト初版。表紙は3つの見本から選んだ1つで、チェックの記録は社内側にだけ残る
まず自分で試す
「社内用」と「お客様用」のタブを3往復押して、毎回同じ画面に戻れるか見る
公開側の画面をすみずみまで見て、やることのチェック記録や自分の名前が出ていないか探す
3つの見本を並べて1つ選び、選んだあとに表紙の見た目が変わったのを確かめる
ブラウザを一度閉じて開き直し、社内側の今日のチェックが残っているか見る
追加のプロンプト
当てはまるものだけ、上から順に送ります。
3つの見本が並んだら
2番目のやつでいく。それに決めて表紙を作り直して。選ばなかった2つの飾りは混ぜないで。
送った後に試す
選んだ見本の表紙に切り替わったか、公開側を開いて見る
公開側に社内の記録が見えていたら
公開側にやることのチェックが出ちゃってる。公開側からは社内の記録を全部どけて、社内用のタブの中だけに戻して。
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
2つの画面が似すぎて迷う
「社内用と公開用で背景の色を変えて、今どっちを見てるか上に大きく出して」
表紙が空っぽに見える
「表紙は見出しと一行と押すボタンだけの形にして、中身は仮の文字で置いといて」
見本の違いが分からない
「3つの見本の違いを、どんな会社に向くかで一言ずつ説明して」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
社内用とお客様用をタブで行き来でき、どちらも自分で開けた
公開側の画面に、チェック記録も個人名も出ていないことを目で確かめた
3つの見本から1つ選び、その表紙に変わった状態で保存できた
Workで作った物を保存するプロンプト
この切り替え付きの一式を、完成フォルダの「会社サイト」へ保存して。選んだ見本の名前と、社内用の記録は公開側に出さない決まりと、まだURLを配っていないことも書き添えて。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
まず自分の会社で「社内だけで見る画面」と「お客様に見せる画面」がごちゃ混ぜになっている場所を一つ挙げ、そこだけをこの切り替えの形に置き換えます。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
表紙に載せる中身を、10個の質問で先に決めよう
続けるための追加プロンプト
追加のプロンプト
公開側の表紙、まだ仮の文字なんだよね。何を書くか決めたいから、俺に10個だけ質問して。1問ずつ聞いて、答えられないやつは未定のままにして。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
今作った切り替え付きの「会社サイト」の公開側を、そのまま中身を入れる置き場として使います。
できるようになること
仮の文字だった表紙に、何を書くかの答えがそろいます。
この内容を詳しく学ぶ教材
Lv.72「10個の質問に答えて、ホームページの中身を集めよう」