SWELLで100%スマホファーストデザインを実現するアイデア

とくにブランド・ファッション関連のキャンペーンページなどで、完全にスマホファーストで作られたデザインを目にすることがあります。

たとえばDaytona Park（旧：FREAK’S STOR ONLINE）の16周年ページ。

たとえばniko and...のマムアンちゃんコラボ特設ページ。

どちらもメインコンテンツ部分がスマホサイズの横幅で作られていて、スマホ（SP）とPCほぼ同じ見た目で閲覧できます。PC表示の場合は左右の空いた部分に目次やCTAを設置できて、なかなか効率的でオシャレなデザインです。

こんなデザインを、SWELLで極力カンタンに再現するアイデアを考えました。下記のような実装になります。

テーマファイルは一切いじっておらず、標準パーツとCSSのみで実装しています。実現したいデザインごとに細かな調整は必要ですが、アイデア次第で色々とできそうです。

ある程度CSSを調整できる方向けで、色々と応用していただく必要はありますが、アイデアベースで解説していきます。