ちいラボのランディングページをHTMLで作ってみた

by

はじめに

ウェブサイトのブランディングにおいて、色の統一感は重要な要素です。この記事では、既存サイトのデザインテイストを活かしながら、3つの事業を紹介する統合ランディングページを制作した過程を紹介します。

制作したのは、スマホ教室を運営する「ちいラボ」の総合ランディングページです。スマホ教室、情報発信ブログ、アプリ開発という3つの事業を1つのページで効果的に紹介することが目標でした。

制作前の課題整理

  • ターゲット層の設定
  • 事業の優先順位
  • デザインの方向性

最初に決めたのはターゲット層です。スマホ教室の特性を考えると、IT初心者やシニア層が中心になりがちです。しかし、今回は意図的に「より幅広い年齢層」を対象としました。理由は2つあります。1つ目は、アプリ開発事業も含む総合ページであること。2つ目は、スマホ教室自体も若い世代のニーズに対応できることを示したかったからです。

3つの事業のうち、メインとして押し出すのはスマホ教室です。これは売上の柱となる事業であり、直接的な収益につながるサービスだからです。他の2つの事業は、信頼性を示すサポート要素として位置づけました。プロフェッショナルな信頼感と親しみやすさの両立を目指しました。IT講師という職業柄、技術的な信頼性は欠かせません。同時に、気軽に相談できる親しみやすさも必要です。

既存サイトからのテーマカラー抽出

実際のサイト調査

スマホ教室サイト（https://chiilabo.com/）のテーマカラーは以下の通りです。

  • メインカラー：#EDEDD8（薄いクリーム色）
  • アクセントカラー：#4A473B（ダークブラウン）

この組み合わせは、温かみがあり落ち着いた印象を与えます。IT関連のサイトによくある青や緑とは異なる、独特の親しみやすさを持っています。

カラーパレットの調整

抽出したカラーをベースに、ランディングページ用のカラーパレットを構築しました。

基本の2色に加えて、CTA（Call To Action）ボタン用にオリーブグリーン（#6B8E23）を追加しました。これは既存のカラーと調和しながら、アクションを促す適度な存在感を持つ色です。

レスポンシブデザインの実装

モバイルファーストの考え方

現在のウェブアクセスの大部分はモバイルデバイスからです。そのため、最初にモバイル画面でのレイアウトを考え、その後デスクトップ画面に拡張する手法を取りました。

/* モバイル基準のスタイル */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* デスクトップでの拡張 */
@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
}
Code language: CSS (css)

フレキシブルなグリッドシステム

CSS Gridを使用して、画面サイズに応じて柔軟に変化するレイアウトを構築しました。auto-fitとminmax()の組み合わせにより、コンテンツが自然に配置されます。

特に重要なのは、最小幅（350px）の設定です。これにより、各カードが読みやすさを保ちながら、画面幅に応じて適切な数で表示されます。

UI要素の改善過程

ヘッダーの色調整

最初はテーマカラーに合わせてダークブラウンのヘッダーを作成しました。しかし、実際に操作してみると問題が発生しました。

スクロール時に背景色が変わる仕組みを実装していたのですが、以前の青系カラーの設定が残っていたのです。

/* 修正前：青色が混入 */
header.style.background = 'rgba(74, 144, 226, 0.95)';

/* 修正後：白背景で統一 */
header.style.background = 'rgba(255, 255, 255, 0.95)';
Code language: JavaScript (javascript)

最終的にヘッダーは白背景に変更しました。これにより、清潔感と読みやすさが向上しました。

アイコンシステムの統一

当初は絵文字を使用していましたが、プロフェッショナルな印象を強めるためSVGアイコンに変更しました。

<!-- 変更前：絵文字 -->
<div class="service-icon">📱</div>

<!-- 変更後：SVGアイコン -->
<div class="service-icon">
    <svg viewBox="0 0 24 24">
        <path d="M17 2v2h3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3V2h2v2h6V2h2z"/>
    </svg>
</div>
Code language: HTML, XML (xml)

SVGアイコンの利点は、どんな画面サイズでも鮮明に表示されることです。また、CSSで色やサイズを自由に調整できます。

SEO対策とOGP設定の実装

メタタグの構成

ランディングページの効果を最大化するため、検索エンジン最適化（SEO）とソーシャルメディア対応を行いました。

<!-- 基本的なSEO設定 -->
<meta name="description" content="スマホ・パソコンでお困りのことはありませんか？大津市のスマホ教室「ちいラボ」が丁寧にサポートします。">
<meta name="keywords" content="スマホ教室,パソコン教室,大津市,個人レッスン,IT講師">

<!-- OGP設定 -->
<meta property="og:title" content="ちいラボ - あなたのデジタルライフをサポート">
<meta property="og:image" content="https://chiilabo.jp/image/ogp.jpg">
<meta property="og:url" content="https://chiilabo.jp/">
Code language: HTML, XML (xml)

構造化データの追加

検索エンジンがサイトの内容を正確に理解できるよう、JSON-LD形式の構造化データを実装しました。

{
    "@context": "https://schema.org",
    "@type": "EducationalOrganization",
    "name": "ちいラボ",
    "telephone": "077-572-9078",
    "address": {
        "@type": "PostalAddress",
        "streetAddress": "長等2-9-6 通路奥ひだり",
        "addressLocality": "大津市",
        "addressRegion": "滋賀県"
    }
}
Code language: JSON / JSON with Comments (json)

このデータにより、Googleの検索結果でリッチスニペット（詳細情報付きの表示）が期待できます。

アニメーション効果の実装

スクロール連動アニメーション

ページの動きに合わせて要素が現れるアニメーションを実装しました。Intersection Observer APIを使用することで、パフォーマンスを損なわずに滑らかな動作を実現しています。

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';
        }
    });
}, { threshold: 0.1 });
Code language: JavaScript (javascript)

CSSアニメーションの定義

アニメーション自体はCSSで定義し、JavaScriptではトリガーのみを制御しています。これにより、ブラウザのGPUアクセラレーションを活用できます。

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
Code language: CSS (css)

OGPアイキャッチ画像の制作

SVGでの画像制作

ソーシャルメディアでシェアされた際の見た目を向上させるため、OGP用のアイキャッチ画像をSVGで制作しました。

SVGを選択した理由は、ベクターデータのため拡大縮小しても劣化しないことです。また、テキストや色の調整が簡単にできます。

画像の構成要素は以下の通りです。サイト名とキャッチコピーを大きく配置し、スマホとパソコンのアイコンで事業内容を視覚的に表現しました。連絡先情報も含めることで、画像だけで基本情報が伝わるようにしています。

カラーリングの統一

アイキャッチ画像でも、サイト本体と同じカラーパレットを使用しました。背景にはメインカラーの薄いクリーム色、テキストにはダークブラウンを配置。アクセントとしてオリーブグリーンを効果的に使用しています。

制作で得られた知見

既存ブランドとの調和の重要性

新しいページを作る際、既存のブランドイメージとの調和は想像以上に重要でした。色やフォント、トーンを統一することで、訪問者に一貫したブランド体験を提供できます。

特に色の持つ心理的効果は大きく、今回のクリーム色とダークブラウンの組み合わせは、親しみやすさと信頼性を同時に表現できています。

レスポンシブデザインの実装方法

CSS GridとFlexboxを適切に組み合わせることで、複雑なメディアクエリを書かずに済みました。auto-fitやminmax()といったCSS Gridの機能は、レスポンシブデザインの実装を大幅に簡素化します。

パフォーマンスとユーザビリティの両立

アニメーション効果を追加する際は、パフォーマンスへの配慮が不可欠です。Intersection Observer APIの使用により、スクロールイベントの大量発生を防ぎ、滑らかな動作を維持できました。

まとめ

本記事では、既存サイトのテーマカラーを活用したランディングページ制作について、実装の詳細と考慮点を共有しました。重要なポイントは、ブランドの一貫性を保ちながら、技術的な最適化を行うことです。CSS Grid、Intersection Observer API、SVGアイコンなどの現代的な技術を活用することで、保守性が高く表示速度の速いランディングページを構築できます。