エムタメ!について facebook twitter

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

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

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

  • 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向けにとどめておくことをオススメします。

テストマイサイト

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

5.スマホサイトのレイアウト事例

上記でも、ロングスクロールせずに目的の情報にたどりつけるような工夫がされたスマホサイトを挙げていますが、さらに3つの事例をご紹介します。

国際教育交換協議会

TOEFL.png

画像引用:国際教育交換協議会

TOEFLの教職員向けサイトです。
メニューがタップしやすいよう、画面下に固定メニューとして設置されています。

Stores.jp

Stores.jp.png

画像引用:Stores.jp

無料でショップを開設するための登録フォームが、ファーストビューと一番最後までスクロールした後の2回表示される仕様になっています。

スクロールすると、ショップ画面や管理画面のサンプル、ショップの特長、事例、インタビュー、料金プランなどが見られる設計になっており、1ページもののLPの体裁が取られています。

IMJ GROUP

IMJ GROUP.png

画像引用:IMJ GROUP

Webサイト制作の国内最大手企業であるIMJのWebサイトです。

ファーストビューが「メインビジュアル+メニュー」というシンプルな構成になっており、スクロールせずにメニューを選択して目的のページへ遷移できます。 英語表記への切り替えもファーストビューで行えます。

まとめ

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

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

セミナー情報

セミナー情報

無料資料ダウンロード

BtoBマーケティングハンドブック 表紙

BtoBマーケティングハンドブック

無料ダウンロード

展示会の効果を最大化させる12の手法 表紙

展示会の効果を最大化させる12の手法

無料ダウンロード

関連キーワード

レスポンシブ

エムタメ!ニュース

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

登録する(無料)

Follow us!

twitter hatena google Eight rss follow us in feedly

特集

WEBリニューアル物語

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

はじめての展示会物語

はじめての展示会出展までの道のりを描いたドッタンバッタン劇場

メールマーケティング