レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

PCサイトをスマホ対応する際の問題

前回は、レスポンシブの問題について論じました。
今回はPCサイトをスマホ対応する際の問題についてフォーカスします。

レスポンシブではPCコンテンツの影響が大きい

一般的にレスポンシブでのWeb制作はPCサイトをデザインすることから始まります。今でも多くのWeb制作ガイドの書籍はPCデザインをベースに解説されていることからも、それはよく分かります。

しかしながら、PCをベースにして、2つの画面サイズに合わせ、コンテンツとして使い易いUIやボリュームにするには、かなり高いハードルが存在します。特にスマホユーザーをより快適にすることは、難題です。

PCのデザインは、スマホより遥かに複雑

横長のPCブラウザー向けのデザインは複雑です。全体のカラム構成、ヘッダー・フッター、グローバルメニューの配置、各カラム内のコンテンツ構成やバナーの位置を計算して決めていく必要があります。また、多くの場合、実際のコンテンツに合わせて、それぞれのセクションを独自にデザインする必要があります。

一方スマホのデザインは単純です。上部からどのコンテンツを配置するかを決めるだけです。個々のセクションはメニューやカルーセルやアコーディオンなど標準的なものが揃っています。

言い換えれば、スマホサイトのデザインは1次元であるのに対して、PCサイトのデザインは2次元となり、自由度が高まり、結果としてその制作コストはとても高くつくと言えます。レスポンシブでPCを最初に作ることから無意識となっていることも多いですが、PCユーザーが2割を切る中で、この制作コストは納得感が薄いと言えるでしょう。

レスポンシブ(2デザイン in 1ソース)の制作は難しい

レスポンシブでは、HTMLは1つ。そのHTMLにCSSで当たるスタイルを横幅毎に設定することと、コンテンツをリキッドレイアウトによる自動配置を利用することで、様々な画面サイズに応じた(レスポンスした)レイアウトを実現するものです。

具体的には、CSS3の規格であるメディアクエリーを使って、この切替を行います。画面サイズの境目であるブレークポイントを分けて、それぞれのデバイス用にCSS設定を行うことになります。例えば次のように、それぞれの要素のそれぞれのプロパティをサイズごとに設定していかなくてはなりません。この切替設定はサイト全体では膨大な量となります。

  • 0~480(スマホ用)    フォントサイズ:9pt マージン:2px …
  • 361~768(タブレット用)  フォントサイズ:10pt マージン:3px …
  • 769~1280(PC用)    フォントサイズ:14pt マージン:6px …
  • 1280~(PC高精細用)     フォントサイズ:16pt マージン:8px …

また、マウス操作とタッチ操作の違いがあります。マウス操作は、小さな場所を指定し易くオンマウス・クリック・ドラッグと多彩な操作が容易である一方、スクロール操作は負担が多くなります。タッチ操作はスクロールは自由自在ですが、小さな場所を指定するのは苦手でイベントもタッチ以外(スワイプ等)は難しくなります。両方で利用できるように調整する必要があります。

様々な計算をデバイス間で高度な調整をしていても、リキッドレイアウトはコンテンツ同士の相関性が強い為、コンテンツを変更すると、CSSの切替設定が脆くも崩れてしまいます。結果、再調整を余儀なくされ、見た目以上の工数が発生しやすい問題を抱えます。

PCファーストだからコンテンツが重い

多くのレスポンシブ制作では、PCファーストつまりPCデザインをベースにしています。

PCに最適化されたコンテンツは、画像は大きく重く、文章は長く、表が多く、複数カラムになることも多くあります。これらはいずれもスマホの表示には不向きです。レスポンシブで狭い画面サイズやタッチ対応にしても、コンテンツ自体がPCコンテンツそのものなので、レスポンスが悪かったり、長すぎたり、という問題は解決できません。

スマホユーザーだけに対応したいケースは多いですが、まずはPCデザインに組み込まないといけないので、対応に時間がかかり、コストも嵩みます。レスポンシブはPCとスマホがどちらがベースであれ表裏一体の関係にあるので、どちらか一方だけを見ていればいいということにはなりません。

モバイルファーストの利点とは

モバイルファーストと言われて久しいですが、その考え方はモバイルユーザーの為にありましたが、実はPCユーザーにとっても重要だと認識されてきています。モバイルを優先して作れば、余計なものは入れられない、ゆえに1つの画像1つの言葉に重みがあり重要なものがよく見える、結果的にPCコンテンツもシンプルで使い易くなります。

レスポンシブは、システムとしてはPC/スマホ共存させることができますが、PCサイトから作ることでコンテンツとしてのモバイルファーストになりにくい点が難点です。弊社製品、「スマホのサイト制作。PCは自動変換 | alter.js」はこの問題を解決するためのソリューションであり、真のモバイルファーストを実現することと、スマホ/PC表裏一体ではなく、PCを従属させる戦略を採っているのが特徴です。

次は、ならばレスポンシブではスマホファーストで作れない理由を整理します。

 

Page Top