Featured image of post レスポンシブデザインに未来はない?PCとモバイルで別ページを作るべき理由

レスポンシブデザインに未来はない?PCとモバイルで別ページを作るべき理由

かつてのモバイルサイトは、PCとモバイルで別々にページを作成して、UserAgentをもとに切り替えて運用していた。

現在はレスポンシブデザインが当たり前で、PCとスマホの性能に差がなくなってきたことから、1ページで多種のデバイスに対応することが可能になっている。

しかし、スマホで読みやすい文章は、1センテンスの文字量が少ないほうが向いていたりする。現在はモバイルトラフィックが7割以上を占めていることから、モバイルに最適化したほうがいいんじゃないかと思う━━のだが?

結論:別ページが理想だが、SEOリスクが高い

結論からいうと、真の意味でPC・モバイルの最適な対応をするなら、別々でページを作成したほうが最適といえる。

しかし、1サイトで似た内容のページを作成するとSEOリスクが高まってしまう。スパム判定されて検索上位を目指すことが難しくなるし、PCとモバイルそれぞれのメンテナンスが必要になるので、担当の作業量も飛躍的に増えるから、頻繁に更新するのが難しくなる。

とはいえ、今はGenAIがあるので作業を一任することもできる。

なぜ文章の最適化はPCとモバイルで本来違うのか

レスポンシブは「デザインの最適化」であって、PCとモバイルを別々のページにするのは「文章の最適化」といえる。

PCは横長で視線移動が横方向

  • 1行が長くても読みやすい
  • センテンスも多少長くて問題ない
  • 二段組・図表・余白を有効活用できる

PCの文章は画面に入れれる文字量が多いことから、長文を表示するのに向いている。画面内に文字がびっしりだと嫌にはなるけど、スマホよりも流し読みがしやすいメリットがある。

モバイルは縦長でスクロール方向に依存

  • 1センテンスは短くないと読む負担が大きい
  • 改行が多いほうが読みやすい
  • セクションの区切りも細かいほうがいい

モバイルの最適な文章量は、1行が画面内で完結する程度といわれている。PCで見やすい論文チックな長文は、スマホだと簡単に画面中文字だらけになってしまうので、読む気が起きなかったりする。

SEO的にはそれぞれに最適化したいが

画面サイズが変われば、人間が読みやすい文章構造も変わる。
レイアウトだけ変えても文章の最適化にはならない。

文字の読みやすさは離脱率に関係するため、PCとモバイルのユーザーどちらも、できれば最適な方法を取りたい。

この問題は、「やったほうがいいけど、やらなくてもいい」みたいな分類になる。その理由をメリットとデメリットの面で説明する。

別ページ化のメリット

別ページにするメリットは、PCとモバイルそれぞれに最適化することで、SEOの効果を最大限に発揮することができる。

文章構造を完全に最適化できる

  • PC:長文+表+横幅活用
  • モバイル:短文+改行多め+強調要素多め

CTAや広告もデバイス別に最強配置ができる

  • モバイル=スクロール中の挿入
  • PC=サイドバー・2カラムが有効

回遊動線も変えられる

  • モバイル:縦移動前提
  • PC:横移動+マウス操作前提

しかし別URLはSEO上の大きなリスクがある

同一サイトでPCとモバイルの最適化したページを作成すると、SEO上で大きなリスクがある。代表的なものは次の例。

  • コンテンツ重複扱い
  • 被リンク・評価が分散する
  • URL構造の複雑化
  • インデックス管理が難しい

もっとも怖いのが「コンテンツ重複扱い」になること。SEO用語で「カニバる(カニバリズム:共食い)」といわれる現象。レスポンシブが無い頃からこの現象は多かったので、PCとモバイルで別ページにする場合は、SEO担当は頭を痛くしていたことだろう。

他の要素はそれほど致命的ではないものの、じわじわ効いてくるタイプ。

ここまでの内容で、「なら何が正解なんだよ」と半ギレになっている方も居ると思う。でも正解はGoogleさんが知っているわけです。だから聞いてみましょう……。

Googleはモバイルファーストを採用している

現在のPCとモバイルでは、モバイルのトラフィックが圧倒的に多い。

顧客ファーストであるべきサービス提供側のGoogleとしては、モバイルに最適化されたページを優先的に表示させたいのは当然の流れ。

だから現代においては、PCとモバイルのどちらに最適化するか問題は、モバイルにしたほうがいいとわかる。

扱うジャンルで最適化を考えるべき

━━とはいえ、モバイルファーストな文字配列にすると不都合が起きるジャンルもある。

論文だったり専門的な内容、例えばWikiの情報が全部箇条書きリストだったら?スマホで読みやすいだろうけど、専門性があるとは思えない情報量になってしまう。

個人ブログとか日記など、短文でもいいなら1センテンスが短くても問題ない。

長文最適化にするか短文最適化にするかは、あなたが扱うジャンルによって変わる。考え方もフレキシブルにレスポンシブであるべきだとわかる。

もしPCとモバイルで別ページ実装をするなら?

技術的には3つの実装が現実的。

  1. サーバーサイドでUA判定 → 別テンプレートを返す(AMP的思想)
  2. CSSだけで文章量・ブロック表示を切り替える(Content Reflow)
  3. JavaScriptで文章構造を変換(AIによる再生成含む)

CMSならプラグインで全て対応することはできるけど、現在のAIでも(3)はまだ厳しい。データ使用量を削減する意味でも、実装するなら(1)か(2)が理想ではある。

AIの再生成は可能か?

WebページはHTMLコードで書かれていて、ブラウザがそれをもとにレンダリングしている感じ。だからAIが文章をPCかモバイルで最適化する仕組みを作るなら、ブラウザ側で制御するのが手っ取り早くはなる。

AIが組み込まれたAIブラウザも登場しているけど、現在はどうしてもAPI経由の使用になるから、ブラウザ独自でレンダリングしないので、理想からはまだ遠い。

家庭用PCとかスマホが量子コンピュータークラスになって、記憶領域も1PBが当たり前になったとしたら、ローカルデバイスでLLMを動かすのも余裕になる。そうなればAIがあなたの端末とか文章を読むクセに応じて、ブラウザ上で任意に最適化された文章を提供してくれるようになるかもしれない。

そうなると今度は、記事を作成する意義が問われるようになりそう。

まとめ:とりまレスポンシブ対応でOK

文章体験はレイアウト以上にデバイス差がある。本気で最適化するなら別ページでデバイスごとに対応させるのが理想。

でも、カニバる問題など見逃せないSEOリスクもあるため、必ずしもそれが最適化に繋がるわけじゃないことを覚えていてほしい。

むしろジャンルごとに「長文」「短文」のレイアウトを工夫するくらいがちょうどいい。