実際どうなの？モバイルファーストの必要性

数年前から、よく耳にするようになったモバイルファーストという言葉。

ネット上では、モバイルファーストの定義に関して、さまざまな意見や記事が上がっておりますが、だいたいの意図やニュアンスはweb制作に関わるみなさまには概ね掴めているように思います。

モバイルファーストとは、”モバイルの最適化を優先すること”や”モバイルを使うユーザーの視点で制作すること”などの意味合いですが、実際にweb制作の各工程において具体的にどのような関係性があり、どの程度影響しているのかに関しては、あまり深く考えたことがない方も多いと思います。

ちまたに溢れるモバイルファーストに関連する記事を読み返してみても、具体的に各セクションや各制作担当者に紐づけて書かれている記事はなかなか見つけられません。

そこで今回は、モバイルファーストの定義は皆さんがなんとなく理解していると仮定した上で、それを制作プロジェクトにおける責任者であるディレクターや各分野のデザイナーやコーダーに対して、モバイルファーストがどのように制作に影響してくるのかを具体的にお話していきます。

モバイルファースト（Mobile First）
モバイルファーストとは、もともと2010年ごろのレスポンシブデザインが流行りだした頃から言われるようになった言葉。スマホ市場の台等ともにスマホを優先的に作るという概念だけでなく、マーケティングよりのコンテンツを重視する意図や、ユーザーの視点にたった考え方も含むようになってきている。

＜ディレクター編＞プロジェクトを成功へと導く！
1. ディレクターが理解しておくべき３つのポイント
2. モバイルファーストインデックスへの正式発表
＜デザイン編＞スマホとPCの連携を忘れない！
＜コーディング編＞ SEO対策にも効果あり！
きちんと理解して、正しい判断を

＜ディレクター編＞プロジェクトを成功へと導く！

まずは、第一線でお客様とのやり取りをするディレクターにフォーカスしてみます。

web制作の窓口としてプロジェクトの進行や責任を担う制作ディレクターは、モバイルファーストの本質を一番きちんと捉えておく必要があります。お客様に対してモバイルファーストを前提とした質の高い提案をしながらも、制作サイドに対しても制作工程を円滑に進めるべく内部進行を調整していく必要があるからです。

例えば、円滑に進まない下記のようなケースがあります。

クライアントの意向を鵜呑みにし、スマートフォン（以下、スマホ）のみ先にデザインし、その後PCのデザインを作っていく中で必要なコンテンツが増えてしまい、FIXしているスマホのデザインにも度々修正が入ってしまうことがあります。

ここでのポイントは、PCの対応を完全に後回しにしまっていることです。
クライアントの意向や事情があるにせよ、大切なことはスマホの優先度を高めつつもPCを並行して計画的に制作していくことが重要となってきます。

ディレクターが理解しておくべき３つのポイント

プロジェクト全体の運用を担っているディレクターに関していえば、モバイルファーストにおいて理解しておくべきポイントが大きく３つあります。

・モバイルファーストという定義の理解

目的：クライアントへの提案とプロジェクト全体のコントロールのため
対象：クライアント、制作チーム全般

・UI＆コンテンツの最適化

目的：ユーザビリティーの向上、SEO対策
対象：ユーザー、UI設計者、デザイナー

・パフォーマンス（サイトの重さ、表示速度）

目的：ユーザビリティーの向上、SEO対策
対象：ユーザー、コーダー

上記における“UI＆コンテンツの最適化”や“パフォーマンス”は、UI設計者やwebデザイナー・コーダーの作業領域となるものですが、それぞれを適正に進行させるためには、やはりディレクターの十分な理解が必要となります。

”UI＆コンテンツ”に関しては、ユーザーの視点に立ちデバイスの違いを熟知すること。そして”パファーマンス”に関しては、ユーザビリティーの向上だけだなく、SEO対策の一貫になることも理解する必要があります。

モバイルファーストインデックスへの正式発表

また最近の話題でいうと2018年の3月にGoogleから、ウェブマスター向け公式ブログにおいて正式にモバイルファーストインデックス（Mobile First Index/以下、MFI）の開始が発表されました。

MFIとは、Googleがこれまでサイトの評価（＝検索結果の順位）をPCサイトをベースにインデックスしコンテンツの質を評価していたものを、これからはスマホサイトをベースに評価していくというものです。これにより今までの検索結果順位が多少なりとも変わる可能性がでてきました。

とくにスマホサイトにおけるコンテンツがPCサイトと比べて極端に少ない場合は、大きな影響が出るとも言われており、今後のSEO対策にもモバイルファーストは重要な指標となってくることは間違いありません。

「モバイルファーストインデックスを開始します」（Google Webマスター向け公式ブログ）
https://webmaster-ja.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html

＜デザイン編＞スマホとPCの連携を忘れない！

次に目線を変えて、デザインの制作工程において意識すべきモバイルファーストについて考えてみます。デザイン領域（UI設計も当該領域として仮定）において、モバイルファーストに関係する大切なポイントは３つあると考えます。

・UIの最適化
・コンテンツの最適化
・スマホとPCの両立（あくまでも優先はスマホ）

一つ目と二つ目は、また別の機会に詳しくご説明させていただくとして、
三つ目に関しては前項で述べたように、モバイルファーストだからといってスマホのデザインだけを先行してデザインをしていくことには大きな危険が潜んでいます。スマホとPCの差から発生し得る作業進行のミスリードです。

「そんなこと、起こらないでしょ？」とディレクターの方は思うかもしれませんが、デザイナーの方なら共感できる人も多いはず。

その理由は、スマホとPCのレイアウトの自由度が大きく異なるからです。スマホはサイズがさまざまあるにせよ、レイアウトはある程度制限されてしまいます。一方、PCはレイアウトの自由度が高く表現もさまざまなため、レイアウトパターンやそれに関わるコンテンツが浮かびやすいと言った特性があるためです。デザイナーがデザインするにあたり、スマホからデザインを起こすのかPCからデザインをおこすのか……

当然のごとくモバイルファーストが推奨される今、モバイルから制作する方が優先ではありますが、上記のような問題を解決するために理想はスマホとPCを同時にイメージして制作をしていく方が結果的にはムダなく、品質が一方に偏ることなく進行できるようになります。

とくにレスポンシブデザインで制作していく状況ならなおさらで、ソースを一元管理とするレスポンシブでは、ワイヤーの段階からスマホとPCの両方のデザインを制作する必要性があります。制作の効率を考えてデザインを実際には起こさないケースも多くあると思いますが、少なくとも頭のなかでイメージができていることは必須となります。

レスポンイブデザインについてはこちら（https://chimpanzine.digital/?p=79）