01 / WEBSITE BASICS
この講座で、何をできるようにするか。
内容・操作・表示・参照ファイルを点検し、再現できる修正記録を残す。
所要時間は実習環境と進み方に応じて調整します。
学習目標と確認ポイント詳しく見る
- 内容の正確さと目的を説明し、内容確認票を作る。
- 意味とアクセシビリティを説明し、操作確認記録を作る。
- 画像とリンクの点検を説明し、リンク・画像一覧を作る。
- 開発者ツールで調べるを説明し、不具合の再現と修正メモを作る。
- 表示と性能の入口を説明し、表示と素材の確認票を作る。
- レビューと再確認を説明し、レビュー済み修正記録を作る。
無料のテキストエディタとブラウザーで静的なページを作ります。共通題材は架空の「ひだまりカフェ」です。フォーム送信・予約処理・会員情報の保存は静的ページだけでは完成しません。
02 / WEBSITE BASICS
仕組みを理解し、手を動かして確かめる。
内容の正確さと目的
詳しく見る
学習テーマ 1
最初に決めた利用者と目的へ戻り、必要な情報を探せるかを確認します。誤字だけでなく、営業時間や価格等の整合、架空の情報の表示、問い合わせ手段の誤解を点検します。
設計メモの受け入れ条件を一つずつ実際のページへ対応させる。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
意味とアクセシビリティ
詳しく見る
学習テーマ 2
見出しの順、画像の代替説明、リンクの文言、色に頼らない情報、操作のフォーカス等を確認します。チェック項目を満たした例だけで全利用者への完全な利用性を保証するとは扱わず、目的の操作を実際に試します。
マウスを使わず主要リンクをたどり、見出しとaltも説明する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
画像とリンクの点検
詳しく見る
学習テーマ 3
画像の表示、ページ内id、相対パス、外部URL、リンク文言を確認します。ローカルで見えるファイルと公開するファイルが同じ構成かを比べます。
リンク先を一覧にして全て開き、存在しないidやファイル名を修正する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
開発者ツールで調べる
詳しく見る
学習テーマ 4
Consoleのエラー、Networkの失敗、要素と適用CSSを分けて読みます。表示の原因を一つずつ確認し、何を変えてどう直ったかを記録します。
CSSへの参照を一度ずらし、読み込み失敗を観察して正しいパスへ戻す。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
表示と性能の入口
詳しく見る
学習テーマ 5
異なる幅、拡大、長い文章等でレイアウトを確認します。必要以上に大きな素材や外部依存を見直し、表示の遅さをファイルサイズだけで決めつけず条件と結果を記録します。
320pxから広い幅まで確認し、画像の容量と取得の様子も記録する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
レビューと再確認
詳しく見る
学習テーマ 6
修正したところだけでなく、関連する表示やリンクが壊れていないかを見ます。他の人へ、目的の情報を探す操作を試してもらい、説明なしに理解できるかを確かめます。
見つかった問題を優先度付きで一覧化し、修正後の結果と未対応を残す。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
完成例を見ながら、自分のページへ変更する
完成例は架空のお店の静的サイトです。そのまま提出するだけでなく、各テーマの目的と確認条件に合わせて変更し、結果を記録してください。
03 / WEBSITE BASICS
仕事のアニメ：見やすさ・リンク切れを確認するを考える。
新人・アオイさんと先輩・ミナトさんの会話で、「見やすさ・リンク切れを確認する」を学びます。最初の場面は「最初に決めた利用者と目的へ戻り、必要な情報を探せるかを確認します。」。何を確かめ、どう対応するかを順に見ていきましょう。
最初に決めた利用者と目的へ戻り、必要な情報を探せるかを確認します。
約12秒ごとに場面が切り替わります。再生中も一時停止でき、「前へ」「次へ」で自分のペースで読めます。最終場面で停止します。
アニメの内容をまとめて文章で読む
1. 内容の正確さと目的
アオイ：最初に決めた利用者と目的へ戻り、必要な情報を探せるかを確認します。
学習ポイント：内容確認票
2. 意味とアクセシビリティ
ミナト：見出しの順、画像の代替説明、リンクの文言、色に頼らない情報、操作のフォーカス等を確認します。
学習ポイント：操作確認記録
3. 画像とリンクの点検
アオイ：画像の表示、ページ内id、相対パス、外部URL、リンク文言を確認します。
学習ポイント：リンク・画像一覧
4. 開発者ツールで調べる
ミナト：Consoleのエラー、Networkの失敗、要素と適用CSSを分けて読みます。
学習ポイント：不具合の再現と修正メモ
5. 表示と性能の入口
アオイ：異なる幅、拡大、長い文章等でレイアウトを確認します。
学習ポイント：表示と素材の確認票
6. レビューと再確認
ミナト：修正したところだけでなく、関連する表示やリンクが壊れていないかを見ます。
学習ポイント：レビュー済み修正記録
04 / WEBSITE BASICS
演習を完成させ、成果物をレビューする。
演習1
設計メモの受け入れ条件を一つずつ実際のページへ対応させる。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習2
リンク先を一覧にして全て開き、存在しないidやファイル名を修正する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習3
見つかった問題を優先度付きで一覧化し、修正後の結果と未対応を残す。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
正しい用語で説明できるか／入力と結果が対応しているか／正常だけでなく失敗する条件も扱ったか／他の人が再現できるか／残る課題を隠していないか。
コード練習：編集して表示を比べる
HTMLとCSSを書き換え、「表示を更新」を押してください。元ファイルは変更せず、このページを閉じると入力は消えます。JavaScript・フォーム送信・外部素材の読み込みは実行しないHTML/CSS用の練習です。画像は同梱cafe.svgだけを表示します。
ここで編集した内容を残す場合は自分でエディタへコピーします。上のZIPは完成サンプルで、入力中の編集は含みません。
05 / WEBSITE BASICS
確認問題：答えより、理由を説明する。
全5問。選ぶと解説が表示されます。何度でも選び直せます。
回答済み 0 / 5問
06 / WEBSITE BASICS
成果物を残し、理解と未確認を分ける。
架空データを使い、根拠と結果を自分の言葉でまとめます。回答とメモは自動保存・外部送信しません。残したい内容はコピーするか、成果物ファイルへ記入してください。
07 / WEBSITE BASICS
説明・実装・記録を、一つの成果へつなげる。
内容・操作・表示・参照ファイルを点検し、再現できる修正記録を残す。
- 内容確認票
- 操作確認記録
- リンク・画像一覧
- 不具合の再現と修正メモ
- 表示と素材の確認票
- レビュー済み修正記録
08 / WEBSITE BASICS