無料座学 3 / 4

画面を作り、ボタンや入力欄を追加する

AIが出したコードを「完成品」と思わないことが重要です。画面を見て、押しやすいか、読めるか、スマホで崩れないかを確認しながら修正します。

画面づくりの基本手順

まず1画面で作る
最初は、説明、チェック項目、結果表示を1つのHTMLにまとめます。ページ移動は後回しです。

入力欄を必要最小限にする
無料講座の題材では個人情報を取らず、チェックボックスや選択肢だけで構成します。

ボタンを分かりやすくする
「結果を見る」「最初からやり直す」など、利用者が迷わない文言にします。

スマホ表示を指定する
文字サイズ、余白、ボタンの高さ、縦向き表示をAIに明確に指示します。

現在のHTMLに「結果を見る」ボタンを追加してください。ボタンを押したら、チェック済みの項目数と、未チェックの項目を表示してください。既存のデザインは大きく変えないでください。

個人情報を取らない範囲で、自由入力欄を1つ追加してください。入力欄の名前は「次に準備したいもの」にしてください。氏名、住所、電話番号、メールアドレスは入力させないでください。

このHTMLをスマホ表示に最適化してください。条件は以下です。・文字は小さくしすぎない・ボタンは指で押しやすい大きさにする・横スクロールが出ないようにする・余白を適度に取る・高齢者にも読みやすい配色にする

座学でのポイント： 実際にコードを書けなくても、「どう修正を頼むか」を理解することが重要です。 AIへの指示が具体的になるほど、出てくるものも安定します。

無料座学で目指すのは、あくまで「小さな試作品の作り方を理解する」ことです。完成度よりも、AIに依頼して、画面を出し、直し方を学ぶことを重視します。

受講者ごとの簡単なWebアプリ 題材に合わせた1ページ構成のHTMLアプリを想定します。

プロンプト集 画面作成、項目追加、スマホ対応、安全確認の依頼文を持ち帰ります。

企画テンプレート 作りたいアプリを日本語で整理する型を持ち帰ります。

次のページでは、「試作品として動く」と「実際に業務や公開サイトで使える」の違いを整理します。ここを間違えると、AIで作った小舟で外洋に出るようなものです。