プロンプトを編集

タイトル必須19 / 120

本文必須1,315 文字

添付画像を、LPの完成ビジュアル設計図として扱ってください。 この画像をもとに、HTML/CSS/JSで可能な限り忠実に再現してください。 最重要： 画像をそのまま1枚貼るのではなく、実際のWebページとして再構築してください。 ただし、画像内の文字が崩れている場合でも、デザイン上の文字配置・サイズ・余白・雰囲気は尊重してください。 実際に表示する文章は、既存LPの正式テキストに置き換えてください。 成果物はプロデザイナーwebアワード受賞級であること。 作業手順：

1. まず添付画像を詳細に分析してください。
   * 全体の世界観
   * 色
   * フォントの雰囲気
   * 余白
   * セクション構造
   * カードUI
   * ボタン
   * 背景表現
   * 3D/浮遊UI
   * 光、影、ぼかし、奥行き
   * PC/スマホで再現すべき要素

2. 画像をセクション単位に分解してください。
   * Hero
   * 3D artifact section
   * For whom
   * Trust/profile
   * 10 bonus files
   * Flow
   * FAQ
   * Final CTA

3. 既存LPの文章・特典内容・FAQ・LINEリンクは消さずに使ってください。 画像内の崩れた文字は参考にせず、既存テキストを正式文言として配置してください。

4. CSSでデザインを再現してください。
   * 色はCSS変数化
   * 余白、角丸、影、境界線、ぼかしを丁寧に再現
   * 画像の"雰囲気"ではなく、構図と階層を再現
   * 文字が背景から浮かないように、セクションごとの背景・パネル・光を一体化

5. JSで動きを追加してください。
   * 3Dカード回転
   * マウスドラッグ
   * スマホタッチドラッグ
   * スクロールリビール
   * 控えめなパララックス
   * CTAフィードバック
   * スマホでは軽量化

6. 画像アセットを最適化してください。
   * WebP化
   * lazy loading
   * fetchpriority
   * width/height指定
   * スマホでは重いWebGLを避ける
   * PCではリッチ、スマホでは軽く滑らか

7. レスポンシブ対応をしてください。
   * PC
   * タブレット
   * スマホ
   * 390px幅
   * 横はみ出しなし
   * CTAがスマホ初期表示で見える
   * 3Dカードがスマホで詰まりすぎない

8. 実装後に必ず検証してください。
   * PCスクリーンショット
   * スマホスクリーンショット
   * コンソールエラーなし
   * 画像切れなし
   * LINEリンク維持
   * 横スクロールなし
   * スマホ初期表示が遅延しない
   * 3Dカードがスマホで指ドラッグできる

完成後、変更内容と検証結果を簡潔に報告してください。

説明メモ（任意）48 / 300

タグ（任意）3 / 12

LPデザイン開発

既存のタグ（押すと付きます）

キャンセル