パソコンでもスマホでも気持ちよく動く、7ページのサイトにしよう
今日手元に残るもの
PC・スマホで動く7ページとLP、404ページ、見出し構造・キーボード・コントラスト・拡大・代替テキストのアクセシビリティ結果
時間の目安
最初の動作確認まで 40〜70分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
PC・スマホで動く7ページとLP、404ページ、見出し構造・キーボード・コントラスト・拡大・代替テキストのアクセシビリティ結果
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
WEB-01〜05の確認済み事実、サイト地図、採用デザイン、原稿、画像を使います。
材料の入れ方前の完成物を使う
- 1上に書かれた方法で、前の完成物を用意する
- 2材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ChatGPTの設定と詳しい使い方ファイル変更を何度も行うため、有料版がおすすめです。使える量はプラン画面で確認してください。
実際のファイルやコードを扱うなら、Codexがおすすめです。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。上に書かれた前の完成物を用意してから、下の文を送ります。
ここまでの7ページとLPを、実際にブラウザで動くサイトにして。PCとスマホで気持ちよく、見出しの順、キーボードだけ、文字を大きく、文字と背景、画像の説明も。ないURLを開いた時の404も作って。まだ本番公開はしないで。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
PC・スマホで動く7ページとLP、404ページ、見出し構造・キーボード・コントラスト・拡大・代替テキストのアクセシビリティ結果
まず自分で試す
ローカルまたは教材プレビューを自分で開く
全9画面をPC・360pxで表示する
キーボードだけでメニューと主ボタンを操作する
200%拡大と画像非表示を試す
存在しないURLで404から戻る
追加のプロンプト
当てはまるものだけ、上から順に送ります。
サイトが起動したら
7ページ、LP、404をPC幅と360pxで一つずつ開く。マウスを使わず全リンクを移動し、200%拡大でも横にはみ出さないか確認して。
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
スマホで窮屈
「二列を一列にし、主ボタンを指で押せる高さへして」
キーボード位置が見えない
「選んでいる場所に色だけでない枠を出して」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
7ページ・LP・404をブラウザで開けた
PC・360px・200%拡大・キーボード操作を確認した
代替テキストとコントラストの問題を修正した
Workで作った物を保存するプロンプト
サイト一式、起動方法、PC・スマホ画像、アクセシビリティ結果、404を「06_動く7ページサイト」に保存して。未公開状態も書いて。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
会社ドメインへ移す前に、別の担当者がローカルで開けることを確認します。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
問い合わせの入力から完了までを動かそう
続けるための追加プロンプト
追加のプロンプト
問い合わせを入力、確認、完了まで動かして。受付メールと担当通知の見本、資料PDFも同じ受付IDで。外部送信はまだつながず、未接続と出して。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
問い合わせページ、事実台帳、プライバシー上必要な最小項目を使います。
できるようになること
サイト閲覧から受付完了までの導線モックがつながります。
この内容を詳しく学ぶ教材
WEB-07「入力すると受付メールが届く、問い合わせフォームを動かそう」