モバイル特化型レスポンシブデザインについて調べてみたよ。
はじめに
案件でTHE FIRST TAKEのようなスマホレイアウトのみで構築されたWebページを作成することになったので、事前調査をしました。概要・名称については株式会社SAVVY / SAVVY Inc.さんの「新たなWEBサイトの潮流？モバイル特化型レスポンシブデザインって？」を参考にさせていただきつつ、利用させていただいています。
今回は、モバイル特化型レスポンシブデザインの有用性を挙げていくと言うよりかは、ブレイクポイントやリサイズ時の仕様などの実装時に必要な情報を、エンジニア目線から調査しています。
それでは、概要からどうぞ。
概要
- 一言で言うと、PCレイアウトがないサイト。
- スマホの画面幅（375px~550px）を基準とし、コンテンツ幅がそれ以上にならないように設計する。PCで出てしまう余白には、補助要素（ページネーションやメニューなど）や、装飾目的の要素を配置することが多い。
- 超モバイルファーストレイアウト（超モバ）って言っているとこもある、名称は不定。
調査
参考記事と同じ3サイトを、以下4点を重点的をみてみました。
- ブレイクポイント
- コンテンツ幅の値
- PCの余白に表示している要素
- 800px~375pxまでの中途半端な画面幅でのレイアウト（レスポンシブorリキッド）
※コンテンツ内のカラムが変化するものは、今回は範囲外として調査していません。（例：https://jra-fun.jp/）
THE FIRST TAKE
- ブレイクポイント
- 768px
- コンテンツ幅の値
- PC：550px固定
- SP：画面幅100%
- PCの余白に表示している要素
- ロゴとアーティストの写真のみで、UIなし。
- 800px~375pxまでの中途半端な画面幅でのレイアウト（レスポンシブorリキッド）
- レスポンシブデザイン
- テキストは中央寄せが多く、MV以外フォントサイズも固定のため、左右に余白ができがち
- ブレイクポイントまでは、画面左の余白が小さくなるため、多少テキストが見切れてしまう。
SALONIA
- ブレイクポイント
- 768px
- コンテンツ幅の値
- PC：500px固定
- SP：画面幅100%
- PCの余白に表示している要素
- 製品ロゴ
- スクロール量に合わせて変化する画像。コンテンツ内のテキストの参考画像として機能している様子。（スマホレイアウトにはないPCのみ表示する画像）
- スマホサイトへアクセスするためのQRコード
- ページネーション（クリックはできない。）
- ハンバーガーメニュー（SPと共通で配置のみ変更している）
- 800px~375pxまでの中途半端な画面幅でのレイアウト（レスポンシブorリキッド）
- 1400px、1000pxのタイミングで左右の要素が、非表示になり、ブレイクポイントまでは余白が発生、テキスト、画像が見切れることはない。
- 1400px、1000pxのタイミングで左右の要素が、非表示になり、ブレイクポイントまでは余白が発生、テキスト、画像が見切れることはない。
Beams mini
- ブレイクポイント
- 768px
- コンテンツ幅の値
- PC：画面幅に合わせて可変（313px~548px）
- SP：画面幅100%
- PCの余白に表示している要素
- ロゴ
- アンカーリンク（クリックできる）
- 別サイトへのリンク（SPはページ下部にのみ表示されているが、PCだと固定）
- 800px~375pxまでの中途半端な画面幅でのレイアウト（レスポンシブorリキッド）
- レスポンシブ、画像は画面幅に合わせている。
- レスポンシブ、画像は画面幅に合わせている。
所感
①コンテンツ幅はPC表示時に最大値が400px~550pxのものが多い。それ以上のサイズで表示してしまうと、PC表示の際に以下の問題点が発生するよう。
- レスポンシブの場合は大きな余白や画像とテキストのサイズ差が大きくなりすぎるなどのレイアウト崩れが発生。
- リキッドレイアウトの場合は表示サイズが大きすぎて、読みづらくなる。
②タブレットサイズ（768px~1080pxぐらいまで）の表示は何パターンかに分かれた。
a. 画面幅に余裕がある限り、余白部分に要素を表示しているパターン。
ブレイクポイントを2個以上追加することになるので、工数増加・メンテナンス性低下につながる可能性あり。（保守するようなページでもない場合はOK。）
b. コンテンツ幅を狭めて可能な限りPCレイアウトを保持するパターン。
レスポンシブレイアウトはレイアウト崩れ、リキッドレイアウトの場合はテキストサイズの縮小によって可読性は下がる。
c. タブレットサイズは多少の崩れは考慮しない
ターゲットデバイスの設定から不要と判断した場合や、工数削減の面では有用。
③インタラクション（ホバーとか）の有無
- コンバージョンボタンや表示領域が大きいボタン以外は、凝ったホバーアクションは基本なし。あってもマウスカーソルが手（pointer）になるのみが多く、変化してもカラーか透明度が変わる程度。
④PCの余白に表示している要素について
- ページネーションやハンバーガーメニューなどのUI。シンプルな機能のUIが1,2個あるのみ。
- ECの場合は、コンバージョンボタンを追従させている場合もあった。（SPはコンテンツ最下部に設置されていた。）
- 余白表示内のロゴなどがSPコンテンツの中にもあり重複する場合は、出し分けしているサイトもある。
- 工数削減を目的とした場合は、コンテンツ以外に工数かけると本末転倒になる。
⑤その他にもいろんな実装例があるので、ギャラリーサイトなど見ると良い。
- 比較的新しいレイアウトではあり、名称も明確に決まっているわけではないため、ギャラリーサイトは少ない。
その他
- PCレイアウトにて、カラム変更したり、カーソル表示やホバーアクションでリッチな表現をしているサイトもあり、モバイルファーストながらPCレイアウトのチューニング度合いはサイトコンセプトによって判断した方が良い。
※ 今回の調査では範囲外。
終わりに
調査から見えた実装要件は複雑なものはないので、コスト・工数やスケジュールにあわせて、コンテンツのレベル・作り込み具合が調整しやすいかもと思いました。 ← エンジニアに優しい！
とはいえ、一般的なレイアウトではないため、お客さんや制作メンバーとの要件づめ・認識合わせは事前に確実にやっておかないと、思わぬところでこけるかもですね。どんな案件にも言えますが。
個人的には、軽微であれど調査の重要性が再認識できたので良い経験でした。
参考
新たなWEBサイトの潮流？モバイル特化型レスポンシブデザインって？ | 東京都杉並区のホームページ・WEB制作会社 SAVVY（サヴィ）
「モバイルファースト」で作られたWebサイト
SANKOU! | Webデザインギャラリー･参考サイト集
Discussion