レスポンシブにすりゃ良いってもんでもない

2019年2月現在でのおおざっぱなwebの流れ

• モバイルフレンドリー --- スマートフォンでのユーザビリティ最重視
• SSL化の推奨 --- web全体https化計画
• MFIの施行 --- サイトの第一評価がパソコンからスマートフォンへ(モバイル絶対主義)
• スピードアップデートの施行 --- 極端に遅いサイトの検索順位を下げる

上記全て実施済です。SSL についてはFC2ブログは対応済、今後FC2ブログ全体の強制SSLを予定している旨のアナウンスも届いています。

MFI(モバイルファーストインデックス)については順次拡大中で個人差があります。もう既に訪れるクローラー(検索ロボット)がほぼモバイルクローラーのみに切り替わっている方もいらっしゃるかもしれません。

スピードアップデート はGoogleのアルゴリズムのことですが、2018年7月から モバイルのページ表示速度をランキングシグナルに加える というものです。簡単に言うと ページ表示速度があからさまに遅ければ検索順位を下げる ということです。

この3つの大きな流れは無視できませんので各人で対策をする、といってもSSLはさておきMFIとスピードアップデートはテンプレートのスペックが低ければどうにもなりませんので、ほとんどはテンプレート製作者の肩にのしかかてくるわけですが。

というのを踏まえ今回の主旨は

モバイル つまりスマートフォンの、ですよ。パソコンの見た目がどうのこうの速度がどうのという話ではないです。パソコンを主軸に据えること自体がもう時代遅れです。それ故に スマホ表示でどちらを選択するか を再考しましょうね、という主旨です。選択肢はふたつ。

• レスポンシブデザイン採用による パソコンとスマホのhtml及びデザイン共通化
• スマホ専用版採用による パソコンとスマホのhtml及びデザインの完全分離

レスポンシブが最強？

これらの大波3つを受けて最良の策は レスポンシブデザインの採用(Responsive design is the way to go) だとGoogleのゲイリー氏は明言しています。モバイルフレンドリー及びMFIを考えた時に導き出される答えがレスポンシブデザインになるからです。

• パソコン版とスマホ版は URLが異なる
• レスポンシブデザインによる html, CSSの統一 が最も効率的にクロールできる

スマートフォン専用版というのはパソコン版とは全く別のhtml, CSSです、また、スマホ版を採用している場合は末尾に ?sp のついたURLが出来てしまいます。全く同じ内容のページであるにもかかわらず、テンプレートが異なるせいで2つのURLが出来てしまうわけです。

そしてhtmlとCSSが別物ですから head情報の不整合 なども起こりえます。MFIでは 表示内容の統一 というのがひとつの大きなポイントになってきます。見た目だけでなくhtml, CSSが統一されているというのが大事。今後はスマホ版が貴方のサイトの「顔」となるのですから、パソコン版で賢明にSEO対策を行ったところで徒労です。今行うべきはスマホ版の対策です。レスポンシブデザインを採用することでSEO対策の負担を減らすことができるでしょう。

ここで重要な点。FC2ブログに於いては パソコン版に「レスポンシブテンプレート」を設定しただけではダメ！
個人設定で スマートフォン版の表示設定「無効」を選択しない限り、スマホではスマホ版が表示され続けます。URLも統一されませんしhtml, CSSも見た目も共通化されることはありません。
本記事でいう「レスポンシブ」というのはパソコン版が固定幅かレスポンシブデザインかという意味ではなく スマートフォン非表示設定(スマホ版を利用しない設定)を行っている という意味ですのでご注意ください。
スマートフォン版の表示設定

また、パソコン版テンプレートとスマホ版テンプレートは当然ですが 使い勝手も統一されていません。これは「見た目」にも関わっていますが、普段スマホから閲覧しているサイトをパソコンで見た時に同一サイトだと気づかない時があります。そして普段使っていたナビゲーション、普段行っていたコメントの仕方など、パソコン版では全く違う位置にあり、全く違うやり方を強制されるかもしれません。統一されていないというのはそういうことです。

レスポンシブデザインにはこういった利点がありますが、だとしてもスマホ版を設定すべきだ と感じるページ構成があります。それが 全文表示テンプレート + 追記なし です。ここからはパターンに応じた具体的提案です。

パソコン版テンプレートが固定幅(リキッド含む)ならばスマホ版必須

パソコン版がレスポンシブデザインではない場合は問答無用でスマホではスマホ専用版が必要です。パソコンの1200px前後のサイズをスマホの400px前後のサイズまで縮尺して見せられる方はたまったものではありません。

一旦はレスポンシブデザインを採用してレスポンシブ設定(スマホ版非表示)もしたが固定幅に後戻りした、という方もいらっしゃるかと思います。スマホ版を表示する設定に戻す のを忘れないでください。意外とみなさん見落としがちです。

全文タイプで「本文」の量が多い場合はスマホ版

全文タイプのテンプレートで全ての文章を「本文」に記載しているとします。つまり「追記」を利用していない場合。あるいは仮に「追記」を利用しているとしても「本文」の内容量が非常に多い場合。このパターンでは いっそスマホ専用版を設定した方が良い と提案します。

スマホユーザーの基本動作は スクロール です。もし現時点であなたの トップページ が、一度のスクロールで次のコンテンツの見出しが出てこない、つまり一番上のコンテンツの内容がまだ続いているならばスマホ版への切り替えを検討しましょう。何度もスクロールしないと次のコンテンツにたどり着けない場合は 内容量が多すぎます。スマホユーザーにとっては非常にストレスにです。

トップページは記事を探すためにある のであって 記事を読んでもらうためのページではない と考えてください。ひとつのページに長大な文章が並んでいては興味の持てそうな記事があるとしても探しあてることはできません。以下は全文タイプレスポンシブのスマホでの実際の表示例とスマホ専用版の表示例です。「この記事が読みたい」というタイトルの記事がありますので探してみてください。

全文レスポンシブ

スマホ専用版

全文レスポンシブだと相当しんどいです。これ特に極端な例というわけでもありません。全文の方って平気でこんな感じでやってますでしょう (´・ｪ・｀)
解決策は以下の通り。要約表示タイプレスポンシブに変更する、というのは全てに於いての解決策ですからいちいち書きません。

解決策

• 本文量を制限する --- 記事の修正が必要
• スマートフォンでは割り切ってスマホ専用版を設定する

「本文」と「追記」を合わせても内容量が少ない場合は全文タイプのレスポンシブ

情報量が非常に少ない場合は要約表示にする必要が無いと思います。個別記事に移動したら5行しかなかった、とか。そういう場合はそもそもがSEOなどは気にしていない、アクセス数は気にしていない、という方でしょうから全文タイプをおすすめします。そしてスマホ版は非表示にしてレスポンシブにしておけばURLなど諸々の恩恵は一応得られます。スクロールで煩わしいといったことも無いでしょう。ただし個別記事へのアクセスは減る、と考えて良いと思います。

レスポンシブでロード時間が長いならばスマホ版

レスポンシブの場合、各テンプレートのスペックにもちろん依存しますが、FC2の現在のサーバー環境は非常に良好なので、無茶なことをしなければPage Speed Insigntsのスコアで概ね90点以上は取れるはずです。ですがデフォルトのスマホ版「New_basic_white_ap」ならば 96点 は確実に取れます。

モバイル環境でロード時間に大きな影響を与える3大原因は

• 画像
• CSS
• Javascript

です。FC2スマホ版 New_basic〜の場合はサムネイル画像が72×72のごく小さいサイズですからこれだけでもかなり負荷が軽減されます。そしてJSも最小限… とはちょっと言えないかな。jQueryなどが入っていますので。けれども意外とハイスペックなんですよ。ただし見た目が質素であること、サムネイル画像がぼやけていること、注目記事など第三者へのリンクが表示されること、広告が多いこと、ブログ名が長い場合には後尾が省略されてしまうこと、などの難点が挙げられます。とはいえこれだけいろいろ表示されても96点取れているのだから優秀と言えると思います。

レスポンシブテンプレートの場合、元のスペックをまず確認してください。そして何かを追加したならば追加後のスペックも確認してください。90点を下回る場合にはスマホ版を採用した方が良いかもしれません。全文表示タイプの場合は上手くやらないとすぐに60点50点になってしまいますよ。50点を下回るようならばちょっと考えものです。もしかしたら要約タイプに変更するだけでスコアが格段に上がるかもしれません。

レスポンシブデザインではないのにスマホ版を非表示にしている場合にも言及しておくと、めちゃくちゃ遅い ですよ。ファーストビューに全内容(メインカラム + サイドメニュー)が含まれることになるのですから当然です。非レスポンシブデザインをスマホで表示させるというのはユーザビリティ面でもスピード面でもどこを取ってもやはり最悪の選択と言えます。

記事総数が多い場合は無限スクロールを避ける

これちょっと本旨から外れますが、公式のデフォルトスマホテンプレートのトップページはページを遷移させるのではなく「さらに記事を読み込む」といういわゆる 無限スクロール タイプです。記事総数が1000も2000もある、ページ数にして100ページ200ページもあるのに一発で任意のページにたどり着けないのはストレスどころの騒ぎではありません。最終までクリックあるいはスクロールし続けてくれる人などまず居ません。全文・要約あるいはレスポンシブ・スマホ版を問わず、リスト型のページ送り が実装されているものを選びましょう。「前」「次」だけのページ送りも無限スクロール同様最後まで押してくれる人は居ないと思ってください。

また、無限スクロールは個別記事を開いてブラウザバックしてトップに戻った時にまた一番頭まで戻ってしまうことが多い、という弊害があることもお忘れなく。その時点で離脱確定だと思われます。私なら離脱する(笑)

全文レスポンシブ活用のお手本

偶然おみかけしたのでご紹介しようと思います。

時偶備忘録

フリーソフトやChrome拡張機能の使い方、ゲーム攻略、漫画感想など雑多な内容。

tokitamaroku.blog.fc2.com

私の制作した全文タイプレスポンシブデザインテンプレートの「Generic」をご利用頂いています。背景などオリジナルカスタマイズを加えておられますが、是非スマートフォンで閲覧してみてください。これが全文レスポンシブの最適解です。この使い方を想定して制作をしています。

「本文」と「追記」を適切に区切っているため、トップページの文章量が的確で、本文内容が後続内容の導入部として機能しています。ここで興味を持った人は「続きを読む」をクリックして個別記事にアクセスしてくれるわけです。つまり個別記事へのアクセスも確保。「本文」の記載は記事の触りだけ100〜200文字程度。残りは「追記」に。全文タイプをレスポンシブで使いこなすにはこのぐらいの思い切りは必要です。

まとめ

一番のキモは 「本文」と「追記」の適切な区分 なんですが、何も気にせずに記事を連ねていくと後々は要約テンプレートしか選択肢が無くなってしまいます。適切に分けていればどんなパターンにも対応できます。レスポンシブを採用しようとスマホ版を採用しようと、全文だろうと要約だろうと。

あとたまに「追記を展開にしたい」というお問い合わせがありますが、個別記事のGoogleの見解は「ロード時に非表示になっている内容は表示になっている内容と同等には扱わない」と言っています。さらには「記事を読むために個別ページに滞在しているのに非表示にする理由がわからない」また分割ページについても「何故ひとつのページで読めるようにしないのか理解に苦しむ」という見解のようです。

個人的にFC2では 本文よりも追記が重要 だと思っていますので、そこに賛同できるのであれば追記の展開は辞めたほうが良いですね。FC2の「本文」と「追記」をGoogleが区別することはありません。しかし「追記」を展開型にするのであれば区別されることも十分考えられます(悪い意味で)

ということで本記事を簡潔に言うならば 追記大事。使い方とかすげー大事。 といったところです。最後にもう一度。

あなたのサイトの顔はスマートフォンでの表示です。

類似内容の記事

FC2ブログの記事表示タイプと各々の利便性

トップページ上での記事の「見せ方」について。FC2ブログでは大別して2通りの表示方式があります。ひとつは 全文表示、もうひとつは要約表示 です。...

vanillaice000.blog.fc2.com

FC2ブログでレスポンシブテンプレートを正しく使う方法

FC2ブログは数多ある公式・共有テンプレートから気に入ったものを無料で選択・利用できるようになっています。 テンプレート配布ページ 説明文の中に レスポンシブ という文言の付いているテンプレートが最近ではたくさんありますよね。 何故それが説明内に書いてあるかというと 非常に大事な特徴だから 書いてあります。 伝える必要の無いものであれば最初から書いてない。 レスポンシブの意味を知...

vanillaice000.blog.fc2.com

あなたのサイトが嫌われる20の理由

20 Reasons Why People Hate Your Website という記事を拝見して個人的に納得できましたので意訳でご紹介しようと思います。 (ブログに関連しないと思われる章については飛ばします)...

vanillaice000.blog.fc2.com

もったいないなぁと思う記事の書き方【全文表示テンプレート】

良い記事を書いているのに「非常にもったいない」と感じる記事構成があるんです。 追記を利用していない長文記事 のことです。さらに 追記を利用していないのに全文表示タイプのテンプレートを設定している このコンボははっきり言って 損 だと思いますよ、というお話。 本件を一言でまとめると トップページに長文を並べるな のススメです。...

vanillaice000.blog.fc2.com