プロンプト全文を見るRead the full prompt
Lancloの完成見本と同じ、イラストとアニメーションで伝える英語発音学習LPを作って、ブラウザで開いてください。提案書で終わらず、動くページまで仕上げてください。
【完成見本と材料】
公開キット：https://github.com/ted-M-tech/tetsuya-creative-motions
固定版：lanclo-lp-create-v3
対象：projects/lanclo-lp/source
素材・ライセンス：projects/lanclo-lp/CREDITS.md
完成ソース、依存関係のlockfile、ロゴ、イラスト、写真、3言語の文章を、この固定版から使ってください。外部サイトの見た目を推測して作る必要はありません。
【作るページ】
ブランドはLanclo。落ち着いた青、クリーム、ミントを使い、読みやすい日本語と大きな見出しで構成します。
・ヘッダーとヒーローを同じ青でつなぐ。「自分の声が、ネイティブのお手本に。」を主役にする。
・録音→自分の声のお手本→聴いて発音する、の3ステップを横並びのイラストと連続する動きで見せる。
・シャドーイングを重ねても、自分に似た声のお手本探しや直す場所の把握が難しい、という課題を描く。
・発音分析と、その結果に合わせた次の練習を、具体的な文とデモ画面で見せる。
・興味に合うニュースを英語教材にできることを、端末画面と8ジャンルの写真カルーセルで伝える。
・PC・タブレット・スマホで続けられることを端末図で見せる。
・研究は「約1.3倍」と比較グラフ。これは外部研究の得点上昇幅の比較なので、その条件と出典をキットどおり残す。
・開発者2人の声を、丸い写真と白いカードで左右に並べる。背景はカナディアンロッキー。セリフはキットの原文どおり。
・学び方の比較、料金、FAQ、最後のCTAまで含め、キットの全セクションを省略しない。
【仕上がり】
ロゴの形、配色、写真、文章、セクション順、余白、アニメーションは完成ソースを基準にしてください。日本語・英語・韓国語の切替を維持します。横幅320・390・820・1440pxで読みやすく、スマホではカードを縦に並べます。動きを減らす設定では静かに表示します。
【実装と起動】
空の作業フォルダに公開キットを固定版で取得してください。既存のプロジェクトは上書きしないでください。
対象ディレクトリで npm ci → npm run build → npm run dev -- --host 127.0.0.1 を実行し、プレビューURLを示してください。
この配布版はReact/TypeScriptをViteで静的出力する、API不要の独立したLPです。本番サイト全体やバックエンドを作る必要はありません。認証、課金、音声生成API、外部へのデプロイは実行しないでください。CTAはキットにある公開製品へのリンクとして維持します。
【完了条件】
ページ全体、画像読込、各言語、PCとスマホの改行・横はみ出し、カルーセル、キーボード操作をブラウザで確認してください。実行できなかった確認は明示してください。最後にプレビューURLと起動・ビルドコマンドを返してください。Create and open the finished Lanclo English-pronunciation landing page shown in this portfolio. Deliver a working page, not a proposal.
SOURCE KIT
https://github.com/ted-M-tech/tetsuya-creative-motions
Pinned edition: lanclo-lp-create-v3
Project: projects/lanclo-lp/source
Credits: projects/lanclo-lp/CREDITS.md
Use the finished components, dependency lockfile, logo, illustrations, photos and three-language copy from this edition.
FINISHED PAGE
Use the approved blue, cream and mint palette, generous typography and illustrated motion.
Include the shared blue header and hero; the three illustrated steps (record → own-voice model → listen and speak); shadowing and model-search frustration; pronunciation feedback feeding the next practice; interest-based news with actual device previews and eight photo categories; desktop/tablet/mobile continuation; the approximately 1.3× external-study score-gain comparison with its source and qualifications; two developer quotations with circular portraits in white cards over a Canadian Rockies photograph; learning-method comparison, pricing, FAQ and final CTA.
Preserve the supplied copy, section order, brand shapes, spacing and animation. The research is not a Lanclo efficacy test. Do not invent current offers or product capabilities.
BUILD
Check out the pinned kit in a new empty folder without overwriting existing work. In projects/lanclo-lp/source, run npm ci, npm run build, then npm run dev -- --host 127.0.0.1. Open the preview and give me its URL.
This self-contained export uses React/TypeScript and Vite static output. It needs no API keys or backend. Keep the existing CTA links to the live product. Do not configure authentication, payments, voice-generation services or deployment.
ACCEPTANCE
Keep Japanese, English and Korean switching. Check the full page at 320, 390, 820 and 1440px, image loading, natural wrapping, no horizontal overflow, keyboard operation, motion and reduced-motion behavior. Stack the developer cards on mobile. Report any checks you could not run, and finish with the preview URL and run/build commands.
MaePace
