MFIローンチの前にPC版とSP版の表示確認をしましょう

MFIローンチの前にPC版とSP版の表示確認をしましょう

webのあれこれ
2017/08/27
2
vanillaice (Akira)
vanillaice (Akira)
EducationResponsiveSEOMFI

MFI = モバイル ファースト インデックス

サイトの第一評価対象がパソコン版からモバイル版(スマートフォン版)へと変更 されます。2017年ローンチの予定がずれこんで2018年に実装か、と言われています。来るべきその時に備え、今からパソコン(以下 PCと称す)とスマートフォン(以下 SPと称す)、それぞれの見え方を確認しておきましょう、というススメ。

テンプレート種切り替えパラメータ

完全レスポンシブの方はこの章は半ば無視できます。これから記す最初の項目だけ留意すればOK。SP版を併用している場合には全項目で熟考の必要あり。
先に結論を言うと、PCレスポンシブ + SP版併用者は PC版とSP版双方にテンプレート種切り替えボタンを設置する あるいは真逆の 双方にテンプレート種切り替えボタンを設置しない この両極端の選択が良いと思います。

もしあなたが利用しているPC版テンプレートが レスポンシブであり かつ SP版を非表示にした完全レスポンシブならば、SP版へのリンクを削除しましょう

SP版へのリンクを押しても同じページが戻ってくるだけですので、閲覧者は却って戸惑います。意味がありませんので削除しましょう。私のテンプレで言うと、途中まではSPでの閲覧時にはSP版への誘導リンクが表示される仕様になっています。最近のものはその逆で、デフォルトではSP版へのリンクは非表示です(コメントを削除することで表示できるように設定してあります)
注)スマホ版非表示の方Ctrl + F (Windows)/ Command + F (Mac)キー検索を行うと該当箇所が出てきますので、どちらの状態になっているかを確認し、適切な処理を行ってください。

もしあなたが利用しているPC版テンプレートが レスポンシブではないならば、必ずSP版を設定しましょう。

まず稀かとは思いますが、テンプレートが固定幅であるのにも関わらずSP専用版を非表示(使わない)選択設定にしている方がいらっしゃいます。SPで横幅1200pxやら1400pxやらの固定幅を見せられる方はたまったものではありません。ビューポート設定が行われていれば、PCでの見た目そのままが大幅に縮尺されて表示されます。ビューポート設定が無視されていれば、完全にSP画面からはみ出したコンテンツをいちいちスライドして読まされることになります。いずれにしろ ユーザビリティを無視 したある意味暴挙ですので、PCテンプレが固定幅の方は必ずSP版を設置する、と。

もしあなたが利用しているPC版テンプレートが レスポンシブであるならば、最も良い形はSP版を非表示にすることです。

レスポンシブである、という時点で既にアドバンテージを得ています。にも関わらずSP版を併用するのであれば、レスポンシブの利点は全て失われてしまいます。サイト評価の統一もできませんし、メタタグの重複なども増えていくことになります。(メタタグ重複などはレスポンシブにすれば解消されるわけではありません。それなりのhead情報操作が必要です。SP版を設けることで重複は倍々に増えていくことになります)

PC閲覧用にレスポンシブデザインを採用したのであれば、原則としてSP版は排除すべきですが、どうしてもSP版が必要だと思うのであれば…

提案①
PC ← → SP 双方向のリンクを 確実に設ける

これはですね、多くのFC2ブログ専用SP版というのは公式・共有に限らず PC版で表示 というリンクボタンが設置されていますよね。ボタンが有れば押す人は必ず出て来るわけです。押した方がPC版を見て、再度SP版に戻そうと思った時にSP版へのリンクが無い場合、大変困ったことになります。何故PC版に切り替えるかというと、ある人は「パソコン版はどんなデザインなのかな」という興味であったり。またある人は「SP版で非常に見辛いものがあってPC版ならば見られるのではないか」と考える場合もありますよね。例えばよくあるのが 右側が完全にはみ出して見切れている 場合など。コンテンツがはみ出していて画面グラグラ状態(左右に振られる)であれば読む事自体は可能ですが、これは根本的にNG。でも見ることはできます。

ところが はみ出した部分は非表示 (overflow: hidden;) なんてことをされている場合、どんなに頑張っても読むことができませんよね。そういう場合には恐らくPC版への切り替えを試みる方が多いと思います。SP版でコンテンツが画面外にはみ出しているということ自体が今後はもう絶対避けなければいけないのですが。

で、PC版がレスポンシブなのですから、別にSP版に戻さずともそのまま閲覧はできるわけなんですよね。がしかしBUT。仮にそこから別のFC2ブログへリンクなどを辿って遷移したとします。その際に PC版表示がそのまま受け継がれてしまいます。これもFCブログのパラメータの特徴ですね。遷移先のブロガーがPC固定幅 + SP版という形の併用者であっても、表示されるのはPC版です。「FC2ブログはSPからアクセスすると必ずSP版になる。」という説明を見かけますけれども、それは違います。一度でもパラメータの切り替えを行うと、現時点での表示形態が引き継がれます。

というわけで、一旦PC版表示を行い、再度SP版へ戻した場合にも結局は影響の解除ができるわけではないのですが。だとしてもSP版を併用するならばSP版に戻すリンクは設置すべき です。完全レスポンシブ(SP版非表示)にしている場合にはそういったことは起こりません。そういう意味でもレスポンシブデザインを選ぶならばSP版は非表示にするのが最も望ましい形です。

提案②
PC ← → SP 双方向のリンクを設けない

もう封鎖しちゃう (´・ω・`)
提案①よりも寧ろこちらの方が良いかもしれません。 FC2ブログは ダイナミックサービング というシステムで、アクセスがPCなのかSPなのかを判別し、PCならばPC版を、SPならばSP版を自動で表示する仕組みになっています。ただしパラメータのついていないURLに限る

先程述べましたように、FC2ブログの パラメータ なんですが
//vanillaice000.blog.fc2.com/ --- ブログアドレス, 正規アドレス
//vanillaice000.blog.fc2.com/?pc --- PC版テンプレート表示パラメータつき, 正規アドレスではない
//vanillaice000.blog.fc2.com/?sp --- SP版テンプレート表示パラメータつき, 正規アドレスではない

ダイナミックサービングではあっても、パラメータ(URL末尾の ?pc, ?sp)が付いている場合には 効きません。このパラメータはテンプレート種を決定するためのものですので、PCからのアクセスであってもURLに?spがついていれば強制SP版表示です。逆もまた然り。PCで自分のページのGoogle検索結果をクリックしたら、何故かSP版で表示されるので困る、という方は、そのURLの末尾にSP用パラメータが付いているはずです。固定幅テンプレではこの事態は避けられません。PCレスポンシブ+SP版併用の場合も同様。PC版、SP版どちらをインデックスするかはGoogleが決めているからです。テンプレート内に canonical という単語が見当たらないのならば、全ての決定権はGoogleにあります。canonicalを設定している、Google search consoleで適切なパラメータ処理を行っている、という方はその限りではありません。で、先程の説明をもう一度しますと、

SPからのアクセス時 --- SP版(ダイナミックサービング)

PC版へ表示切り替え --- 正規アドレスに?pc付加

再度SP版へ切り替え --- 正規アドレスに戻るわけではなく?spを付加することで戻す

という形になりますので、「再度SP版へ戻した場合にも結局は影響の解除ができるわけではない」というのはこういった事情です。

難しいですか?難しいと思う方こそ完全な形でのレスポンシブを使えば良い と思います。つまりSP版非表示。
これら弊害は完全レスポンシブにすれば起こらなくなるかもしれません。
(もちろんテンプレ製作者の対策能力にもよりますが)

何度も言いますが、FC2ブログはダイナミックサービングです。パラメータ種の変更さえしなければデバイスに対し正しいテンプレ表示が行われます。ですから双方向の行き来をブロックしてしまう。これが提案②
この②を選択するならば PC版でレスポンシブを選ぶ意味は全く無い ということになります。

「テンプレ切り替えをさせない」というのはなんだか不親切のように感じるかもしれませんが、ダイナミックサービングを活かすにはテンプレ表示変更など行わない方が良いんですよ。AmebaのSP版からも「PC版表示に切り替え」のリンクが消えています。それはAmebaが セパレートURLからダイナミックサービングへ変更した からです。

何度もしつこいですが レスポンシブデザインを最も活かせるのはSP版非表示設定 です。デザインだけを見てレスポンシブデザインを選んでいる方は、素直に固定幅テンプレートに変更した方がカスタマイズは楽ですよ とお伝えしておきます。

SPからPC版を開いて「スマートフォン版で表示」のバーが正常表示されているか確認を

こちらは「PC固定幅+SP版」「PCレスポンシブ+SP版」の方に該当。私のレスポンシブテンプレの場合にはバーを非表示にしていても誘導ボタンを設けていますのでSP版へ戻すことができますが、多くのテンプレート、特に固定幅テンプレートにはそういったボタン設置がされていません。レスポンシブデザインであってもボタンを設けているか否かは製作者次第ですので確認を。誘導ボタン(誘導リンク・アイコン)が無い場合、FC2ブログが準備している「スマートフォン版で表示」のバナーはやはり表示しておく必要があります。でないと戻れないわけで (´・ω・`)

で、残念なことにテンプレートの要素がバナーに被ってしまって クリックできない ものが結構あるんですね。クリックできなければ結局戻れません。各テンプレートの仕様の関係ですので、自身が利用しているPCテンプレの構造がバナーと干渉していないかどうか確認すべきです。

コンテンツの非表示(display: none)を多用していないか

大変便利な display: none というCSS。「有る」ものを「無い」ように見せかけるためのCSSです。ちょっとここで気になることがあるのですが。この章は前章とは逆に 完全レスポンシブにしている という方がお読みください。

よくあるのが「トップページでの見た目調整」なのですが。例えばですね、要約タイプテンプレのデフォルトの状態で「記事概要(要約)」が表示されているとしますよね。こんな感じで ↓ 要約記事タイプトップページ各アイテム 日付の下に記事の要約文がありますよね。これが不要だという理由から該当箇所のクラス名に対して display: none を指定 ということをしてしまう方が結構いらっしゃいます。これ辞めましょうね (´・ω・`)

不要なのであればCSSでのdisplay操作ではなく htmlから該当部位を削除 してください。display: none の良くない使い方だからです。Googleは「display: none は UXのためと判断できる場合以外の使用は賢明でない」としているからです。UXのためとされるのは例えば PCアクセス時とSPアクセス時にはナビゲーションを切り替える(SPではドロワーやアコーディオンにする)
これは狭い画面ではナビが折りたたまれている方がユーザビリティが高い、と判断できるからです。ところが単純に「見た目に不要だから。」という理由で本来あるものを無いように偽装してしまうと、下手をすれば クローキング ですよね。

クローキングというのはページで目にすることが出来る内容とhtmlに記載された内容が著しく異なっている、つまり 検索エンジンに対しなんらかのSEO操作を行っている と判断される。それが「クローキング」です。要らないのならばhtmlに書くべきではありません。Google botが読むのはhtml内容ですので、htmlにはガッツリかいてあるのにそれがCSSで非表示、なんてのはよろしくありません。UXのためでないのならば display: none は用いずにhtmlから削除するようにしてください。

フラッシュコンテンツは全て削除

こちらは全ユーザー共通です。本文だけでなく サイドメニュー(FC2プラグインや外部プラグイン)に フラッシュ が含まれている場合は利用を停止しましょう ページ内にフラッシュがひとつでも含まれていると モバイルフレンドリーとして認められません。フラッシュはSPからは閲覧不可ですので使用しない。

スケジュールを予想

MFIも絡めた予想です。

2017年9月〜10月初旬 --- FC2ブログのAOSSL化

2018年 --- MFIローンチ

MFIの安定化は3年ほどかかる… と思う

まずFC2ブログのAOSSL化、つまりブログアドレスの先頭がhttpからhttpsに変わるのは9月頃が目処になっているのではないかと思います(違っても責めないで(笑))
もう9月でギリですよね。10月になればかなり「遅い対応」になりますので、なんとしても9月には実装して欲しいところ。10月からは セキュリティ警告の強化が始まります。 期待も込めて「9月」

実装にあたりHSTSを一旦噛ませるのかどうか、というところはわかりませんが…。私の予想ではたぶん無いと思う。HSTS期間を設けず301リダイレクトになるような気がします。そしてGoogleが運営するBloggerと同じく ユーザー選択制 になるのではないかと思います。FC2ブログやBloggerのように自由度が高いサービスは仕様の統一ができません。なので選択制と予想。もしかしたら選択制・プロアカウント限定になることもある… かもしれませんね。まぁそこはなんとか全体(無料を含む全ユーザー)へ向けて提供にするに越したことはありませんが。

HSTSがわからない、という方はググってください。私が説明するよりよほどわかりやすい記事が見つかると思うのです (゚◇、゚)

まとめ

MFIに向けてあと数ヶ月、あるいは1年余りあるのですが、意外とすぐ来てしまいます。SSL化についてもGoogleが提供した3年という猶予期間を過ぎてしまって今こんな感じなわけです。今後 自分のブログの「顔」となるのはPCでの見た目ではなくSPの方である という意識でもって、レスポンシブを採用するのか、それともSP版併用の道を選ぶのか考えましょう。今からできることはしておいて、いざその時が来ても慌てないように… というススメでした。

Related post

Comments  2

ぼっちん
2017/08/27 (Sun) 08:15

ナイスタイミングで(笑)

Akiraちゃん、おはようございます ^^

いやぁ、私にとってはドンピシャなタイミングで書いて下さったこの記事に感謝致します ^^
早速、勝手にEmbedlyブログカードを晴らせて頂きました (^_^)ニコニコ 
実は「Akiraちゃん、書いてくれないかなぁ ( ̄ー ̄)ニヤ」なんてほんとに期待してたんです(爆)

とても論理的に勉強させて頂きました、ありがとうございます m(_ _)m

vanillaice (Akira)
Akira
2017/08/27 (Sun) 16:08

To ぼっちんさん

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

もうあまり時間が無いですよね。
SSL化後には各ユーザーの修正作業は必ず生じるので、それが済んでからMFIを迎えるのが一番良いのですが。
段階を考えると今からできることはやっておくって感じで (´・ω・`)
9月までにSSL化できるかなぁ。
大抵私の予想って2ヶ月ほどずれるのであてにならないことこの上ない(笑)

こちらこそいつもありがとうございます :)