まず、紙に書く
第1章では、自己紹介のページを例にしました。この章では、それを人に見せられる1ページに育てるとしたら、を考えます。
ヒトリキカクは、いきなりAIに頼む前に、紙かメモ帳に次の3つを書き出すようにしています。
- 誰に見てほしいか：友人、同じ趣味の人、仕事の相手
- 見た人に、どう思ってほしいか：「この人に頼んでみたい」「話してみたい」
- 上から順に、載せること：名前とひとこと → 好きなこと → 作ったもの → 連絡先
3つ目の「上から順に」が、そのままページの見出しになります。授業の板書計画や、プリントの割り付けと同じです。何をどの順で見せるかを決めるのは、AIではなくあなたです。
AIに頼む
書き出したものを、第3章の「4つの材料」に当てはめて頼みます。
頼み方の例
「見た目の設定は、別のファイルに分けて」と書いたのには理由があります。次で説明します。
できたファイルを知る
AIが作り終えると、フォルダの中はこんな形になっているはずです。
HTMLは「何が書いてあるか」、CSSは「どう見せるか」を受け持つファイルです。中身と見た目を分けておくと、「色だけ変えたい」「文章だけ直したい」というときに、どこを触ればいいかがはっきりします。ページが増えたときに、見た目の設定を全ページで使い回せるのも利点です。
index.html という名前にも意味があります。Webサイトでは、フォルダを開いたときに最初に表示されるページを、ふつう index.html という名前にします。
少しだけ、中をのぞいてみる
index.html をメモ帳で開くと、たとえばこんな行があります。
<h1>こんにちは、ヒトリです</h1> <p>ひとり時間に、ものを作っています。</p>
<h1> は大見出し、<p> は段落、というしるしです。しるしで文章をはさんで、「ここは見出し」「ここは段落」とブラウザに教えています。全部を覚える必要はありません。「しるしではさんで書いてあるんだな」とわかれば十分です。
頼み方の例
誤字を1文字直すくらいなら、自分でメモ帳で直してもかまいません。直したら保存して、ブラウザで再読み込みします。自分の手で1か所直してみると、ページとファイルのつながりがぐっと見えてきます。
写真を入れる
写真を入れるときは、まず、作業用フォルダの中に images というフォルダを作り、使いたい写真を入れます。
写真のファイル名も、半角の英数字にしておきます。スマホで撮った写真は「IMG_0123.JPG」のような名前になっていることが多いので、何の写真かわかる名前に変えておくと、あとで迷いません。
頼み方の例
スマホのカメラで撮った写真は、そのままだとファイルがとても大きいことがあります。大きい写真は、ページの表示を遅くします。ヒトリキカクは、公開する前に軽くするようにしています。
パソコンとスマホで確かめる
いまはスマホで見る人のほうが多いくらいです。パソコンの画面できれいでも、スマホで崩れていては困ります。
パソコンの中で、スマホの幅を試す
ChromeやEdgeには、ページをスマホの幅で表示してみる機能があります。ページを開いた状態でキーボードの F12 を押すと、右か下に開発用の画面が出ます。その上のほうにある、スマホとタブレットの形のボタンを押すと、スマホの幅で表示されます。
画面の見た目はブラウザの更新で変わることがあります。見つからなければ、AIに「Chromeでスマホの幅を試す方法を教えて」と聞いてみてください。
確かめるところ
- 文字が小さすぎないか、行が長すぎないか
- 写真や表が、画面の横にはみ出していないか
- ボタンやリンクが、指で押しやすい大きさか
- 上から順に読んで、書き出した順番どおりになっているか
気になるところがあれば、第3章でやったように、どの画面で、どこが、どうなっているかを伝えて直してもらいます。
ヒトリキカクの場合
私がはじめてHTMLにふれたのは、教員になってから参加した2か月間の研修でした。そのころは、しるしのひとつひとつを自分の手で打ちこんでページを作っていました。いまは、何を載せるかを伝えれば、AIが書いてくれます。それでも、あのとき「しるしではさんで書くんだ」と知っていたことは、AIが作ったファイルを読むときの助けになっています。
ヒトリキカクのサイトも、特別なしくみは使わず、HTMLとCSSのファイルだけで作っています。この章で作ったページと、つくりは同じです。2026年10月には、いくつものページに分かれていたトップを、上から下へ読み進める1枚のページにまとめ直しました。そのときも、まず載せることと順番を決めてから、AIに作ってもらいました。
つまずきやすいところ
- 直したのに、変わって見えない。ブラウザが前のページを覚えていることがあります。再読み込みしても変わらないときは、AIに「変更が反映されません」と伝えてください。見た目のファイルを読み直させる工夫をしてくれます。
- 写真が表示されない。ファイル名の大文字・小文字（JPGとjpg）や、フォルダの場所が違うことがよくあります。そのままAIに伝えれば確かめてくれます。
- 見た目に凝りすぎる。最初は、読みやすさが何より大事です。飾りは、公開してから少しずつ足せば十分です。
あなたなら、どうする？
- あなたのページを見た人に、どう思ってほしいですか。ひとことで書いてみてください。
- 上から順に載せることを、紙に書くとしたら、何から書きますか。
- 誤字の1文字でも、自分の手で直してみたいと思いますか。それとも、全部AIに任せたいですか。
ヒトリキカクが大事にしたこと
正解ではなく、ひとつの例です。あなたのやり方と、くらべてみてください。
- 作る前に、誰に・どう思ってほしいか・上から順に載せることを書き出す
- HTMLは中身、CSSは見た目。分けておくと直しやすい
- 写真は images フォルダに入れ、半角の名前にして、軽くしておく
- パソコンとスマホの両方の幅で確かめる
次の章では、作ったページをインターネットに公開したときのことを書きます。