レスポンシブテンプレートを選ぶ前に

レスポンシブを採用するのに「xxさんがそうしろと言ったから」では恐らく使いこなすことはできません。理想なのは「理解をし」「納得し」「賛同する」ところからスタートです。もちろん形から入るのもアリですよ。とはいえ「理解する」というのが大前提。何故レスポンシブなのか、何故自分がそれを採用する必要があるのか、など自分の頭で考える。

くどくど言いますが「レスポンシブ」の概念というのはこれまでのwebの物理的な考えとは全く違いますので、根本的なところを理解できなければ使いこなすことなど無理 です。故に理解の手助けをするための記事を書いています。ですから今回も長いよ。そして本記事ではレスポンシブのSEO的な観点は抜きにして「目に見える部分, レイアウト面」についてのみ言及します。

レスポンシブと固定幅は根本的にサイズ概念が違う

サイズ概念というかですね、旧来の固定幅のテンプレートというのは名が示す通り 常に横幅が一定 です。例えばYahoo!ブログは 横950px 固定です。ヤプログは大体 横900px前後 固定。

この900とか950とかいう数値は、インターネットの手段がパソコンに限られていた時代(大昔のように感じるね)には単純に 現存機種の画面サイズを超えてはマズい わけで、ブログサービス黎明期のパソコンの画面サイズというのは 1024px というのが圧倒的に多かったんですね。ですからそれを越さないための900px前後、ということです。

ところが現在はみなさんよくご存知のように タブレット, スマートフォンなどの新興デバイス が普及し、昔のように「基準は1024px！」というわけにはいかなくなってます。一般的なタブレットの横サイズは 700〜1000px前後 ですし、主流のスマートフォン横サイズは 320〜400px前後 と、それはもういろいろなサイズが存在します。

なのでもう「横900px前後にしておけばOK」というわけにはいきません。大型化が進んでいるパソコンで900pxだと小ぢんまりしすぎてしまいますし、タブレットやスマートフォンでは逆にはみ出してしまいます。帯に短し襷に長し、というやつですね。

そこで登場したのが レスポンシブウェブデザイン です。実際は固定(solid)からレスポンシブ(responsive)に至るまでに流動幅(liquid)というのも出てきたんですが今回は無視します ←

レスポンシブの良さというのは どのデバイスでもフィットするよ！ です。
以下は「固定幅 横950px」と「レスポンシブ(RWDと称す)」のデバイス毎の違いです。

【パソコン】

固定幅の方はちんまりと収まっています。でもパソコン画面が大きいのですからもっとダイナミックに表示しても良いですよね。

【タブレット】

大抵の場合固定幅はタブレットで はみ出し ます。レスポンシブの場合は カラムの再編成 が行われ、はみ出すことはありません。レスポンシブ初心者はこの再編成を「カラム落ち」と間違いすることが多いんですが、カラム落ちではなくわざと並べ替えています。でないとギチギチで読みづらいでしょう (´・ω・｀)

【スマートフォン】

固定幅はスマートフォンで多くの場合 縮小表示 が行われます。あるいはタブレット同様バカ正直にはみ出すか。スマホでのはみ出しはGoogleから大きく減点されますので、とりあえずはみ出さないよう体裁だけ整えている感じですね。ただ画面の幅が300〜400pxしか無いのにこんな強引にカラムを並べられては 文字は読めない、リンクは押せない など閲覧が非常に困難。

図解したようにレスポンシブデザインというのは デバイス幅に応じて柔軟に段組みが切り替わったり、要素自体のサイズが変化するのが最大の特徴です。ここを理解するのが一番重要。つまり「記事やサイドメニュー、記事内の画像や動画など 常に一定のサイズを保持するのは物理的に無理」ということです。横幅に応じて 伸縮 をさせないと、例えば横500pxで掲載した某をスマホで500pxのまま表示すれば当然はみ出すわけなんで、最大でもデバイスの横幅いっぱいまでに留める、と。その横幅が320pxかもしれませんし、414pxかもしれませんが、ともかくはみ出させない。そのためには縮小が必要ですよね。

というわけで以下の悩みに対する答えがわからない・理解できない、という方はもうレスポンシブは諦めたほうが良い。

1. ブラウザの幅を狭くするとサイドメニューが下に落ちてしまいます - それはカラムの再編成です
2. 画像を1000pxで掲載したのにブラウザを狭くすると何故かどんどん小さくなります - はみ出した方が良いのですか？
3. 昨日見たときは記事が3つ横並びだったのに今日見たら2つで云々 - ブラウザの幅を伸縮させて確認

上記はレスポンシブの概念が全くわかっていない、ということですね。「カラムの再編成」「要素の伸縮」が理解できておらず、かつそれを「問題だ・困った」と感じているのですからレスポンシブを使うべきではない、と。その場合はもう「いずれはみ出すこと決定」を飲むしかありません。あなたの1900pxのパソコンで収まっているかもしれませんが、他者の1024pxのパソコンではガチではみ出しているかもしれません。でもそれは仕方がない。「一定のレイアウト」「一定の横幅」にこだわるのならばはみ出しを容認する以外ありません。

画像は必ず横に並ぶとは限らない

記事内に画像を掲載したとして。例えば 複数枚の画像を横に並べた場合 どんな風に表示されるかです。自分が見ている画面サイズだけを頼りに 以下のように2つの画像を横に並べて投稿したとします。

自分のパソコンで見たときにはこうなってるんでしょうね。でも他の人のパソコンではこうかもよ？

これなんで起こるかわかりますかね。わからない、という方のために具体的なhtmlソースコードや解消法などは別で記事を書きます。ここではざっとの説明だけ。その答えは「レスポンシブだから」です。ブラウズサイズやデバイスサイズに応じて記事の幅が変わるのですから、2つの画像の横幅を足してさらに余白を足した数が記事の幅を超えていたら収まりません。よって2枚目が下へ移動する、と。そして 自分のパソコンの画面サイズ(あるいはブラウズサイズ)と他者のそれが同じサイズとは限らない と。

これ(画像が並び替わってしまうこと)もレスポンシブの意味や理屈や挙動を理解していれば防ぐことができます。逆に言えば「理解していなければ防げない」ということです。固定幅では「並び替わる」ことはありません。だってブログ自体が一定の幅を保持するのだから。記事の幅も全体幅も固定。その代わり誰かのパソコンから見たときはブログ自体が画面からはみ出している可能性は常にありますよ。何度も言うけど。横スクロールバーが出ちゃう、とか。

で、他ブログからお引越しされた方で画像の並びに非常にこだわりがある、という方はレスポンシブは危険かもしれないね (∵`)
いえ、個人的にはもちろん画像の並びという局所的なことよりも全体的なことを考えてレスポンシブテンプレートを勧めますけれども、こだわりって人それぞれなんで無理強いできない面もあるじゃないですか (´・ω・｀)

• 画像の並びにものすごく強いこだわりを持っている
• パソコン以外持っていない(自分のブログをスマホで見たことが無い)
• 閲覧者も恐らくパソコンでしか見ていない(と考えている)
• Yahoo!あるいはヤプログからの移転者

上記全てに該当するならば無理にレスポンシブ使わんで良いような。何故かって、スマホ持ってない人に「スマホから見た人が困るから〜」とかいくら説明したところで無駄だと思うんです。見たことがないんだから。それはもうどうしようもない。

Yahoo!及びヤプログユーザーさんは元々の記事幅がかなり狭く400〜560px前後だったはずなので、多くのパソコンで画像がはみ出すことは無いと思うんですよ。もちろん記事の幅が500px以下とかそういうテンプレートは避けないといけませんが。

これまで固定幅で書いてきて、固定幅の「好ましくない面」をガッツリ使ってしまっている(画像の並べ方もそうです)方にレスポンシブというのは相当敷居が高いというか、過去記事の修正問題なんかもあって勧めづらいんですよ。もちろん画像並びの点で問題が無ければYahoo, ヤプログユーザーさんにもレスポンシブを勧めますよ。あくまでも今は画像並びのことを言っています。

確かにレスポンシブってね、画像の並べ方にはコツが要るんですよねぇ (´・ω・｀)
それ以外は特に難しいとかそういうのは無いけれど、画像… 画像ねぇ… 確かにちょっと難しいのかもしれんな (´・ｪ・｀) ←

まとめ

ちょっといつにも増してグダグダになってきたんでそろそろ終わりにします(ぇ)
とりあえず、レスポンシブテンプレートでの画像横並びについての記事を書きますわー。近いうちに。

ともかくレスポンシブの最大の特徴「サイズが変わるよ」「段組みも変わるよ」のところで既に泥沼にハマっている感のある方が結構いらっしゃってなんだか忍びなくなってきたんです(笑)
そこを乗り越えてそれでも使いたい、という方へはできるだけサポートできればなぁ、と思っているのですが。まずは基本概念を理解してもらわないことにはどうにもならないんで「あぁ、なるほどそういうことか」となるまで何度でも読んでください。

というわけで、レスポンシブテンプレートを採用する前に自身のブログ内容や自身の環境と相談した方が良いよ、ってのと、理屈・概念が理解できるかどうか自身の判断と。なかなか難しい問題だねぃ (´・ω・｀)