セラピスト × AI・DX
日本語JA EnglishEN

第2部｜実践編 ―― プロフィールページを作る

第5章　実習：自己紹介（プロフィール）ページを作る

6 / 13

この章の要点

  • 装備（フォルダ・ルール・プロンプト・エラー対処）を総動員して作る
  • シンプルなページは、あえてフレームワークを使わず作るのがコツ
  • 「仮の情報で叩き台 → 自分の情報に書き換え」の流れがサクサク進む

今回作るもの

ブラウザで表示できる、シンプルな自己紹介ページです。中身は、

  • 名前・職業・趣味
  • 200字程度のプロフィール文
  • プロフィール写真の枠
  • 簡単なデザイン（色・レイアウト）

これを、以下の流れで作っていきます。

⸻

Step 1：プロジェクトフォルダを作る

第3章で決めた親フォルダの中に、今回用のフォルダを作ります。たとえば 20260529_self_introduction のような名前です。これが「AIに渡す鍵の範囲」になります。

Step 2：AIツールでフォルダを開く

エディタ（Antigravityなど）を起動し、「Open Folder」または「ファイル」→「フォルダーを開く」から、作ったフォルダを開きます。これでAIはこのフォルダの中だけを作業範囲として認識します。第3章でお伝えした「鍵を渡す範囲を最小にする」を、実際にやっている場面です。

Step 3：プロジェクトのルールを作る

このプロジェクト専用のルールを設定します。今回はシンプルなWebページなので、あえて高度な技術を使わないよう、こう指定します。

動作環境

  • ブラウザで動くWebページとして作ります

使う技術

  • HTMLとCSSとJavaScriptで作ってください
  • ReactやNext.jsなどのフレームワークは使わないでください

ここがコツです。HTML・CSS・JavaScriptは、Webページを作る最も基本的な3つの技術で、自己紹介ページ程度ならこれだけで十分きれいに作れます。一方、ReactやNext.jsといったフレームワーク（よく使う機能をまとめた便利な道具箱）は、大規模なアプリには強力ですが、シンプルなページには過剰で、専用ソフトのインストールやコマンド操作が必要になり、一気にハードルが上がります。だから、今回は意図的に避けます。

💡 「フレームワーク」という言葉は、第10章でもう一度ていねいに登場します。今は「シンプルなページには使わない」とだけ覚えておけば大丈夫です。

Step 4：最初のプロンプトで大枠を作ってもらう

第4章の3要素を使って、こんなプロンプトを渡します。

自己紹介ページを作ってください。

内容

  • 名前（仮で「山田太郎」）
  • 職業（仮で「理学療法士」）
  • 趣味を3つ（仮で「読書・登山・コーヒー」）
  • 200字程度の自己紹介文（仮の文章をAIで生成してください）
  • プロフィール写真を配置する枠（画像は後で差し替えます）

見た目

  • やさしい雰囲気で、パステル系の色合いにしてください
  • 文字は読みやすさを優先してください

ポイントは、名前や職業を「仮で」としていること。まずAIに叩き台を作らせ、あとから自分の情報に書き換えるほうがサクサク進みます。

Step 5：ブラウザで表示を確認する

AIが作った index.html というファイルを、ブラウザ（ChromeやSafari）で開いて確認します。エディタの「エクスプローラー」から index.html を右クリックし、フォルダを開いてダブルクリックすれば、ブラウザで表示されます。何かしら自己紹介ページらしきものが出れば成功です。自分のPC上で、AIが作ったページが動いている状態ですね。

うまく表示されない・エラーが出る場合は、第4章のエラー対処の型を思い出してください。

Step 6：画像を入れる

プロフィール写真を、エディタの「エクスプローラー」にコピー＆貼り付けで追加し、AIにこう頼みます。

［画像ファイル名］を、自己紹介の写真に当てはめてください

修正が終わったら、ブラウザをリロード（再読み込み）（Ctrl+R または Cmd+R）して反映を確認します。

Step 7：自分好みに修正する

仮の情報を、自分のものに書き換えていきます。コツは、一度に全部頼まず、小分けにして積み重ねること。一気に頼むとAIが一部を見落とすことがあります。

名前を「（あなたの名前）」に、職業を「理学療法士・アスレティックトレーナー」に変更してください。

プロフィール文を、次の要素を入れて書き換えてください。

  • 地域のクリニックで運動器リハを担当
  • 患者さんの「生活に戻る」を支えたい
  • 趣味の登山で得た学びを臨床にも活かしている

全体の色合いを、落ち着いたグリーン系に変更してください。

Step 8：完成！

自分の情報に書き換え、色味やレイアウトを整えたら完成です。自分ではコードを一行も書いていないのに、自己紹介ページがちゃんと動いている。これが、AIと一緒に作るということです。

ただし──今作ったページは、まだ「自分のPCの中だけ」にあります。友人にURLを送っても、まだ見てもらえません。これを世界に公開するのが、第3部です。

第5章のまとめ

  • フォルダ・ルール・プロンプト・エラー対処を総動員すれば、ページは作れる
  • シンプルなページはフレームワークを使わず、HTML・CSS・JavaScriptで作る
  • 「仮の情報で叩き台 → 自分の情報に書き換え」「小分けに修正」がコツ

← 目次に戻る