スマートフォン版の非表示を勧める理由

スマートフォン版の非表示を勧める理由

カスタマイズ
2017/09/17
8
vanillaice (Akira)
vanillaice (Akira)
EducationResponsiveSEO

以前から何度も記事にはしていますが、スマートフォン版と併用する人のなんと多いことか 。(゚うェ´゚)゚。

レスポンシブデザインの最大の強みは「見た目」だけではありません。本質を理解しましょう という啓蒙記事です。結論から。レスポンシブデザインを選択したならスマホ版は非表示に!!!

はじめに

とはいえ任意ですよ (´・ω・`)
「スマホではスマホ版じゃなきゃ絶対嫌!」という方もいらっしゃるでしょうし。
(ならばレスポンシブ選ぶ意味なくね? とも思うが…)
まぁでも、あまり意識せず選んでしまう人が多いのは理解できます。FC2ブログのテンプレート製作者自体がほとんど居ないですし。最近の新着はほとんどがレスポンシブですので、何も考えずデザイン性だけで選んでる方が多いであろう事実は否定できない。

がしかしですね。レスポンシブデザインというのが何故存在し、何故それが必要とされるのか。レスポンシブのメリットをいくら書いたところで「ふーん。で? (´・ω・`)」
って感じなんですよ!(笑)
ですから今回は逆方向から

レスポンシブを選ばなかった場合のデメリット

から攻めてみようと思う次第。

PC版テンプレがレスポンシブでも、スマホ版設定してたら意味がない のは何故なのか
を説明します。というわけで、スマホ版設定のデメリット。れっつごー (o'ω')ノ

見た目の印象が揃わない

まずは見た目です。PCで開いた時にこんなだとしますわね ↓

パソコンでの見た目

ところがスマホで見たらこれ ↓

スマートフォンでの見た目

これが同じブログだとすぐに気付ける人ってどのぐらい居るんでしょう。
スマホ版を非表示にし、完全レスポンシブにした場合はこれ ↓

レスポンシブのスマートフォンでの見た目

統一感 の観点で優れているのはどちらなんでしょうか。

広告や赤の他人様の紹介が多い

完全レスポンシブにすると広告が最小限です。完全レスポンシブにすれば広告少ないんやで? 知らなかったの? (´・ω・`)
PC版とほぼ同じなので、無料アカウントだとしても

  • 個別記事下のテキスト広告(個人設定で非表示可, 任意)
  • 画面下フローティング広告(必須)
  • フッター下テキスト広告(必須)

これだけですね。
一方スマホ版はどうですか?

  • ヘッダー下バナー広告(必須)
  • 画面下フローティング広告(必須)
  • 記事下バナー広告+テキスト広告(必須)
  • 注目記事 リスト(必須)
  • 人気ランキングリスト(必須)
  • 至る所にバナー広告

こんなにある。
各1点づつではありませんので大量にあります。
もちろん有料アカウントにすれば非表示は可能。

スマートフォン版専用広告(他ブログ記事紹介含む)

一般的に見て、自身のサイト内で「他のブロガーさんの宣伝を積極的に行いたい。」という方は稀じゃないでしょうかね (´・ω・`)
デザインによっては自分の記事も他ブロガー記事のリストも目立ち具合が同じだったり。どこまでがアンタの記事なのよ (´-ε-`;)
みたいな。

上記の類は完全レスポンシブにすれば 出ません。目立つ広告なんてフローティングだけ。ただ今後はわかんない。レスポンシブだと現状は広告面で明らかなメリットがありますので、今後運営が対策を練る可能性はあります。今のところは優遇状態(笑)

PC版と使い勝手が違う

私が個人的に一番嫌なのが、記事とコメントが分離している ところなんですよね。これがとっても嫌です。コメントする時って本文を参照することだってあるでしょう?いちいち別ページに行かなあかんのかい (;`ー´)o と(笑)
で、みなさんちゃんと スマホ版の コメント欄が検索結果に表示されないようなメタタグ って書いてます?ん?どうなんですか?

PC版とスマホ版は全く別のhtml, CSSです

あとはPC版にある タグ一覧 のページなんかもスマホ版には実装されてないですよね。

PC版ではやってるのにスマホ版ではやってないとか多すぎ

例えばアフィリエイトバナー。例えばブログランキング。例えばアクセス解析コード。例えば 新規実装の更新日時

パソコン版の方だけやって、スマホ版は手付かずとか当たり前にやってないですか?新規実装の更新日時なんですが、早速導入している方もいらっしゃいますね。で、拝見するとこんな風に書いてある。「フッターの上に入れてみました。皆さんにも更新がわかりやすくなったと思います。」どこにだよ。ねーよ (´・ω・`)
どこにあるんだよ(笑)
PC版に入れただけでしょうよ。私スマホから見てるんですけど。こうなると閲覧者は戸惑うことこの上ありませんよね。だからどこなんだ!って話し。

PC版とスマホ版は全く別のhtml, CSSです

PC版に書いただけでスマホ版に自動適用になるわけありません。

公式お得意の「さらに記事を読み込む」それ本当に便利だと思ってます?

いわゆる 無限スクロール ですよね。こういうのが便利なのは フローなコンテンツだけ です。FacebookとかTwitterとか。流れていく情報系に向いています。流し読み系ですね。んでもブログってのは ストックコンテンツ なんですよ。流れず蓄積されていくタイプ。さんざん読み込んで延々とスクロールし、気になった記事を開きますよね。読み終わったところでブラウザバックします。すると一番上に…。またさっきのところまでスクロールさせるんですか?冗談じゃありませんよー。私は無限スクロールのブログは読みません。それと気づいた時点で即バックします。

来年あたりからサイトの顔がスマホ版の方になりますが、そのデザインで本当に良いのですか?

MFI ですね。モバイルファーストインデックス。これは必ず実施されます。スマホ持ってないとかもう関係ない。

そのスマホ版、何かがはみ出していませんか? 要素が画面を超過していたら モバイルフレンドリーとして認めてもらえませんよ。モバフレではない = ユーザビリティの低いページ という評価をGoogleから頂戴することになります。

何故レスポンシブをすすめるか

頑張ってこきおろしてみましたが、今度はレスポンシブのメリットです。
くれぐれも
PC版に採用しただけでは「レスポンシブ」とは言えません。
スマホ版を非表示にして初めて「レスポンシブ」です。スマホ版との併用は「不完全レスポンシブ」です。

というのを念頭に。まず、ここまで書いてきたデメリットについて、完全レスポンシブにした場合には全て消えてなくなります。無限スクロールについてはそういうPCテンプレもあるかもしれませんが。いやもうホントにね、無限スクロールはやめて欲しい!切に願う (´・ω・`)

さてさて。現在Googleのキーマンとしてご活躍中なのが Gary "鯨理" Illyes (げいりー いりぇーしゅ)さん。この方の発言は要チェックなのですが、最近の注目発言として

〝もし君がSEOを気にかけていて、HTTPS化(SSL化)の風潮に逆らうのならば、君は間違っているし きっと後悔することになる

後悔するって (´・ω・`)
Googleの中の人が「後悔するぞ。」って (´・ω・`)
さらなる注目発言。SSL化した後・MFIが実施された後の展開について。

Googleモバイルファーストインデックス後はレスポンシブが唯一の選択肢か? #inhouseseo | 海外SEO情報ブログ

Googleモバイルファーストインデックス後はレスポンシブが唯一の選択肢か? #inhouseseo | 海外SEO情報ブログ

Google のゲイリー・イリェーシュ氏は、8月22日に開催された ISM Spin-off #2 で、このようにレスポンシブ ウェブ デザインをかつてないほどに推奨した。これまでは、「動的な配信」と「別々の URL」を含めた3つのモバイル構成のどれを選択しても構わないと言っていたが方針を変え、レスポンシブ ウェブ デザイン1本に絞った。

Responsive design is the way to go.

〝選択すべきはレスポンシブデザインだ〟という発言をなさったそうです。

よく思い違いをされる方がいらっしゃいますが、「Googleがそういってるからやらないと」ではない んですよ。「何故Googleがそういうのか」を考えるべきであって。

PC版とスマホ版は全く別のhtml, CSSです

これをしつこく今回書きましたが、これこそがまず問題の一つです。ほとんどの方がPC版・スマホ版双方を上手く管理できないんですよね。覗いてみると、PC版に指定されているSEOに係る内容とスマホ版のそれが全く噛み合っていないことがかなり多いです。

レスポンシブにする利点はたくさんあり、日本国内の無料ブログで完全な形のレスポンシブを利用できるのは本当に限られたサービスだけ。「Blogger」「はてなブログ」「FC2ブログ」この3つじゃないですかね。これってすごくお得なんですよ?レスポンシブデザインは技術力が必要ですので、プロに依頼すれば固定幅のそれよりも高額です。でもFC2ブログの共有テンプレートはタダ じゃないですか(笑)
なのに、せっかくレスポンシブテンプレートを選んでいるのにスマホ版設定しちゃうって、もったいないにもほどがあります。個人的に「ムカつく」とかそういうのはないですよ (´・ω・`)
好きにやれば良い、というのが前提ではありますが、「それは大層勿体ないことなんですよ」というのは伝えておかなければ。管理が楽(html, CSSの一本化)というだけでも大きな利点です。バナーにしろアクセス解析にしろ、PC版で作業すればそのままスマホでも活かされるわけですから。様々な取りこぼしが発生しませんよね。なんでこんな記事を書いているかというと、取りこぼしている方が多いからです。

FC2ブログのレスポンシブテンプレートで誤った設定をしておりませんか?

FC2ブログのレスポンシブテンプレートで誤った設定をしておりませんか?

来年からのスタートがかなり濃厚になって来たGoogleの モバイル ファースト インデックス(MFI) それに向けて、既にご自分のFC2ブログを旧来のテンプレート(HTML4)から HTML5+CSS3 のWeb技術を利用するレスポンシブテンプレートでの運営に切り替えた人も大勢おりますよね。 とは言え、まだ未対応の人たちの方が圧倒的に多いんですが(笑)...

本記事のリンク先を参照されまして熟考すべし ╭( ・ㅂ・)و

Related post

Comments  8

ぼっちん
2017/09/17 (Sun) 11:29

To Akiraちゃん

(〃^▽^〃)oあはははっ♪
も~ Akiraちゃんのこの記事の”口調”って、私、大好きなんですよね~ ヽ(^^ ) ヨシヨシ
ほんっとに小気味良い(笑)
ブログって、長文になるとなかなか終わりまで読んでくれなくなっちゃう感じがあるもんだから、私はいつも簡潔明瞭にメイン要素だけスパっと単純表現するから「抜け落ちる関連要素」もいっぱいあるんですよね (^_^; アハハ…
だから、その分、小分けにして同じような記事を新たに書くんだけど(笑)

マジで「レスポンシブテンプレートに切り替える意味」をもっともっと多くの皆さんに認識して欲しいもんです。

またまた弊記事にEmbedly張ってくださってありがとうございます (^_-)-☆パチッ

Akira
2017/09/17 (Sun) 13:00

To ぼっちんさん

ぼっちんさん、こんにちは (●'0'●)/

「わかってて」それでもスマホ版を設定している方については自己責任ですのでそれ以上何も言うことは無いのだけれど。
「わかってない」人の方が圧倒的に多いと思うんですよね。
そしてスマホ版が「使いやすい」という思い込みも。

ただ「わかっててそれでも」な方向けに固定幅テンプレを提供する作者さんが居てくれても良いのかな、とは思います。
もちろんスマホ版も同時提供できるという前提で。
それはデザイン面のことではなくhead情報レベルでの話しですが。
ともかく「レスポンシブはPCとSPと同じデザインにできますよ〜」
みたいな売り込み方をすると本旨が全く伝わらないので、こういう記事は定期的に載せていこうと思う次第です。
ぼっちんさんの啓蒙活動はとってもわかりやすいので今後も引用させてくださいね (o'ω')ノ

素姓乱雑
2019/05/03 (Fri) 12:05

スマートフォン版の表示設定について

Akira様
環境設定でのスマートフォン版の表示設定について、
気付きにくいのですね。というより、
画面の表題だけを見ると、無効にすればスマートフォンで
見れなくなっちゃうんじゃないかと誤解しやすいのではないでしょうか。
「スマートホンフォン重視といいながら何で無効にするんだ」と、
恥ずかしながら、実は私も今しがた気付いた一人です
「推奨、スマートホンの表示無効設定」を明記されてはいかがでしょうか。

vanillaice (Akira)
Akira
2019/05/03 (Fri) 19:08

To 素姓乱雑さん

こんにちは。

何度も同じことを繰り返して恐縮なんですが、FC2ブログは機能名称の名付けが下手。
これは「スマートフォン版の表示設定」なんて意味不明な名称ではなく端的に「レスポンシブ設定」とすべきでした。
この名称が素姓乱雑さんが仰る通り「スマホで表示されなくなるの?!」という誤解を生んでいるように思います。ですがこれが正式名称ですからこの名称で啓蒙するしかないんです (´・ω・`)
言い換えてしまうと今度は「そういう名前の設定がどうしても見つかりません…」という方が現れます(笑)

> 「推奨、スマートホンの表示無効設定」を明記されてはいかがでしょうか。〜

こちらについては毎回各テンプレート専用記事で比較的大きな文字で記しています。配布ページのテンプレート説明文は文字数制限があるのでこれを入れると必要情報が入れられないんですよぅ ( ̄∀ ̄;)

素姓乱雑
2019/05/04 (Sat) 09:35

To Akiraさん

丁寧なコメントありがとうございました。
恥ずかしながら、コメントを書いてから各専用記事に大きく書いてあるのをいまさらになって
気付きました( ;∀;)おそらく、皆さんそうなんでしょうね。
「スマートフォン版を非表示にしてご利用ください。」
を「なんのこっちゃ」とも思わずスルーしていた。
で、その下の「設定ページ」も当然読み飛ばしていたのですね。
できれば長いですが、「レスポンシブを活かすためにFC2のスマートフォン版を無効(設定では有効か無効かと書いてあるので)
にして・・・・」ではいかがでしょうか。

vanillaice (Akira)
Akira
2019/05/04 (Sat) 17:44

To 素姓乱雑さん

こんにちは。


アドバイスありがとうございます。
結局のところ気の無い人はどれだけ大きな字で書いても、どれだけ噛み砕いて詳細に説明しても読みません。
今度は「レスポンシブの意味」から説明することになると思いますのでこれ以上のことは致しません(笑)

web上は全て自己責任ですから、ちゃんとやろうと思えば説明もちゃんと読むでしょうし、思わなければいくら言ってもやらないでしょうから、私ができることはたまにこういう啓蒙記事をUPするだけです。
理解した人が得をする、という形で良いと思っています。

* アドバイス頂いた件については配布中テンプレート全記事の文面を修正しました。また何かお気づきの点がありましたらご指導くださいね。
ありがとうございます :)

素姓乱雑
2019/05/05 (Sun) 14:57

ありがとうございました

いろいろと書きましたが、丁寧な返事をいただきありがとうございました。
Akiraさまの記事は参考になることがたくさんありますので
これからもよろしくお願いします。

vanillaice (Akira)
Akira
2019/05/05 (Sun) 16:51

To 素姓乱雑さん

はい。こちらこそよろしくお願いします :)