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

【この記事の要約】

レスポンシブレイアウトとは、PC、タブレット、スマートフォンなど、異なる画面サイズのデバイスに合わせて、Webページのレイアウトやデザインが自動的に最適化される設計手法です。

この手法では、1つのHTMLファイルを共通で使い、CSS（スタイルシート）で各デバイスの画面幅に応じた表示の切り替えを制御します。これにより、デバイスごとに別々のサイトを制作・管理する必要がなくなり、開発・運用のコストと手間を大幅に削減できます。また、Googleがモバイル対応を検索順位の重要な要素としているため、SEOの観点からも必須の対応となっています。マルチデバイス時代における、Webサイト制作のスタンダードな手法です。

 

【よくある質問と回答】

 

【ここから本文】

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

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

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

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

 

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

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

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

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

 

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

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

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

 

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

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

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

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

 

 

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

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

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

 

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

 

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

派手な動きは避けよう

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

 

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

 

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

 

 

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

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

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

国際教育交換協議会

 

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

 

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

Stores.jp

 

画像引用：Stores.jp

 

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

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

IMJ GROUP

 

画像引用：IMJ GROUP

 

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

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

まとめ

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

 

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

 

 

【English summary】

Responsive layout is a design approach where a web page's layout and design are automatically optimized to fit different screen-sized devices, such as PCs, tablets, and smartphones.

This method uses a single, common HTML file and controls the display changes for each device's screen width with CSS (stylesheets). This eliminates the need to create and manage separate sites for each device, significantly reducing development and operational costs and labor. Furthermore, since Google considers mobile-friendliness a crucial factor in search rankings, it is also an essential measure from an SEO perspective. It is the standard method for website production in the multi-device era.