PCとスマホで全く異なるデザインのページにする方法について

Question

PCとスマホで全く異なるデザインのページにする方法について質問です。
PCとスマホでデザインを分ける場合、下記のように画面サイズによって
表示を切り分けると思います。

HTML
<div class="pc">
  <!-- PC用の表示 -->
</div>

<div class="sp">
  <!-- スマホ用の表示 -->
</div>

CSS
@media screen and (min-width: 769px){
  .sp {
    display: none;
  }
}

@media screen and (max-width: 768px){
  .pc {
    display: none;
  }
}

この表示の切り分けが例えば「PCとスマホで表示する画像を切り替える」とか
「スマホではハンバーガーメニューを表示するがPCでは表示しない」
のようなページの一部分ではなく、ページ全体のデザインが異なるような場合でも
上記のような書き方をしてしまってもいいのでしょうか？
それとも、WordPressの「wp_is_mobile()」のようにしてPCのときはスマホの
ソース自体を出力しないようにしたほうがいいのでしょうか？

過去のこちらの質問で
HTMLは1つのほうがいいと書いてあったのでHTMLは分ける予定はなく、
URLもPCとスマホで一緒です。

何卒、よろしくお願い致します。

Answer 1

おっしゃるようにHTMLは分けない方がSEO対策的に良いですし、URLも同一のものの方が望ましいです。
ただ、画面サイズによって切り分ける、その切り分け方に問題があるように思います。

ページ全体のデザインが分かれる場合でも、
同一HTML上にPC用表示、スマホ用表示を置くことに基本的には問題はありません。
ですが、重いページになると表示が遅くなったりして良くありません。

拝見したところ、PC表示用、スマホ表示用のソースをHTML内にデザインまで記述し、
それをCSSで振り分けようとしているように見受けられます。
これでは実際に表示する内容の2倍の記述が必要になります。
つまり、表示に倍の時間がかかります。
これはSEO対策的にも、閲覧者に対しても大きなマイナスです。
また、全く同じ文章が繰り返されるのはやはりSEO対策的にお奨めできません。

表示する内容がほぼ同じでデザインだけが全く違うのでしたら、
CSSでデザインを切り替えてみてはいかがでしょうか。
HTML内で内容をブロックごとに分け、名前を付けます。
CSSでそれらの順番を入れ替えたり、デザインを変更します。

<div class="block" id="block1">
block1の内容
</div>
<div class=block id="block2">
<img width="690" height="500" src="http:hogehoge.com/image/hoge.jpg" class="image_class">
<p ID="hoge">
hogehoge
</p>
</div>

@media screen and (min-width: 769px){
  .block{
（PC表示時のブロック要素のCSS）
  }
  .image_class{
（PC表示時のイメージ要素のCSS）
  }
  #block1{
（PC表示時のBLOCK1のCSS）
  }
  #block2{
（PC表示時のBLOCK2のCSS）
  }
  #hoge{
（PC表示時のblock2の文字部分のCSS）
  }
}

@media screen and (max-width: 768px){
  .block{
（スマホ表示時のブロック要素のCSS）
  }
  .image_class{
（スマホ表示時のイメージ要素のCSS）
  }
  #block1{
（スマホ表示時のBLOCK1のCSS）
  }
  #block2{
（スマホ表示時のBLOCK2のCSS）
  }
  #hoge{
（スマホ表示時のblock2の文字部分のCSS）
  }
}

もちろんPC、又はスマホのみに表示させる部分についてはdisplay: none;で表示を制御します。
基本的にHTML内には内容を記述、装飾はCSSでする、と考えておけば問題ありません。

順番を入れ替える方法については

スマホとPCで要素の表示順番を入れ替えるには？flexbox「order」を使ってレスポンシブデザインに最適化！

がわかりやすいかと思います。

この方法でしたらPCとスマホでデザインを完全に変えることができ、SEO対策的にもマイナスにはならないはずです。

Answer 2

閲覧しているブラウザをJavascriptで判定して、デザインを分ける方法がありますが、(ユーザーエージェントで分ける)、ユーザーエージェントは、ブラウザの仕様変更や書き換えることもできるので、CSSでデザインを変える方が良いかと思われます。

参考までに、ユーザーエージェントで処理を分ける方法は以下になります。(一例です)

let ua = window.navigator.userAgent;
 
if(ua.indexOf('Edge') != -1) {
  console.log('Microsoft Edge');
} else if(ua.indexOf('Trident') != -1 || ua.indexOf('MSIE') != -1) {
  console.log('Microsoft Internet Explorer');
} else if(ua.indexOf('OPR') != -1 || ua.indexOf('Opera') != -1) {
  console.log('Opera');
} else if(ua.indexOf('Chrome') != -1) {
  console.log('Google Chrome');
} else if(ua.indexOf('Firefox') != -1) {
  console.log('FireFox');
} else if(ua.indexOf('Safari') != -1) {
  console.log('Safari');
} else {
  console.log("unknown");
}