トップページの作成

いよいよ各セクションの作成です。写真家サイトらしいビジュアル中心の構成を組み立てます。

KV

KVは大きな写真とコピーが主役です。文字量は少なめにして、写真の印象を優先します。

<div class="top-kv">
    <div class="top-kv-copy">...</div>
</div>

背景画像は picture でSP/PCを切り替えると、表示サイズに合わせやすくなります。

Profile / Products

Profileは、写真とプロフィール文の2カラムです。SPでは縦積み、PCでは横並びにします。

Productsはサービス紹介を縦に並べます。一覧自体をグリッド2列にするのではなく、各アイテムの中で画像とテキストを横並びにします。奇数番目は row-reverse で左右を入れ替えます。

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

@media (width >= 768px) {
    .top-products-item {
        display: flex;
        justify-content: space-between;
    }
}

.top-products-item:nth-child(odd) {
    flex-direction: row-reverse;
}

Works / Award / Photo school

Worksはギャラリーです。選択中の大きな写真と、横スクロールのサムネイル一覧を組み合わせます。画像は aspect-ratio と object-fit: cover でサイズを揃えます。

Awardは受賞歴カード、Photo schoolはテキスト＋CTAボタンです。ここまで来ると、共通見出しとボタンの組み合わせが中心になります。