皆さんもすでにスマートフォンやタブレットを使っている方が多いと思うので実感はあると思いますが、様々なデバイスの普及が進んでいるので、デスクトップやラップトップ向けだけのことを考えたWebサイトだとユーザーにとって使いにくいケースが出てきています。

Webサイトによってユーザー層が異なるので、スマートフォンユーザーがほとんどいないサイトではモバイルサイトを考えない従来までの考え方でもそれほど問題ないこともありました。
しかし、モバイルフレンドリーという検索ランキングのシグナルに影響する基準ができ、モバイル端末に対応しなければいけない状況になっています。また単に表示だけスマートフォンに対応するだけではないモバイルファーストという考え方も重要です。

モバイルフレンドリー

Googleが検索エンジンのランキングに影響する新しい基準を出しました。スマートフォンでデスクトップ・ラップトップ向けのWebサイトを表示させることは、例えば文字が小さすぎたり、リンクが小さくてタップしづらいなど、モバイル検索ユーザーの利便性を妨げることになります。モバイルにはモバイルに適したサイトを表示し、利便性を上げるためにモバイルフレンドリーという基準ができました。

モバイルフレンドリーの対応していると、検索結果に「スマホ対応」と記載されます。また、モバイルフレンドリーテストでスマホ対応しているかどうかと、もしスマホ対応できていない場合はどこが悪いかを教えてくれます。

モバイルフレンドリーテスト

モバイルファースト

スマートフォンが普及し始めた頃はデスクトップ・ラップトップ向けのWebサイトをスマートフォンで見やすいように変換サービスを使ったりなど見た目を整えるいう流れもありましたが、そうではなくて最初からモバイルユーザーの事も考えてWebサイトを作ろうという考え方です。単に表示をスマートフォン用に体裁を整えるだけでなく、情報設計やコンテンツなど様々なことをモバイルで使用するということを前提にして考えます。

マルチデバイスへの対応方法

マルチデバイス対応するためには大きく分けて2つあります。

ダイナミックサービング

Webサイト利用者のユーザーエージェントを基準に判断して、1つのURLでデスクトップ・ラップトップ用のサイトやタブレット用のサイト、スマートフォン用サイトの表示を切り替える方法。それぞれの端末の利用者に最適な表示やコンテンツを考えることができる。デメリットとしてそれぞれの表示ごとでWebサイトを管理しないといけなくなるのでサイトの修正の手間が増えるなどがある。

レスポンシブWebデザイン

端末ごとで表示を考えるのではなく、どのようなブラウザの幅でもワンソースでWebサイトを最適に表示させるという方法。ワンソースなので基本的に修正などが発生した場合、一度で済む。場合によってはWebデザインに制約が出ることがある。

レスポンシブWebデザインのフレームワーク

レスポンシブWebデザインはフルスクラッチのコーディング以外にも、フレームワークというすでに作られた枠組みを使うことで効率良く制作することができます。いくつか紹介します。

Bootstrap

もっとも知られているレスポンシブWebデザインのフレームワークです。グリッドシステムだけではなく、ハンバーガーメニューなどのモバイルサイトでよく使用される機能はすでに実装されており、また表やボタンなどのCSSもあらかじめ用意されています。目的に応じてクラス名を追加するなど作業が簡単かつ効率的に進めることができます。

Responsive Grid System

グリッドシステムだけに機能を絞ったフレームワークです。導入の敷居が低く軽量なので、グリッドシステムだけあれば良いという場合などに適しています。

マウス操作とタッチ操作、操作方法やデバイスの持ち方の違いで考えるUI

UIとはユーザーインターフェイスの略で、ユーザーが何か操作をする対象、例えばリンクをクリックするボタンやコンテンツのレイアウトなど様々なものがUIとして機能しています。

デスクトップやラップトップではマウスなどでカーソルを操作しますが、タブレットやスマートフォンなどでは指で操作します。指の操作はカーソルのように繊細な動きには向いていないので、指で操作するという前提でボタンの高さを大きくしたりしてボタンを押しやすくするなどの工夫が必要です。また、スマートフォンは片手で持って操作をすることが多いので、その持ち方や指の位置などを考慮して画面設計をする必要があります。

単純にデスクトップ・ラップトップ向けのWebサイトをタブレットやスマートフォン向けに体裁を整えるだけではモバイルユーザーを満足させることはできません。

モバイル端末の通信とパフォーマンス

デスクトップやラップトップでは有線やwifiでインターネットを利用することが大半だと思いますが、スマートフォンなどのモバイル端末はキャリアが用意した電波を使用することが多いと思います。

実際にお使いの方は体験されていると思いますが、デスクトップやラップトップよりは表示が遅かったり、キャリアや場所によっては電波が不安定な状態があったりとスムーズなインターネットの使用ができないことがあります。

表示速度が遅いとユーザーの離脱などが起こるので、表示速度が遅くならないように工夫しないといけません。パフォーマンスの向上はチリツモなのでこれだけやれば良いというものはありませんが、例えば

• 画像をあまり使わない、画像を最適化する
• CSSやJavaScriptなどのファイルへの参照数を減らす
• パフォーマンスへの影響が少ないコードを書く
• サーバーのチューニング

などが挙げられます。

パフォーマンスの改善点を調べられるWebサービスもあるので、改善の参考にしてみましょう。

モバイルでの表示速度に注力する技術

モバイルでの高速な表示のためのAMPという技術があります。

AMP

Accelerated Mobile Pagesの略で、モバイル端末でのレンダリングを速くするためのプロジェクトです。すでにGoogleの検索ではAMPに対応したWebサイトの表示への誘導をしています。このコラムの執筆時（2016年4月18日）ではランキングシグナルにはなっていませんが、今後はランキングの要因になる可能性があるかもしれないので注目しておきたい技術です。

Accelerated Mobile Pages Project