トップページの作成

いよいよ各ページの作成です。まずはトップページから作ります。

KV

KVは大きなビジュアルが主役です。キャッチコピーは控えめでも、写真の印象でブランドを伝えます。

SP/PCで画像を切り替える場合は picture を使います。

Concept / Menu

Conceptは画像とテキストの紹介ブロックです。PCでは左右レイアウト、SPでは縦積みにします。

Menuは、コーヒーメニューを大きく見せるセクションです。背景画像の上にテキストとボタンを重ねるパターンです。

<section class="top-menu">
    <div class="top-menu-inner">
        <div class="top-menu-body">...</div>
    </div>
</section>

Shoplist / Blog

店舗紹介と最新ブログも、トップからの導線として置きます。ブログ一覧は共通の c-posts を使います。

Instagram

ページ下部は共通コンポーネント c-instagram です。投稿画像のグリッドとボタンを組み合わせます。

.c-instagram-list {
    display: grid;
    gap: 8px 9px;
    grid-template-columns: repeat(3, minmax(auto, 260px));
    justify-content: center;
}

@media (width >= 768px) {
    .c-instagram-list {
        grid-template-columns: repeat(6, minmax(auto, 260px));
    }
}

SPは3列、PCは6列です。