C's English School ランディングページ制作

こんにちは！今回は、オンライン英語塾「C’s English School」のランディングページを制作したので、その制作過程と技術的な学びをまとめてみました。

プロジェクト概要

制作背景

親戚が開いているオンライン英語個人指導塾のランディングページを制作しました。完全マンツーマン指導という特徴を活かし、信頼性と親しみやすさを両立させたデザインを目指しました。

クライアント: 親戚 リポジトリ: GitHub

技術スタック

フロントエンド: Next.js 15.3.3 + React 19 + TypeScript
スタイリング: Tailwind CSS 4
フォント: Adobe Fonts（ADLam Display、筑紫A丸ゴシック）+ Google Fonts
デプロイ: Vercel
その他: Lucide React（アイコン）、ESLint

制作プロセス

1. 要件定義とデザイン制作

クライアントの当初の要望は「優しく可愛らしい雰囲気のHP」でした。LPの他に料金表を掲載し、お問い合わせフォームを設置するかGoogle Formへ誘導するという内容でした。

v0を活用した要件定義: v0を使ってモックを作成し、クライアントに見せながら実際の動きを想像しやすくしました。その結果、LPの内容を具体化したり、講師紹介や合格体験談の追加など、細部を策定することができました。

2. デザインワークフロー

v0でモック作成 → 2. Figmaに取り込み → 3. 細部を仕上げ → 4. Figma MCPで構造化 → 5. AIエージェントによるUI実装

このワークフローにより、デザインから実装までを効率的に進めることができました。特にFigma MCPを活用することで、デザインを迅速に構造化し、AIに渡して作業を効率化できました。

技術的な工夫点

1. レスポンシブデザインの徹底

PC版とSP版を完全に分離して実装しました。各コンポーネントでhidden md:blockとmd:hiddenを使って、デバイスごとに最適化されたレイアウトを提供しています。

1
2
3
4
5
6
7


// PC版とSP版の分離例
<div className="hidden md:block">
  <HeroSectionPc />
</div>
<div className="md:hidden">
  <HeroSectionSp />
</div>

2. コンポーネント設計

再利用性と保守性を重視して、Button、Header、Footer等を独立したコンポーネントとして設計しました。特にButtonコンポーネントでは、Figmaデザインに準拠したバリアントシステムを実装しています。

3. デザインシステムの構築

統一されたカラーパレット（プライマリ: #2a6a8b、アクセント: #f7b2b7）と、複数のフォントを組み合わせた階層的なタイポグラフィシステムを構築しました。

4. ユーザビリティの向上

SP版では画面下部に固定CTAボタンを配置
Google Formsとの連携で問い合わせ機能を実装
視覚的な階層を意識したセクション設計

学んだこと・気づき

1. AIツールを活用した効率的な制作フロー

v0、Figma、Figma MCPを組み合わせることで、デザインから実装までを大幅に効率化できました。特に、クライアントとの要件定義段階でv0のモックを活用することで、具体的なイメージを共有しやすくなりました。

2. レスポンシブデザインの重要性

PC版とSP版を完全に分離することで、それぞれのデバイスに最適化されたUXを提供できました。特に教育サービスでは、保護者（PC）と生徒（SP）の両方がアクセスする可能性があるため、この分離が重要でした。

3. コンポーネント設計の考え方

小さなコンポーネントに分割することで、コードの可読性と保守性が大幅に向上しました。また、TypeScriptの型定義により、コンポーネントの使用方法が明確になりました。

4. クライアントとの協働の重要性

v0を使った要件定義により、クライアントと一緒に内容を具体化できました。結果として、当初の要望を超えて、講師紹介や合格体験談など、より充実したコンテンツを提供できました。

今後の改善点

パフォーマンス最適化: 画像の遅延読み込みや、不要なJavaScriptの削減
アクセシビリティ: より詳細なARIA属性の追加
SEO対策: メタデータの最適化と構造化データの追加

まとめ

このプロジェクトを通じて、AIツールを活用した効率的なWeb制作フローを学ぶことができました。特に、v0を使った要件定義とFigma MCPを活用した実装プロセスは、今後の制作でも活用していきたいです。

教育サービスという特性を活かし、信頼性と親しみやすさを両立させたデザインを実現できたと思います。クライアントとの協働により、当初の要望を超えた充実したコンテンツを提供できたのも大きな成果でした。

制作期間: 約1週間
使用技術: Next.js, React, TypeScript, Tailwind CSS
デザインツール: v0, Figma, Figma MCP
デプロイ: Vercel
URL: https://c-s-english.vercel.app/

何かご質問やご意見があれば、お気軽にお声がけください！