概要
未経験からITエンジニアへのキャリアチェンジを目指す層をターゲットとした、架空のオンライン・プログラミングスクール「CodeCanvas」のLP（ランディングページ）を制作しました。企画、ペルソナ設計、デザインカンプ作成（Figma）、コーディングまで一貫して担当。最終的なコンバージョン（無料カウンセリング申込）の最大化を目的とした、戦略的なサイト構築を行いました。
コンセプト・戦略
本LPは、詳細なペルソナ（28歳・営業職・IT業界へ転職希望）の悩みや目標に深く寄り添うことを設計の起点としています。
- AI（Gemini）の活用による効率的な要件定義 本プロジェクトの企画・要件定義の初期段階では、AI（Google Gemini）を活用しました。ペルソナ設定、サイト構成案、ライティングといった上流工程をAIと協働することで、戦略立案の精度とスピードを向上させています。これにより、よりユーザーの課題解決にフォーカスしたクリエイティブな実装作業にリソースを集中させることができました。
- AIO（AI最適化）と情報設計 AIがサイトの目的（リード獲得）と構造を理解しやすいよう、セクションごとに明確な役割（課題提起 → 解決策提示 → 信頼醸成 → 行動喚起）を持たせ、論理的な情報フローを構築しました。これにより、ユーザーが自然と最終的なCTA（Call to Action）へと導かれるストーリーラインを描いています。
- UI/UXデザイン 信頼感を与えるダークブルーを基調としつつ、アクセントカラーで未来への希望を表現。専門用語を排した誠実なライティングと組み合わせることで、ターゲットが抱える「未経験からの挑戦への不安」を払拭し、安心して次のステップへ進めるようなUI/UXを追求しました。
実装・技術的ポイント
セマンティックなHTML5、保守性の高いCSS3、Vanilla JavaScriptによるインタラクティブなUI実装を行いました。制作会社でのチーム開発も想定し、可読性と再利用性の高いコードを意識しています。
SEO内部施策 <h1>タグの適切な使用や各セクションのマークアップなど、検索エンジンに評価されやすい基本的なSEO内部施策を考慮したコーディングを行っています。
レスポンシブ対応 PCからスマートフォンまで、あらゆるデバイスで最適な情報量と操作性を担保するレスポンシブデザインを実装しています。
UIインタラクション ハンバーガーメニュー、アコーディオンUI、スムーズスクロールといった動的要素は、ユーザー体験を損なわないよう、軽快な動作を意識して実装しました。
