レスポンシブデザインによって、表示を切り替えることができるようになったPC、タブレット、スマートフォン。しかし、最近はモバイルファーストの方針によって、スマートフォンでの表示をそのままPCサイトでも利用するサイトが増えています。この新しいトレンドについて、今回はスマホデザインをそのままPCで表示させるデザインのメリットと事例をご紹介します。
目次
モバイルに特化したデザインが増えた背景
しばらく前よりモバイルユーザーの増加に伴いモバイルファーストが推進されてきました。
その流れに加えて、近年はサイトの流入元としてSNSの存在感が強くなっています。SNSを利用するほとんどのユーザーがスマートフォンでアプリを使用しているため、そこからサイトに流入するユーザーも当然スマートフォンでサイトを閲覧することになります。また、広告流入の場合もLINE広告やTwitter広告などのSNS広告の比重が高まっています。結果として、モバイルユーザーの比率が高いサイト、というよりもアクセスするほとんどのユーザーがモバイルユーザーという状況が生まれやすくなりました。
そういった背景をもとに、モバイルに特化したデザインをPCでも表示するサイトが増えてきていると考えられます。
スマートフォンとPCで同一デザインを使用するメリット
通常、PCとスマートフォンで同じコンテンツを使用しても、レイアウトやデザインはそれぞれに最適化されます。そのため、デザイン制作や実装には時間がかかります。しかし、同じデザインを使用することで、通常のレスポンシブデザインの半分以下の開発コストや期間を短縮することができます。
また、デザインが同一であるため、企業側のデザインチェックの手間も減らせる可能性があります。
ただし、すべてのサイトでモバイル特化型デザインが有効とは限りません。業種やユーザー層、流入元に応じて、最適なデザインを選択する必要があります。
モバイル特化型デザインの事例
モバイルに特化したデザインをPCで表示する場合、当然左右に大きなスペースが生まれます。そこにどんな情報を載せるかはサイトによって工夫しており、いくつかのパターンがあるので、今回はパターン別に事例を紹介したいと思います。
ナビゲーションを表示
一番多いのがページ内リンクを掲載して、ユーザーが見たいコンテンツへの誘導をサポートするパターンです。
モバイル特化型デザインの場合、横幅が限られるため必然的にPCに最適化したデザインに比べて、一度に表示される情報量が少なくなり、スクロール量も増加します。そこにストレスを感じさせないように左右にナビゲーションを追加したデザインが主流となっています。
BOTANIST GREEN WISHES
https://sustainable.botanistofficial.com/campaign/mountainday/
みんなでつくる、キャリアの地図2022年
https://plus-oc.onecareer.jp/careermap/2022/job
SALONIA(サロニア)公式サイト 2022秋冬限定ヘアアイロン
https://salonia.jp/limited/autumn2022/
らんま1/2×フェリシモ
https://www.felissimo.co.jp/ranma/
舞台『背信者』
https://event.1242.com/events/haishinsha/
東野産婦人科
https://www.toono.or.jp/obstetrics/checkup/
創業25周年特設サイト｜スパイダープラス株式会社
https://spiderplus.co.jp/25th/
補足情報を表示
おすすめの商品やモバイルへ誘導するためのQRコード、電話番号等の連絡先といった、補助的な情報を掲載するパターンもあります。
7DAYS OUTER with KIDS OUTFIT｜BEAMS
https://www.beams.co.jp/special/kids_outer/
株式会社FINDERS
https://www.finders-tokyo.co.jp/
MERAY
https://meray.tokyo/
コンセプトやデザインに沿った写真やイメージを表示
特定の情報を掲載するのではなく、広いスペースにイラストやインパクトのある写真を掲載してブランドのコンセプトが伝わりやすいようにデザインされたサイトもあります。
美味しい、楽しい、新しい！ペヤングのある日常 | ニコアンド
https://www.dot-st.com/nikoand/cp/202210product_zakka
ドラマチックカリー ゴールデン中崎
https://dramatic-curry.com/
UNLICS BEAUTY DIG-TIONARY｜UNLICS（アンリクス）
https://dig-tionary.unlics.jp/6
いかがでしたでしょうか。2022年の時点では、キャンペーンサイトや特設サイトで使用されるケースが多かったモバイル特化型デザインですが、今後更に目にする機会が増えてくるかもしれません。参考になりましたら幸いです。
WEBデザインのトレンドは、常に変化しています。これは、ユーザーのニーズが変化し、テクノロジーの進化によって新たな機能やデバイスが登場するためです。
しかし、最新のデザインが全てのサイトに必要であるとは限りません。それぞれのサイトには独自のターゲットや目的があり、それに応じたデザインが必要となります。
私たちは、表層的なデザインにとらわれず、最適なWEBサイトのあり方をご提案いたします。
お困りのことがあればお気軽にご相談ください。
