スマホとPCの画面設計で迷ったときは、最初に見る人の画面を起点に考える——これが、レスポンシブ対応における基本の判断軸です。
スマホからのアクセスが7割を超えているのに、まだPCの画面を基準に考えていていいのだろうか——そういう疑問を、一度は持ったことがある方も多いと思います。
「レスポンシブ対応」という言葉は広く知られていますが、どこから着手すればいいのか、何を優先すればいいのかは、意外と整理されていません。
スマホとPCの画面設計で迷っている方に向けて、どちらを優先すべきか、その判断軸をお伝えします。
スマホファーストという言葉の意味
「スマホファースト」という言葉は、もう何年も前から言われています。
けれど、実際にサイトを作る現場では、いまでもPCの画面を先に作り、そのあとスマホに縮める、という流れが残っています。
理由はいくつかあります。
ひとつは、デザインツールの画面がPCサイズのほうが扱いやすいこと。
もうひとつは、依頼する側も受ける側も、PCの画面で全体を見たほうが判断しやすい、という感覚があることです。
ただ、実際にアクセス解析を見ると、多くのサイトでスマホからの流入が6割から8割を占めています。
スマホで見た画面が、そのサイトの第一印象になる。
そう考えると、PCの画面を先に作って、あとでスマホに縮める、という順番には、少し無理が出てきます。
スマホファーストとは、「スマホの画面だけ作ればいい」という意味ではありません。
スマホで見たときに、ちゃんと伝わる設計を先に考える、という意味です。
実際に、とある雑貨屋のウェブサイトをリニューアルしたとき、私自身もPCの大きな画面のデザインに力を注ぎたくなりました。画面の余白や、並びの美しさを存分に作り込めるのが、PCデザインの醍醐味でもあります。
ただ、アクセス解析を確認すると、スマホからの流入が大半を占めていました。そこで発想を切り替えて、まずスマホの画面を魅力的に仕上げることに集中し、そこからPC向けに展開していく順番をとりました。
仕上がりを見ると、スマホからPCへ広げていくほうが、情報の優先順位が自然に整理されていて、PC画面の完成度も結果として上がった、という印象があります。
PCファーストで考えていいケース、考えないほうがいいケース
すべてのサイトでスマホファーストが正解、というわけでもありません。
どちらを優先するかは、誰が、どんな状況で見るかによって変わります。
PCファーストで考えていいケースは、たとえば以下のような場面です。
- BtoB向けのサービスサイトで、資料を見ながら比較検討する
- 社内システムや管理画面など、業務中にPCで操作する
- データや図表が多く、広い画面で見る前提の情報サイト
一方で、スマホファーストで考えたほうがいいケースは、こういった場面です。
- 店舗や施設の情報を、移動中や外出先で見る
- 個人向けの商品やサービスを、日常のすきま時間で探す
- SNSやメールから流入してきて、その場で判断する
判断の軸は、「見る人が、どこで、どんな状態で開くか」です。
アクセス解析で数字を見るだけでなく、その数字の背景にある状況を想像すると、どちらを優先すべきかが見えてきます。
レスポンシブ対応で押さえておきたい3つの判断軸
ここからは、スマホとPCの画面設計で迷ったときに、判断の軸になる3つの視点をお話しします。
判断軸1: 最初に見る人は、どちらの画面で開くか
最初に見る人が、スマホで開く可能性が高いなら、スマホの画面を先に考えます。
逆に、PCで開く人が多いなら、PCの画面を先に組み立てます。
アクセス解析を見れば、デバイスの比率はすぐに分かります。
けれど、数字だけでなく、その人がどんな状況で開いているかを想像することが大切です。
たとえば、スマホからのアクセスが多くても、あとでPCで見直す前提の情報なら、両方の画面で成立する設計が必要になります。
判断軸2: 情報の優先順位を、画面の広さに合わせて変えない
スマホとPCで、伝える情報の優先順位を変えないことが、レスポンシブ対応の基本です。
PCの画面では全部見せて、スマホでは一部だけ見せる、という設計は、結果として情報が届かなくなります。
スマホで見たときに、何を最初に伝えるべきか。
その順番を先に決めておくと、PCの画面に広げたときも、同じ流れで情報を並べることができます。
判断軸3: 操作のしやすさを、画面の大きさに合わせて調整する
情報の優先順位は変えなくても、操作のしやすさは画面の大きさに合わせて調整します。
たとえば、スマホでは指で押しやすいボタンの大きさが必要ですが、PCではマウスで操作するので、もう少し小さくても問題ありません。
ナビゲーションの配置も、スマホでは画面の下や、開閉式のメニューにしたほうが使いやすい場合があります。
情報の順番は揃えながら、操作の部分は画面の大きさに合わせて調整する。
この考え方が、レスポンシブ対応の判断軸になります。
また、お客様とテストサイトを確認する場面でも、同じことを感じます。
ついノートPCや印刷した紙をもとに、PCの画面で確認を進めてしまいがちです。けれど、ユーザーの目線に近づくなら、実際にスマホを手に取って、お互いに画面を見ながら動作確認をするほうが、気づけることが多い。
「ここ、押しづらいですね」「この文字、少し小さいですね」という声は、PCの画面を眺めているときよりも、スマホを触っているときに自然と出てきます。
設計の起点だけでなく、確認の起点もスマホに置くことで、ユーザー目線が保たれると実感しています。
どちらを優先するかではなく、どちらでも伝わる設計を
スマホファーストとPCファーストは、どちらかを選ぶ、という話ではありません。
どちらの画面で見ても、ちゃんと伝わる設計を目指す、という話です。
ただ、設計の起点をどちらに置くかは、判断が必要です。
見る人が、どこで、どんな状態で開くか。
その状況を想像すると、どちらを優先すべきかが見えてきます。
迷ったときは、最初に見る人の画面を起点に考える。
その判断軸が、レスポンシブ対応の入口になると思います。
