挑戦前チェック

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

• Webデザイン系教材を1つ完了している
• Wix・WordPress・HTML/CSS/JavaScriptのいずれか1つの実装系教材を完了している
• 選んだ実装方法で、複数セクションを持つページを公開できる
• 色、フォント、余白をデザインと実装の両方で調整できる
• PC・SPの2サイズでレイアウトを展開・実装できる
• 制作から添削・修正・運営提出までを受講期間内に完了できる
• 現在進行中の模擬トライアル案件・実践想定案件がない
• 過去の案件がある場合、納品と運営確認が完了している

高品質なLPを判断する5つの軸

LPの完成度は、次の5つの軸で判断します。

共感→理解→安心→行動の流れ

バナーと異なり、LPは1画面では完結しません。
見込み客はスクロールしながら、次々に生まれる疑問への答えを探します。Herbelle案件のターゲットは、落とし心地と使いやすさを重視してスキンケア用品をECで探している人です。

必須セクションは、次の4段階に対応させて考えます。

デザインと実装、レスポンシブの判断基準

デザインで決めた色・フォントサイズ・余白の数値は、実装時のスタイル設定にそのまま反映します。
感覚での調整に頼ると、見た目が少しずつずれていきます。制作中は、次の6項目で判断しましょう。

• ブレークポイントを数値化している（例：768px未満をSP扱いにする）
• 見出し・カード・ボタン単位でデザインと実装の対応が取れている
• 商品画像・植物素材の縦横比を変更していない
• フォントサイズ・行間を実装側の初期値で上書きしていない
• 複数カラムの要素は、SPで縦積みにしたときの順序を決めている
• PCとSPを別画面ではなく、1つのレイアウトの変化として作っている

公開前テストと制作に詰まったときの対処

公開前に確認する

デザイン・実装が完成したら、実際に動かして確認します。
見た目の確認だけでは、リンク切れや読み込み遅延には気づけません。見出し階層・代替テキスト・コントラストといったアクセシビリティの基本も、この段階で必ず確認してください。

参考LPを調べる場合

スキンケア・クレンジング商品の複数例を見て、1つのデザインをそのまま模倣しないようにします。
セクション順、商品写真の見せ方、CTAの位置を分けて観察し、どの要素を参考にしたいかを言葉にしておきましょう。

ラフを作る場合

紙または制作ツールで、セクションの並び順とCTAの位置だけを整理します。
細かな装飾や色を決める前に情報の順序を確認し、1案で決まらない場合は簡単な配置案を2〜3案作って比較してください。

制作方針メモ

ここまでの内容を使って、制作方針を言葉にしておきましょう。提出や合否判定はありません。

案件ブリーフを確認する

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

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

• Herbelleのブランドロゴ
• Herb Dew Cleansing Balm
• 一日の終わりを、やさしくほどく。
• 90g／3,480円（税込）
• 配合成分の説明（支給範囲のみ）
• 使用方法・注意事項
• CTA：商品をチェック

必須セクション（FV／悩み／商品特徴／テクスチャ／使い方／配合成分の説明／商品情報／利用者コメント／FAQ／購入CTA）の見出し・補助コピー・一部構成は、支給情報の範囲内で判断できます。

支給素材を確認する

今回支給されるのは、ロゴ、簡易構成案、商品画像5点、植物・背景素材4点、商品情報シート、成分説明シート、ブランドガイド・実装要件、購入ページURL、利用条件です。
制作を始める前に、次の項目を確認しましょう。

• ファイルをすべて取得できる
• 簡易構成案が示すセクション順を確認した
• LP全文原稿・商品情報・成分説明を確認した
• ブランドカラー・フォント・実装要件を確認した
• 購入ページURLを確認した
• 外部素材を追加する必要がないことを確認した

制作ノウハウをHerbelle案件に活かす

一般的なLP制作のポイントを、今回の案件へ次のように当てはめます。

制作前に決めること

制作に入る前に、次の6点を決めておきましょう。

• FVで最も強く見せる要素（コピー／価格／写真のどれを主役にするか）
• 悩みセクションの見出し・補助コピーの表現
• テクスチャ・使い方の見せ方
• 利用者コメントの見せ方
• FAQの項目立て
• ブレークポイントと実装方法

制作手順と制作ヒント

次の手順で初稿を仕上げ、公開まで進めます。

1. デザインルール（配色・フォントサイズ・余白・ブレークポイントの数値）を決める
2. PCデザインを制作する（FV、悩み〜配合成分の説明、商品情報〜FAQ、購入CTA）
3. コーチへ方向性確認を依頼する
4. 実装環境を準備する（選んだ実装方法の編集環境、支給画像・フォントの取り込み）
5. セクションを実装する（デザインの数値をそのまま反映する）
6. レスポンシブを実装する（SPへ展開し、縦積みの順序・文字サイズ・CTAの押しやすさを確認する）
7. リンク・メタ情報を設定する（CTA・ページ内リンク、代替テキスト、タイトル・description、画像最適化）
8. 表示テストを行う（誤字、価格、成分表記、購入URLを確認する）
9. 初稿を公開する

制作ヒント

• メインコピー「一日の終わりを、やさしくほどく。」を軸に、商品名・価格・CTAを競合させず整理する
• 商品画像・テクスチャ・使用方法を主役にし、装飾を増やしすぎない
• 利用者コメントは体験談として扱い、一般的な効果を保証するような見出しや装飾を加えない
• 使い方のステップはすべて同じ強さで見せ、特定のステップだけを誇張しない
• 配合成分の説明では、支給されていない効能・比較優位を独自に作らない
• PCデザインの初稿ができた時点で、実装へ進む前にコーチへ方向性を確認する

法律・広告表現上の注意

次に当てはまることをしないよう、制作中に確認してください。

• 治療・改善・デトックス等、効果を医療的に断定する
• 効能を保証する表現を追加する
• 根拠のない「オーガニック」「無添加」「No.1」等を追加する
• 支給されていない数値・実績・比較優位を追加する
• ロゴの色や縦横比を変更する
• 商品写真・植物素材の色味を不自然に変更する

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

初稿完成条件

提出前に、次の条件をすべて満たしているか確認してください。

• PC・SPのレスポンシブLPとして公開できる状態にした
• 全必須セクションを含む
• 支給された全文原稿・数値をそのまま使用した
• ブランドロゴを正しく使用した
• 自然、静けさ、上質、透明感のトンマナになっている
• 共感→理解→安心→行動の順序が保たれている
• CTAの文言・見た目がFVと購入CTAで統一されている
• レスポンシブ・リンク・画像最適化・hover・メタ情報の必須機能を備えている
• 禁止表現・権利上の問題がない
• 公開URLを確認した

提出前セルフチェックと主要端末での検証

コーチへ添削を依頼する前に、次の観点で公開したLPを確認しましょう。

デザイン・実装・表現

• デザインと実装の情報・見た目が整合する
• PC・SPで横スクロールや重なりがない
• CTA・ページ内リンクが正しく動く
• 画像が適切な品質・容量で表示される
• 見出し階層・代替テキスト・コントラストに配慮した
• 商品・価格・広告表現に誤りがない

主要端末での検証

• PCブラウザとスマートフォンの両方で実機表示を確認する
• 画面幅を変えながらブレークポイント前後の崩れがないか確認する
• CTA・ページ内リンクをすべてクリックし、遷移先が正しいか確認する

コーチへの添削依頼を準備する

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

添削を依頼し、フィードバックを整理する

コーチへの添削依頼では、次の点を意識してください。

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

修正後の再チェック

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

• 指摘内容をすべて確認した
• 対応しなかった指摘は理由を説明できる
• 必須セクションと4段階の順序が崩れていない
• PC・SPともに主要端末で再検証した
• 誤字、価格、成分表記、購入URL、ロゴを再確認した
• コーチから運営へ提出可能との判断を受けた

納品フォームの確認と運営への提出

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

• 納品フォームに記載された最新条件を読んだ
• 指定された完成データを用意した
• 公開URLが正しく開けることを確認した
• 必要な記入項目を確認した
• コーチから運営提出可能の判断を受けている

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

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

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

• 提出しただけで次の案件を開始しない
• 運営の完了確認後に実践想定案件へ進む
• 模擬トライアル案件と同じLPカテゴリを選ぶと、今回の学習を活かしやすい
• 別カテゴリを選ぶ場合は、対応する学習コンテンツの完了を確認する
• 複数案件を同時進行しない