DesigntoCode01_02:ワイヤーフレームをマークアップへ

📁 作成ファイル・保存場所

フォルダ名：espresso_laneサイトの名前のフォルダにします
ファイル名：index.html（トップページとして一般的なファイル名）
画像はダミー画像のサイトより利用（https://kobeya.com/no-image-generator/）

今回のテーマ

作成したワイヤーフレームをもとに、HTMLのマークアップ（構造）を行います。見た目にとらわれすぎず、意味のある構造・セマンティックな記述を意識しましょう。

🔰 目的

ワイヤーフレームの構造に落とし込む力をつける
適切なHTML要素を使って意味を明確にする
クラス名の付け方やセクションの分け方を学ぶ

チェックポイント

セクションの意味に合ったタグ（<header>, <main>, <section>, <footer>など）を使っているか？
ナビゲーションやボタンに適切な要素（<nav>, <a>, <button>など）を使っているか？
クラス名は一貫性があり、わかりやすい名前になっているか？（例：work-list, site-footer など）
デザインカンプの構造を適切にHTMLで再現できているか？

マークアップのポイント

🔹 基本構造（例）

<body>
  <header class="site-header">...</header>
  <main>
    <section class="main-visual">...</section>
    <section class="about">...</section>
    <section class="works">...</section>
  </main>
  <footer class="site-footer">...</footer>
</body>

🔹 使用する主なHTML要素

要素名	用途例
`<header>`	ヘッダー全体、見出し、ロゴなどをまとめる
`<nav>`	ナビゲーションメニューを含める
`<main>`	サイトの主コンテンツ部分（メインビジュアル・紹介など）
`<section>`	コンテンツの区切り（サービス紹介・実績一覧など）
`<figure>` / `<figcaption>`	画像とキャプションをセットで扱う場合（作品紹介など）
`<footer>`	サイトの下部情報（コピーライト・SNS・連絡先など）

参考トレーニング

応用してみよう！

クラス名はBEM記法を参考にしてみよう（例：block__element--modifier）
alt 属性を使ってアクセシビリティを意識してみよう
デザインに動きがある場合、HTML側に必要なラッパー構造（ラッピングするclass)を追加しておくとCSS実装が楽になります

解答例（HTML）

※ まずは自分でHTMLを書いてみてから、下記の例を確認しましょう。
構造や要素の使い方に注目して、自分のコードと比べてみてください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Espresso Lane</title>
</head>

<body>
    <header>
        <h1>Espresso Lane</h1>
        <nav>
            <ul>
                <li><a href="#about">About Us</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#access">Access</a></li>
            </ul>
        </nav>
    </header>

    <figure>
        <img src="https://dummy.kobeya.com/?width=1440&height=600&text=キービジュアル" width="1440" height="600"
            alt="キービジュアルの説明文">
    </figure>
    <main>
        <section id="about">
            <h2>About Us</h2>
            <p>Espresso
                Laneは、小倉駅から徒歩2分の都会の真ん中にありながら、まるで別世界のように静かでリラックスできるカフェです。「おいしいコーヒーと心地よい空間で、疲れた心と体を癒したい。」そんな想いを込めて、私たちは日々お客様をお迎えしています。
            </p>
        </section>

        <section id="menu">
            <h2>Menu</h2>
            <ul class="menu-items">
                <li class="menu-item">
                    <img src="https://dummy.kobeya.com/?width=590&height=357&text=Coffee" width="590" height="357"
                        alt="coffee">
                    <h3>Coffee</h3>
                    <p>一日の始まりにも、ちょっとした休憩にも。厳選されたコーヒー豆を使用し、丁寧に抽出した一杯は、香りと深い味わいで心を満たします。リラックスした時間をお楽しみください。</p>
                </li>
                <li class="menu-item">
                    <img src="https://dummy.kobeya.com/?width=590&height=357&text=Morning+Set" width="590" height="357"
                        alt="モーニングセット">
                    <h3>Morning Set</h3>
                    <p>焼きたてのクロワッサン、新鮮なサラダ、そして淹れたてのコーヒーで始まる特別な朝。おいしさだけでなく、心も軽やかになるような朝のひとときをご提供します。</p>
                </li>
                <li class="menu-item">
                    <img src="https://dummy.kobeya.com/?width=590&height=357&text=Lunch+Menu" width="590" height="357"
                        alt="ランチメニュー">
                    <h3>Lunch Menu</h3>
                    <p>都会の喧騒を忘れ、静かな店内で楽しむランチタイム。選べるパニーニやリゾットに日替わりスープを添えて、心も体も満たされるひとときをお過ごしください。</p>
                </li>
                <li class="menu-item">
                    <img src="https://dummy.kobeya.com/?width=590&height=357&text=Desserts" width="590" height="357"
                        alt="デザート">
                    <h3>Desserts</h3>
                    <p>一日頑張った自分への甘いご褒美。自家製のチーズケーキやエクレア、濃厚なチョコレートタルトが、疲れた心を癒してくれます。コーヒーとの相性も抜群です。</p>
                </li>
            </ul>
        </section>

        <section id="access" class="access">
            <h2>Access</h2>
            <address>
                <p>〒123-4567 福岡県北九州市小倉北区XX-XXXX</p>
                <p>TEL 093-123-4567</p>
            </address>
            <p>営業時間　平日: 7:30〜20:00　土日祝: 9:00〜18:00</p>

            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3312.104288212224!2d130.88000087553124!3d33.886967873219604!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3543bf4bf949501b%3A0x6918bbd9f307b06c!2z5bCP5YCJ6aeF!5e0!3m2!1sja!2sjp!4v1736306320341!5m2!1sja!2sjp"
                width="1200" height="400" style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"></iframe>
        </section>
    </main>


    <footer>
        <p>Espresso Lane</p>
        <address>
            <p>〒123-4567 福岡県北九州市小倉北区XX-XXXX</p>
            <p>TEL 093-123-4567</p>
        </address>
        <p><small>&copy; 2025 Espresso Lane. All rights reserved.</small></p>
    </footer>
</body>

</html>