“Mobile-First Index”と事例から考えるブレークポイントの標準設定

「モバイルファースト」が叫ばれて久しく、ビー・オー・スタジオでもサイト制作の依頼のうち、ほぼ9割がレスポンシブウェブデザインによるサイト設計です。

2018年3月にGoogleは「モバイルファーストインデックス（Mobile-First Index）を開始」したと発表しました。すでにPCを上回るスマートフォンからの検索ユーザーに合わせ、モバイル端末向けページを基準に検索結果を表示するように変更し、スタートをしたというGoogleからのアナウンスです。
モバイルファーストインデックスに登録され、有効になっているウェブサイト（ページではなくサイト）には、Googleサーチコンソールチームから以下のような通知が届きます。

これまでPC版の質を重視し、モバイル版は省略あるいは簡略化してきたウェブサイトでは、Googleの評価を上げることが困難になると見られています。

レスポンシブウェブデザインであれば、1つのHTMLファイルでデバイスに応じた表示が可能です。そしてモバイルファーストインデックスにより影響を受けることはほとんどありません。(PC版とモバイル版の情報が同一であると仮定した場合)

レスポンシブウェブデザインは利点の多い一方で、デバイスに合わせたコーディングをする必要があり、従って制作工数がかかる。そして1つのファイルにデバイス毎の要素を挿入しているため、デザインの自由度に制約がある、ファイルの読み込みに時間がかかる。
こういった「マイナス」の部分を解消するため、ビー・オー・スタジオはサイトのデザインを決定する前に、情報の構成は【どのパターン】で再現するのが最適か見当をつけ、スムーズにコーディング作業に進めるよう準備をします。
レスポンシブウェブで使用されるレイアウトは、大きく5つのパターン（フルード、カラムドロップ、レイアウトシフター、タイニーツウィーク、オフキャンバス）に分類できます。コーポレートサイトの制作では、どのパターンが企業イメージや掲載する内容に相応しいかをワイヤ制作の段階で詰め、同時に表示の速度や閲覧のしやすさ、効率的な作業を踏まえてデザインに落とし込んでいきます。

画面サイズ別にCSSを切り替えるブレークポイント

モバイルファーストのサイト設計において、毎回コーディング時には画面幅の切り替える値の指定に悩まされます。ブレークポイントの値についてはさまざまな考え方があります。ビー・オー・スタジオでは各デバイスの縦横幅や解像度の違う中で決定的な数値をあてはめるより、随時ブレークポイントの見直しを行い、柔軟に対応していくよう心掛けています。

以下はタブレット画面の「真ん中」を軸に、スマートフォンとPCのサイズを考慮した、2018年8月時点の例になります。

■PC: 1025px以上
■タブレット(iPad縦横サイズ): 768px～1024px
■スマートフォン: 767px以下
※iPhone Xでは横幅375px、縦幅812pxとなり、縦がスマートフォン、横がタブレットの表示になります。またiPad Proでは、横幅1024px、縦幅1366pxと、PC表示と同一とみなします。
※上記の数値以外にも、必要に応じブレークポイントを設定しています。

レスポンシブウェブデザイン(RWD: Responsive Web Design)以外に「アダプティブデザイン（AWD: Adaptive Design）」や、サーバーサイドでデバイスからのリクエストに応じ、あらかじめ用意していたテンプレートにあてはめて生成し、レスポンスを返すやり方があります。この他に、Googleが中心となって進めるコンテンツ読み込みを瞬時に行い、ユーザーに快適なモバイル環境を提供するアクセラレイテッドモバイルページ（AMP: Accelerated Mobile Pages）があります。ビー・オー・スタジオでも各種CMSに対応するAMPプラグインおよび機能拡張ツールの知見を深め、実装例を増やしています。

ビー・オー・スタジオではモバイルファーストであることはもちろん、どの画面でもレイアウトが崩れず、閲覧者に見やすいウェブサイトを提供しています。レスポンシブウェブデザイン以外でモバイル対応をすることも、またCMSの実装のご相談も承っています。お気軽にご相談ください。