レスポンシブWebデザインの勉強始めました
最近、Googleの検索順位が変動してしまい、ブログが過疎っております。
Google先生の挙動がよくわからず、何が良くないのかも分からないので、最低限できることだけやってあとは放置しております。
Googleからの流入が増えるか増えないかは、ま、運みたいなものということで…
流入が減った今こそできることがあるはず
流入が多かった頃から、うちのブログには問題点がありまして、流入の1/3～1/2をしめる携帯電話(スマホ)の滞在時間が異常に短いと言うこと。
PC・タブレットの滞在時間を1とすると、携帯電話(スマホ)はその1/3ぐらい。
携帯電話(スマホ)の離脱率も高いのですが、これは、端末の特性上仕方ないかなと言う感じです。
モバイルデバイスの滞在時間が短いと言うことは、つまり、ブログがスマホに寄り添った作りになっていないのでは無いかということ。
確かに、スマホで見たときに表示されるページはJetpackのものをそのまま利用しており、全く独自の作り込みをしていません。
完全放置。
そこで、スマホにも優しいページを作るぞ！といろいろ情報収集を始めました。
それなりにハードル高そうなスマホ対応
いろいろ調べて、1つの解決策を見つけました。
スマホ用のページを作成し、「Multi Device Switcher」プラグインで、UA(ユーザーエージェント)ごとに見せるページを切り替える。
タブレットはPCページを見せるというものです。
しかし、これ、簡単なんですが、1つ問題点が…
「Multi Device Switcher」ではブラウザのUAで見せるページを切り替えるので、UAが新規に追加されたり、端末が増えたりしたら、それをチェックして付け加えないと意図通りの動作が保証されない、ってことです。
んーそこまで追っかけるのってめんどくさそう…
レスポンシブWebデザインとの出会い
そこでいろいろ調べてみると、レスポンシブWebデザインとやらを見つけました。
これ、簡単にいうと、ユーザーエージェントでページを切り替えるのでは無く、画面の横幅を起点にして画面を切り替えるというもの、しかもデバイス毎に別々のページを用意するのでは無く、CSSメディアクエリーによってデザインを画面の横幅に合わせて変化させるというものです。
これによって、UAを気にすること無く、純粋に端末の画面幅だけを気にしてデザインを作り込むことができる、というものです。
この技術を見つけたときに、「これだ！」と思ったのですが…
全くわからね！
このようなことを話しても何の意味も無いのかもしれないですが、自分、IT企業というものに務めておりません…
周りで仕事をしている人たちに、htmlという単語を理解できる人はおらず、最新Web技術的なものに肌で触れあうようなことからは隔絶した環境で仕事をしております。
そのため、この手の疑問が出てきても全く相談できる人がいない！
よくブログをみていると、ブロガー同士がお友達で連絡取り合って情報交換！みたいなのを見かけるんですが、ブロガーのお友達なんていない！
というわけで、IT環境における陸の孤島みたいなところで生きております。
そうなると、頼れるのはWebか、本かみたいな選択肢しかないわけで、買いました「レスポンシブWebデザイン」です。
そして読みました！ふかーい理解は別として、1日で読みました！
途中本を握りしめたまま寝落ちしてしまっていたこともあったけど読みました！
というわけで、レスポンシブWebデザインの備忘録的なものを書き出しておきます。自分のために。
レスポンシブWebデザインとは
- 1つのhtml・1つのCSSで多くのデバイスに最適のデザインを提供する技術である
- 基本的にpx単位で各パーツの幅などを詰めるのでは無く、%で詰める
- 文字の大きさも基本的にはemで詰める
メリット
- 1つのhtml・1つのCSSで作成できるので、メンテが容易
- これから出現するであろう様々な端末に対応できる(画面の横幅を基準にしているから)
デメリット
- モバイル端末優先の考え方で画面構成を考えるので、凄いシンプルなページになる
てな感じですかね。
何故デメリットの部分が生まれるかというと…
何度か説明しているように、1つのデザインをCSSで制御することになるので、look&feelを激しく変えることができないんですよね。
それは、「スタバ(USA)」のページを見て貰うと分かります。
このページ、PCで見ると、「これが企業のページなのか？」と思うくらいあっさりしてます。
しかし、このページをスマホで見るとそれなりに詰まって表示されます。
1つのhtmlをPCでもスマホでも表示させようとすると、どうしてもスマホを基準に考えなくてはならず、そのため各パーツをシンプルにしなくてはならないのです。
画面を親指でタップして貰うには、各パーツの大きさはどうしても大きくなりがちなので…
もちろん、CSSメディアクエリーをものすごい複雑に組み上げれば、激しくlook&feelを変化させることができるとは思いますが、それをやるとレスポンシブWebデザインの特徴である「メンテが楽」という部分が損なわれると思われます。
どうやって作ろうか…
レスポンシブWebデザインの導入は心に決めていましたが、実際には、適当に無料のレスポンシブWebデザイン対応のテーマ拾ってきて改造すれば済むかなと思っていたら…
なんか、そうは問屋が卸さないような状態に。
こりゃフルスクラッチするしか無いかなという状態です。
とほほ。
過疎っていて、なにやらかしても問題なさそうなのでいろいろ試してみようかな。
まずはブログ改造計画を立てて、仕様書みたいなのを書かなくちゃ。
なんか、仕事みたいになってきたな…
