学べること
- 「サイトを作って」ではなく、ユーザーの 1 つの課題を書く方法
- 構造、スタイル、動作とパーツごとにページを組み立てる方法
- スマホとキーボードでページを確認する方法
- ページのコードに入れてはいけないもの
キーワード
- HTML
- ページの構造。見出し、テキスト、ボタン、フォーム。
- CSS
- 見た目。色、フォント、余白、画面サイズへの対応。
- JavaScript
- 動作。押したときの動き、フォームの送信、アニメーション。
- レスポンシブ
- ページがスマホ、タブレット、パソコンで同じように使いやすいこと。
011 つのシナリオを書く
ユーザーと 1 つの行動を選びます。資料を探す、申し込む、カタログを開くなど。行動の前に見えるものと、行動のあとに得られるものを書きます。これが最初のバージョンの課題です。
例： 「配信者がページを開き、10 秒で、寄付が自分のウォレットにすぐ届くことを理解して、「リンクを作成」を押す」
02パーツごとに組み立てる
まず AI に、HTML の構造だけを頼みます。見出し、説明、3 つの利点、ボタン 1 つ。次にスタイル、そのあとに動作です。次に進む前に、各パーツをブラウザーで確認しましょう。そうすれば、間違いを見つけやすくなります。
ヒント： コードに短いコメントをつけてもらいましょう。あとで保守しやすくなります。
03スマホとキーボードで確認する
狭い画面でページを開きます。はみ出すものがなく、ボタンが指で押せるようにします。Tab キーでページを移動して、すべてのリンクとボタンにはっきりしたフォーカスが当たるか確認します。
- 幅 360 ピクセルで横スクロールがない
- 本文のフォントが 16 ピクセル以上
- フォームの入力欄にラベルがある
- すべてのリンクが動く
04安全
ページのコードに入っているものは、訪問者の誰にでも見えます。API キー、パスワード、トークンは、ページのコードに入れてはいけません。サーバーに保管します。
- HTML や JavaScript にキーやパスワードを書かない
- 知らないサイトのスクリプトを読み込まない
05公開の準備をする
わかりやすいページのタイトル（title）と説明（description）を入れます。検索エンジンに表示されるものです。画像に説明（alt）があること、モバイル回線でも素早く開くことを確認しましょう。
公開の前に
- ページが、わかりやすい 1 つのシナリオに応えている
- スマホで横スクロールがない
- すべてのボタンとリンクが動き、キーボードで使える
- コードにキー、パスワード、トークンがない
- title、description、画像の説明がある
よくある間違いと正しい方法
AI にいきなり「サイト全体」を頼む
1 つのシナリオから始めて、パーツごとに組み立てましょう。
パソコンだけで確認する
訪問者の多くはスマホから来ます。
API キーをページのコードに直接書く
秘密情報はサーバーだけに保管します。
title と description なしで公開する
ないと、検索で見つかりにくくなります。
やってみよう
自分のプロジェクトのページを作ってみましょう。見出し、説明、3 つの機能、動作する行動を 1 つ。
- ユーザーのシナリオを 1 文で書く
- AI から HTML の構造をもらい、ブラウザーで確認する
- スタイルを追加して、幅 360 ピクセルで確認する
- Tab キーでページを移動して、気づいたことを書き留める
結果： 動くページと、通過した確認のリスト。
確認クイズ
まず頭の中で答えてから、答えを開きましょう。
1ページをパーツごとに組み立てるほうがよいのはなぜですか？答え
パーツごとにすぐ確認でき、間違いを見つけやすいからです。大きなコードをまとめてデバッグするのは困難です。
2API キーを、ページの JavaScript に保管してもよいですか？答え
いいえ。ページのコードは訪問者の誰にでも見えます。キーはサーバーに保管します。
3ページのアクセシビリティを手早く確認するには？答え
Tab キーで移動します。すべてのボタンとリンクに、見えるフォーカスが当たる必要があります。
まとめ
1 つのシナリオ、ブラウザーで確認しながらパーツごとに組み立て、スマホとキーボードで確認し、コードに秘密情報を入れず、わかりやすい title と description をつけます。そうすれば、最初のページは、見た目だけでなく、ちゃんと動くものになります。