Back to Index

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

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

最終更新:2022/11/21

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

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

舞台『背信者』|ニッポン放送×ノーミーツ

https://event.1242.com/events/haishinsha/

横幅:390px

KFCマナースクール開講|ケンタッキーフライドチキン

https://www.kfc.co.jp/campaign/friedchickenday2022

横幅:480px

らんま1/2 | フェリシモ

https://www.felissimo.co.jp/ranma/

横幅:450px

STEP UP キッズジム

https://stepup-kg.studio.site/

横幅: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

サラン&ジップで冷凍貯金|旭化成ホームプロダクツ

https://ahp-web.jp/reitou-chokin/

横幅:375px

泡おもい

https://uccenter.jp/awaomoi/

横幅:500px

『BUMP AWARD 2022』次世代型超短尺ドラマ制作コンテスト

https://aword.bump.studio/

横幅:500px

チームタルトリアン|丸亀製麺

https://jp.marugame.com/campaign/teamtarutorian/

横幅:414px

HIS × RAGEBLUE

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

横幅:375px

ネルソンさん × LOWRYS FARM

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

横幅:465px

僕のヒーローアカデミア×シーブリーズ|SEA BREEZE

https://www.seabreezeweb.com/heroaca/

横幅:380px

札幌PARCO GO scramble SO ramble

http://parco-scs.com/

横幅:可変

食卓の逸品「ザ★®シュウマイ&海老肉焼売」特設サイト|味の素冷凍食品

https://www.ffa.ajinomoto.com/products/shumai_ippin

横幅:375px

STYLERS(スタイラーズ)

https://stylers.co.jp/

横幅:680px

美味しい、楽しい、新しい!ペヤングのある日常 | ニコアンド

https://www.dot-st.com/cp/nikoand/202210product_zakka

横幅:可変

ROPÉ PICNIC ロペピクニック: “今をあそぼう。” ロペピクニックの冬あそび。

http://fuyuasobi.ropepicnic.com/

横幅:594px

子育て世代向け特設サイト「子育て✕長野ろうきん」|【公式】長野ろうきん

https://www.nagano-rokin.co.jp/education_info/

横幅:400px

【飲食店さま向け】モグカツ|スマホひとつで、空席が特等席に

https://restaurant.mogukatsu.com/

横幅:400px

GOOD DESIGN EXHIBITION 2022 | GOOD DESIGN AWARD

https://promo.g-mark.org/finalists/

横幅:550px

コーヒーシティフェスティバル2022

https://coffee-city-fes.com/

横幅:可変(最大:500px)

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

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 土日祝祭日を除く)