トップページの作成

いよいよ各セクションの作成です。今回は1ページ構成なので、トップページを完成させればサイト完成です。

KV

KVは大きなビジュアルが主役です。画像を複数枚並べて、ブランドの世界観を先に見せます。

テキストは控えめでも問題ありません。まずは画像のサイズと余白を整えて、印象を固めるのが先です。

Concept

Conceptは、メイン画像・ギャラリー・コピーを組み合わせたセクションです。PCでは左右レイアウト、SPでは縦積みにすると読みやすくなります。

<section class="top-concept">
    <div class="top-concept-main">...</div>
    <div class="top-concept-gallery">...</div>
</section>

ギャラリーは小さな画像をグリッドで並べます。aspect-ratio と object-fit: cover を使うと、サイズが揃って見た目が安定します。

Product

商品は縦に並べ、各アイテムの中で画像と情報を横並びにします。一覧自体を2列グリッドにするわけではありません。

.top-product-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (width >= 768px) {
    .top-product-item {
        display: grid;
        grid-template-columns: 50% 1fr;
        align-items: center;
        gap: 24px;
    }
}

1件分を先に完成させてから増やします。下にInstagram導線を置くと、商品からSNSへの流れも作れます。

Showroom / Online shop / Company

残りのセクションは、共通の見出しコンポーネントとボタンを組み合わせるだけでほぼ完成します。

• Showroom：店舗写真＋店名＋ボタン
• Online shop：背景画像の上にCTA
• Company：ロゴ・情報・地図

地図は埋め込み想定で枠を確保しておけば十分です。この教材では見た目の配置までを扱います。

ここまでできたら、MIGLIORE のサイト完成です。サンプルコードと見比べて、良いと思った書き方を取り入れてみてください。