Back to Index

スマホに特化したウェブサイト・モバイルファーストな「スマポンシブ」(PCはサブ的な扱い)

辻 元気
(記事・写真)株式会社アールイーデザイン 辻 元気
スマホに特化したウェブサイトが近年、to Cに関して特に増えてきている。
そんなスマホに特化したウェブサイトをまとめてみた。
@2Gweb / @2Gcam

このカテゴリは何ていうデザインなんでしょうか?
モバイルファーストなデザインではあると思うんですよね。
PCで見ると、レスポンシブではあるんですが、スプリットデザイン的でSPのコンテンツ+αな感じなんですよね。
一般向け(to C)のコンテンツならもうこのスタイルでありなんじゃとすら思っています。
この謎のデザインの肝は、PCの時の余白の使い方にあると思います。

SP的な要素はAndroidに合わせてなんでしょうけど、540px以下で展開しているものが多いような気がします。
なんて名前で呼べばいいかはわからないですが、その筋の間では昔の任天堂から発売された「スーパーゲームボーイ」っぽいと言われていたり、いなかったり。
そんな「スマポンシブ」なサイトたち、ちょっと紹介しますね。

1dayカラコン LOUER(ロアー)

https://www.louer.jp/

横幅:480px

2022春夏限定ヘアアイロン | SALONIA(サロニア)

https://salonia.jp/limited/spring2022/

横幅:500px

きゃりーぱみゅぱみゅ10th

http://kpp10.jp/japantour2022/

横幅:525px

ウマ娘 プリティーダービー

https://umamusume.jp/

横幅:1280px(特殊)

TikTok

https://www.tiktok.com/ja-JP/

横幅:692px(メイン部分)

Beams mini

https://www.beams.co.jp/special/beamsmini/kids_7days/

横幅:548px

ほろよい

https://www.suntory.co.jp/rtd/horoyoi/

横幅:可変(縦幅合わせ)

2050年、Hondaが目指している「カーボンニュートラル」って?

https://www.honda.co.jp/HondaHeart/special-contents/infographics/01/

横幅:540px

EMIOZAKI

https://emiozaki.com/

横幅:452px

マジックインキ×RAGEBLUE

https://www.dot-st.com/cp/rageblue/magicink/

横幅:540px

毎日がニューヨーカー気分!日常がちょっぴり特別になるコラボ。 | ローリーズファーム(LOWRYS FARM)

https://www.dot-st.com/cp/lowrysfarm/nyc_naijel_graph

横幅:可変(横幅合わせ)

歩いてサウナ – サウナイキタイ

https://sauna-ikitai.com/walk-to-sauna

横幅:450px

JRA FUN

https://jra-fun.jp/

横幅:可変(横幅合わせ)

いざ、居酒屋。ネオイザカヤ | niko and …

https://www.dot-st.com/cp/nikoand/neoizakaya

横幅:470px

ドラマチックカリー ゴールデン中崎

https://dramatic-curry.com/

横幅:375px

ポカリ写真部「#青いボクら」|大塚製薬

https://aoibokura.pocarisweat.jp/

横幅:375px

重力から守るボディケアかるた | ワコール

https://www.wacoal.jp/morebodycarekaruta/

横幅:400px(さらに大きいサイズに可変)

連載25周年記念企画 ONE PIECE ISLAND 92巻無料大航海

https://op25th.com/island/

横幅:375px

DADAN株式会社

https://dadan.inc/

横幅:540px(メイン部分)

Luna

https://luna-seijinshiki.com/

横幅:600px

辻 元気
ここまで見てきましたが、結構あるんですよ!
ここからは、ゆうきさんから教えてもらったやつです。

from Rush(フロムラッシュ) 公式Webサイト

http://fromrush.com/

横幅:可変(横幅合わせ)

BUMP OF CHICKEN

https://www.bumpofchicken.com/

横幅:可変(横幅合わせ)

タカオのカタヲ | 高尾の新しい楽しみ方発見メディア

https://takaone.jp/media/

横幅:375px(メイン部分)

辻 元気
というわけで、こんな感じでスマホに特化したサイトをご紹介しました。
スマホに特化しつつも、PCでの見せ方の工夫が秀逸ですよね。
真似したいなぁ〜。てね。

Contact us

ホームページやインターネット広告などに関するご相談、
ご質問などお気軽にお問い合わせください。
お見積りやご相談はすべて無料で承ります。

Tel:0287-69-6283(9:00-18:00 土日祝祭日を除く)