コンセプトページの作成

コンセプトページは、ページ見出し・画像・テキストというシンプルな構成です。

ページ構成

<div class="c-page-kv c-page-kv--concept">
    <div class="l-container-l">
        <h1 class="c-title-level1 c-title-level1--white">concept</h1>
    </div>
</div>

<div class="u-ptb">
    <div class="l-container">
        <div class="concept-img">...</div>
        <p class="concept-text u-mt">...</p>
        <p class="concept-text02">...</p>
        <div class="concept-img u-mt">...</div>
    </div>
</div>

見出しは共通コンポーネント c-title-level1、帯は c-page-kv を使います。ページ固有のスタイルは concept- プレフィックスで付けます。

スタイリングのポイント

• 画像は余白を広めに取って、世界観を見せる
• テキストは行間を広めにして読みやすくする
• ページ下部は共通の c-instagram を置く

今回のような下層ページは、共通パーツを組み合わせるだけでほぼ完成します。