小さな実践例

最初から大きなアプリを作る必要はありません。ここでは、自分用の読書メモを静的HTMLの1ページに整え、ブラウザで実際に確かめるところまでを8ステップで進めます。

この練習の完成物は outputs/reading-note.html です。ログインや保存機能のない1ファイルなので、失敗しても戻しやすく、ブラウザで結果を確かめられます。

完成の目安

次の4項目をすべて実際に確認できたら、この練習は完了です。

• outputs/reading-note.html をブラウザで実際に開ける
• 375×844で横スクロールがない
• タイトル、読んだ日、印象に残った一文、次に読む本を読める
• ログイン、保存、検索、公開設定を追加していない

スマホ確認が未実施または「要確認」の場合は、確認を続けます。

1. 元メモを置く

まず sources/reading-note.txt に元メモを置きます。最初からきれいに書く必要はありません。

週末に読んだ本のメモを残すページを作りたい。
タイトル、読んだ日、印象に残った一文、次に読む本を書きたい。
最初は自分だけで見る。
スマホでも読みたい。
ログインや保存機能はいらない。
まずは1ページだけでいい。

2. 小さな要件メモを書く

notes/requirements.md に、今回やることとやらないことを分けて書きます。

# 小さな要件メモ

## 作りたいもの
読書メモを静的HTMLの1ページに整理する。

## 誰が使うか
まずは自分だけ。

## 今回やること
タイトル、読んだ日、印象に残った一文、次に読む本を見やすく並べる。

## 今回やらないこと
ログイン、保存、検索、公開設定は追加しない。

## 完成の目安
- outputs/reading-note.html をブラウザで実際に開ける
- 375×844で横スクロールがない
- 4つの内容を読める
- やらない機能を追加していない

3. 構成だけ出してもらう

いきなりコードを書かせず、まずページ構成だけを出してもらいます。

sources/reading-note.txt と notes/requirements.md を読んでください。
読書メモを静的HTMLの1ページにしたいです。

まだファイルは作らず、ページ構成だけ提案してください。
タイトル、読んだ日、印象に残った一文、次に読む本の順番と、
375×844で横スクロールを起こさないための注意点を短く出してください。

構成に、要件にないログイン欄や検索欄が入っていたら、この段階で外します。

4. HTMLの初稿を作る

構成が合っていれば、1ファイルのHTMLを作ってもらいます。

提案された構成で、読書メモページの初稿を作ってください。
完成物は outputs/reading-note.html に保存してください。

条件:
- HTMLとCSSだけで作る
- タイトル、読んだ日、印象に残った一文、次に読む本を表示する
- 375×844でも読める幅にする
- ログイン、保存、検索、公開設定は追加しない

作成後、変更したファイルと未確認事項を報告してください。

初稿ができたら、ファイル名が outputs/reading-note.html になっていることを先に確かめます。

5. 直したい点を1つずつ伝える

ブラウザで見る前に、要件との差を1つずつ直します。一度に多く頼むと、合っていた場所まで変わりやすくなります。

直したいこと	頼み方
文章が長い	意味は変えず、各段落を2文以内にしてください。
横幅が固定されている	375px幅でも横スクロールが出ないCSSにしてください。
情報が混ざる	タイトル、読んだ日、印象に残った一文、次に読む本を分けてください。
機能が増えた	ログイン、保存、検索、公開設定を削除し、静的HTMLだけに戻してください。

6. PCのブラウザで確認する

AIの説明だけで済ませず、outputs/reading-note.html をPCのブラウザで実際に開きます。

1. ファイルをブラウザで開く。
2. エラー画面ではなく読書メモが表示されることを確かめる。
3. タイトル、読んだ日、印象に残った一文、次に読む本を順に読む。
4. ログイン、保存、検索、公開設定が増えていないことを確かめる。

表示できない、文字が読めない、要件外の機能がある場合はステップ5へ戻ります。

7. 375×844でスマホ表示を確認する

次にブラウザのレスポンシブ表示などで viewport を 375×844 にし、PCとは分けて確認します。

1. viewport が幅375、高さ844になっていることを確認する。
2. 上から下までスクロールし、左右方向へ動かないことを確かめる。
3. タイトル、読んだ日、印象に残った一文、次に読む本をすべて読む。
4. 横スクロールがある場合は、はみ出した要素を記録してステップ5へ戻る。

「スマホでも読めそう」という予想ではなく、375×844で横スクロールがないことを実際に確認します。

8. 確認結果を作業記録に残す

最後に logs/ へ、次回も同じ状態を再現できる記録を残します。ファイル、viewport、横方向のはみ出し、見えた内容、未解決、次の修正を分けます。

# 作業記録

## 確認したファイル
- outputs/reading-note.html

## PC確認
- viewport: 1440×900
- ブラウザで実際に開けた: はい
- 見えた内容: タイトル、読んだ日、印象に残った一文、次に読む本
- 横方向のはみ出し: なし

## スマホ確認
- viewport: 375×844
- 横スクロール: なし
- 見えた内容: タイトル、読んだ日、印象に残った一文、次に読む本
- 要件外の機能: ログイン、保存、検索、公開設定はいずれもなし

## 未解決
- なし

## 次の修正
- なし。4つの完成条件を実測できたため完了。

もし横スクロールなどが残った場合は、未解決 に対象要素を書き、次の修正 に最初の1手を書きます。「完了」ではなく「要確認」と記録します。

次に進む

この1回が完了したら、次は チェックリスト で確認の観点を増やします。他の人に使ってもらう場合は、先に 人に使ってもらう前に を見ます。