エムタメ!について facebook twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

Bow Now
 >  > スマホサイト長すぎない?レスポンシブのスマホページの構成を考えるときに大切にしたいこと

スマホサイト長すぎない?レスポンシブのスマホページの構成を考えるときに大切にしたいこと

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/07/13

最近では、スマートフォンサイトの最適化を行い、レスポンシブに対応することが当たり前になってきました。
今回は、そのスマホページのレスポンシブ対応の際に重要になる“構成”を深堀りして考えてみました。

ロングスクロールページのデメリット

ロングスクロールページってなに?

スマートフォンなどのモバイル端末の形状に合わせた構成で作られる縦長のデザインやコンテンツをロングスクロールページといいます。
最近では、PC、モバイル端末を通じて、ページ遷移せずにさまざまなコンテンツを読み込む方法として、この縦長デザインが主流になっています。

特にスマートフォンでは、端末自体の形状を見るとわかりますが、PCと違い縦長になっています。1画面に表示される情報量にも制限があるため、それに合わせてできるだけフリックして見られるようにしようというUX上のトレンドによって、ロングスクロールが採用されるようになりました。

しかし、そんなロングスクロールページにもデメリットがあります。

【デメリット1】スクロールのわずらわしさ

PCサイトのコンテンツをそのままにモバイルサイトとして作成すると、どうしてもコンテンツに長さが出てしまいます。そのため、ユーザーはスクロールを余儀なくされます。

特に、PCなどとは違って移動中や閲覧中の電波状況に左右され、続きのページが読めないことがあるため、無駄なコンテンツの精査と一度の操作で多くの情報を読み込める構成を考え、ユーザーの操作性を損なわないように工夫することが必要になります。

【デメリット2】見出しの確認ができない

見出しとコンテンツのまとまりが、コンテンツの量が増えるほどに離れてしまい、ユーザーが今どのコンテンツにいるのかを見失ってしまうケースがあります。

ユーザーが閲覧した時にセクションごとに背景を変えるなど、フリック時に適切に見出しを配置する設計を心がけることが大切になります。

スクロール1回の画面にCTAを配置すること

モバイルコンテンツの作成を行う際に一画面でユーザーが求めている必要な情報を整理し、表示することが大事になってくるのですが、合わせてCTAの設置が重要になります。
ただ、過度にCTAを設置すると、かえってコンテンツを見にくくしてしまうので注意しましょう。

スクロール1回の画面にCTAを配置

参考:紅屋オフセット スマホ時、ウィンドウ下部にCTAを固定表示

モバイルでは非表示にするコンテンツ

PC用には掲載していたコンテンツでも、モバイルの端末では意味を成さないことも起きてきます。

また、スクロール1回の画面に表示できる情報量は限られていますので、掲載する情報の優先順位をしっかりと定義することが必要になります。
情報の優劣とそのデザイン性はPC以上に気にしていかなければいけません。

モバイルでは非表示にするコンテンツ

参考:アールウエディングス

派手な動きは避けよう

PC時に動画やパララックス効果などを盛り込んだ作りにしているとモバイル時にマイナスに働くことがあります。

    • 動画に関しては、iPhoneは、アドビ システムズの「Flash Player」のインストールできないため、Flashコンテンツを表示できないという大きな制限があります。
      ほかにも、マイクロソフトの動画ファイル形式である「Windows Media Video」の埋込みや、QuickTimeムービーのページ内再生なども行う事ができません。

  • パララックス効果はモバイル時に読み込みに時間がかかってしまい、ページ読み込みという観点からユーザーエクスペリエンスとSEO順位を悪化させる要因の1つとなってしまいます。あくまでPC向けにとどめておくことをオススメします。

テストマイサイト

モバイル読み込み測定ツール:テストマイサイト

まとめ

現在、モバイルファーストが浸透しつつあります。
従来のPCサイトだけではなく、スマートフォンサイトの充実化に目を向けていかなければいけません。

その際に何がユーザーにとって使いやすいサイトなのか? に目を向け、ユーザビリティの高いサイト構築となるように対策していきましょう。

エムタメ!ニュース

デジタルマーケティングについての
最新情報やお役立ち資料を自動受信

登録する(無料)

Follow us!

twitter hatena google rss follow us in feedly

特集

WEBリニューアル物語

WEB制作のよくある失敗に全て引っ掛かるけど憎めない青木の奮闘記

最新記事