スマホに特化したウェブサイト・モバイルファーストな「スマポンシブ」(PCはサブ的な扱い)
![](/uploads/2022/06/tt-2-960x600.jpg)
最終更新:2022/11/21
このカテゴリは何ていうデザインなんでしょうか?
モバイルファーストなデザインではあると思うんですよね。
PCで見ると、レスポンシブではあるんですが、スプリットデザイン的でSPのコンテンツ+αな感じなんですよね。
一般向け(to C)のコンテンツならもうこのスタイルでありなんじゃとすら思っています。
この謎のデザインの肝は、PCの時の余白の使い方にあると思います。
SP的な要素はAndroidに合わせてなんでしょうけど、540px以下で展開しているものが多いような気がします。
なんて名前で呼べばいいかはわからないですが、その筋の間では昔の任天堂から発売された「スーパーゲームボーイ」っぽいと言われていたり、いなかったり。
そんな「スマポンシブ」なサイトたち、ちょっと紹介しますね。
- Contents
- 舞台『背信者』|ニッポン放送×ノーミーツ
- KFCマナースクール開講|ケンタッキーフライドチキン
- らんま1/2 | フェリシモ
- STEP UP キッズジム
- 1dayカラコン LOUER(ロアー)
- 2022春夏限定ヘアアイロン | SALONIA(サロニア)
- きゃりーぱみゅぱみゅ10th
- ウマ娘 プリティーダービー
- TikTok
- Beams mini
- ほろよい
- 2050年、Hondaが目指している「カーボンニュートラル」って?
- EMIOZAKI
- マジックインキ×RAGEBLUE
- 毎日がニューヨーカー気分!日常がちょっぴり特別になるコラボ。 | ローリーズファーム(LOWRYS FARM)
- 歩いてサウナ - サウナイキタイ
- JRA FUN
- いざ、居酒屋。ネオイザカヤ | niko and …
- ドラマチックカリー ゴールデン中崎
- ポカリ写真部「#青いボクら」|大塚製薬
- 重力から守るボディケアかるた | ワコール
- 連載25周年記念企画 ONE PIECE ISLAND 92巻無料大航海
- DADAN株式会社
- Luna
- サラン&ジップで冷凍貯金|旭化成ホームプロダクツ
- 泡おもい
- 『BUMP AWARD 2022』次世代型超短尺ドラマ制作コンテスト
- チームタルトリアン|丸亀製麺
- HIS × RAGEBLUE
- ネルソンさん × LOWRYS FARM
- 僕のヒーローアカデミア×シーブリーズ|SEA BREEZE
- 札幌PARCO GO scramble SO ramble
- 食卓の逸品「ザ★®シュウマイ&海老肉焼売」特設サイト|味の素冷凍食品
- STYLERS(スタイラーズ)
- 美味しい、楽しい、新しい!ペヤングのある日常 | ニコアンド
- ROPÉ PICNIC ロペピクニック: “今をあそぼう。” ロペピクニックの冬あそび。
- 子育て世代向け特設サイト「子育て✕長野ろうきん」|【公式】長野ろうきん
- 【飲食店さま向け】モグカツ|スマホひとつで、空席が特等席に
- GOOD DESIGN EXHIBITION 2022 | GOOD DESIGN AWARD
- コーヒーシティフェスティバル2022
- from Rush(フロムラッシュ) 公式Webサイト
- BUMP OF CHICKEN
- タカオのカタヲ | 高尾の新しい楽しみ方発見メディア
舞台『背信者』|ニッポン放送×ノーミーツ
![](/uploads/2022/06/d4687f21f50ec810d9ab5c5c4e0be6a2.jpg)
https://event.1242.com/events/haishinsha/
横幅:390px
KFCマナースクール開講|ケンタッキーフライドチキン
![](/uploads/2022/06/c9c8ce642b61cc0e20ee181547f714be.jpg)
https://www.kfc.co.jp/campaign/friedchickenday2022
横幅:480px
らんま1/2 | フェリシモ
![](/uploads/2022/06/22f315174c2e4567c0fa6c425ae0d818.jpg)
https://www.felissimo.co.jp/ranma/
横幅:450px
STEP UP キッズジム
![](/uploads/2022/06/ef47dcdbe8602949766db369623eb355.jpg)
https://stepup-kg.studio.site/
横幅:540px
1dayカラコン LOUER(ロアー)
![](/uploads/2022/06/f79ce3897ce0c935bcb89f759a39d6c7.jpg)
横幅:480px
2022春夏限定ヘアアイロン | SALONIA(サロニア)
![](/uploads/2022/06/5269dc568d3583f2bc55d50c20f6414a.jpg)
https://salonia.jp/limited/spring2022/
横幅:500px
きゃりーぱみゅぱみゅ10th
![](/uploads/2022/06/Screenshot-2022-06-29-at-17-19-16-KPP-10th-Anniversary-Special-Website.jpg)
http://kpp10.jp/japantour2022/
横幅:525px
ウマ娘 プリティーダービー
![](/uploads/2022/06/48c6facfa8034eef00913e0851151db4.jpg)
横幅:1280px(特殊)
TikTok
![](/uploads/2022/06/caa824ad79c39512d6f219589439b0f6.jpg)
横幅:692px(メイン部分)
Beams mini
![](/uploads/2022/06/db2ae2ae052cb1265021aa7b0ca47721.jpg)
https://www.beams.co.jp/special/beamsmini/kids_7days/
横幅:548px
ほろよい
![](/uploads/2022/06/c193922e5c49073c7c00870a5bb642e8.jpg)
https://www.suntory.co.jp/rtd/horoyoi/
横幅:可変(縦幅合わせ)
2050年、Hondaが目指している「カーボンニュートラル」って?
![](/uploads/2022/06/8b829c38224eb79f5bb752e9dc2ceb35.jpg)
https://www.honda.co.jp/HondaHeart/special-contents/infographics/01/
横幅:540px
EMIOZAKI
![](/uploads/2022/06/Screenshot-2022-06-29-at-17-26-29-EMIOZAKI-WEB.jpg)
横幅:452px
マジックインキ×RAGEBLUE
![](/uploads/2022/06/69ca400f4cfac9dcac457de394428ef2.jpg)
https://www.dot-st.com/cp/rageblue/magicink/
横幅:540px
毎日がニューヨーカー気分!日常がちょっぴり特別になるコラボ。 | ローリーズファーム(LOWRYS FARM)
![](/uploads/2022/06/540b4a16daa72d67db4eff0c77700aff.jpg)
https://www.dot-st.com/cp/lowrysfarm/nyc_naijel_graph
横幅:可変(横幅合わせ)
歩いてサウナ – サウナイキタイ
![](/uploads/2022/06/4679be0e108a0253e3e29ea76e9b52b1.jpg)
https://sauna-ikitai.com/walk-to-sauna
横幅:450px
JRA FUN
![](/uploads/2022/06/eb627e26aa291c993a1a63c279ff972d.jpg)
横幅:可変(横幅合わせ)
いざ、居酒屋。ネオイザカヤ | niko and …
![](/uploads/2022/06/a24dc0b2843079ad9cfd9dc75af01344.jpg)
https://www.dot-st.com/cp/nikoand/neoizakaya
横幅:470px
ドラマチックカリー ゴールデン中崎
![](/uploads/2022/06/3bd8bfc1bc6df79e74a87c79cc448c04.jpg)
横幅:375px
ポカリ写真部「#青いボクら」|大塚製薬
![](/uploads/2022/07/e26a6615d6f0f0e296653ad77cc19a31.jpg)
https://aoibokura.pocarisweat.jp/
横幅:375px
重力から守るボディケアかるた | ワコール
![](/uploads/2022/07/6d626f1c08c313e3270779330ea05a7f.jpg)
https://www.wacoal.jp/morebodycarekaruta/
横幅:400px(さらに大きいサイズに可変)
連載25周年記念企画 ONE PIECE ISLAND 92巻無料大航海
![](/uploads/2022/07/7c671d503774c2dad35c5c83c6608c99.jpg)
横幅:375px
DADAN株式会社
![](/uploads/2022/07/bd95fff71b5dafc34f06515da78898bc.jpg)
横幅:540px(メイン部分)
Luna
![](/uploads/2022/07/a518803503544553139e1602abe399de.jpg)
横幅:600px
サラン&ジップで冷凍貯金|旭化成ホームプロダクツ
![](/uploads/2022/06/14202e9d9ef81a65e8c48942cc25546a.jpg)
https://ahp-web.jp/reitou-chokin/
横幅:375px
泡おもい
![](/uploads/2022/06/eadc348e53e3cdbfc7bb4bcc5d05c031.jpg)
横幅:500px
『BUMP AWARD 2022』次世代型超短尺ドラマ制作コンテスト
![](/uploads/2022/06/7b7ddbe4077d0da592079690b1673d2a.jpg)
横幅:500px
チームタルトリアン|丸亀製麺
![](/uploads/2022/06/c0b6ef6ffc9ef789a0bd0be987a7810d.jpg)
https://jp.marugame.com/campaign/teamtarutorian/
横幅:414px
HIS × RAGEBLUE
![](/uploads/2022/06/74d5b8853403b6bc088978852f91dae2.jpg)
https://www.dot-st.com/cp/rageblue/his/
横幅:375px
ネルソンさん × LOWRYS FARM
![](/uploads/2022/06/a9fd060ab7e6c372016a8785c010969d.jpg)
https://www.dot-st.com/cp/lowrysfarm/nelson_family
横幅:465px
僕のヒーローアカデミア×シーブリーズ|SEA BREEZE
![](/uploads/2022/06/3439d4d5091b060dac9daa757b1cf12f.jpg)
https://www.seabreezeweb.com/heroaca/
横幅:380px
札幌PARCO GO scramble SO ramble
![](/uploads/2022/09/1329d44c599352778379f593abcb2225.jpg)
横幅:可変
食卓の逸品「ザ★®シュウマイ&海老肉焼売」特設サイト|味の素冷凍食品
![](/uploads/2022/06/a9ae58614bfbfb45d2fc3aa0fb6df6c7.jpg)
https://www.ffa.ajinomoto.com/products/shumai_ippin
横幅:375px
STYLERS(スタイラーズ)
![](/uploads/2022/06/d66956f15328d2795aa3d1e361225c6f.jpg)
横幅:680px
美味しい、楽しい、新しい!ペヤングのある日常 | ニコアンド
![](/uploads/2022/06/5e2d4dd88f68a0c53a241f8ce6de0a80.jpg)
https://www.dot-st.com/cp/nikoand/202210product_zakka
横幅:可変
ROPÉ PICNIC ロペピクニック: “今をあそぼう。” ロペピクニックの冬あそび。
![](/uploads/2022/10/512872da839fce160780ef9c65dd07bc.jpg)
http://fuyuasobi.ropepicnic.com/
横幅:594px
子育て世代向け特設サイト「子育て✕長野ろうきん」|【公式】長野ろうきん
![](/uploads/2022/06/82b4c04414765c2b022cdf22145511f8.jpg)
https://www.nagano-rokin.co.jp/education_info/
横幅:400px
【飲食店さま向け】モグカツ|スマホひとつで、空席が特等席に
![](/uploads/2022/06/e46b4644c59ebdf089b1be972c029fed.jpg)
https://restaurant.mogukatsu.com/
横幅:400px
GOOD DESIGN EXHIBITION 2022 | GOOD DESIGN AWARD
![](/uploads/2022/06/Screenshot-2022-11-02-at-12-00-58-GOOD-DESIGN-EXHIBITION-2022-GOOD-DESIGN-AWARD.jpg)
https://promo.g-mark.org/finalists/
横幅:550px
コーヒーシティフェスティバル2022
![](/uploads/2022/06/01b606f1faa6d242b21a201e2b092ca8.jpg)
横幅:可変(最大:500px)
![](/uploads/2021/06/g-tsuji-530x530.jpg)
ここからは、ゆうきさんから教えてもらったやつです。
from Rush(フロムラッシュ) 公式Webサイト
![](/uploads/2022/06/f1790c5e319440a902b4904dd2ae7f2f.jpg)
横幅:可変(横幅合わせ)
BUMP OF CHICKEN
![](/uploads/2022/06/Screenshot-2022-06-29-at-17-33-09-BUMP-OF-CHICKEN-official-website.jpg)
https://www.bumpofchicken.com/
横幅:可変(横幅合わせ)
タカオのカタヲ | 高尾の新しい楽しみ方発見メディア
![](/uploads/2022/06/398a76027dace6f074aa762b8e0daf59.jpg)
横幅:375px(メイン部分)
![](/uploads/2021/06/g-tsuji-530x530.jpg)
スマホに特化しつつも、PCでの見せ方の工夫が秀逸ですよね。
真似したいなぁ〜。てね。
スマホに特化したウェブサイトが近年、to Cに関して特に増えてきている。
そんなスマホに特化したウェブサイトをまとめてみた。
@2Gweb / @2Gcam