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

レスポンシブ対応のカスタマイズ

そんな自分視点の理由や今のインターネット事情もあってカスタマイズすることにしました。

ただ、普通に考えるとWordPressの他人様が作ったテーマを一からカスタマイズするのは＂とっても大変なこと＂だと思えました。

プログラムコードでもモバイル判定とか、色々なロジックに影響あったり、CSSのブレイクポイントの見直しなど、知識が乏しい中で考えるだけでも大変そうに思えました。

レスポンシブ対応の方法(流れ)

サイトのレスポンシブ対応を進める前に専門用語の説明です。

viewportの設定

レスポンシブ化するには、まず、head内にviewport（ビューポート）と呼ばれるmetaタグを入れる必要があります。逆にこれがないとレスポンシブ化しませんので、必ず入れるmetaタグになります。

「content=”width=device-width」の意味は、デバイスの幅に合わせるための指示となります。

これでディバイスごとに柔軟に幅を変えてくれます。

仮に「content=”width=320″」とすると、幅が320pxとして認識されるようになります。ただ、レスポンシブ対応の場合は様々なディバイスに対応させるために
「content=”width=device-width”」とします。

「initial-scale=1.0」は、ズーム倍率を表します。「1.0」を設定すれば、変わらずそのままの大きさで表示されますし、「2.0」を設定すれば、ズーム2倍で表示されます。
「content=”width=device-width」を設定していて、「initial-scale=2.0」のズームで表示させる必要はありませんので、ここは特段の理由がない限り「」を置いておけばよいでしょう。

CSSファイルの設定(ファイルを分ける)

メディアクエリの設定が一般的に広く知られていますが、それが全てではありません。ブレークポイントごとにCSSファイルを分けて設置するというやり方もあります。

例えば、以下のように複数のファイルを用意します。それをhtmlファイルのhead部分で各CSSファイルと関連づけます。例えば、表示領域の横幅767px以下をスマートフォンに対応させ、768pxから1023pxをタブレットに対応させ、1024px以上をPCに対応させます。

上記のように書けば設定のブレイクポイントで適用されるCSSファイルが切り替わります。この方法は『静的サイト』に多い記述です。WordPressは『動的サイト』なので以下の方法を取るテーマが多いです。端末がモバイル(解像度判定)でレスポンシブ部分だけを追加で記述して、そのCSSを読むテーマもあります。

メディアクエリ(@media screen and (){})の設定

上記の方法以外に、一つのファイルで済ませようというのが@media screenの設定です。

複数のCSSファイルを一つにまとめて書く基本的な記載です。これをCSSファイル内に置くことで、設定した画面サイズの変更点に達するとこのCSSの指示が切り替わります。

この切り替えポイントを「ブレークポイント」と言います。このブレイクポイントは画面の横幅を設定しています。

min-widthは『から』max-widthは『まで』を意味します。

覚えておいて欲しいのは「絶対的なブレイクポイントはない」ということです。スマホが色々と販売される中でディバイスごとにブレイクポイントを設定するのは無理があります。

モバイルファーストかPCファーストか

一昔前まではGoogleはパソコンのコンテンツを主要な判断材料として評価してきました。ただ、今やモバイルからの検索も主流となりモバイル対応へコンテンツの最適化を測る方向性は今後もより高まりました。そんな事情もあってGoogleが発表したMobile First Indexはスマートフォンのコンテンツ内容を中心にインデックスし、評価するやり方です。

ユーザーが、スマートフォンを使って検索した場合は、スマートフォンに対応したサイトが上位に検索される方がユーザーのニーズに合っているからです。

モバイルファーストとは「ユーザーがモバイルから検索しても、モバイルユーザーのニーズに沿って、適切に表示ができるようサイト構築をすること」を意味します。

つまり、スマートフォンユーザーは縦長のコンテンツをスクロールしながら見ます。UIを考えたときにコンテンツの優先順位を考えたり、ユーザーが必要とする情報を早く導く工夫をしなければなりません。

WordPressであってもモバイルファーストで設計した場合、PCに変わったとしてもHTML構造は変わらないため、PCユーザーでも見やすいサイトを目指す必要があります。

モバイルファーストとは単にメディアクエリをモバイル版から最初に書いていくCSSファイルの書き方を単に指しているのではなくコンテンツの見易さやサイトの使いやすさを含めた包括的な考え方と捉えるのが妥当だと言うことらしいです。

ただ、これが絶対的な考え方ではないということです。ユーザーがPCからの閲覧が多く、ユーザーの特徴が、じっくりとコンテンツを熟読して判断するタイプであれば「モバイルファースト」より「PCファースト」という考え方のほうが妥当です。この場合は、多くの情報を提供したりする必要があります。

レスポンシブサイトはスマートフォンの使用が大きな流れである以上、スキル習得は避けられません。忘れてはいけないのが「ユーザーが誰か？」です。また、「ユーザーがどのような状況でサイトを使うのか？」で、それに応じてモバイルファーストで作るのか、PCファーストで作るのかを考えて、提供するコンテンツやデザインをユーザーに合わせる必要があります。

運用をは始めてからアクセス解析を使ってユーザーの特徴を見極め、それに応じて再度作り変える手間も必要になるときがあります。

まぁ、ネットに落ちている情報での見解などは何処も似たり寄ったりなのですが、自分なりにレスポンシブ対応するようにしました。

簡単に言えば良いとこ取り？

良い思いつきかと思いましたがブラウザの機能上でできることです。デスクトップ（パソコン）表示とか言われている機能です。

ただ、適応させたいのはフロントページのみであることと、毎回、ブラウザ上の機能で切替が面倒だと思えたので、カスタマイズすることにしました。

簡単に言えば、モバイルユーザーの場合はモバイルファーストでサイトを表示させて、サイト上のボタンなどで任意でPCファーストに切り替えられるような機能のカスタマイズ（実装）です。

なんか、難しそうって思えますが、WordPressも含めて答えはネット上に落ちてることが多いので＂ググッて＂みました。

…色々と割愛….

結局、簡単な方法が見つかりました。※ただ、問題もありました。

対処方法を考えて、＂どうせ答えはネット＂に落ちていると思い、再度＂ググッて＂みました。

…色々と割愛….

対応あり

対応なし

試行錯誤の結果

上手く行きました！