教室に通ったことがない人に、体験レッスンへ申し込んでもらうためのLPです。 料金より「浮かないか」「勧誘されないか」が障壁だと考え、不安を先に消す構成にしました。 ■ 制作概要 案件区分：架空案件 クライアント設定：自宅サロンで少人数のアロマ・ハーブティー教室を開く個人講師 担当範囲：要件整理／デザイン／コーディング／素材選定／装飾イラスト制作 使用ツール：Figma、HTML / CSS / JavaScript、生成AI（Claude） 仕様：PC 1440・タブレット 768・SP 375（レスポンシブ） 制作期間：デザインからコーディングまで1日 ■ 対応できること ・レスポンシブ（スマホ / タブレット / PC） ・コーディング（HTML / CSS / JavaScript） ・クリック時の演出（SVGをJavaScriptで生成。画像ファイルを増やしません） ・サイズ違いの展開、文言の変更 ・Figmaのレイヤー名をクラス名に揃えた、コーディング用デザインカンプの作成 ■ 素材について 写真：Unsplash / Pexels（商用利用可） 講師イラスト：Canva AI生成 Instagramアイコン：Meta公式グリフ（改変なし） 装飾モチーフ7点：自作（SVG） 地図：架空案件のため、仮の位置として東京駅を表示しています。 ■ 制作の進め方について 何をどう見せるかの判断は、すべて自分で行っています。 誰のどんな不安に向けるか、情報をどの順番で並べるか、どの色を使い、どの写真を選ぶか。 そのうえで、カンプの作成やコーディングなど手を動かす工程で、生成AI（Claude）を併用しました。 コーディングはスクールと独学でも学んでいますが、お客様をお待たせしないための手段として使っています。 そのため、デザインからコーディングまでを1日で仕上げています。 実案件では、ヒアリングと内容の整理、制作途中のご確認を含めて、納品まで4日ほどをいただく想定です。 AI生成の画像をお使いになれない場合もありますので、素材の扱いは着手前に必ずご相談させてください。 どう考えて設計したか、途中で何につまずいたかは、制作ノートに書きました。 制作ノート→https://foriio.com/azm-suzuki/wk_AaCCyM462Z5V3wG2zM4kte2DlmxyIEJLXICIC7M4ubKGBElx5A/notes/55991