はじめに
はじめまして。私は新卒 1 年目のエンジニアです。
皆さんは自己紹介ページを作成する際に工夫を凝らすことに挑戦したことはありますか？
研修で与えられた「自己紹介ページを作成しよう」という課題を前に、私はどのようにして効率よく、しかも個性を表現できるものを作れるかと考えました。
そこで、社内に導入されている生成 AI を使うことで、自分らしさを保ちながら効率的に作成できるのではないかと思いつきました。
怠惰な私の小さな冒険が始まります。
とりあえず、何も考えずに投げてみる
User
HTMLとCSSを使って自己紹介ページを作成したいです。内容は次の通りです。
・名前
・自分の写真ないしアイコン
・学生時代やっていたこと（出身した学部やバイト、サークル等）
・趣味
・意気込み
・座右の銘
・研修中大変だったこと
AI
自己紹介ページを作成するのは素晴らしいアイディアですね。
以下に、HTMLとCSSを使ったシンプルな自己紹介ページのコード例を示します。
このコードを元に、あなたの情報を追加してみてください。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自己紹介ページ</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background-color: #f8f9fa;
padding: 10px 20px;
text-align: center;
border-bottom: 1px solid #ddd;
}
main {
padding: 20px;
}
img {
max-width: 200px;
height: auto;
border-radius: 50%;
}
section {
margin-bottom: 20px;
}
h2 {
color: #333;
}
</style>
</head>
<body>
<header>
<h1>自己紹介</h1>
</header>
<main>
<section>
<h2>名前</h2>
<p>あなたの名前をここに記載してください</p>
</section>
<section>
<h2>写真/アイコン</h2>
<img src="あなたの写真またはアイコンのURL" alt="あなたの名前" />
</section>
<section>
<h2>学生時代やっていたこと</h2>
<p>学部やバイト、サークルについて記載してください。</p>
</section>
<section>
<h2>趣味</h2>
<p>あなたの趣味について記載してください。</p>
</section>
<section>
<h2>意気込み</h2>
<p>今後の目標や抱負等を記載してください。</p>
</section>
<section>
<h2>座右の銘</h2>
<p>好きな言葉や格言を記載してください。</p>
</section>
<section>
<h2>研修中大変だったこと</h2>
<p>経験した困難や学びについて記載してください。</p>
</section>
</main>
</body>
</html>
AI
使い方：
1. 各セクションにあなたの情報を記載してください。
2. "あなたの写真またはアイコンの URL"は、あなたの写真やアイコンの実際の URL に置き換えてください。
オフラインで実行する場合は、画像ファイルをプロジェクトフォルダーに保存し、そのファイル名に変更してください。
3. 必要に応じて、スタイルをカスタマイズして見た目を変更できます。
このテンプレートをもとに、HTML や CSS の勉強を兼ねてカスタマイズを楽しんでください！
私からしたら、このくらいの雛形をさくっと出してくれるだけでも十分ありがたいです。
ただ、このまますぐ使えるかというと手直しは必要ですよね。例えば、
- css が index.html に埋め込まれてる
- id 何も書いてない
とか。後から色々手を加えたいな～というときは、自分でごにょごにょ書き換えないといけないですね。
ちょっとプロンプトを変えてみる。
それでは次は指示の出し方を工夫してみます。
なにやら Markdown で書いてあげると認識しやすいみたいな話は聞いたことがあったので、こちらなどを参考に書いてみました。
System
## Task
あなたはプログラミングスクールの講師です。
生徒がプログラムの内容を理解しやすいように、ステップバイステップで教えてください。
## Context
- 最終成果物は「自己紹介ページ」
- HTML と CSS で作成
- 内容
1. 名前
2. 自分の写真
3. 学生時代やっていたこと
4. 趣味
5. 意気込み
6. 座右の銘
7. 研修中大変だったこと
Role を決めるというやつ。
実際の会話
挨拶すると勝手に講義を始めてくれます。
User
こんにちは
AI
こんにちは！プログラミングスクールへようこそ。
今日はHTMLとCSSを使って自己紹介ページを作成するステップを一緒に学んでいきましょう。
何か質問があれば、お気軽に聞いてくださいね。
それでは、始めましょう！まずはHTMLから取り掛かります。準備はいいですか？
User
はい
AI
素晴らしい！では、まずHTMLの基本的な構造を作成しましょう。
### ステップ1: HTMLファイルを作成する
1. テキストエディタを開きます。Visual Studio CodeやSublime Textなど、どれを使ってもかまいません。
2. 新しいファイルを作成し、「index.html」という名前で保存します。
### ステップ2: HTMLの基本構造を追加する
次に、基本的なHTMLの構造を入力します。この構造には、ページのタイトルや内容を配置するためのタグが含まれています。
以下のコードを「index.html」に入力してください：
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自己紹介ページ</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>自己紹介</h1>
</header>
<main>
<section id="profile">
<h2>名前</h2>
<p>例: 山田 太郎</p>
<img src="写真のファイル名またはURL" alt="自分の写真" width="200" />
</section>
<section id="school">
<h2>学生時代やっていたこと</h2>
<p>ここに学生時代にやっていたことを書きます。</p>
</section>
<section id="hobbies">
<h2>趣味</h2>
<p>ここに趣味を書きます。</p>
</section>
<section id="aspiration">
<h2>意気込み</h2>
<p>ここに現在の意気込みを書きます。</p>
</section>
<section id="motto">
<h2>座右の銘</h2>
<p>ここに座右の銘を書きます。</p>
</section>
<section id="experience">
<h2>研修中大変だったこと</h2>
<p>ここに研修中に大変だったことを書きます。</p>
</section>
</main>
<footer>
<p>© あなたの名前</p>
</footer>
</body>
</html>
AI
説明:
`<!DOCTYPE html>`: HTML5 ドキュメントを宣言しています。
<html lang="ja">: ドキュメント言語を指定しています。ここでは日本語を使用しています。
<head>: ページのメタデータを含むセクションです。
<title>: ブラウザのタブに表示されるタイトルです。
<link rel="stylesheet" href="styles.css">: 外部スタイルシートをリンクしています（後で作成します）。
<body>: ページのコンテンツが含まれます。
各<section>タグは特定の内容のグループを表します。
ここまでできたら、ブラウザで開いてみてください。基本的な構造が表示されるはずです！
次はCSSでデザインを追加していきますが、質問があればどうぞ。
- css は別ファイルに
- id もちゃんと付けてる
- 何も指示してないのにフッターも作られている
なんだか前より良い感じに書いてくれましたね！
次に進んでみましょう。
User
質問はないです
AI
了解しました！では、次のステップで CSS を使ってページにスタイルを追加していきましょう。
### ステップ 3: CSS ファイルを作成する
1. 新しいファイルを作成し、「styles.css」という名前で保存します。
### ステップ 4: CSS でスタイルを追加する
「styles.css」に次のコードを入力して、HTML の要素にスタイルを適用します：
styles.css
/* ベーススタイル */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* コンテンツの中央揃え */
main {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 各セクションスタイル */
section {
margin-bottom: 20px;
}
/* ヘッダースタイル */
header {
background-color: #4caf50;
color: white;
padding: 20px;
text-align: center;
}
/* フッタースタイル */
footer {
text-align: center;
padding: 10px;
background-color: #eaeaea;
color: #333;
}
/* 画像スタイル */
img {
display: block;
margin: 10px auto;
border-radius: 10px;
}
AI
説明:
- `body`: 全体的なフォント、背景色、余白を設定します。
- `main`: ページの主要なコンテンツを中央揃えします。
- `section`: 各セクションに適用する余白を設定します。
- `header`: ページのヘッダーの背景色とテキスト色を設定します。
- `footer`: 軽微なスタイルをフッターに適用します。
- `img`: 画像を中央に表示し、丸め角のスタイルを追加します。
CSSファイルを保存した後、ブラウザで「index.html」をリロードすると、
スタイルが適用された自己紹介ページを見ることができます。
これで基本的なデザインが完成です！
あとは内容を自由に編集したり、よりカスタマイズすることで、あなたの個性が光るページになります。
何か疑問や追加で学びたいことがあれば、お知らせください。
どんな質問にもお答えします！
今度はコメントも付けて説明してくれました。
ここまでくると文句なしですね。拡張性もよさそう。
先生ありがとうございました！
ということで
「指示の出し方で AI の出力は変わる」というのは知ってましたが、こうして実際に比べてみるとかなり違うことがわかりますね。これからも色々試してみようと思います。
ちなみに
記事冒頭の「はじめに」の部分、AI に編集者になってもらって書いたんですよ。