アロマとハーブティー教室の体験レッスンLP｜架空案件

自宅サロンで少人数のアロマ・ハーブティー教室を開く個人講師、という設定で作った架空案件です。

体験レッスンへの申し込みをゴールに、PC・タブレット・スマホのデザインとコーディングまでを担当しました。

【画像】01_全体.png

■ 何を課題と見立てたか

「申し込ませる」より前に、「怖くなくする」ことを優先しました。

教室に通ったことがない人にとっての障壁は、料金ではないと考えたからです。

「ひとりで行って浮かないか」「そのまま高い講座に勧誘されないか」。

このような不安を抱える方にも気軽にきてもらえるようなサイトになるように気をつけました。（架空クライアントの意図から）

ターゲットは、30〜40代でひとり時間を後回しにしがちな女性。

習い事に興味はあるけれど「続けられる自信がない」と感じている人を想定しています。

【画像】03_共感.png

■ 情報の順番をどう決めたか

共感 → できること → 当日の流れ → 教えている人 → 概要 → よくある質問 → 申し込み の順にしました。

「何が手に入るか」より先に「今こうなっていませんか」を置いています。

ターゲットは商品を探している状態ではなく、なんとなく気になっている状態だと想定したためです。

料金や場所より先に「教えている人」を置いたのも、同じ理由です。

個人の教室では、条件より人が決め手になると考えました。

よくあるご質問には「講座の勧誘はありますか」を入れています。

最初に見立てた不安を、申し込みボタンの手前で消しておくためです。

【画像】05_教えている人.png

■ 色をどう決めたか

純白と黒を避け、すべて茶寄りに寄せました。

白と黒は清潔ですが硬く、「肩の力が抜ける」という主旨と合わないためです。

アロマの定番色である紫は、あえて外しました。

アクセントのテラコッタとぶつかって濁るためです。写真選定でも、紫の入ったカットを不採用にしています。

【画像】08_配色.png

■ 装飾は、形を変えて質感で揃えた

見出しの上に置く植物モチーフを、6セクションすべて違う植物にしました。

線の太さと色は共通なので、形が違っても散らかりません。すべてSVGで自作しています。

最初は花びらを細く描いたのですが、小さく使うとアスタリスクに見えました。

花びらを丸くして塗りを入れたところ、花として読めるようになりました。

【画像】09_装飾モチーフ.png

■ 3案つくって、1案を選んだ

ページの高さは約6,100px、PCで約6画面分あります。

途中で申し込みたくなった人が、最後までスクロールするか一番上に戻るしかない状態でした。

そこで追従ヘッダーを置いたのですが、CTAの見せ方で迷いました。

・塗りボタン … ファーストビューでCTAが2つ並び、重複して見える

・CTAなし … 静かだが「途中で申し込めない」という当初の課題が未解決のまま

・枠線ボタン ← 採用

枠線なら、ファーストビューでは下の塗りボタンが主役のまま、スクロール後も導線が残ります。

【画像】07_比較_ヘッダーCTA3案.png

ファーストビューの料金ボックスでも同じことをしました。

幅448pxに対して中身が248pxしかなく、右に約170pxの余白が残って間延びしていたためです。

幅を中身に合わせた結果、下のCTAボタン（320px）とほぼ同じ幅になり、縦のラインが揃いました。

【画像】10_比較_FV要点3案.png

■ つまずいたこと、3つ

1. 写真のトーンが揃っていないと、配色をどれだけ詰めても崩れる

最初は手持ちの3枚をあてようとしましたが、トーンがばらばらで、うち1枚は紫が強くテラコッタとぶつかっていました。

「暖色寄り・低彩度・自然光」の3条件を決めて4枚まとめて選び直し、写真を1セットの素材として扱うようにしました。

2. 文字を大きくしたら、見出しが3行に割れた

本文を15pxから18pxに底上げしたところ、ファーストビューの見出しが「すっと抜ける90 ／ 分。」と割れました。

日本語の見出しは「1行の文字数 × 文字サイズ × (1+字間)」で上限が決まります。

いちばん長い行から逆算して、収まるサイズに設定し直しました。

3. カンプで収まっていても、ブラウザで同じとは限らない

同じ見出しが、コーディングすると今度はブラウザで3行になりました。

実測すると描画幅が452pxで、テキスト枠448pxを4px超えていました。

Figmaとブラウザのフォント描画は完全には一致しません。ぎりぎりの行は、実測して確かめるようにしています。

【画像】04_90分でできること.png

■ スマホでは、ヘッダーからCTAを外した

3リンク程度のためにハンバーガーメニューを開かせるのは手数が多いと判断し、

ヘッダーは屋号とSNSだけにして、ファーストビューを過ぎたら画面下に固定のCTAバーを出すようにしました。

【画像】06_レスポンシブ_3幅.png

■ AIをどこで使ったか

この制作では生成AI（Claude）を併用しています。隠さずに書いておきます。デザインとコーディングで使い方が違うので、分けて書きます。

＜コーディング＞

しっかり使っています。理由は3つです。速いこと。ミスが少ないこと。自分ひとりでは難しい動きもつけられること。クリック時に花びらが散る演出も、画像を1枚も増やさずJavaScriptで実現しています。

ただし、書けたものをそのまま出すことはしません。納品前にコードを目で追って確認します。おかしな書き方が残っていないか、動きに誤作動がないか。実際の挙動も自分で確かめます。

＜デザイン＞

この作品は、ポートフォリオを早く形にしたい気持ちが強く、カンプの組み立てをAIに任せた部分があります。出てきたものを見て、気に入らないところは自分で直し、どう直すかの相談にもAIを使いました。そこは正直に書いておきます。

ご依頼をいただく場合は、進め方が変わります。ヒアリングでお話をうかがい、いただいた素材を見て、レイアウトや色のイメージをご相談する。そこから手書きで考えて、Figmaにざっくり形にする。ここは自分の手を動かします。AIを使うのは、そのあとの細かいバランス調整や、レイヤー名・グループの整理です。

そうしているのは、いちばん時間をかけるべきところが、そこではないからです。紫を外したことも、ヘッダーのCTAを枠線にしたことも、お話をうかがわないと決められません。

＜素材＞

お客様のものは、お客様の作品です。写真やイラストは、基本的に生成AIを使いません。ご希望があれば使います。いただいた素材をもとに制作し、葉っぱや模様のような小さな飾りだけ、フリー素材・手書き・AI生成から、そのとき合うものを選びます。

この作品は自分のポートフォリオなので、講師のイラストはCanvaのAI生成にしています。写真はUnsplash / Pexelsのフリー素材で、装飾モチーフ7点はSVGで自作しました。

＜制作期間＞

この作品は、デザインからコーディングまで1日で仕上がりました。実案件では、ヒアリングと内容の整理、制作途中のご確認を含めて、納品まで4日ほどを見込んでいます。

■ 振り返り

いちばん時間をかけたのは、装飾でも配色でもなく「何を不安に思っている人に向けるか」を決めるところでした。

そこが決まってから、情報の順番も、色も、CTAの強さも、迷わずに決められるようになりました。

架空案件なのでヒアリングはできませんでしたが、実案件では最初にここを聞くことになります。