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

2022/12/27

PC・タブレット・スマートフォンで表示を切り替えるレスポンシブデザインは今では当たり前になりましたが、モバイルファーストを推し進めた結果、最近はスマートフォンでの表示をそのままPCサイトでも利用するサイトも増えてきました。今回はスマホデザインをそのままPCで表示させるデザインのメリットと事例をご紹介します。

モバイルに特化したデザインが増えた背景
スマートフォンとPCで同一デザインを使用するメリット
モバイル特化型デザインの事例

モバイルに特化したデザインが増えた背景

しばらく前よりモバイルユーザーの増加に伴いモバイルファーストが推進されてきました。
その流れに加えて、近年はサイトの流入元としてSNSの存在感が強くなっています。SNSを利用するほとんどのユーザーがスマートフォンでアプリを使用しているため、そこからサイトに流入するユーザーも当然スマートフォンでサイトを閲覧することになります。また、広告流入の場合もLINE広告やTwitter広告などのSNS広告の比重が高まっています。結果として、モバイルユーザーの比率が高いサイト、というよりもアクセスするほとんどのユーザーがモバイルユーザーという状況が生まれやすくなりました。
そういった背景をもとに、モバイルに特化したデザインをPCでも表示するサイトが増えてきていると考えられます。

スマートフォンとPCで同一デザインを使用するメリット

通常はPCとスマートフォンでコンテンツは同じものを使用してもレイアウトやデザインはそれぞれに最適化するため、その分デザイン制作や実装には時間がかかります。同一デザインを使用することで通常のレスポンシブデザインの半分とはいかなくとも、開発コストや期間を圧縮することが可能です。
また、デザインが同一のため企業側のデザインチェックの手間も減らせる可能性があります。
もちろん、全てのサイトでモバイル特化型デザインが有効とは限りません。業種やユーザー層、流入元によって最適なデザインを選択する必要があります。

モバイル特化型デザインの事例

モバイルに特化したデザインをPCで表示する場合、当然左右に大きなスペースが生まれます。そこにどんな情報を載せるかはサイトによって工夫しており、いくつかのパターンがあるので、今回はパターン別に事例を紹介したいと思います。

ナビゲーションを表示

一番多いのがページ内リンクを掲載して、ユーザーが見たいコンテンツへの誘導をサポートするパターンです。
モバイル特化型デザインの場合、横幅が限られるため必然的にPCに最適化したデザインに比べて、一度に表示される情報量が少なくなり、スクロール量も増加します。そこにストレスを感じさせないように左右にナビゲーションを追加したデザインが主流となっています。