今更だけど「レスポンシブ」ってなんぞ？

レスポンシブとは

Responsive web design

Responsive web design (RWD) is an approach to web design aimed at allowing desktop webpages to be viewed in response to the size of the screen or web browser one is viewing with. In addition it's important to understand that Responsive Web Design tasks include offering the same support to a variety of devices for a single website. As mentioned by the Nielsen Norman Group: content, design and performance are necessary across all devices to ensure usability and satisfaction.

Wikipedia

〝レスポンシブ ウェブ デザイン とは、デスクトップ上のwebページをスクリーンやウェブブラウザのサイズに応じて柔軟に表示させるwebデザインのひとつのアプローチです。それだけでなく「レスポンシブ web デザイン」の役割とは、対象webサイトに対しあらゆるデバイスから閲覧できるようサポート提供することである、という認識が重要です。ニールセン・ノーマン・グループ氏が述べるように、全てのデバイス間で「コンテンツ」「デザイン」そして「パフォーマンス」が要求され、ユーザーの使い勝手や満足を保証するものです。〟

大体伝わりますかね (´・ω・｀)
現在のweb界はスマートフォン・タブレット(以下 モバイルと称す)勢がかなり拡大し、既に 「パソコン閲覧よりもモバイル閲覧の方が主流」 と言われて久しいのですが。モバイルからの閲覧サポートは2通りあります。

• パソコンではパソコン専用版を提供 + モバイルではモバイル専用版を提供
• パソコンもモバイルも レスポンシブデザイン で同じものを提供

他にも「AMP」などが出てきていますが、あくまでもFC2ブログで使える方法は今のところ上記2種です。

レスポンシブのメリット

htmlとCSSがワンセットで済む

「モバイル版」というのは「パソコン版」とは全く別のhtmlとCSSが必要ですから、①の パソコン版+モバイル版 を選択するのであれば、2セットのhtml+CSSを管理することになります。

従来の方式
パソコン = パソコン用のhtml, パソコン用のCSSを適用
モバイル = モバイル用のhtml, モバイル用のCSSを適用
計 2セット

レスポンシブ
パソコン・モバイル = 同一のhtml, 同一のCSSを適用
計 1セット

具体的に言うと、パソコン版にアフィリエイトバナーを貼ったとします。でもそれはモバイル版とは無関係ですから、モバイル版に対してもう一度同じ作業を行う必要が出てきます。ランキングバナーをテンプレートソースに直貼するのも同じです。レスポンシブデザインならば一度で済みます。

パソコンとモバイル間で全体の見た目の共通化

先程述べましたように、モバイル版はパソコン版とは全く別のhtml, CSSですから、同じ見た目になり得ようがありません(テンプレート製作者が同じデザインのモバイル版を提供すれば別ですが)
パソコンで見たらシックなデザインが、モバイルから見たらえらくカラフルだったり。まぁそんな選び方をする方がいらっしゃるとは思いませんけれど(笑)

使い勝手の共通化

「パソコンで見た時は記事の下にコメント欄があったのに、モバイルで見たらページ遷移しないと書けないの？ 」
「パソコンにあったナビゲーションがモバイルから見たら無いけど、どうやって移動すんの？ 」
とかですね (´・ω・｀)
レスポンシブならほぼほぼ同じ見た目ですので パソコン ← → モバイル 間を行き来しても惑いは少なくて済みます。

SEOに有利

Googleが提唱する モバイルフレンドリー。検索アルゴリズムに モバイル環境で問題なく表示されるか否かを追加します。という発表があったのが確か2015年4月頃。アルゴリズム強化の発表があったのが翌年同じく4月頃だったと記憶しています。当初は検索結果の左側に スマホ対応 という文言表示の有無がありました。
モバイルフレンドリーなサイト = スマホ対応の表示
モバイル対応が済んでいないサイト = 表示なし
こういった差別化がありましたが、現在ではこのラベルは 廃止 されています。

検索結果からはモバイルフレンドリーか否か判別できなくなりました。ラベルが廃止されたからといって Googleのモバイル関連アルゴリズム強化の姿勢は変わっていません。ラベルが外されたのは「ほとんどのサイトが対応済みだから。」だそうです。モバイル対応していないサイトは検索順位を落とされます ですから パソコン版テンプレートが固定幅な上にスマホ版非表示(スマホ対応無し) これはもう問題外です。パソコン用固定幅そのままをモバイル閲覧で強制されたらたまったもんじゃありません。どんだけ字ちっせーんだよ、って話し。

ところで「ラベル」の件ですが、Googleはよくこういうことをしますね (´・ω・｀)
モバイルフレンドリー出始めの頃は「ラベル貼り」で以てページ管理人を急かしたわけですよ。で、最近では「常時ssl接続」でweb激震って感じですが、こちらについてはGoogle謹製ブラウザの Google Chrome から閲覧した際、https: になっていないサイトのアドレスバー横に 保護されていない通信 と表示される ようになってます。これも管理者のお尻を叩いてるわけですよー (´・ω・｀)
はよやれー。はよやらんとアカンぜよー。って感じで。でもしょうがないね。このぐらいやらないと重い腰をあげない人(または各種webサービス)のほうが多いですもんね。そういう意味で私はGoogleのお尻叩きに反対ではありません。FC2ブログ運営さん、なんとか頑張って食らいついて (=`ｪ´=;)
(ssl化に向けて本格的に動いてくれって意味です)

またしても話しが逸れてしまいました。SEO面で有利、というのは、Googleｾﾝｾの推奨順位が
レスポンシブデザイン > PC版+モバイル版 >>>>> PC版のみ(X)
だからです。何故レスポンシブが PC版+モバイル版 よりも推奨なのかは以降の章でご理解頂けると思います。Googleは表向き「どんなスタイルを取ろうと差別はしない」と言いますが、実際にはゴリゴリのレスポンシブ推し。何なんだどうしたいんだ一体 （￣∀￣；）

URLの統一

あなたがモバイル版を併用しているとして。PC版及びモバイル版のhtmlソースに alternate そして canonical という文字列は存在していますでしょうか。「無いです」という場合には問題です。この記事はモバイル版の問題点解消ではありませんので、どうするかは書きません(ぇ！)

PC版とモバイル版のURLは異なります

パソコン版とモバイル版双方がインデックスされてしまうことがあります。
パソコンの検索結果からリンクを押したところ…。

モバイル版出ちった
これこのまま読み進めたいって人はまず居ないと思います。ですから alternate, canonicalによる URL正規化 は必須。また、URLが異なるということは流入経路の分散でもありますし、Google bot からミラーサイト疑惑をかけられることもあります。んでもって、SNSシェアのURLも異なりますよ。よほどしっかりモバイル版の管理をしないといろいろよろしくないですね。レスポンシブならばURLはPC・モバイル共通ですからそういったことは起こりません。この点はかなり大きなアドバンテージかと思います。

レスポンシブのデメリット

古いブラウザがついてこれない

IE8とか9とかさ (´・ω・｀)
セキュリティサポート切れてるブラウザとかOSとか使うのやめましょうよ。マジで (´・ｪ・｀)

表示が重たくなりがち

PC画面では大きな画像が必要ですよね。ヘッダーとか。最近のPCは画面も大型化していますので、横1500pxの画像をヘッダーに使っています、とか。そんなデカい画像スマホでは要らんやろ？ってことよね。ただ、画面サイズで使用画像を切り替えることは容易です。でもそれだってそれ用の記述をしなきゃならないわけで。CSSファイルサイズは大きくなりがち。

だがしかしBUT

情報系のブログなんかを拝見してるとやっぱり書いてあるんですよ。「表示が重たいのがデメリット」って。でもここで誤解を解いておきますけれど。こういった方々が書かれている「モバイル版のhtmlとCSS」というのは　記事の内容も含まれます 記事内にペタリする画像も PC用とモバイル用で分けている というのが前提です。これはWordpressなどの、日本語的に言うと「ホームページ」ではそういった管理ができるからです。ですがFC2って無料ブログじゃんね (´・ω・｀)
無料ブログでの記事はPC版でもモバイル版でも共通 なんです。だから彼らの言う「レスポンシブ重たくなったりする」はFC2ブログではあんま関係ないです。強いて言えばヘッダーとか装飾部分ぐらい。あとは特殊なJSとか。表示速度に大きな影響を及ぼす「画像の容量」については、個別記事ではレスポンシブもモバイル版も変わらん ですよ (´・ω・｀)
ただ、モバイル版はトップページがほぼ強制的に「要約表示」になります。そしてサムネイルもちっこい専用のがあります。全文表示というのはそもそもが重たいんです。だって記事に貼った画像やら動画やらなんやら、全部表示されるわけだからね (´・ω・｀)
要約表示レスポンシブとモバイル版なら表示速度にそれほど差は出ません。FC2のような無料ブログサービスでは、ですよ。

複雑なコーディング

これはもうさー、別にいいじゃん (´・ω・｀) ←
そこはコーダーに任せておけば(笑)
ただまぁ確かにカスタマイズは難しいかもしれませんね。慣れもあるけど。固定幅は構造が比較的単純ですのでカスタマイズはし易いと思います。

まとめ

これらの内容を鑑みて、自身がどちらを選択すべきかどうか考えると良いですね。私個人としては 別にどっちでもいーよ って思ってます。え？だってホントにそう思ってるもん(笑)
自分が納得できてりゃそれで良いんですよ。レスポンシブにしようと固定幅にしようと。

ただし。ただし、ですよ。固定幅でスマホ版非表示 ← これ絶対ダメ。

あとですね、「利点」を考えてレスポンシブテンプレをお選びになった方は、ここ超大事 ↓

スマートフォン版の非表示 設定をしてください。

なんとなく「レスポンシブテンプレにしたけど… いちおースマホ版(モバイル版)も残しておこーっと (´・ω・｀)」
とかもったいない根性出しちゃうとですね、上に記した利点は全て失われてしまいます。URLも統一されませんし、モバイルから閲覧した際にはダイナミックサービングでモバイル版優先ですし。だったら最初から潔く固定幅選んだ方が良いよ。それはせっかくレスポンシブであるにも関わらず既得利益の損失だから。

どっちでも良い、と書きましたが、勧めるならどっちと問われれば。そりゃもうレスポンシブですよ (´・ω・｀)
自分がレスポンシブ作ってるから当たり前ですし、遠くない未来にMFI(モバイルファーストインデックス)が待ち受けてることが既にわかってるからです。(Googleからの公式発表済み)
今後はパソコン版が第一評価対象ではなく、モバイル版が第一評価対象になりますので今までとは逆転現象が起こります。MIFの要件をザッと読みますと… スマホ版選択者は苦労を強いられると思います。URLが違うってのが大きなネックになるかと。レスポンシブを選んでおくのが賢い選択、とだけ書いておきます。MFIについてはまだ情報が出揃っていませんので先走って記事にするようなことはありません(責任取れんし)

最後になりますが、例えレスポンシブデザインを採用したとしても、コレダメ。絶対。というのがあるんです。それは 要素のはみ出し (画面超過) です。実はそれをお伝えしたくて、その前段階でこの記事を書きました (●'0'●)/
to be continued... (は？)