Sora Kids 自然体験スクールHP制作|模擬トライアル案件
模擬トライアル案件
Sora Kids 自然体験スクールHP
挑戦前チェックから初稿制作、コーチ添削、納品までを1ページにまとめた全体版です。
上から順に読み進めることで、案件開始から提出完了までの流れを通して学べます。
模擬トライアル案件
挑戦前チェックと高品質なHPデザイン
LESSON 1-1 Sora Kids 自然体験スクールHP ⏱ 所要時間:約75〜105分
レッスン解説動画
GOAL
このレッスンのゴール
  • 自分が案件へ挑戦できる状態か確認できる
  • LPとHPの役割の違いを説明できる
  • 4ページそれぞれの役割を説明できる
  • 共通コンポーネントと導線を一貫させる理由を説明できる
  • 保護者が探す情報をどのページに置くか判断できる

HPは、LPのように1ページで情報を完結させるものではありません。
利用者の目的に合わせて情報をページごとに分け、どのページからも次の行動へ進める設計が必要です。

Sora Kids案件では、TOP・スクールについて・プログラム・FAQ・体験申込の4ページに情報を整理し、体験会申込という行動へ導きます。

挑戦前チェック

案件へ応募する前に、次の8項目を確認しましょう。
条件を満たしていない場合は案件を開始せず、対応教材の完了、またはコーチへの相談を優先してください。

挑戦前チェック
「WEBデザイン・イントロダクション」を完了している
案件で使う基礎操作・用語の前提になる
Figma/Illustrator/Photoshopのいずれか1つを完了している
4ページを実際に組み立てるツールの操作を身につけている
選んだツールで、複数ページのレイアウトを作成できる
HP制作は複数ページを扱うため、1ページ完結の操作だけでは不足する
PC 1440px・SP 390pxそれぞれのサイズで書き出せる
案件では両サイズの初稿提出が必須になる
色、フォント、余白を複数ページで統一できる
4ページ共通のデザインルールを保つために必要な操作
制作から添削・修正・運営提出までを受講期間内に完了できる
添削・修正には往復のやり取りが発生するため余裕を持った期間が必要
現在進行中の模擬トライアル案件・実践想定案件がない
複数案件の同時進行は品質低下や納期遅延につながる
過去の案件がある場合、納品と運営確認が完了している
前案件が未完了のまま新しい案件を始めると管理が煩雑になる

LPとHPの役割の違い

LPは1ページで訪問者を1つの行動に集中させる制作物です。
HPは複数ページに情報を分け、利用者がそれぞれの目的に応じてページを選べるようにする制作物です。

LPHP(Sora Kids)
目的1つの行動に集中させる目的別にページを分ける
ページ数原則1ページTOP・スクールについて・プログラム・FAQ・体験申込の4ページ
情報の見せ方上から下へ読む前提で並べるページごとに主題を1つに絞る
ページ間の移動ほぼ発生しないナビゲーションで目的のページへ移動する
Q
確認クイズ 1
初めてSora Kidsのサイトを訪れ、活動方針や安全への配慮をまず知りたいと考えている保護者がいます。最初に見る可能性が高いページはどれでしょうか。
正解です!
初めて訪れる保護者は、まずTOPやスクールについてで活動方針や安全への配慮といった基本情報を確認します。
惜しいです!
プログラムやFAQ・体験申込は、活動内容や申込条件を具体的に検討する段階で見られるページです。

4ページの役割分担とサイトマップ

4ページには、それぞれ異なる役割があります。
サイトマップに沿って、各ページが担う内容を確認しましょう。

ページ役割・保護者が知りたいこと
TOP活動方針とメインコピーを伝え、他ページへの入り口になる
スクールについて活動方針、対象年齢、スタッフ紹介、安全への配慮を伝える
プログラム活動例、1日の流れ、料金、開催エリアを伝える
FAQ・体験申込よくある質問に答え、体験会申込へ導く

共通コンポーネントと導線設計

ヘッダー・フッター・CTAボタンは、4ページすべてで同じデザイン・同じ位置に置きます。
位置や見た目がページごとに変わると、利用者はそのたびに次の行動を探し直すことになります。

✓ Point !
共通コンポーネントを一貫させる理由

ヘッダーのナビゲーション項目と、CTAボタン(体験会に申し込む)の表示位置をどのページでも揃えます。
保護者は今いるページの位置と、次にどこへ進めばよいかを迷わず把握できます。

保護者が探す信頼情報の置き場所

保護者は活動の楽しさだけでなく、安全管理やスタッフ体制を確認してから申込を検討します。
次の情報を、内容に合うページへ配置しましょう。

信頼情報の配置先
対象年齢
スクールについて、またはプログラムページで5〜10歳という条件を明記する
安全への配慮
スクールについてページで、スタッフ体制とあわせて説明する
スタッフ紹介
スクールについてページで、写真とともに紹介する
料金
プログラムページで、体験会と通常プログラムの料金を分けて明記する
開催エリア
プログラムページで、陽森市の里山フィールドへのアクセスとあわせて示す
Q
確認クイズ 2
安全への配慮とスタッフ紹介は、どのページにまとめて配置するのが適切でしょうか。
正解です!
安全への配慮とスタッフ紹介をスクールについてページでまとめて伝えることで、保護者は安心材料を1か所で確認できます。
惜しいです!
TOPは入り口、プログラムは活動例や料金、FAQ・体験申込は疑問解消と申込が主な役割です。

PC・SPで情報量を判断する

PC 1440pxでは複数の情報を横に並べられますが、SP 390pxでは縦に並べ替える必要があります。
情報量を減らすのではなく、優先順位をつけて並べ替えましょう。

要素PC 1440pxでの見せ方SP 390pxでの見せ方
ナビゲーション横並びメニューアイコン等でまとめて表示する
活動写真複数枚を横に並べる縦に並べ替える
CTAヘッダー内に常時表示する画面内で見つけやすい位置に配置する

判断まとめ:保護者の閲覧段階と見せる情報

保護者の閲覧段階によって、優先して見せる情報は変わります。

保護者の状態見せるべきページ・情報
初めてサイトを訪れたTOP・スクールについてで活動方針と安全への配慮を伝える
参加を具体的に検討しているプログラムで活動例・料金・開催エリアを確認できるようにする
申込直前で疑問を解消したいFAQ・体験申込で疑問に答え、CTAへ導く
SUMMARY
  1. 案件へ挑戦する前に、前提学習と受講状況の8項目を確認する
  2. LPは1つの行動に集中させ、HPは目的別に情報をページで分ける
  3. TOP・スクールについて・プログラム・FAQ・体験申込には、それぞれ異なる役割がある
  4. ヘッダー・フッター・CTAは4ページで一貫させ、利用者が迷わない導線をつくる
  5. 安全への配慮やスタッフ紹介など保護者が探す情報は、内容に合うページへ配置する
  6. 次のLessonでは、Sora Kids案件の要件と支給素材を確認し、4ページの初稿を制作する
チェック
理解度チェック
LPとHPの役割の違いを説明できるか?
LPは1ページで1つの行動に集中させ、HPは複数ページに情報を分け、利用者が目的に応じてページを選べるようにします。
4ページそれぞれの役割を説明できるか?
TOPは入り口、スクールについては活動方針と安全・スタッフ、プログラムは活動例と料金・開催エリア、FAQ・体験申込は疑問解消と申込という役割を持ちます。
共通コンポーネントと導線を一貫させる理由を説明できるか?
ヘッダー・フッター・CTAの位置とデザインを揃えることで、利用者は今の位置と次の行動を迷わず把握できます。
保護者が探す情報をどのページに置くべきか判断できるか?
対象年齢・安全への配慮・スタッフ紹介・料金・開催エリアを、それぞれ内容に合うページへ配置します。

模擬トライアル案件
Sora Kids案件の要件確認と制作
LESSON 1-2 実践課題:HP4ページ制作 ⏱ 所要時間:約10〜14.5時間
レッスン解説動画
GOAL
このレッスンのゴール
  • 案件ブリーフの内容を4ページの制作に反映できる
  • 支給素材と必須情報を確認し、判断範囲を理解できる
  • 共通コンポーネントを一貫させたルールで各ページを制作できる
  • 避けるべき表現を守って制作できる
  • 4ページのPC・SP初稿を完成できる

Sora Kids案件では、子どもの楽しさだけを伝えるのではなく、保護者が確認したい安全・対象・費用・申込を探しやすくすることを優先します。
支給された原稿と素材を正確に使い、4ページを一貫したルールで仕上げましょう。

課題概要

項目内容
何を作るかTOP・スクールについて・プログラム・FAQ・体験申込の4ページ(PC・SP各1セット)
なぜ作るか子どもの自然体験を探す保護者に活動内容・安全配慮・参加方法を伝え、体験会申込へ導くため
誰に向けるか子どもに屋外体験をさせたい一方、安全管理やスタッフ体制を重視する保護者
サイズPC 1440px/SP 390px
所要時間約10〜14.5時間
使用ツールFigma/Illustrator/Photoshopのいずれか

Sora Kids案件ブリーフを確認する

制作に入る前に、案件の設定を確認します。

メインコピー空の下で、できた!が増える。を軸に、子どもの自然体験を探す保護者へ活動内容と安全への配慮を伝え、体験会申込へつなげます。

項目内容
スクールSora Kids(陽森市の里山フィールド、5〜10歳向け、1グループ8名まで)
料金体験会1回1,500円(税込)、通常プログラム月2回・月額12,800円(税込)
最終行動体験会申込ページへ進む
CTA体験会に申し込む
必須ページTOP/スクールについて/プログラム/FAQ・体験申込

必須掲載情報は10項目あり、全文支給・文言変更不可です。

  • 活動方針
  • 対象年齢
  • 活動例
  • 1日の流れ
  • 安全への配慮
  • スタッフ紹介
  • 料金
  • 開催エリア
  • FAQ
  • 申込導線

支給素材を確認する

今回はロゴ、サイトマップ、ワイヤー、全文原稿、活動写真、スタッフ写真、アイコン等が支給されます。
制作を始める前に、支給素材一覧で内容を確認しましょう。

コード名内容
sora_kids_logoSora Kidsロゴ(PNG/SVG)
sitemap/wireframe_pc_sp4ページのサイトマップとPC・SPの簡易ワイヤー
page_copy_full4ページ分の全文原稿
activity_photo/staff_photo/field_photo活動写真8〜10点、スタッフ写真3点、フィールド写真3点
icon_set活動内容・安全配慮・対象年齢・持ち物・アクセス用アイコン
info_sheet/area_map/brand_guide料金等の情報シート、陽森市の地図、ブランドガイド
制作前の確認事項
ファイルをすべて取得できる
制作前に不足があれば早めにコーチへ確認する
4ページ分の全文原稿を読み終えた
各ページの必須情報と文言を正確に把握するため
ロゴ・ブランドカラーの使用ルールを確認した
4ページで一貫した見た目を保つため
活動写真・スタッフ写真の利用範囲を確認した
支給範囲を超えた使用は権利上の問題につながる
サイトマップとワイヤーの情報配置を確認した
各ページの構成を独自に組み替えないため
外部素材を追加する必要がないことを確認した
支給素材だけで4ページが完成する設計になっている

デザインルールと共通コンポーネント方針

ブランドカラーと共通コンポーネントのルールを、制作前に決めておきます。

要素ルール
スカイ #72B7D6ヘッダーやCTA周辺のアクセントに使う
リーフ #6E9B63自然・成長を表す装飾やアイコンに使う
サン #F4C75BCTAボタンや注目させたい要素に使う
クラウド #F7FAF7ページ全体のベースカラーにする
ネイビー #294454本文・見出しの文字色にする
✓ Point !
共通コンポーネントは先に決める

ヘッダー(ロゴ・ナビゲーション)、フッター(連絡先・リンク)、CTAボタンの見た目と位置は、4ページの制作に入る前に1つのルールとして決めておきます。
後から各ページで個別に調整すると、一貫性が崩れやすくなります。

制作手順

次の手順で初稿を仕上げます。

  1. 全文原稿・必須情報10項目・サイトマップとワイヤーを確認する
  2. ブランドカラーの使い分け、見出し・本文のフォント、余白の基準を決める
  3. ロゴ・ナビゲーション・CTAボタンを配置し、4ページ共通のパーツとして制作する
  4. TOPページを制作する(メインコピー空の下で、できた!が増える。を軸に、活動方針と他ページへの入り口を配置する)
  5. 下層3ページを制作する(スクールについて→プログラム→FAQ・体験申込の順)
  6. CTAボタン(体験会に申し込む)の見た目・位置を4ページで揃え、PC版の情報をSP 390pxの並びに組み替える
  7. TOPから各ページへ実際に遷移し、情報の重複・欠落やナビゲーションの不整合がないか確認する

制作ヒントと避けるべき表現

制作ヒント

  • 安全への配慮・対象年齢・料金・申込導線は、ページを開いてすぐ見つかる位置に置く
  • 活動写真に文字を重ねる場合は、子どもの表情が隠れない位置を選び、文字とのコントラストを確保する
  • FAQは検索しやすいよう、質問文をそのまま見出しにする
  • 参考サイトの調査やラフ制作は任意で、制作に詰まったときの手段として使う

避けるべき表現

避けるべき表現
安全を完全に保証する表現を追加する
万が一の事故時に、実態以上の保証をしたと受け取られるリスクがある
教育効果を断定する表現を追加する
個人差のある効果を確約する表現は誇大表示になりうる
支給されていない資格・実績を追加する
事実と異なる情報の掲載は信頼を損なう
子どもの写真を支給時の利用範囲を超えて使用する
肖像権・個人情報保護の観点で問題になる
料金・対象年齢等の必須情報を変更する
クライアントが確定した条件を著者側の判断で変えてはいけない
利用条件を確認せずに外部素材を追加する
著作権・ライセンス違反につながる可能性がある

判断に迷う表現は、制作前にコーチへ確認しましょう。

初稿の完了条件と共有方法

初稿の完了条件
TOP・スクールについて・プログラム・FAQ・体験申込の4ページを作成した
必須ページがすべて揃っているかを確認する
PC 1440px・SP 390pxの両方を用意した
案件で指定された両サイズの提出が必要
必須情報10項目をすべて反映した
抜けがあると添削で差し戻しになる
ヘッダー・フッター・CTAを4ページで一貫させた
利用者が迷わず次の行動へ進めるようにするため
安全・対象・費用・申込を探しやすい位置に置いた
保護者が知りたい情報にすぐたどり着けるようにするため
禁止表現・権利上の問題がない
添削依頼の前に自分で確認しておくべき最終チェック

完成したら、コーチに共有してみましょう。
次のLessonでは、セルフチェックと添削を経て運営へ提出します。

SUMMARY
  1. 制作に入る前に、案件ブリーフと必須情報10項目を確認する
  2. 支給素材を確認し、外部素材の追加が不要であることを確かめる
  3. ブランドカラーと共通コンポーネントのルールを、4ページの制作前に決めておく
  4. 要件確認からページ間通読まで、決めた順番で制作を進める
  5. 安全を完全保証する表現や教育効果を断定する表現は追加しない
  6. 次のLessonでは、セルフチェックとコーチ添削を経て運営へ提出する
チェック
理解度チェック
案件ブリーフの内容を4ページの制作に反映できるか?
スクール設定・ターゲット・制作目的・必須情報10項目を確認し、それぞれを担当するページへ反映します。
支給素材と必須情報を確認し、判断範囲を理解できるか?
ロゴ・原稿・写真・アイコン等を確認し、必須情報の配分と共通コンポーネントの見た目がLevel 1の判断範囲であることを理解します。
共通コンポーネントを一貫させたルールで各ページを制作できるか?
ヘッダー・フッター・CTAのデザインと位置を先に決め、4ページすべてで同じルールを使います。
避けるべき表現を守って制作できるか?
安全の完全保証や教育効果の断定を避け、支給されていない資格・実績を追加せず、子どもの写真は利用範囲内で使用します。

模擬トライアル案件
セルフチェック・コーチ添削・納品
LESSON 1-3 添削から納品までの手順 ⏱ 所要時間:約2.5〜4.5時間(コーチの返信待ちを除く)
レッスン解説動画
GOAL
このレッスンのゴール
  • セルフチェックを実施できる
  • コーチへの添削依頼を準備できる
  • フィードバックを整理し、優先順位をつけて修正できる
  • 納品フォームの指定を確認し、完成データを提出できる

初稿完成から運営への提出までは、セルフチェック→添削依頼→フィードバック確認→修正→再確認→運営提出という流れで進みます。
このLessonでは、その一つひとつの手順を確認します。

完成イメージ

このLessonの完成イメージは、次の流れをすべて終えた状態です。

Step1:セルフチェックを行う

コーチへ添削を依頼する前に、次の6項目を自分で確認しましょう。

セルフチェック
ページごとの目的が明確になっている
各ページが何を伝えるためのページかが一目でわかるか
ナビゲーションとCTAが全ページで一貫している
利用者が迷わず行動できる導線になっているか
対象年齢・料金・安全情報・開催場所を探しやすい
保護者が知りたい情報にすぐたどり着けるか
共通パーツのサイズ・余白・色が統一されている
4ページ全体で見た目に一貫性があるか
PC・SPで情報の欠落がない
サイズ変換の過程で必須情報が抜け落ちていないか
写真の権利・個人情報に配慮した
支給範囲を超えた使用がないか

Step2:添削依頼を準備する

制作物だけでなく、次の内容を添えて添削を依頼しましょう。

項目記入欄
使用ツール
制作時間
制作目的
工夫した点
迷っている点
セルフチェック

入力内容はこのブラウザに保存され、次回このページを開いたときに復元されます。別の端末・ブラウザからは見れず、キャッシュをクリアすると消えてしまうため、大事な内容はメモやNotionにも控えておくと安心です。

Step3:コーチへ添削を依頼する

添削依頼の心得
最低1回は添削を受ける
セルフチェックだけで提出すると気づけない問題が残る
指定された連絡場所・提出方法を使用する
コーチが対応しやすい形で依頼する
判断を丸投げせず、制作意図と迷っている点を整理して伝える
コーチが的確なフィードバックを返しやすくなる
受け取った指摘を、目的・優先度・修正内容に分けて理解する
何から直すべきかを自分で判断できるようにする
Q
確認クイズ
コーチから複数の指摘を受けました。最初に対応すべき指摘はどれでしょうか。
正解です!
指摘は目的・優先度・修正内容に分けて整理し、優先度が高いものから対応します。
惜しいです!
修正量の少なさや対応しやすさではなく、優先度で判断します。

Step4:フィードバックを整理して修正する

受け取ったフィードバックは、次のように整理すると修正しやすくなります。

項目記入欄
指摘内容
指摘の目的
修正する内容
優先度
対応状況

指摘が複数ある場合は、この表をコピーして1件ずつ記録してください。優先度が高いものから修正し、指摘の意図が分からない場合は修正前に質問しましょう。指摘された箇所だけでなく、関連する箇所も確認し、修正によって別の要件が崩れていないかを再確認してください。

Step5:修正後の再チェック

修正が終わったら、次の項目を確認してからコーチへ再確認を依頼します。

修正後の再チェック
指摘内容をすべて確認した
対応漏れを防ぐ
対応しなかった指摘は理由を説明できる
コーチへの再確認時に説明できるようにする
必須情報10項目が崩れていない
修正によって必須情報が欠けていないかを確認する
ナビゲーション・CTAの一貫性が保たれている
修正で導線が崩れていないかを確認する
PC・SPの両方で再確認した
片方だけの修正で終わっていないかを確認する
禁止表現・権利上の問題がない
提出前の最終チェックとして必ず確認する
コーチから運営へ提出可能との判断を受けた
自己判断だけで提出しない

Step6:納品フォームの確認と提出

データ形式、ファイル名、ファイル容量、提出項目等は、納品フォームの最新指定を正としてください。
提出前に、次の項目を確認しましょう。

提出前の確認事項
納品フォームに記載された最新条件を読んだ
教材本文と異なる場合は納品フォームの指定が優先される
指定された完成データを用意した
形式やファイル名が指定と異なると再提出になる
ファイルが開けることを確認した
破損データでの提出を防ぐ
必要な記入項目を確認した
記入漏れによる差し戻しを防ぐ
コーチから運営提出可能の判断を受けている
自己判断だけで提出しない

提出時は、送信前に入力内容と添付ファイルを確認し、送信完了画面または提出完了の表示を確認してください。
提出後は運営の完了確認を待ちます。

合格後に実践想定案件へ進む

納品フォームから提出したあとは、運営が提出内容を確認し、修正依頼があれば対応します。
完了確認を受けたら、実践想定案件一覧を確認し、現在のスキルと受講期間で完成できる案件を1件選びましょう。

実践想定案件へ進む条件
提出しただけで次の案件を開始しない
運営の完了確認を待たずに進めると、修正依頼への対応が後回しになる
運営の完了確認後に実践想定案件へ進む
模擬トライアル案件の合格を確認してから次に進む
模擬トライアル案件と同じHPカテゴリを選ぶと、今回の学習を活かしやすい
直前に身につけた判断基準をそのまま活用できる
別カテゴリを選ぶ場合は、対応する学習コンテンツの完了を確認する
カテゴリごとに必要な前提知識が異なる
複数案件を同時進行しない
1件ずつ丁寧に仕上げることで、品質と納期の両方を守れる
よくあるつまずき Q&A
コーチから複数回の修正を求められた場合、何回まで対応すればよいですか。
回数の上限は決まっていません。運営へ提出可能という判断を受けるまで、必須情報の一貫性を保ちながら修正を続けます。
セルフチェックで直せない項目が残っている場合、添削を依頼してもよいですか。
依頼できます。自分で判断に迷っている点として整理し、添削依頼のワークシートに記入して伝えましょう。
納品フォームの指定が教材本文の説明と違う場合、どちらに従えばよいですか。
納品フォームに記載された最新の指定に従ってください。教材本文は固定の詳細を重複掲載していません。
SUMMARY
  1. コーチへ依頼する前に、6項目のセルフチェックを行う
  2. 添削依頼には、制作物に加えて制作目的・工夫した点・迷っている点を添える
  3. フィードバックは目的・優先度・修正内容に分けて整理し、優先度が高いものから対応する
  4. 修正後は必須情報とナビゲーションの一貫性を再確認し、コーチから提出可能の判断を受ける
  5. 納品フォームの最新指定に沿って完成データを提出し、運営の完了確認を待つ
  6. 完了確認を受けてから、現在のスキルで完成できる実践想定案件を1件選ぶ
チェック
理解度チェック
セルフチェックを実施できるか?
ページの目的、ナビゲーション・CTAの一貫性、探しやすさ、共通パーツの統一、PC・SPの欠落、写真の権利配慮の6項目を確認します。
コーチへの添削依頼を準備できるか?
使用ツール・制作時間・制作目的・工夫した点・迷っている点を整理し、制作物と合わせて依頼します。
フィードバックを整理し、優先順位をつけて修正できるか?
指摘内容・目的・修正する内容・優先度・対応状況を記録し、優先度が高いものから修正します。
納品フォームの指定を確認し、完成データを提出できるか?
納品フォームの最新条件を読み、指定された完成データを用意して、コーチから提出可能の判断を受けたうえで提出します。