Sumaponsive — スマポンシブ
スマートフォンファースト × レスポンシブ。
スマートフォンのデザインをそのままPCへ。
デバイスを問わず、スマホのUI・UXを
活かしきる新しい設計哲学。
PC上でもスマホUIで統一
[ su-ma-pon-shi-bu ] / Sumaponsive
スマートフォンのデザインをそのままPCに活かして制作する手法。
従来のレスポンシブデザインが「大きな画面から小さな画面へ適応させる」発想であるのに対し、 スマポンシブはスマートフォンで培われたUI・UXの設計資産をPCにそのまま持ち込む逆転の発想。 デバイスの境界を意識させない、シームレスな体験を生み出す。
Concept
スマートフォンの利用率がPCを超えて久しい。にもかかわらず、多くのWebサイトは「まずPC」で設計し、後からスマホに縮小する。
スマポンシブは逆転を提案する。スマートフォンで磨かれたUI・UXの設計をそのままPCに展開する。コンテンツは中央に集約し、余白を大胆に使い、タップに最適化されたインタラクションで全画面サイズを統一する。
結果として生まれるのは、デバイスを選ばないシームレスな体験だ。
従来のアプローチ
PC → スマホ
縮小・調整が必要
スマポンシブ
スマホ → PC
そのまま展開
スマホのデザインを、PCへ。
スマホのUIで、PCを設計する。
— スマポンシブ設計思想
Features
すべてのデザイン判断はスマートフォン画面から始まる。コンテンツの優先順位、タップターゲットの大きさ、情報密度——スマホで完成したUIをPCに展開する。
中央集約に限らず、左右への振り分けや縦積みなど、スマートフォンで使われるレイアウトパターンをそのままPCでも踏襲する。デバイスによってレイアウトを作り直さない。
タップ・クリック・スワイプ——操作方法が異なっても、体験の質は変わらない。マウスでもタッチでも同じ喜びを感じられるUIを設計する。
Comparison
| 比較項目 | PC専用デザイン | レスポンシブ | モバイルファースト | スマポンシブ |
|---|---|---|---|---|
| 設計の起点 | PC画面 | PC画面 | スマートフォン | スマートフォンUI |
| PCでの見た目 | 横幅いっぱい | 横幅いっぱい | 横幅いっぱい | スマホレイアウトをそのまま展開 |
| デザイン統一感 | △ デバイスで別々 | △ レイアウト変化大 | ○ スマホ優先 | ◎ 全デバイス統一 |
| コーディング効率 | × 2系統管理 | △ ブレークポイント多数 | ○ 比較的シンプル | ◎ 1系統で完結 |
| スマホ体験 | × 後付け対応 | ○ 対応済み | ◎ 最優先 | ◎ 最優先 |