レスポンシブ？モバイルファースト？のその前に。今作るウェブサイトには何が必要か？

2017.08.25 saycat（企画・制作部）

スマホは今やすっかり市民権を得て、電車に乗っても街を歩いてもスマホと一体化している人がうようよいます。

そしてスマホでのネットアクセスがPCでのネットアクセスを超えてしまった今、スマホ対応が必要なのかどうかを確認するまでもなくなりつつあるウェブサイト制作現場。
レスポンシブだ、モバイルファーストだなどどいう言葉が日常的に飛び交ってはいますが、これ、本当に正しく使われているのでしょうか？

それ以前に私（やお客様）は正しい意味を理解しているのか？という疑問がふと頭をよぎりました。
というのも、なんだかお客様からのリクエストとこちらの感覚に得も言われぬモヤモヤというかズレというか、そういうものを感じることがたまにあったからです。

なぜ今もこれらの言葉にひっかかるのか

これらの言葉を取り上げるのもものすごく今更感があるとは思うのですが、実際のところ今も捉え方にばらつきがあると感じるのが実情です。

レスポンシブウェブデザインが提唱されたのが2010年のことですから、ウェブの世界でいえば結構な一昔前といってもいいくらいです。
Responsive Web Design
レスポンシブウェブデザインについては、「幅が伸び縮みするウェブサイト」ということぐらいはさすがに浸透していますし、逆に何らかウェブ制作に関わっている方なら知らないということはないと思います。

モバイルファーストについてはそれよりやや早め、2009年に提唱されています。
Mobile First

モバイルファーストについてさかんにその言葉や概念の説明にあたるようなブログ記事を見かけるのは、そこからやや時間が経った2010～12年ごろでしょうか。
このあたりで言葉の意味を混乱しがちなことに言及されています。

少し混乱しがちですが、モバイルサイトを作ってからPCサイトを作ること、という単なるサイトを作る順番の話ではありません。
出典：MobileFirst.jp “Mobile First”を知る。

それほどまでに時間を経ているにも関わらず、今もこれらの言葉についての意識のズレが出てしまうのはどういうことなのでしょうか。
考えられるのは

カタカナ語が理解しづらいのは何も今に始まったことではない。
どの場面で何をどうやって使うのか実は曖昧なままだったり、誤解したまま使っていることがあっても、それで仕事なんとか回ってしまってる。
今もその言葉や技術継続中でも、発生当初とはまた違った意味付けをされていることもある。

そこでこれらの言葉を改めて紐解き、正しく理解したうえでサイト制作に活かそうというわけです。

まずは辞書的な意味から。

意味不明のカタカナ語が出てきたら、素直に辞書をひくことにしています。
レスポンシブウェブデザインが何者かというのは多分ご存知の方のほうが多いかと。
でも、「レスポンシブ」のそもそもの意味、知ってましたか？
私は知らなかったです。

レスポンシブ（Responsive） すぐ応答する、敏感な、(…に)よく反応して、敏感で、答えの、答えを示す
Responsive

ウェブの世界に置き換え、何に敏感に反応するかというと、デバイスの画面サイズ。
一つのソースだけで、画面幅に合わせてレイアウトを柔軟に変え、どのデバイスでみても情報の内容が損なわれずに、かつ見やすくレイアウトされているような状態にすることがレスポンシブウェブデザイン。
ちなみによく間違えられるレスポンシブル（Responsible）は「責任」という意味なので、レスポンシブデザインとは関係ありません。

モバイルファースト
これはなんとなく字面で意味がわかります。
mobile device を first=最初に。
主にWeb開発で、PC版よりも先にモバイル版から開発する手法やコンセプト。
（「モバイルファーストインデックス」とはまた別物です。ほんとにややこしいですね。）

モヤモヤするポイントは

うん、間違ってはいない。

確かにひとつひとつの用語の意味は間違ってないんですけど、多分違和感を覚えるのは、ひとつひとつの用語そのものの理解というよりも
「まず手法ありき」
みたいな感じだと思うのです。

「今はスマホ見てる人が多いから、スマホ対応サイトにしよう。だからモバイルファーストでスマホから先に設計してレスポンシブで作ろう。」というような。

しつこいようですが、モバイルファーストは「モバイル用から先に作る順番の話」とイコールではありません。
「モバイル版に特にチカラ入れて作る」とも違う。
「モバイルファースト」で開発することがそのまま「レスポンシブデザイン」を意味することとももちろん違います。
（モバイルでの使い勝手を検討した結果、レスポンシブを採用するに至る、というケースは当然あると思います。）

では「まず手法ありき」ではなく、まず、何なんでしょう？

まず、コンテンツファーストから考えるとよいと思います。

モバイルファーストと同じように機械的な順序の話だけで言うと、まずコンテンツを用意するということかと思います。
つまりは、先にコンテンツを入れる入れ物のデザインから始め、コンテンツをあとから作ってそこに流しこむというよくあるフローとは逆で、先にコンテンツを作ってから入れ物を作る、というフロー。
これ、よく考えなかったとしてもそうするのが一番失敗がないんじゃない？と見当がつくと思うんですが、なぜか見た目から入るという流れが今も多いです。

なぜ先にコンテンツを作るのか？

伝えたいコンテンツがあるからウェブサイトを作るんですよね。
ウェブサイトはコンテンツを伝えるための手段です。きちんとした中身がないと意味がない。
キレイな入れ物を見て喜ぶユーザは、、もしかしたらいるかもしれませんがサイト自体はあまり社会のお役には立たなさそうです。

で、おそらくですがコンテンツファーストにおいてもやはり「コンテンツを先に作りましょう」という順序の話だけを指しているわけではなく。
ウェブサイトは「コンテンツ（＝ページの中身の質）がまず第一！」という理解でよいと思います。
意味のない薄っぺらなコピーやら文章やら、本筋とは全く関係のない内容は不要ですよね。

まずは良質なコンテンツを作ること。
これはほんとーに昔から変わらないはずなのですが、そして繰り返し言われていることのはずなのですが、なぜ今でもこんなことが言われ続けているのかというと、たぶん単純にできてないことが多いからですね。

良質なコンテンツを作るのは時間がかかります。世間に認知されるのにも当然時間がかかる。
でもコストはかけずに手っ取り早く売りたい、ラクして売りたい、という思惑は今も昔も変わらないようです。
その結果、「本当にもうええわー！」というくらい、検索エンジンでの検索結果が、どうしても抜け道をずる賢く利用するという、人間の（情報を提供する側の）欲望が渦巻いた残念な結果になってしまいがちです。
テキトー合成記事をばらまいていたキュレーションサイトの記事が検索上位に上がり、その手法が大バッシングを受けて閉鎖したのもまだ記憶に新しいですよね。

その残念な方向に向けるパワーを、コンテンツに注げばいいのにねと思います。
Google検索もコンテンツの質を重視する方向にどんどんグレードアップしてくれているのは喜ばしいことです。
参考：日本語検索の品質向上にむけて

じゃあ、良質なコンテンツって何か？

ステマや詐欺アフィリ、コンテンツファーム、フェイクニュースといったわかりやすい悪質コンテンツでなければ良質なのかといえばそうではありません。

「オレはこんなにいいことを書いている！」と思っていても、見ている人に伝わらなければ意味がありません。
サイトを見に来る人は何が知りたいかというと
「自分が知りたいことの正しい答えが欲しい」
というそれだけです。

コンテンツを作る上で注意したいのは

見ている人が知りたいことに答えているか
ユーザの知りたい情報と提供している情報の論点が一致しているか
余計な情報・関係ない情報が混じっていないか
信頼するに足る根拠を示しているか
内容に過不足はないか
わかりやすい言葉で語られているか
見てほしい人に適した言葉で語られているか
視覚情報や音声情報などを適宜交えてわかりやすさに努めているか
情報は整理されて配置されているか

などなど。

びっくりするくらい真っ当です。
「今更言われんでもわかるわ」です。
でもびっくりするぐらいできてないウェブページが多いのも事実。

コンテンツファーストはわかった。じゃあそれをレスポンシブにしちゃダメなの？

サービス全体をモバイル中心に考えた場合、WEBサイトの枠に収まらない広いサービス展開が考えられますが、（メルマガ配信やアプリの提供、SNSでの発信など）ここではウェブサイトに限った話とします。

ほんとにしつこいようですが、
「モバイルでの使い勝手を検討した結果、レスポンシブを採用するに至る、というケースは当然あると思います。」
なのです。

ユーザーファースト

ここで考えたいのが「ユーザーファースト」という視点です。
この「ユーザーファースト」もよく使われる言葉ではあるのですが、平たく言ってしまえば「お客様第一主義」かと思います。
日本語に直したところで広義にならざるをえない言葉ですが、やっぱり企業や個人によって捉え方は様々です。
ここでは使う人の利便性をまず考える、というような視点とします。

「そのコンテンツを届けたい人に見てもらう場合、レスポンシブデザインが最適な見せ方であるかどうか？」を考えたとします。
例えば、ブログやニュースサイトなどであればコンテンツはテキストの質そのものが問われるものですし、「同じ内容を読みやすく整える」レスポンシブという技法は理にかなっていると思います。
あとは、読む時間やシチュエーションをあまり問わないようなベーシックなコーポレートサイトだとか。

「このコンテンツを、見ている人（見てほしい人）にストレスなく快適に見てもらうためにはどういう提供形態が最適か？」と言い換えてもいいかもしれません。

たとえば、同じ商品の情報を提供するウェブサイトをPCで見たときとスマホで見たとき、表示する内容をシチュエーションによって変えたいとかいう場合では、
（移動している人と部屋で座っている人では、そのときに必要な情報や機能が異なることを考えたとして）
「同じ情報をストレス・違和感なく閲覧できる」というレスポンシブにするよりは、全く別サイトとして配信したほうが親切かもしれません。

もしくは思い切って「スマホでしかアクセスしない若年層」を狙って、スマホでしか配信しないコンテンツを作る、ということにしてもいいかもしれません。

最近ではAMPを取り入れるニュースサイトやブログもよく見かけるようになりました。
ふさわしいコンテンツかどうかを見極めた上で、コストが許すなら、AMPを使ってスマホページを公開するのも有りだと思います。

制作手法は制作側の都合でしかない

ユーザーにとってみれば、裏方の技法としてレスポンシブ採用であろうがそうでなかろうがどうでもいいお話です。
見たいときに見たい場所で見たい情報が適切に取得できればそれで満足なのですから。

「見たいときに見たい場所で見たい情報が適切に取得」できる最適解がレスポンシブなら問題ないです。そこを考えずにいきなり「レスポンシブで！」という手法から制作を考えるのはおかしいですよね。
レスポンシブはサイトをスマホに対応させるのにスタンダードな手法ではありますが、必ずレスポンシブを使わなければならないという絶対条件ではありません。

改めてレスポンシブウェブデザインの利点を整理すると

単一のHTMLなのでメンテナンスが容易
CSSだけで実装するのでフロントエンドで開発できる
他のデバイスへの拡張性が高く、複数のサイトを作る必要がないぶんコストがかからない
ひとつのURLで対応できるのでSEO的に有効である

制作サイド（これは制作会社や制作を依頼したクライアントという、サイトを提供する側の意味）にとってはメリットが大きいです。

スマホで見たときにPC用のページをそのまま見せるよりはずっと親切です。
ただ、これも誤解されやすいのですが、レスポンシブはコンテンツを各デバイスに最適化したものではなく、汎用化したものです。
同一コンテンツを色々なデバイスでユーザビリティを損ねることなく見られるようにするのが汎用化。
最適化というのは、そのデバイスに最も適した形にコンテンツを変えたり見せ方を変えたりすること。
場合によっては、ページの構造そのものや、インターフェイスを変える必要が出てくることもあるでしょう。

レスポンシブは万能ではありません。レスポンシブは、制作手法のひとつでしかない。

配信するコンテンツも、それを利用しているユーザーも、使っているデバイスも多様化しているからこそ、情報の提供方法も精査したほうがいいんじゃないか、ということです。

レスポンシブは多様化するデバイスに対応するための救世主であることは間違いないです。
でも、この手法を出発点とするのではなく、どんなユーザーに、どんなコンテンツを提供するのか、を出発点としないと。

では、モバイルファーストっていうのは結局？

モバイルが普及した時代に、モバイルサイトから先行して開発するという流れはもちろん自然なことです。
ただし、「モバイルサイトから先に作る」のは制作工程のひとつでしかありません。
「モバイルファースト＝モバイルから先に開発すること」と捉える事自体が悪いことなのではなく、根底にはどのデバイスで見ても有益な情報が快適に閲覧・操作できるようにという配慮がないとダメです。
モバイルサイトから先に作った＝ユーザーに優しいサイトになるわけではありません。

また、モバイルファーストはモバイル優遇（PC冷遇）、ではありません。
「モバイルファーストだからモバイルサイトをよりかっこよくしないと」とか「モバイルファーストだからPCサイトは多少端折ってもいい」とかいうことではないです。
PCを使っているユーザーは今もたくさんいますし、遠い未来に過去の遺物になってしまうことはあるかもしれませんが、これから先も当分消えることはないでしょう。
モバイルファーストが重要だからといって、PCユーザーの利便性を損ねてしまっていいということではないです。
（古いバージョンのブラウザのことを考慮するかどうかはまた別の話とします。）

どんな時代になろうとも活かすべき視点

レスポンシブはモバイルデバイスがこれだけ普及した今の時代に合わせてひねり出された技術です。
その時代、そのときの状況に適合するものや、問題を解決するための技術や考え方はもちろん積極的に取り入れればよいと思いますが、その技術も適切に用いられればこそです。
これからあらゆる製品がネットに接続するような時代が来たときには、レスポンシブに替わる何か新しい技術が生まれるんでしょうね。

それでもユーザーファースト・コンテンツファーストについては、多分この先もずっと活かすべき視点だと思います。
いつの時代もウェブを利用するのは人間であることに変わりないですから。