実技 ECサイトデザイン実習④ 2025年11月29日

講師：穐谷　薫　先生

-本日のアジェンダ-

本日のテーマ

早速作ってみましょう。

制作のポイント

情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。

ワンポイントアドバイス

ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。

本日の課題

白黒のワイヤーフレームを作成し5限目までにWordPressにUPしてください。
今日できたところまでで大丈夫です

---

① つかみ ― 静かな夜に寄り添う香り（LP冒頭）

一日の終わり、ふっと深呼吸したくなる瞬間。
甘いスエードとシダーウッドが混ざり合い、
バニラとムスクの余韻がそっと心を整えてくれる。
ジェントルナイトは、静けさの中で自分に戻るための、夜に寄り添うハンドローションです。

---

② 説明（5W1H）― 商品の全体像をやさしく

When（いつ）： 帰宅後のリラックスタイム、眠る前のルーティンに
Where（どこで）： 自分の部屋、ベッドサイド、旅先のホテル
Who（誰に）： 自分の時間を大切にしたい大人、香りでスイッチを切り替えたい人
What（何を）： ジェントルナイト ハンドローション
Why（なぜ）： 甘さと落ち着きを両立した中性的な香りで、気持ちがゆるむ
How（どう使う）： 少量を手に取り、手首や腕に伸ばしながらゆっくり香りを感じる

甘いスエードと落ち着いたシダーウッドに、バニラとムスクがそっと重なる中性的な香り。
帰宅後や眠る前に使うことで、気持ちがゆっくりと整い、自分だけの静かな時間にふわりと
寄り添ってくれます。

---

③ 魅せる（PRポイント3つ）

● 1. 中性的で上品な「夜の香り」

甘さと深みが絶妙に重なるジェントルナイトは、
性別を問わず使える上品なニュアンスが魅力。

● 2. 軽く伸びてしっとり馴染むテクスチャー

軽いテクスチャーでベタつかず、
寝る前でもスマホを触れるほどの快適さ。

● 3. 夜を整える、小さなリチュアル

香りがゆっくり変化していき、
自分だけの落ち着く「夜の儀式」になる。

---

④ 目的（CTA）― 行動へつながる最後の誘導

香りで夜の時間をととのえる。
あなたの部屋に、静かなジェントルナイトを。

✔ カートに入れる（大ボタン）
✔ 香りの詳細を見る（サブリンク）

---

LP４つの柱
1）つかみ（世界観 × 興味のドア）

読む人の感情のスイッチを入れる部分。
ここで「気持ちよさ」や「美しさ」で惹きつける。

2）説明（理解のゾーン）

“なに？” “だれ向け？” “どんな香り？”

3）魅せる（欲しい理由）

メリットじゃなくて、“感覚のよろこび”。

4）目的（行動ポイント）

買う、問い合わせる、SNSへ誘導…
ゴールへの一本道。