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

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

たとえばDaytona Park(旧:FREAK’S STOR ONLINE)の16周年ページ。

出典:daytona-park.com

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

出典:nikoand

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

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

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

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

お知らせ

この記事は、当サイト文亭の賛助会員さん限定で「会報」として公開しています。
500円払いきりで、すべての会報がずっと読み放題になります。

記事をシェア
  • URLをコピーしました!
  • URLをコピーしました!
時間割