宿泊施設サイトデザイン・実装を制作・納品する
実践案件
宿泊施設サイトデザイン・実装を制作・納品する
LESSON 実践課題:宿泊施設サイトデザイン・実装制作・納品 ⏱ 所要時間:約22〜30時間(コーチ・運営の返信待ちを除く)
レッスン解説動画
GOAL
このレッスンのゴール
  • 挑戦条件を確認し、コーチの承認を得て制作に着手できる
  • 案件要件(目的・ターゲット・料金と規約・予約フォームの入力設計)を読み取れる
  • 支給素材を使って体験型サイトの回遊設計と予約フォームを実装できる
  • セルフチェックとコーチ添削を経て、運営へ納品できる
  • 検収完了後の制作物の扱いを理解している

この実践案件では、挑戦条件の確認から制作、コーチ添削、運営への納品、検収完了までを、この1つのレッスンの中で進めます。
各セクションの手順どおりに進めれば、納品・検収まで一つずつ完了できます。

挑戦できるか確認する

制作を始める前に、次の7つの条件を満たしているか確認してください。

挑戦条件
トライアル案件を最低1件完了している
実案件と同じ進め方を一度経験してから臨むための前提条件です。
Figmaによるデザインと、HTML・CSS・JavaScriptのコーディングの学習コンテンツを完了している
デザインから実装まで一貫して制作できる状態にしておくためです。
制作環境(ツール・フォント・作業ファイルの保存先)が用意できている
着手後に環境準備で時間を使わないようにするためです。
想定時間(22〜30時間)を確保できる
日付・人数を含む予約フォームの実装を含むため、添削・修正の往復を含めて時間に余裕を持たせるためです。
コーチ添削と修正対応の往復を含めて進められる
指摘を反映してから納品する流れが前提になっているためです。
支給素材を案件以外で使用しないことを理解している
支給素材のライセンスは、この案件の学習目的に限定されているためです。
提出後の修正依頼に対応する意思がある
運営の検収が完了するまでは対応が必要になるためです。

同じHPデザイン+実装カテゴリーへの挑戦を推奨しますが、必須ではありません。
条件を満たしたら、Slackの「C」から始まる受講生チャンネルでコーチをメンションし、挑戦の許可を申請してください。

Slackメンション例文

@コーチ
実践案件「P28|フォレストステイ|宿泊施設サイトデザイン・実装」への挑戦を希望します。

・完了済み案件:(案件名)
・制作環境:(使用ツール)
・着手予定日と完了予定日:(日付)

この実践案件へ挑戦しても問題ないでしょうか?

上記の例文をコピーして送信してください。

! 注意
承認前には制作を開始しない

コーチから挑戦の承認を受けるまでは制作に着手しないでください。
承認されなかった場合は、コーチから指定された学習コンテンツを修了し、改めて申請してください。

案件要件を読み取る

承認を受けたら、次の順番で案件要件を読み取ります。

  1. 目的・ターゲット・問い合わせ行動を確認する
  2. 料金・規約を変更不可情報として整理する
  3. 4ページの回遊導線と予約への流れを決める
  4. 日付・人数・客室を含むフォームの入力設計を検討する
  5. 眺望や設備について支給外の表現を追加しない

案件のプログラム設定・ターゲット・トンマナ・必須掲載情報・支給素材は、教材内の支給素材ページで確認できます。

制作する

要件整理→サイトマップ設計→ワイヤー作成→デザイン→実装→予約フォームの実装→レスポンシブと表示確認→セルフチェックの順で進めます。料金・キャンセル規定は見落とされない位置に配置してください。

追加してはいけない表現
支給されていない眺望の描写(例:全室から満点の星空が見える)
支給された施設・自然写真にない眺望を断定的に加えないためです。
支給されていない設備(例:全棟にサウナ完備)
根拠のない設備情報は、予約後のトラブルにつながるためです。
料金・キャンセル規定を目立たない位置に配置すること
予約前に確認すべき変更不可情報が見落とされないようにするためです。
✓ Point !
予約フォームの入力設計に迷ったら

「WEBデザイン・イントロダクション」と、使用ツールの学習コンテンツを復習してください。
解決できない場合は、試したことを整理してコーチへ相談しましょう。

セルフチェック・添削・納品

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

セルフチェック
目的に沿うサイト構成になっている
宿泊予約の問い合わせ獲得という目的に沿って、客室・過ごし方から予約への流れが組まれているかを確認します。
デザインと実装が整合している
Figmaデザインとコーディング結果の見た目・余白・文字サイズが一致しているかを確認します。
レスポンシブ表示が崩れない
PC・SPの主要な画面幅でレイアウトが崩れないかを確認します。
回遊・CTA・フォーム導線が動作する
「空室問い合わせをする」ボタンと、日付・人数・客室を含む予約フォームが正しく動作するかを確認します。
公開状態と更新性を確認している
公開URLとソースデータ一式が指定形式で整理され、公開できる状態かを確認します。
必須情報の抜け・誤字・数値の誤りがない
ロゴ・客室情報・料金18,000円〜・設備と体験内容・アクセス・注意事項・キャンセル規定・予約問い合わせフォームの8項目を1つずつ照合します。
根拠のない効果・実績・比較表現がない
前セクションの「追加してはいけない表現」と照らして確認します。
支給素材・外部素材・フォントの利用条件を確認した
商用利用条件・クレジット表記の要否を確認します。
指定仕様・納品形式・閲覧権限を満たしている
PC・SP対応のレスポンシブ仕様と、公開URL・ソースデータ一式という納品形式に合っているかを確認します。

セルフチェック後、コーチから最低1回添削を受けてください。
指摘を反映し、コーチから運営提出の許可を得てから納品します。

運営から修正依頼があれば対応し、必要に応じてコーチの確認を受けて再提出してください。
運営の検収完了までは、次の案件へ進みません。

検収完了後

検収が完了したら、制作物と制作意図をポートフォリオに記録しましょう。記録する内容は、案件の目的、ターゲット、自分が判断した点、添削で改善した点の4つです。

次の案件を選ぶときは、同じカテゴリーで難しさを上げるか、別カテゴリーで幅を広げるかをコーチと相談して決めましょう。

SUMMARY
  1. 制作前に挑戦条件7項目を確認し、Slackでコーチの承認を得てから着手する
  2. 目的・ターゲット・問い合わせ行動・料金と規約・4ページの回遊導線・予約フォームの入力設計の順で案件要件を読み取る
  3. 要件整理→サイトマップ設計→ワイヤー作成→デザイン→実装→予約フォームの実装→レスポンシブと表示確認→セルフチェックの順で制作する
  4. 支給されていない眺望の描写・設備、目立たない位置の料金・キャンセル規定は避ける
  5. セルフチェック後、コーチから最低1回添削を受け、運営提出の許可を得てから納品する
  6. 運営の検収完了後にポートフォリオ記録が可能になり、次の案件選びをコーチと相談する
CHECK
理解度チェック
挑戦条件を確認し、コーチの承認を得て制作に着手できるか?
7つの挑戦条件をすべて満たしていることを確認し、Slackでコーチへ申請して承認を受けてから制作を始めます。
案件要件を正しく読み取れるか?
目的・ターゲット・問い合わせ行動、料金・規約、4ページの回遊導線、予約フォームの入力設計、支給外の表現を追加しない注意点を順番に整理します。
支給素材を使って体験型サイトと予約フォームを制作できるか?
要件整理→サイトマップ設計→ワイヤー作成→デザイン→実装→予約フォームの実装→レスポンシブと表示確認→セルフチェックの順で進め、料金・キャンセル規定を見落とされない位置に配置します。
セルフチェック・添削・納品・検収の流れを理解しているか?
セルフチェック後にコーチから添削を受け、運営提出の許可を得てから納品し、運営の検収完了を待ってから次に進みます。