レスポンシブとアダプティブはまたちょっと違うんだよ

レスポンシブとアダプティブはまたちょっと違うんだよ

webのあれこれ
2018/01/24 6
vanillaice (Akira)
vanillaice (Akira)
Responsive Adaptive

先日「FC2公式レスポンシブテンプレートが全然レスポンシブじゃない。」
というクソ生意気な発言をしたのですが。
それでもスマートフォンではちゃんと収まり良く仕上がっているので、じゃあレスポンシブでないなら何なんだ、と。
アダプティブデザイン ですね。狭義にはなりますが (´・ω・`)

レスポンシブとアダプティブ、どう違うねん!
という内容ですけれどもそんなに深くは突っ込まない記事 ←

深く掘り下げると議論になるんですよ。それは避けたい ←←←

レスポンシブデザインとは

パソコンやタブレットあるいはスマートフォンといったあらゆる画面サイズにフィットするように作られた デザイン。
既存デバイスのみならず場合によっては将来的に出てくるデバイスの画面にも対応できる(ことが理想)

アダプティブデザインとは

既存デバイスの画面サイズ にフィットするように作られたデザイン。
例えば iPhone最小の 320px、タブレットの代表iPadの 768px など、特定のサイズに配慮するデザイン。
故に規定サイズ外でははみ出したり崩れたりすることも想定内。

もっと厳格な定義もあるのでしょうが、重要点はこんなところかと思います。
最新のFC2公式〝レスポンシブ〟テンプレートは実際にはレスポンシブではなくアダプティブに属するデザインですね (´・ω・`)
それにしては配慮が足りないが。タブレットのことをガチ無視してます ので、一般的なアダプティブ 320px, 768px, 1280pxの法則を放棄している(笑)

もとよりFC2ブログはタブレットを重要視していないですよね。
いやこれFC2ブログだけでなく他の無料ブログもそうだよ?
今春にYahoo!ブログが一大リニューアルを予定しているようですが、ヘルプにこんなことが書いてあります。

iPadやAndroidタブレットでも利用できますが、動作については保証していません。パソコンまたはスマートフォンからのご利用を推奨します

Yahoo!ブログβ版ヘルプ

… ユーザー側の私からすると「なんで?? (´・ェ・`;)」って思いますけれど(笑)
タブレットだって結構活躍してますよね。
ビジネスシーンなんてスマホよりタブレットじゃないのかしら。
昔勤めてたインテリア関連の会社は今全員タブレット支給されてるって言ってたよ。
顧客へのプレゼンはソレ使ってやってるって。サイトもしっかりレスポンシブ化されてました。

FC2ブログはページ上部に 検索バー があります。
こちら広告配信の一環で ユーザーが任意で非表示にできる ようになってます。
この検索バーはレスポンシブではないんです。
表示対象はパソコン及びタブレット。スマートフォンでは自動的に非表示になります。
(私が開設した当初はスマートフォンでも出てましたが現在では非表示です)
タブレットでは表示されます。そして横幅が固定ですからタブレットの画面内に収まりません。
従って 画面超過 = 横スクロール になります。
画面がグラグラする超ウザい状態。

FC2ブログの公式テンプレートは検索バーを表示させることを前提に製作されているようです。
例えばナビゲーションが上部に固定されているタイプなどは、予め検索バー用に位置を下げてます。
なのでバーを非表示にすると上部が27pxほどポカーンと空いてしまう。
そういうこともあって、タブレットサイズで製作してもバーとの相性がよろしくない。
だからタブレット用ブレイクポイントは作らない、と、そういう流れですか?FCさん (´・ω・`)

検索バーを非表示にできることを知らなかった方はコチラから設定どうぞ。
検索バーの設定
画像の高速表示と違い何かしらの代償を求められることもありませんので非表示をおすすめします。
ただ サイト内検索は重要 というか、必要とする閲覧者が多いと思いますので、テンプレートに入っていない場合はプラグインで補うと良いですね。

FC2ブログ運営に提案

提案なんだけどもねぇ (´・ω・`)
レスポンシブテンプレートは別枠にしたらどうだろう。

現在テンプレートの配布ページというのはこうなってますよね ↓ 公式配布ページ これをこうしたらどうか ↓ 公式配布ページ

これホントお願いしたいです(笑)
レスポンシブテンプレートはパソコンとスマートフォン共通で使えるってことを知らない方が多すぎる んですよね。
なので中にはパソコンの見た目とスマートフォン版のそれをなるべく同じにするために スマホ版を必死でデザインカスタマイズしている人 とかもいらっしゃるんですよ。
いや… そんなことしなくてもスマホ版を非表示にしたらいいんやで(汗)

今後は全てをスマートフォンだけで行う、という方も増えていくと思うんですよね。
そうなると「基本的にカスタマイズはしない」「投稿はスマホから」「PC版のテンプレートを選ばない」というパターンも多くなるのではないかと。
その場合パソコンで表示されるのはFC2ブログのデフォルトテンプレートってことになります。
basicなんとかっていうやつ。

世の中スマホ優位に傾いていてある意味スマホユーザーは優遇される存在になっていくのに、レスポンシブを選べないなんてのはどうかと思う次第。
現在だとたぶんスマホから選べるテンプレートって「スマートフォン版」だけですよね (´・ω・`)
もちろん「PC表示切り替え」を行えばできますが、一体どれだけの人数がそこに気づけるというのか(笑)
スマホからは「スマートフォン版」及び「レスポンシブ(PC・スマホ共通)」を選択できるようにしたらどうかな、という提案です。
で、レスポンシブの横には「パソコン・スマートフォン共通」の文言を添える。
共通と明記されていればなんぼなんでもわかるやろ ( ̄∀ ̄;)

なんかもうGoogleも最近は「選択すべきはレスポンシブデザイン」って言い切ってますし。
まぁアダプティブでも良いんだけどさ。
この提案どーお?

… 以上ですけど (´・ェ・`)

 6

There are no comments yet.
ぼっちん
大賛成です

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

例のアレ(笑)は「アダプティブデザイン」って言うんですねぇ、はじめて知りました(笑)
『なんて中途半端なレスポンシブ設定だなぁ(笑)』って笑ってたんですけど、なるほど規定サイズ外は意識的に無視って(爆)
なんと恐ろしい簡略化だこと (^_^; アハハ…
要はこまやかなレスポンシブ設定が面倒くさいから無視こいてるのに(爆)

「FC2ブログ運営に提案」 これ! 是非に早急に実現させてくれないと困りますよね。
「レスポンシブ」の意味を知らないままに使い始めてるブロガーさんがあまりにも多くなってますから。
せっかくレスポンシブテンプレートを使っているのに「スマートフォン版テンプレートを無効」にしてないなんて (^_^; アハハ…

テンプレート設定画像の加工、お疲れ様でした~(笑)

2018/01/24 (Wed) 08:44
Akira
To ぼっちんさん

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

ここ変えた方が選びやすいですよね (´・ω・`)
FC2ブログは機能名称の付け方が下手くそのように感じます。
もっと直感的な名前を付けようや ( ̄∀ ̄;)
スマートフォン版の非表示にしても、
「レスポンシブ設定」
ってしとけば良かったじゃん。
その方が「レスポンシブ?はて? (´・ω・`)」ってユーザーが立ち止まって考える余地があると思いませんか(笑)
スマートフォン版非表示じゃまるで「スマートフォンから閲覧できなくさせる」みたいなニュアンスに捉える方もいますよね。
実際そういう質問も何度か受けたし (;`ー´)o

--------
あ。そういえば。
私知らなかったんだけども、seesaaブログのデフォルトテンプレートってレスポンシブなんですって (´・ω・`)
でも目視確認してません。何故かというと…。
スマホで「seesaa レスポンシブ」で調べてみてー。
ほとんどが開けない(笑)
たぶんリダイレクトループしてるんだと思う。なんでやろ?
ユーザーエージェントの偽装だと思うけど、デフォがレスポンシブなら運営がそのへんはちゃんとやってると思うんですよね。
旧仕様の時に自力でレスポンシブ化した人たちなんだろうか。
謎…。seesaaユーザーさんは一体何を… ( ̄∀ ̄;)

2018/01/24 (Wed) 23:03
ぼっちん
続きです

スマートフォン版非表示じゃまるで「スマートフォンから閲覧できなくさせる」みたいなニュアンスに捉える方もいますよね。
(笑)それ、私も鍵コメで質問されました「ほんとにそれでもスマホで表示出来るんですか?」って (^^;; アセアセ
レスポンシブテンプレートの本来の意味と言うか表示動作を知識的に理解出来ない人は不安に感じてしまうんでしょうね。
だから、Akiraちゃんが仰るような「直感的なネーミング」は必要かと思います、その方がやっぱり分かり易いし、親切って感じます(笑)

スマホで「seesaa レスポンシブ」で調べてみてー。
ほとんどが開けない(笑)

えっ? そんなバナナぁ(笑)って思いつつそれでググッたらやっぱりいっぱいズラズラ~っと情報出てきましたよぉ(爆)
たとえば
----------
Seesaaブログをレスポンシブにしてスマホの広告を消す方法
Seesaaブログをレスポンシブ化するために参考になる記事と方法
【新デザイン】Seesaaブログでレスポンシブに非対応のデザインを
seesaaブログをレスポンシブ対応にする
----------
もしかしてMacからの検索が変?(笑)
その辺、調べた方がいいようですね (^_^; アハハ…

2018/01/25 (Thu) 10:39
Akira
To ぼっちんさん

iPhoneだよ ( ̄∀ ̄)

やっぱりリダイレクトかけてるみたいです。というか本人がそう書いてた(笑)
seesaaってamp版の提供もあるんですね。
私いろんなブログサービスの運営ブログを覗きますけれど、seesaaは開くのが嫌なんです (´・ω・`)
理由
・トップページに2件しか表示されない(記事探すのがめんどくさくて仕方がない)
・リンクをタップするといちいち別タブで開く
そんな感じ ^^;

2018/01/25 (Thu) 22:23
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/01/26 (Fri) 12:42
Akira
To 内緒さん

こんばんは (●'0'●)/

えっとね、順位は変動してますけれど、大きくは変わってないように思います。
で、上位ではないです。でもって対象のうち1件は見つからない(笑)
圏外に飛ばされたんだろうか ^^;
覚えてるのはスニペットに「アドセンス」って書いてありました。これだけはっきり覚えてる。
もう1件は現在もリダイレクトしてますが開けますね。ちょっと時間かかるけど(初回だけ)

2018/01/26 (Fri) 16:56

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

webのあれこれ