トップページの作成

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

KV

KVは、キャッチコピー・説明文・CTA・イラストで構成します。SPでは縦積み、PCではテキストと画像を横並びにするとバランスが良いです。

<div class="top-kv">
    <div class="l-container">
        <div class="top-kv-inner">
            <div class="top-kv-text">...</div>
            <div class="top-kv-img">...</div>
        </div>
    </div>
</div>

装飾用のSVGは、レイアウトを崩さないよう絶対配置で添えるイメージです。まずはテキストとメイン画像の骨格を固めてから装飾を足すと調整しやすいです。

特徴セクション

特徴はアイコン・見出し・本文のカードを3つ並べます。一覧は CSS Grid で組みます。

• SP：1列
• PC：3列

.top-feature-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
}

@media (width >= 768px) {
    .top-feature-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

1件分を先に完成させてから増やすと、余白やアイコンサイズの調整がしやすいです。

機能紹介セクション

機能紹介は、画像とテキストを交互に並べるパターンです。偶数行だけ左右を入れ替えると、単調になりにくくなります。

<section class="top-function-item">
    <div class="top-function-img">...</div>
    <div class="top-function-text">...</div>
</section>

PCでは grid-template-columns で2カラムにし、偶数アイテムだけ順序を入れ替える方法がよく使われます。

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