🎯 このMISSIONのゴール
AIと会話しながらプロフィールページを作り、完成品をブラウザで開き、
会話だけで見た目を修正する。
そして、作ったページを AI Lounge のマイページに載せる。
さっきは文字だけのファイルでした。
次は、ブラウザで見られるWebページを作ります。
ここでも、自分でコードを書く必要はありません。
🔸 何を作るのか
profile.html という名前のWebページを1枚作ります。
このページは練習用ですが、
完成したらAI Lounge のマイページに載せます。
あなたが作ったページが、そのままあなたのマイページになります。
ページに載せる内容は、次のとおりです。
- 表示名
- 短い自己紹介
- 今できること
- AIでやりたいこと
- アイコン画像
本名、住所、勤務先、子どもの学校名などは使いません。
公開する予定がなくても、最初の練習では表示名か架空の内容で十分です。
🔸 アイコンがある場合
使いたい画像を1枚用意し、
profile-icon.png という名前で
ai-practice の中へ入れてください。
元画像がJPG形式の場合は、無理に名前の最後だけ .png へ変えないでください。
画像の種類と名前が合わなくなります。
JPGなら profile-icon.jpg のまま入れ、
あとでAIへの指示文に書く画像名も .jpg へ変えます。
赤枠のように、アイコン画像の名前が
profile-icon.png まで表示されていれば準備OKです。
🔸 アイコンがない場合
画像を探してこなくて大丈夫です。
ページの中に、表示名の最初の1文字を丸い枠で表示してもらいます。
知らないサイトから画像をダウンロードするより、
最初の練習にはこちらの方が安全です。
アイコンは後からいつでも足せます。
🔸 指示文を送る
今回はAIに依頼する指示（プロンプト）をご用意しました！
下の指示文を、まるごとコピーして送ってください。
長く見えますが、書き換えるところはありません。
そのまま貼るだけです。
このあとAIが3つだけ質問してきますので、それに答えていきます。
指示文の中に出てくるHTMLは、Webページの中身を書くためのファイルです。
CSSは、色、文字の大きさ、余白など、見た目を整えるためのものです。
今回の指示では、追加アプリを入れずに作れる範囲へ絞っています。
AIに貼り付ける文
この作業フォルダに、私のプロフィールページを1枚作ってください。
ただし、いきなり作らないでください。
まず私に3つだけ質問して、載せる内容を聞いてください。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
【質問1】表示名
━━━━━━━━━━━━━━━━━━━━━━━━━━━
「このページで使うお名前を教えてください。本名でなくてかまいません」
と聞いてください。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
【質問2】今できること（番号で選んでもらう）
━━━━━━━━━━━━━━━━━━━━━━━━━━━
下のリストをそのまま見せて、
「当てはまるものを番号で教えてください（いくつでも可）」
と聞いてください。
1. AIに質問・相談できる
（分からないことを聞いて、答えをもらったことがある）
2. AIに文章を作ってもらえる
（メールや投稿文などを作ってもらったことがある）
3. AIで画像を作れる
（画像を生成したことがある）
4. AIに資料やファイルを渡して活用できる
（ファイルを読ませて、要約や質問をしたことがある）
5. 自分用のプロンプトを作れる
（よく使う指示文を、自分用に用意している）
6. AIを使ってWebページを作れる
（HTMLのページを作ってもらったことがある）
7. AIを使って簡単なツールを作れる
（自分用の小さなプログラムを作ってもらったことがある）
8. AIと外部サービスを連携できる
（AIと他のサービスをつないだことがある）
9. AIを使って作業を自動化できる
（決まった作業を自動で動かしたことがある）
「当てはまるものがなければ『なし』とお答えください」と添えてください。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
【質問3】AIでやりたいこと（番号で選んでもらう）
━━━━━━━━━━━━━━━━━━━━━━━━━━━
下のリストをそのまま見せて、
「やってみたいものを番号で教えてください（いくつでも可）」
と聞いてください。
1. 日常の面倒を減らしたい
2. 仕事を効率化したい
3. 文章を作りたい
4. 画像を作りたい
5. 資料を作りたい
6. 情報整理・調べものに使いたい
7. 自分用のツールを作りたい
8. Webサイトを作りたい
9. 作業を自動化したい
10. AIを副業・仕事に活かしたい
11. まだ分からない
12. その他（自由に書いてください）
━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ステップ1】下書きを見せる（まだページは作らない）
━━━━━━━━━━━━━━━━━━━━━━━━━━━
3つの答えがそろったら、下記のプロフィールの下書きを埋めて見せてください。
この時点ではまだファイルを作らないでください。
自己紹介の文は、私の答えをもとにあなたが1〜2行で書いてください。
━━━━━━━━━━━━━━━━━━
プロフィールの下書き
━━━━━━━━━━━━━━━━━━
【表示名】
【自己紹介】（あなたが書いた1〜2行）
【今できること】
・（選ばれた項目をそのまま書く）
【AIでやりたいこと】
・（選ばれた項目をそのまま書く）
━━━━━━━━━━━━━━━━━━
最後に、必ずこう聞いてください。
「直したいところがあれば教えてください。なければ『これでOK』とお答えください」
━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ステップ2】OKが出てから、ページを作る
━━━━━━━━━━━━━━━━━━━━━━━━━━━
私が「OK」と言ってから、下書きの内容でページを作ってください。
■ ファイルの決まり
- ファイルは「profile.html」1つだけにしてください
- CSSは別ファイルにせず、profile.html の中に書いてください
- インターネット上のフォントや部品を読み込まないでください
- アイコン画像は、作業フォルダの「profile-icon.png」を
<img src="profile-icon.png"> の形で読み込んでください
- 画像をHTMLの中に埋め込まないでください（ファイルが重くなるため）
- アイコン画像がない場合は、表示名の最初の1文字を丸い枠の中に表示してください
■ 見た目の決まり
- 明るく、読みやすいデザインにしてください
- スマートフォンでも読みやすくしてください
- PCでは左右2列の横長レイアウトにしてください
- 左側は「アイコン＋表示名＋自己紹介」、右側は「今できること＋AIでやりたいこと」の2つのリストにしてください
- PCでの横幅は900px前後を上限の目安にしてください。高さ580pxには固定しないでください
- ページ外枠と各カードの高さは、プロフィールの文章量やリスト数に合わせて自動で伸び縮みするようにしてください
- 内容が少ない場合は外枠もコンパクトにし、最後の項目から外枠の下端までに大きな空白を残さないでください。下側の余白は上側・左右と同じくらい（24〜40px程度）を目安にしてください
- 内容が多い場合は外枠を自然に高くしてください。高さを合わせるために文字を極端に小さくしたり、空の領域を作ったりしないでください
- `height: 580px`、`min-height: 580px`、`height: 100vh` のような固定高さを、ページ外枠やプロフィールカードに指定しないでください
- 標準的なプロフィール量なら、縦スクロールをせず全内容が見えるよう、余白・文字サイズ・行間を適度に整えてください
- カードやリストの中に、個別のスクロール欄を作らないでください
- 画面幅が狭いスマートフォンでは1列に切り替え、ページ全体の通常スクロールで読めるようにしてください
■ ページの一番下に、次のブロックを必ず入れてください
これは AI Lounge が読み取るための部分です。画面には表示されません。
<script type="application/json" id="ai-lounge-profile">
{
"display_name": "（表示名）",
"can_do": ["（選ばれた項目をそのまま）"],
"want_to": ["（選ばれた項目をそのまま）"]
}
</script>
作る前に、作るファイルを日本語で説明してください。
既存のファイルは変更しないでください。
AIが profile.html 以外にもファイルを作ると説明した場合は、
すぐ許可せず、なぜ必要なのか日本語で聞いてください。
送ったあと、指示文の冒頭がこのように表示されていれば大丈夫です。
いきなり作らず、3つの質問から始める内容になっています。
🔸 3つの質問に答える
AIが順番に質問してきます。
番号を選ぶだけなので、迷ったら直感で選んで大丈夫です。
【質問2】今できること
当てはまるものを番号で教えてください（いくつでも可）
1. AIに質問・相談できる
2. AIに文章を作ってもらえる
...答え方は、こんなふうで十分です。
1, 2多めに選ばなくて大丈夫です。
ここで少なく始まるほど、
この先「できるようになったこと」が増えていくのが見えます。
回答は、赤枠のように表示名と番号だけで十分です。
送ったあとに下書きが出たら、表示名や文章を自分で読みます。
🔸 下書きを自分で直す
3つ答えると、AIが下書きを見せてくれます。
ここですぐOKを出さないでください。
━━━━━━━━━━━━━━━━━━
プロフィールの下書き
━━━━━━━━━━━━━━━━━━
【表示名】ゆうき
【自己紹介】最近AIを使い始めました。
仕事の細かい作業を減らしたいと思っています。
【今できること】
・AIに質問・相談できる
・AIに文章を作ってもらえる
【AIでやりたいこと】
・仕事を効率化したい
・作業を自動化したい
━━━━━━━━━━━━━━━━━━自己紹介の文は、AIがあなたの答えから書いたものです。
自分で読んでみて、違うと思ったら直す指示をしてください。
AIに貼り付ける文
自己紹介を「AIで毎日の事務作業を減らしたいと思っています」に変えてください
こんなふうに、日本語で伝えるだけで直せます。
キーボードを打つのが苦手な方は、音声入力を使ってください。
文字を入力する欄の右のほうに、マイクのマーク🎙️のボタンがあります。
そのボタンを押してから話しかけると、話した言葉がそのまま文字になって入ります。
指示は「こう打たなきゃ」と身構えなくて大丈夫。
思ったことを声でそのまま伝えるだけでOKです。
納得できたら「これでOK」と伝えてください。
ページ作りが始まります。
🔸 ブラウザで完成品を開く
AIが作成を終えたら、ai-practice を開きます。
その中にある profile.html をダブルクリックしてください。
普段使っているブラウザが開き、プロフィールページが表示されます。
ここで見るのは、デザインの上手さだけではありません。
- 表示名が合っているか
- 自己紹介が途中で切れていないか
- アイコンが表示されているか
- 「今できること」「やりたいこと」が載っているか
- 読めないほど小さい文字がないか
画像が出ず、小さなマークだけ表示される場合は、
画像の名前が指示と合っているか見てください。
profile-icon.png と profile-icon.jpg は別の名前です。
赤枠の profile.html が増え、
元からあったテキストとアイコンも残っていることを確認します。
このように4つの内容がそろって読めれば、まずは成功です。
見た目の修正は次の手順で行います。
🔸 会話だけで見た目を変える
最初から完璧なページを作る必要はありません。
一度作ってから「ここを変えて」と頼めるのが、
Claude CodeやCodexの使いやすいところです。
次の指示文を送ってみてください。
AIに貼り付ける文
「profile.html」を次のように変更してください。 - 背景を薄い水色にする - アイコンを少し大きくする - 「やってみたいこと」をカード型にする 変更前に、どこを変えるか日本語で説明してください。 ほかのファイルは変更しないでください。 一番下にある ai-lounge-profile のブロックは消さないでください。
変更後は、ブラウザへ戻ってページを再読み込みします。
ブラウザ上部にある、丸い矢印の形をした［更新］マークを押してください。
色とアイコンの大きさ、カードの形が変われば成功です。
🔸 AI Lounge のマイページに載せる
できあがったページを、AI Lounge に載せます。
いま作ったページは、あなたのPCの中にある作品です。
AI Lounge のマイページは、その作品を飾っておく場所になります。
文字を入力する必要はありません。
ファイルを選ぶか、枠内へドラッグ＆ドロップするだけです。
マイページ上に、さっき確認したプロフィールが表示されれば読み込み完了です。
🔸 うまくいかないとき
ブラウザで変更が反映されない
まず、ブラウザ上部にある丸い矢印の形をした［更新］マークを押してください。
それでも変わらない時は、開いているファイルの場所を確認します。
AIに貼り付ける文
変更した「profile.html」の保存場所を教えてください。 新しい変更はしないでください。
AIが答えた場所と、ブラウザで開いているファイルが同じか見てください。
同じなら、ブラウザを一度閉じて、
ai-practice の profile.html を開き直します。
AI Lounge で「大きすぎて保存できません」と出る
画像がページの中に埋め込まれている可能性があります。
AIにこう伝えてください。
AIに貼り付ける文
profile.html の中に画像データが埋め込まれていたら、 <img src="profile-icon.png"> の形に直してください。
AI Lounge に読み込んだら表示名が空だった
一番下のデータブロックが入っていないかもしれません。
AIに貼り付ける文
profile.html の一番下に、ai-lounge-profile のデータブロックが 入っているか確認してください。無ければ追加してください。
エラーが出たからといって、
知らないアプリや追加機能を言われるまま入れないでください。
今はHTMLファイル1つで表示できる課題です。
✅ MISSION COMPLETE
□ 3つの質問に答えた
□ 下書きを読んで、自分で1か所直した
□ profile.html を作ってもらった
□ ブラウザでページを開いて、内容を自分で確認した
□ 日本語の修正指示で見た目を変えた
□ AI Lounge のマイページに読み込んだ
AI Lounge のマイページに、作ったページが表示されていれば、
この MISSION は完了です。