今回は、メンタルケアやHSP・うつからの回復サポートをテーマにした、制作実績用のフルカスタム・ランディングページ（LP）を制作しました。
単なる情報伝達にとどまらず、訪れた方の心が少しでも「ほっ」と安らぐような、動的で美しい表現と技術的な工夫を詰め込んでいます。
💻 実際の公開ページはこちら
既存のWordPressテーマに縛られないよう、完全に独立させたURLで公開しています。以下のリンクから実際の動きやアニメーションをご体感いただけます。
🎨 デザインのポイント
- ヒーローセクション: 穏やかな自然のイメージを使用し、訪問した瞬間に心が落ち着くような演出を行いました。
- UX/UI: 悩みを持つユーザーがストレスなく読み進められるよう、情報の優先順位を明確にし、流れるようなレイアウトを採用しました。
- 信頼感の醸成: カウンセラーの紹介やQ&Aセクションを充実させ、サービスの透明性を高めています。
🛠 使用技術
- HTML5 / CSS3 (Sass)
- Responsive Design (Mobile First)
- JavaScript (Intersection Observer API / CSS Animations)
このような専門性の高い分野のLP制作も承っております。お気軽にご相談ください。
🤖 AIエージェント「Antigravity」との協働開発
今回のLP制作は、Google社が開発する先進的なAIコーディングエージェント「Antigravity」とペアプログラミングを行いながら構築しました。
- 高速なプロトタイピング: 私の頭の中にある「落ち着いた雰囲気」「森のような動的演出」というイメージを言語化して伝え、AIエージェントが瞬時に具体的なコード（HTML/CSS/JS）に書き起こすことで、短期間での高クオリティな実装を実現しました。
- 技術的な壁の突破: WordPressの「カスタムHTML」ブロックの仕様でアニメーションが弾かれてしまう問題に直面した際も、AIによるログ解析と提案により「All-in-One fileによるサーバー直接配置」という最適解に素早くたどり着き、実装を完遂させました。
AIという強力なパートナーと協働することで、ゼロからのコーディング作業の時間を大幅に削減し、より人間の「感性」や「デザインの方向性」の調整などのクリエイティブな決定に集中することができました。
🪄 どのようなプロンプト（指示）でこのページができるのか？
「AIにどうやって指示を出せばいいの？」と思われる読者の方向けに、実際に私がAntigravityに伝えたプロンプト（指示文）の例をご紹介します！
【入力したプロンプトの構成例】
「落ち着いた雰囲気で、HSPやメンタルケア向けの1枚のランディングページ（LP）を作成してください。カラーはくすみブルーとセージグリーンを基調とし、文字の書体は明朝体でゆったりと配置してください。
スクロールに合わせてふんわりと文字が浮かび上がるアニメーションや、背景で木漏れ日や葉っぱが舞い落ちるようなシネマティックな演出を入れてください。
既存のWordPressテーマに影響を与えないよう、HTML/CSS/JSを全て1つのファイルに統合した形式にしてください。」
このように、「目的」「デザインの雰囲気（色やフォント）」「具体的な動き」「技術的な希望」を言葉で伝えるだけで、AIが意図を汲み取って高度なコーディングを行ってくれます。
🌟 便利なAIアプリ一覧も公開中！
こうしたWebサイト制作の他にも、当サイト（ゆルリ色の空）では、日々のメンタルケアや作業をサポートするための本格的な「AIアプリ」を多数公開しています！
APIキーを設定するだけで誰でも無料で使える、安心・便利なアプリとなっておりますので、ぜひ以下の記事から一覧をご覧になってみてください。
技術と感性を融合させた、新しい制作スタイルでのLPとなりました。今後もAIを活用しながら、より高品質で心に響く制作を行っていきます。
コメント