01 / WEBSITE BASICS
この講座で、何をできるようにするか。
誰に何を伝え、どんな行動へつなげるページかを決め、制作前の設計メモを作る。
所要時間は実習環境と進み方に応じて調整します。
学習目標と確認ポイント詳しく見る
- 利用者と目的を説明し、利用者と目的のメモを作る。
- 載せる情報を整理を説明し、コンテンツ一覧を作る。
- 構成と読み順を説明し、構成図を作る。
- ワイヤーフレームを説明し、ワイヤーフレームを作る。
- 完成の条件を説明し、受け入れ条件表を作る。
- 内容を相手と確認を説明し、レビュー済み設計メモを作る。
無料のテキストエディタとブラウザーで静的なページを作ります。共通題材は架空の「ひだまりカフェ」です。フォーム送信・予約処理・会員情報の保存は静的ページだけでは完成しません。
02 / WEBSITE BASICS
仕組みを理解し、手を動かして確かめる。
利用者と目的
詳しく見る
学習テーマ 1
ホームページは見た目を作る前に、誰が何のために見るかを考えます。架空のカフェなら、初めての人が営業時間と場所を確認する等の目的があります。作り手の紹介したい順と、利用者が知りたい順は同じとは限りません。
初めて来店する人を想定し、知りたいことを5つ書き、最も重要な3つを選ぶ。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
載せる情報を整理
詳しく見る
学習テーマ 2
店の特徴、メニュー、営業時間、アクセス等を分類します。未確認の住所や価格を本当らしく埋めず、架空の例だと分かる内容にします。公開する必要のない個人情報を入れません。
情報を見出しごとに分類し、確認できている情報と仮の情報に印を付ける。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
構成と読み順
詳しく見る
学習テーマ 3
1ページの中で、概要、メニュー、来店情報の順に並べる等、読む流れを設計します。ページが複数ならサイトマップ、1ページならセクションの関係を図にします。
トップ、メニュー、アクセス、フッターの順を紙へ描き、配置の理由を書く。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
ワイヤーフレーム
詳しく見る
学習テーマ 4
色や細部を決める前に、見出し、写真、本文、リンクの位置を枠で考えます。目立たせるものを増やしすぎず、主要な目的へ自然に進めるかを確認します。
横長画面と狭い画面で情報の順序を描き、どちらでも営業時間へたどり着けるか確認する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
完成の条件
詳しく見る
学習テーマ 5
見た目ができたという感想ではなく、必要な情報がある、リンクが動く、スマートフォンで読める等の確認可能な条件を決めます。予約システム等の範囲外も先に示します。
静的な紹介ページの完成条件を5つ書き、対象外の機能も2つ書く。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
内容を相手と確認
詳しく見る
学習テーマ 6
紙の案や簡単な構成を相手に見てもらい、探したい情報を見つけられるか確認します。作者が説明し続けなくても伝わるかを観察し、配置の理由と修正を残します。
相手へ営業時間を探してもらい、迷った箇所を修正して設計メモを更新する。
前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。
完成例を見ながら、自分のページへ変更する
完成例は架空のお店の静的サイトです。そのまま提出するだけでなく、各テーマの目的と確認条件に合わせて変更し、結果を記録してください。
03 / WEBSITE BASICS
仕事のアニメ：サイトの目的と構成を決めるを考える。
新人・アオイさんと先輩・ミナトさんの会話で、「サイトの目的と構成を決める」を学びます。最初の場面は「ホームページは見た目を作る前に、誰が何のために見るかを考えます。」。何を確かめ、どう対応するかを順に見ていきましょう。
ホームページは見た目を作る前に、誰が何のために見るかを考えます。
約12秒ごとに場面が切り替わります。再生中も一時停止でき、「前へ」「次へ」で自分のペースで読めます。最終場面で停止します。
アニメの内容をまとめて文章で読む
1. 利用者と目的
アオイ：ホームページは見た目を作る前に、誰が何のために見るかを考えます。
学習ポイント：利用者と目的のメモ
2. 載せる情報を整理
ミナト：店の特徴、メニュー、営業時間、アクセス等を分類します。
学習ポイント：コンテンツ一覧
3. 構成と読み順
アオイ：1ページの中で、概要、メニュー、来店情報の順に並べる等、読む流れを設計します。
学習ポイント：構成図
4. ワイヤーフレーム
ミナト：色や細部を決める前に、見出し、写真、本文、リンクの位置を枠で考えます。
学習ポイント：ワイヤーフレーム
5. 完成の条件
アオイ：見た目ができたという感想ではなく、必要な情報がある、リンクが動く、スマートフォンで読める等の確認可能な条件を決めます。
学習ポイント：受け入れ条件表
6. 内容を相手と確認
ミナト：紙の案や簡単な構成を相手に見てもらい、探したい情報を見つけられるか確認します。
学習ポイント：レビュー済み設計メモ
04 / WEBSITE BASICS
演習を完成させ、成果物をレビューする。
演習1
初めて来店する人を想定し、知りたいことを5つ書き、最も重要な3つを選ぶ。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習2
トップ、メニュー、アクセス、フッターの順を紙へ描き、配置の理由を書く。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
演習3
相手へ営業時間を探してもらい、迷った箇所を修正して設計メモを更新する。
- 対象・環境・入力データ・期待結果を記録する。
- 上の解説と各ブロックの実習手順を使って作業する。
- 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
- 成果物・再現手順・分かったこと・未確認を残してレビューする。
正しい用語で説明できるか／入力と結果が対応しているか／正常だけでなく失敗する条件も扱ったか／他の人が再現できるか／残る課題を隠していないか。
コード練習：編集して表示を比べる
HTMLとCSSを書き換え、「表示を更新」を押してください。元ファイルは変更せず、このページを閉じると入力は消えます。JavaScript・フォーム送信・外部素材の読み込みは実行しないHTML/CSS用の練習です。画像は同梱cafe.svgだけを表示します。
ここで編集した内容を残す場合は自分でエディタへコピーします。上のZIPは完成サンプルで、入力中の編集は含みません。
05 / WEBSITE BASICS
確認問題：答えより、理由を説明する。
全5問。選ぶと解説が表示されます。何度でも選び直せます。
回答済み 0 / 5問
06 / WEBSITE BASICS
成果物を残し、理解と未確認を分ける。
架空データを使い、根拠と結果を自分の言葉でまとめます。回答とメモは自動保存・外部送信しません。残したい内容はコピーするか、成果物ファイルへ記入してください。
07 / WEBSITE BASICS
説明・実装・記録を、一つの成果へつなげる。
誰に何を伝え、どんな行動へつなげるページかを決め、制作前の設計メモを作る。
- 利用者と目的のメモ
- コンテンツ一覧
- 構成図
- ワイヤーフレーム
- 受け入れ条件表
- レビュー済み設計メモ
08 / WEBSITE BASICS