レスポンシブ対応ってなんだろうか？【前編】

「レスポンシブ対応ってなんだろうか？」って思うことがあります🤔

Twitterでつぶやいたことですが、加筆して投稿してみようと思います。

スマホとか、デバイス毎の対応なんですが、スマホ縦とかの対応が必要性わかるんですが、スマホ横だと解像度から言うとPC相当な端末が多いので、スマホ横は対応いらないんじゃないかと思えています

でも、それって、、、「対応大変そうだな」って思ったんですが、ちょこっとの変更で簡単でした

自身のTwitterからの引用

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

どこにでも何処にでもあるようなネットの情報だと

＂レスポンシブデザインとは、画面サイズに応じて最適に表示されるよう設計されたデザインのことです。レスポンシブデザインを作成することで、たった一つのＨＴＭＬファイルで、スマホ、タブレット、パソコンなど様々なディバイスに対応した表示に切り替えられるようになります＂

と言うようなデザイン手法です。

WordPressにおいては、テーマによって対応条件はことなります。専門用語になりますが、テーマによってブレイクポイントに違いがあります。CSSのメディアクエリ(@media)ですが、結構曖昧だったりします。

特にスマホとタブレットのレスポンシブ対応がいまいちだったりすることがあります。

スマホ端末の解像度

最近のスマホの解像度の横幅はパソコンのディスプレイ以上の数値になっています。さすがに高さは負けますがスマホを横で使う場合は、レスポンシブ対応は必要無いように感じていました。スマホを縦に使うか横に使うかはユーザーによって違いますが、自分はブラウザはスマホを横にして閲覧する方が多いです。ただ流し読みするようなサイトは縦の片手操作です！

レスポンシブ対応をしないと行けない背景

『Googleが推奨している』…

あまり気にする人は少ないでしょうが、最大の強みはGoogleがレスポンシブウェブデザインを推奨していることでしょうか。推奨であり必須ではありませんが、それでもモバイルサイトが＂ある＂か、＂ない＂かでは検索順位にも影響するらしいです。

簡単にいえば「ＰＣからだけサイトが見られているわけではない」ということです。ＰＣ以外のディバイスからの閲覧数を念頭に置いて、ユーザーを設定して、それに応じてレスポンシブ用のサイトを制作する必要性があると言うことなんでしょうか？

ただ、レスポンシブ対応にもメリット、デメリットがあります。

メリット

『多様なユーザーの獲得』…

一つのＵＲＬ、一つのＨＴＭＬで様々なディバイスからユーザーを獲得することができます。

デメリット

『デザインの自由度は低下する』…

画面サイズの変更を考えると、自由なデザインは難しいです。レスポンシブ対応と言ってもスマホやタブレットの場合は、固定ディスプレイと違い端末を（回転）できます！

つまり、モバイル用に画面が変化した場合にも耐えられるようなデザインにしなければなりません。

『結局、比較的シンプルなレイアウトにならざるを得ません』…

アクセス解析

実際にGoogleアナリティクスやその他のアクセス解析ツールでの閲覧データ(ユーザーエイジェント情報)を見てみると、モバイルからの流入も一定程度あります。割合はサイトのジャンルにもよりますが、いずれにしろ、サイトのレスポンシブ対応は避けれないと思います。

《続きはコチラ》