WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >デザイン参考

Googleがモバイルファーストデザインを推奨し始めて数年が経ち、スマートフォンに対応したWebデザインを制作することが必須になってきました。

これまでは「PCとスマートフォンそれぞれに最適化されたレスポンシブデザイン」が当たり前とされてきましたが、最近では「PCとスマートフォンで同じレイアウトになっているデザイン」が増えてきていることにお気づきでしょうか？

Hello! Family.｜親と子の”いま”をつなぐ、みまもり家族IoT

このように、主なコンテンツはスマートフォンで見られる範囲の横幅に収め、PCから閲覧すると、外側にイメージ画像などが表示されているデザインです。

話題になってはいるものの、今のところ決まった名称は存在していないようなので、ここでは「モバイル特化型デザイン」とします。

今回は、この「モバイル特化型デザイン」のメリットと向いているサイト、向いていないサイトを挙げていきます。

「モバイル特化型デザイン」のメリット

モバイルファーストでデザインを構築しやすい

「モバイル特化型デザイン」では、重要な要素はスマートフォン画面に収める必要があるため、まずはここの構成やデザインから考えていく必要があります。

そのため、スマートフォン閲覧者にとってベストなレイアウトということを念頭に構築をしやすくなります。

デザイン、コーディングともに時間と費用を抑えられる

レスポンシブデザインは画面全体をPC・スマートフォンそれぞれに適したレイアウトで構築する必要があるのに対し、「モバイル特化型デザイン」ではほとんどの要素をスマートフォンのみに最適化させれば済む作りになっています。

その分、作業時間も短縮できるため、制作費用を抑えることもできます。

あまりWebサイト制作に費用をかけられない場合にも取り入れやすいですし、ベース構築の費用が浮いた分で、おもしろい動きを付けるなどのプラスアルファな部分に時間と費用を使えるため、結果的にサイトのクオリティを上げることにも繋がるかもしれません。

PC閲覧時に、見せたい部分をずっと表示できる

「モバイル特化型デザイン」をPCで閲覧すると、メインコンテンツの外側の要素は基本的に固定されているので、メインコンテンツをスクロールしても外側の要素が常に見えている状態になります。

そのため、次の3つのメリットがあります。

1. 商品を訴求し続けられる

   

   ほろよいのサイトは、PCで閲覧すると常に商品のイメージイラストが表示されているため、購買意欲が湧いてくる作りになっています。
   商品特設サイトにぴったりですね。

2. イメージを訴求し続けられる

   

   BOTANISTのサイトでは常に山や森など大自然の映像が見られるので、「環境に配慮している会社なんだなぁ」というイメージを強く訴え続けることができています。
   ブランディング効果が高そうです。

3. 見せたい情報を見せ続けられる

   

   株式会社FINDERSでは「お問い合わせ情報」や「おすすめの不動産情報」が常に表示されているため、見てほしい情報へアクセスがしやすく使い勝手が良いです。
   更新頻度の高い情報サイトでは活用できそうですね。

「モバイル特化型デザイン」に向いているサイト

スマートフォンからの閲覧が多いサイト

PC閲覧時にもいろいろな工夫のされている「モバイル特化型デザイン」ですが、やはり基本的にはスマートフォンでの閲覧を優先して作られています。

そのため、スマートフォンで見られることが多いと想定されるWebサイトの場合は「モバイル特化型デザイン」を選択すると、より多くのユーザーにとって見やすいサイトにできそうです。

B to C（個人ユーザーの閲覧が多い）サイト

現在、個人ユーザーはPCよりもスマートフォンでWebサイトを閲覧することが圧倒的に多くなってきています。特に、SNSからの流入が多くなってきているため、スマートフォンでしかWebサイトを見ないという人も多いでしょう。

そのため、B to Cサイトでは「モバイル特化型デザイン」が適しているものも多いと言えます。

情報の少ないサイト

見せたい情報が少ない場合、「読ませる」よりも「見せる」ことを意識したデザインのほうが良い場合も多いです。

「モバイル特化型デザイン」では背景に写真やイラストなどを思い切って大きく表示できるため、情報が少ないサイトでも見映えが良く、インパクトのあるデザインにすることができます。

写真を大きく見せたいサイト

↑のBOTANISTのサイトのように、写真や動画を大きく見せようと思うと、「モバイル特化型デザイン」が適していることもあります。

レスポンシブデザインでも、メインビジュアルを全画面表示すれば写真を大きく見せることは可能ですが、「モバイル特化型デザイン」なら見せたい写真や動画を、スクロールしてもずっと表示し続けられるのがポイントです。

若者向けのサイト

スマートフォンを利用する高齢者が増えてきているとはいえ、まだまだスマートフォンの主流は若い方になります。特に、先述したようにSNSを利用するのは比較的若い世代が多いです。

そのため、若者向けコンテンツには「モバイル特化型デザイン」がおすすめです。

SNS連動型キャンペーンのページや、学校のサイトなどは最適でしょう。

「モバイル特化型デザイン」に向かないサイト

情報の多いサイト

情報が多く「読ませる」ことを重視したサイトの場合、横幅の狭い「モバイル特化型デザイン」では縦に長すぎるページになってしまい、読むのがつらいと思わせてしまいます。

この場合はレスポンシブデザインを採用し、PC閲覧時にはPC画面に合わせた横幅で表示したほうが親切です。

ただ、例えば↑の株式会社FINDERSではトップページのみ「モバイル特化型デザイン」を導入し、情報の多い下層ページは従来型のレスポンシブデザインに切り替えることで「読みづらさ」問題を解決しています。

B to Cサイトで、スマートフォン閲覧者が多い場合は、このように工夫して取り入れてみても良いかもしれません。

企業などのコーポレートサイト

企業コーポレートサイトの場合はB to B（企業ユーザーの閲覧が多い）がほとんどなので、会社のPCから閲覧するユーザーが多いと思われます。

そのため、あえて「モバイル特化型デザイン」を取り入れるメリットはあまりない可能性が高いです。

ただ、採用情報については学生がスマートフォンで閲覧することが充分に考えられるため、採用サイトにのみ取り入れてみるのは良いかもしれません。

高齢者の閲覧の多いサイト

「モバイル特化型デザイン」は、PCで閲覧してもスマートフォンの横幅で表示されるため、PCでは文字や画像が小さくなりやすいです。
そのため、高齢の方にとっては閲覧しづらいデザインです。

高齢者向け商品・サービスのサイトはもちろん、自治体サイト、公共施設や病院など幅広い年代が利用するサイトでは避けるのが無難でしょう。

PCからの閲覧が多いサイト

既存サイトがPC閲覧者のほうが多い場合は、「モバイル特化型デザイン」は適していないかもしれません。
Webサイトのリニューアル前に既存サイトのアクセス状況などを分析してみてから判断しても良いでしょう。

「モバイル特化型デザイン」参考サイト

サンカラム

こちらは「モバイル特化型デザイン」のみをまとめたデザイン参考サイトです。

サイト自体が新しいのでまだ数は多くないですが、それでもこれだけ集まるということは、やはり注目トレンドの1つかなと思います。

まとめ

「モバイル特化型デザイン」は、すべてのWebサイトに適しているものとは言えません。Webサイトごとのターゲットやユーザーの閲覧環境などを考慮して、じっくりと判断する必要があります。

それでも魅力的ではあるため、商品紹介特設サイト、キャンペーンLPなどでは取り入れるところも今後増えていくのではないかと思います。

見ていて楽しいサイトが多いので、ぜひ一度訪れてみてください！