1. トップページ
  2. コラム
  3. 【パターン別】モバイル特化型デザインの事例まとめ

【パターン別】モバイル特化型デザインの事例まとめ

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年の時点では、キャンペーンサイトや特設サイトで使用されるケースが多かったモバイル特化型デザインですが、今後更に目にする機会が増えてくるかもしれません。参考になりましたら幸いです。

ホームページ・ECサイト運用に関する情報をメルマガで配信中!
WEB担当者様向けのお役立ち情報を無料でご案内しております。
登録は下記フォームから!


この記事を書いた人

山本 真史

Creative & Development Division