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

記事公開日：2017/07/13
最終更新日：2023/10/26

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

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

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

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

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

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

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

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

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

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

ただ、過度にCTAを設置すると、かえってコンテンツを見にくくしてしまうので注意しましょう。

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

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

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

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

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

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

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