自社ブランド「Ulty」公式サイトのモダンWeb制作事例

私たちが運営する自社ブランド「Ulty」の公式サイトを、自社内製で構築しました。

サイトを「持つ」だけではなく、「Google検索とAI検索の両方から、毎月安定的にリードが入ってくる仕組み」として設計した事例です。

案件サマリー

まずは案件の全体像を簡潔にまとめます。

採用した技術スタックと、その理由

「速さ・SEO・リード獲得」の3軸を同時に満たすためのスタックを選びました。

それぞれの採用理由を順に説明します。

Next.js（App Router）／ TypeScript

App Router・SSR・ISR を前提に構成し、初期表示の速さと検索エンジン・AI検索クローラーへの完全な HTML 提供を両立しました。

TypeScript で型安全性を全ファイルに徹底し、長期運用しても破綻しない構造になっています。

Tailwind CSS + shadcn/ui

Ultyのブランドカラー（インディゴ系プライマリ #3F51B5 ／ ブルー系アクセント #2196F3）を CSS 変数として一元管理し、Tailwind のユーティリティと shadcn/ui に流し込みました。

「ページごとに色や余白がブレない」状態を、仕組みとして担保しています。

Keystatic（Git ベースのヘッドレス CMS）

ブログ記事・制作事例・FAQ・サイト設定をすべて Keystatic で管理しています。

コンテンツ追加・修正は Git コミットとして記録されるため、デプロイフローとシームレスに統合されます。

Vercel + Cloudflare + Resend

ホスティングは Next.js と最も親和性の高い Vercel、ドメイン・CDN は Cloudflare、メール送信は Resend で構成しました。

エッジ配信＋ ISR ＋メール自動化の組み合わせで、「軽い・速い・止まらない」を実現しています。

工夫した点

ここからが本題です。

KGI「月10件の問い合わせ獲得」を達成するため、入口（流入）・中間（回遊）・出口（CV）のすべてに具体的な仕掛けを入れました。

以下、5つの観点で工夫したポイントを順にご紹介します。

①：AI検索（GEO/LLMO/AIO/AEO）対応を robots.txt から徹底

ChatGPT・Perplexity・Gemini・Claude などの AI 検索エンジンが、Ultyのコンテンツを引用元として選んでくれる設計を最初から織り込みました。

具体的には次の取り組みを行っています。

• robots.txt で AI クローラーを積極許可: ChatGPT-User／PerplexityBot／Google-Extended など、主要 AI 検索クローラーのアクセスを明示的に許可
• JSON-LD 構造化データを網羅実装: Organization / WebSite / BreadcrumbList / Article / FAQPage / Service / LocalBusiness を主要ページに配置
• FAQPage を積極活用: AI検索は Q&A 形式を引用しやすいため、FAQ ページとサービスページに FAQPage 構造化データを実装
• セマンティックHTML の徹底: <main> / <article> / <section> / <nav> / <aside> を正しく使い分け、コンテンツの意味構造をクローラーに伝える
• E-E-A-T の明示: 著者情報・実績・代表プロフィールを明示し、信頼性のシグナルを発信

「Google SEO だけでなく AI検索からも見つかるサイト」という設計思想を、技術仕様レベルまで落とし込んでいます。

②：プラン別の専用LPでコンバージョン率を底上げ

サービス紹介を一枚物で済ませず、プランごとに専用ページを用意しました。

• /services/light（ライトプラン）
• /services/standard（スタンダードプラン）
• /services/premium（プレミアムプラン）

それぞれに以下を盛り込んでいます。

• そのプランの含まれるもの／納期／技術仕様を完全列挙
• 想定ユースケースを具体例付きで記載
• CTA は「このプランで相談する」に固定し、検討フェーズの分岐を明確化

「サイト全体で1つのCV」ではなく、プランごとにマイクロコンバージョンを設計することで、検索流入から商談までの導線を太くしています。

③：React Hook Form + Resend でフォーム自動化を内製

外部フォームサービスに頼らず、フォームの実装・送信・自動返信まで自社内製しています。

• React Hook Form: バリデーション・エラー表示・送信状態管理を一括制御
• Resend: 送信先（自社）と自動返信（問い合わせ者）の2通を即時送信
• GA4 コンバージョンイベント連携: 送信完了サンクスページでコンバージョン計測
• Spam 対策: ハニーポットフィールド ＋ 送信レート制限

「外部サービス依存」を減らすことで、デザインの自由度・送信スピード・将来の拡張性をすべて確保しています。

④：ブランドガイドラインに沿ったデザインシステム

Ultyのブランドカラーを CSS 変数として定義し、Tailwind と shadcn/ui に落とし込みました。

加えて、次のルールでデザイン全体の一貫性を担保しています。

• タイポグラフィ: 見出しは Inter ＋ Noto Sans JP、本文は text-base leading-relaxed（行間 1.625）
• スペーシング: セクション間 py-16 md:py-24 ／ コンテナ max-w-7xl mx-auto px-4 md:px-8
• アニメーション: Framer Motion でスクロール時のフェードインのみ。過度な演出は意図的に排除

⑤：Lighthouse Performance 90+ を必達ラインにしたパフォーマンス設計

リード獲得サイトでは、表示速度の遅さがそのまま離脱につながります。

そのため、設計段階からパフォーマンスを織り込みました。

• 画像最適化: next/image ＋ WebP 自動変換 ＋ 遅延読み込みを全箇所で適用
• フォントの最適化: next/font でセルフホスト＋ display: swap で初期描画を阻害しない
• JavaScript の最小化: 不要な依存パッケージを排除し、バンドルサイズを最小化
• Core Web Vitals 監視: LCP < 2.5s ／ FID < 100ms ／ CLS < 0.1 を全ページで担保

「リリース後に高速化を頑張る」のではなく、最初から速い構造で作るのが品質維持のコツです。

成果

KGI 達成に向けて、サイト基盤として現時点で達成している指標は次の通りです。

まとめ

「Webサイトを作る」と「Webサイトでリードを獲る」は、似て非なる仕事です。

Ultyの公式サイトは、KGI を起点にすべてを逆算した設計で構築しました。技術選定・ページ構成・フォーム設計・robots.txt・構造化データに至るまで、「月10件の問い合わせ」につなげるための仕掛けが入っています。

次のようなお悩みをお持ちの方は、ぜひ一度ご相談ください。

• リード獲得を目的としたモダンWebサイトを作りたい
• Google SEO だけでなく AI検索からの流入も設計したい
• 無料診断LP・お問い合わせフォーム・自動返信まで一気通貫で構築してほしい