logo Essepage ドキュメント
ガイド 実装例 ショーケース よくある質問 お問い合わせ プライバシーポリシー 利用規約 Go to ≶ Essepage へ移動

言語

ビジネスサイトを作る

このチュートリアルでは、架空のフラワーショップを紹介するシンプルなビジネスサイトを作ります。

ホーム、サービス、連絡先の各ページを作成し、共通メニューで3つのページをつなぎます。連絡先ページには、営業時間と場所を案内するGoogleマップも追加します。

このチュートリアルから、ページのデザインにTailwind CSSを使用します。

CSSを直接記述する代わりに、Tailwind CSSが提供するクラスをHTML要素のclass属性に追加してデザインします。この例では、コード全体を理解しやすくするために、必要最小限のクラスだけを使用します。

このチュートリアルで作るサイトには、次の内容が含まれます。

  • フラワーショップを紹介するホームページ
  • 提供するサービスを紹介するサービスページ
  • 住所と営業時間を案内する連絡先ページ
  • 3つのページをつなぐ共通メニュー
  • Googleマップを使った場所の案内
  • モバイル画面に対応するページ構成

全体のコード

このチュートリアルを最後まで進めると、以下のようなページが完成します。

始める前に、完成したページとコード全体を軽く確認してみましょう。今の段階ですべてのコードを理解する必要はありません。コードを一つずつ書いたり修正したりしながら、それぞれの部分がどのような役割を持つのかを学びます。

はじめる前に

Essepageにログインし、空のテンプレート（Blank）を選択して新しいプロジェクトを作成してください。

プロジェクトを作成すると、次のホームページファイルが生成されます。

/public
└── +page.essepage

プロジェクトダッシュボードでコードエディター（Code Editor）を選択し、エディターを開いてください。

このチュートリアルを完了すると、/publicフォルダーは次のような構成になります。

/public
├── +layout.essepage
├── +page.essepage
├── services
│   └── +page.essepage
└── contact
    └── +page.essepage

各ページファイルは、次のURLに対応します。

  • /public/+page.essepage → /
  • /public/services/+page.essepage → /services
  • /public/contact/+page.essepage → /contact

1. 共通レイアウトを作る

最初に、すべてのページで使用するメニューとフッターをレイアウトとして作成します。

ファイルエクスプローラーの/publicフォルダー内に、次のファイルを作成してください。

/public/+layout.essepage

ファイルを開き、次のコードを貼り付けてください。

<head>
    <title>Bloom Flower Studio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<header class="border-b">
    <nav class="mx-auto flex max-w-5xl items-center justify-between gap-2 px-6 py-4">
        <a href="/" class="font-bold">
            Bloom
        </a>

        <div class="flex gap-4 text-sm">
            <a href="/">Home</a>
            <a href="/services">Services</a>
            <a href="/contact">Contact</a>
        </div>
    </nav>
</header>

<main class="mx-auto max-w-5xl px-6">
    <essepage-slot></essepage-slot>
</main>

<footer class="border-t py-8 text-center text-sm text-gray-500">
    © Bloom Flower Studio
</footer>

ファイルを保存してください。

  • WindowsまたはLinux：Ctrl + S
  • macOS：Cmd + S

Tailwind CSSを読み込む

<head>内の次のコードは、プロジェクトでTailwind CSSを使用するためのブラウザー用スクリプトを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

これで、個別の<style>を記述せずに、HTML要素のclass属性でTailwind CSSのクラスを使用できます。

たとえば、次のメニューには複数のクラスが適用されています。

<nav class="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">

それぞれのクラスが一つのデザイン上の役割を持ちます。

  • mx-auto：要素を画面の中央に配置します。
  • flex：内部の要素を横方向に並べます。
  • max-w-5xl：コンテンツの最大幅を制限します。
  • justify-between：内部の要素を両端に配置します。
  • px-6：左右に内側の余白を追加します。
  • py-4：上下に内側の余白を追加します。

今の段階ですべてのクラス名を覚える必要はありません。コードを書きながらプレビューで結果を確認し、一つずつ学んでいきましょう。

2. ホームページを作る

ファイルエクスプローラーで次のホームページファイルを開いてください。

/public/+page.essepage

既存のコードを削除し、次のコードを貼り付けてください。

<section class="py-20 text-center">
    <p class="text-sm text-rose-600">
        Bloom Flower Studio
    </p>

    <h1 class="mt-3 text-4xl font-bold">
        Flowers for life’s special moments.
    </h1>

    <p class="mx-auto mt-4 max-w-xl text-gray-600">
        We create fresh flowers for gifts,
        celebrations, and everyday spaces.
    </p>

    <a href="/services" class="mt-8 inline-block rounded bg-rose-600 px-5 py-3 text-white">
        View Services
    </a>

    <img
        src="https://images.unsplash.com/photo-1627819797319-6e187b6e9762?auto=format&fit=crop&w=1600&q=80"
        alt="Pink and white flowers in a vase"
        class="mt-12 h-72 w-full rounded object-cover md:h-96"
    >
</section>

<section class="grid gap-4 pb-16 md:grid-cols-3">
    <article class="rounded border p-6">
        <h2 class="font-bold">
            Custom Bouquets
        </h2>

        <p class="mt-2 text-gray-600">
            Fresh bouquets made for any occasion.
        </p>
    </article>

    <article class="rounded border p-6">
        <h2 class="font-bold">
            Weddings & Events
        </h2>

        <p class="mt-2 text-gray-600">
            Floral arrangements for memorable events.
        </p>
    </article>

    <article class="rounded border p-6">
        <h2 class="font-bold">
            Weekly Flowers
        </h2>

        <p class="mt-2 text-gray-600">
            Regular flower delivery for homes and businesses.
        </p>
    </article>
</section>

<section class="border-t py-12 text-center">
    <h2 class="text-2xl font-bold">
        Visit Our Studio
    </h2>

    <p class="mt-3 text-gray-600">
        Monday–Saturday · 10:00–18:00
    </p>

    <a href="/contact" class="mt-4 inline-block text-rose-600">
        Contact Us
    </a>
</section>

ファイルを保存し、右側のプレビューで結果を確認してください。

ホームページには次の内容が表示されます。

  • フラワーショップの名前と紹介文
  • サービスページへ移動するボタン
  • 3つの主なサービス
  • 営業時間と連絡先ページへのリンク

Tailwind CSSでデザインする

最初のセクションの見出しには、次のクラスが適用されています。

<h1 class="mt-3 text-4xl font-bold">
  • mt-3：要素の上に余白を追加します。
  • text-4xl：文字を大きくします。
  • font-bold：文字を太字で表示します。

ボタンには次のクラスが適用されています。

<a href="/services" class="mt-8 inline-block rounded bg-rose-600 px-5 py-3 text-white">
    View Services
</a>

これらのクラスによって、ボタンに余白、角丸、背景色、文字色が適用されます。

個別のCSSセレクターを作らなくても、HTML要素にクラスを追加してデザインできます。

モバイル画面に対応する

サービス一覧には、次のクラスが使用されています。

<section class="grid gap-4 pb-16 md:grid-cols-3">

md:grid-cols-3は、画面が一定の幅以上になったときに、サービス項目を3列で表示します。

小さな画面では項目が1行に1つずつ表示され、広い画面では3つの項目が横に並びます。

プレビュー領域の幅を狭くして、サービス一覧の配置がどのように変わるか確認してみてください。

3. サービスページを作る

次に、フラワーショップが提供するサービスを紹介するページを作ります。

/publicフォルダー内に、次のフォルダーを作成してください。

services

servicesフォルダー内に+page.essepageファイルを作成します。

/public/services/+page.essepage

ファイルを開き、次のコードを貼り付けてください。

<section class="py-16">
    <h1 class="text-3xl font-bold">
        Our Services
    </h1>

    <p class="mt-3 text-gray-600">
        Flowers created for everyday moments
        and special celebrations.
    </p>

    <div class="mt-10 grid gap-4 md:grid-cols-3">
        <article class="rounded border p-6">
            <h2 class="font-bold">
                Custom Bouquets
            </h2>

            <p class="mt-2 text-gray-600">
                Tell us the occasion and your preferred colors.
                We will create a bouquet just for you.
            </p>
        </article>

        <article class="rounded border p-6">
            <h2 class="font-bold">
                Weddings & Events
            </h2>

            <p class="mt-2 text-gray-600">
                Bouquets and floral decorations
                designed for your special day.
            </p>
        </article>

        <article class="rounded border p-6">
            <h2 class="font-bold">
                Weekly Flowers
            </h2>

            <p class="mt-2 text-gray-600">
                Fresh seasonal flowers delivered
                to your home or workplace.
            </p>
        </article>
    </div>
</section>

<section class="border-t py-12 text-center">
    <h2 class="text-2xl font-bold">
        Looking for something special?
    </h2>

    <a href="/contact" class="mt-6 inline-block rounded bg-rose-600 px-5 py-3 text-white">
        Contact Us
    </a>
</section>

ファイルを保存してください。

このファイルは、次のURLのページになります。

/services

4. 連絡先ページを作る

次に、フラワーショップの場所と営業時間を案内する連絡先ページを作ります。

/publicフォルダー内に、次のフォルダーを作成してください。

contact

contactフォルダー内に+page.essepageファイルを作成します。

/public/contact/+page.essepage

ファイルを開き、次のコードを貼り付けてください。

<section class="py-16">
    <h1 class="text-3xl font-bold">
        Contact
    </h1>

    <p class="mt-3 text-gray-600">
        Visit our studio or contact us
        to discuss your flowers.
    </p>

    <div class="mt-10 grid gap-8 md:grid-cols-2">
        <div>
            <h2 class="font-bold">
                Location
            </h2>

            <p class="mt-3 text-gray-600">
                Champ de Mars<br>
                5 Avenue Anatole France<br>
                75007 Paris, France
            </p>

            <h2 class="mt-6 font-bold">
                Opening Hours
            </h2>

            <p class="mt-3 text-gray-600">
                Monday–Friday · 10:00–18:00<br>
                Saturday · 10:00–16:00<br>
                Sunday · Closed
            </p>

            <a href="mailto:hello@bloom.example" class="mt-8 inline-block rounded bg-rose-600 px-5 py-3 text-white">
                Send an Email
            </a>
        </div>

        <iframe
            src="https://maps.google.com/maps?output=embed&q=Eiffel+Tower%2C+Paris%2C+France"
            title="Map showing the Eiffel Tower in Paris"
            loading="lazy"
            allowfullscreen
            referrerpolicy="strict-origin-when-cross-origin"
            class="h-80 w-full rounded border"
        ></iframe>
    </div>
</section>

ファイルを保存してください。

このファイルは、次のURLのページになります。

/contact

Googleマップを埋め込む

連絡先ページでは、<iframe>を使ってGoogleマップを埋め込んでいます。

<iframe
    src="https://maps.google.com/maps?output=embed&q=Eiffel+Tower%2C+Paris%2C+France"
    title="Map showing the Eiffel Tower in Paris"
    loading="lazy"
    allowfullscreen
    referrerpolicy="strict-origin-when-cross-origin"
    class="h-80 w-full rounded border"
></iframe>

srcのqには、地図に表示する場所を指定します。

この例では、エッフェル塔を表示するために次の値を使用しています。

Eiffel+Tower%2C+Paris%2C+France

別の場所を表示したい場合は、この部分を自分の店舗名や住所に変更できます。

地図には次のTailwind CSSクラスが適用されています。

h-80 w-full rounded border
  • h-80：地図の高さを指定します。
  • w-full：利用できる幅いっぱいに地図を表示します。
  • rounded：角を丸くします。
  • border：地図に枠線を追加します。

md:grid-cols-2が適用されているため、広い画面では連絡先情報と地図が横に並び、小さな画面では上下に表示されます。

5. 新しいページを公開する

プロジェクトの作成時に生成されたホームページはすでに公開されていますが、新しく作成したサービスページと連絡先ページはまだ公開されていません。

次の2つのページファイルを、それぞれ公開してください。

/public/services/+page.essepage
/public/contact/+page.essepage

各ファイルを公開する手順は次のとおりです。

  1. ファイルエクスプローラーで+page.essepageファイルを右クリックします。
  2. 公開（Publish）を選択します。
  3. もう一方のページファイルも同じ方法で公開します。

新しいページを初めて公開した後に再び編集すると、メニューは変更を適用（Apply Changes）に変わります。

6. プレビューでWebサイトを確認する

右側のプレビュー画面上部にあるホームアイコンを選択し、ホームページを開いてください。

次の項目を順番に確認します。

  1. ホームページにフラワーショップの名前と3つのサービスが表示されることを確認します。
  2. View Servicesボタンを選択し、/servicesページへ移動します。
  3. 上部のメニューでContactを選択します。
  4. /contactページに住所、営業時間、Googleマップが表示されることを確認します。
  5. プレビュー領域の幅を狭くし、サービス一覧と連絡先領域の配置が変わることを確認します。
  6. ページを移動しても、上部のメニューと下部のフッターが維持されることを確認します。

7. すべての変更を適用する

すべてのページがプレビューで正しく表示されたら、保存した変更を公開サイトに反映します。

今回はホームページと共通レイアウトの両方を変更したため、すべて適用（Apply All）を使用します。

エディター上部のすべて適用（Apply All）を選択してください。

適用が完了したら、次のいずれかの方法で公開サイトを確認できます。

  • エディターでページ（Page）→ ホームページを開く（Open Homepage）を選択する
  • プロジェクトダッシュボードのサイトURL（Site URL）を開く
  • 各ページファイルでページを開く（Open Page）を選択する

公開サイトでメニューとボタンを選択し、3つのページがすべて正しく開くことを確認してください。

変更を適用した後、キャッシュの更新に最大1分ほどかかる場合があります。公開ページに以前の内容が表示される場合は、少し待ってから再読み込みしてください。

Webサイトが完成しました

ここまでに、次の作業を行いました。

  • Tailwind CSSの読み込み
  • Tailwind CSSクラスを使ったページのデザイン
  • ホーム、サービス、連絡先ページの作成
  • 共通レイアウトを使ったメニューとフッターの管理
  • レスポンシブグリッドによる画面サイズに応じたコンテンツ配置
  • Googleマップを使った店舗位置の表示
  • 新しいページの公開とすべての変更の適用

このチュートリアルでは、CSSを直接記述せず、Tailwind CSSのクラスだけを使ってWebサイトをデザインしました。

次は、サンプルのフラワーショップ名、サービス、住所、営業時間を自分のビジネス情報に置き換えてみてください。ボタンと文字色に使用されているroseを別の色に変更し、サイトの雰囲気を変えることもできます。

次のステップ

ビジネスサイトが完成したら、次のドキュメントへ進んでください。

  • ファイルとURLのつながりを詳しく学ぶ：ページとURLの構成
  • レイアウトと再利用できる要素について学ぶ：レイアウトとコンポーネント
  • ページのデザイン方法を学ぶ：スタイルとTailwind CSS
  • ページを公開して管理する方法を学ぶ：公開とサイト管理
Last updated:

Powered by ≶ Essepage

Copyright © 2019-present Divmaster