「Webサイト制作のワークショップ」のメモです。

あらゆるWebサイトへのアクセスが、PCよりもスマホからのアクセス数の方が多くなった。そういった背景にあわせてWebサイト制作の順番も素早く変えていく必要がある。

enjoy!

マルチデバイスへの対応とモバイルファースト

iPhone 7/7 Plus/SE（4.7/5.5/4）、iPad Pro 9.7/12.9、MacBook Pro 13/15、MacBook 12、iMac 21.5/27、Windows、Android など、さまざまなスクリーンサイズを持ったデバイスがある。他にもテレビ、ゲーム機器など、ネットにつながるデバイスは多い。

ブレークポイントで可変するサイト

1つのWebページを異なるスクリーンサイズに柔軟に対応させるため、デバイスのスクリーンサイズによって表示の仕方を変える。デバイスのスクリーンサイズにあわせて表示を最適化していく手法を「レスポンシブWebデザイン」という。

画像のピクセルパーフェクト

データ上の1ピクセルと、スクリーン上の1ピクセルとが一致する「ピクセルパーフェクト」が意味を失った。スクリーンの解像度にあわせて、100pxなら100pxのデータを1px＝1pxで表示するのがピクセルパーフェクトという考え方。

たとえば iPhone にはスケーラーという機能が働いていて、割り切れない拡大率でもジャギーがでることなくキレイに画像やテキストを表示する。RertinaDisplay のような高解像度なスクリーンでもピクセルの存在を感じさせない。

いずれスクリーンからピクセルという概念が無くなると考えた方が早いかも知れない。

高解像度スクリーンに対応するための1x、2x

それぞれ1x（ワンエックス）、2x（ツーエックス）と読む。1xの画像データを2倍にしたものが2x。高解像度のスクリーンでは2xを表示させ、それ以外のスクリーンで1xのデータを表示するように、読み込む画像データを振り分けることが可能。

Photoshop でWebデザインする際にも幅960pxの2x、つまり幅1,920pxで制作しておき、必要に応じて1xと2xの画像を書き出す。960pxの2x（1920px）であれば、A5サイズの実データ（350dpi）ほどのデータが必要となる。Webは低解像度で良いというのは過去の話。ただし、無駄に大きいサイズの画像を縮小して使うのはデータ読み込みに時間がかかるだけでなく、デバイスのメモリを消費するので、ブラウザのフリーズにもつながる。あくまでも最適なサイズを利用する。

モバイルファースト

スマホサイトを最初にデザインし、次にPCサイトをデザインしていくという流れ。スマホが出始めた頃は、これのまったく逆のPCファーストだった。PCで自由な表現でサイトを作り、そこから情報を省いていったものがスマホサイトだった。また、フィーチャーフォン全盛期やスマホ初期には、PCサイトとモバイルサイトを分けることが多かった。

• http://www.ドメイン/｜PCサイト
• http://www.ドメイン/sp/｜スマホサイト
• http://www.ドメイン/m/｜モバイルサイト

のように、PHP や.htaccess で振り分けていた。

そこから数年で立場が逆転した。どのサイトもスマホでのアクセス数が増え、ついにPCを抜いた。特にネットショップでは、スマホ対応なしに今後も売上を伸ばし続けていくことはできないと考えて間違いない。

スマホサイトからデザインしていくことで、構造がシンプルになる。スマホは基本的に1カラムのレイアウト。PCサイトのように常にサイドバーが表示されることはない。

もしPCファーストでデザインするとどうなるか。PCは大きな画面サイズのためより多くの情報を入れ込めるので、自由な表現が可能。ある意味では、無駄な装飾が増えることになる。それをスマホに対応させていく段階で、要素が引き算されることになる。そうすると、スマホサイトの機能が絞られ、やはり最終的にPCサイトを開かないとダメだということになる。スマホサイトが登場したときは、このような経験が多かった。過度な装飾は、スマホでは情報のノイズにしかならないので気をつけたい。

スマホサイトの重要な要素として、構造がシンプルであること。ページ分けするよりは、1ページの中でスクロールして見せたほうが効果的。メニューをタップするよりも、指をスワイプさせてコンテンツをスクロールする方が圧倒的に簡単な動作となる。ページの読み込み時間も発生しない。メニューをクリックして次々とページを移動していくのは、マウスのクリックが得意とする動きだ。それよりも、スクロールだけで要点を魅せるデザインの方が、成功体験に結びつきやすい。Webサイトで伝えるべきことをうまく整理するということでもある。

コンテンツファースト

コンテンツファーストという考え方もある。ユーザーが求めている情報がはっきりとしている場合に、その情報へ最短の方法でたどり着ける構成であるべきという考え方。
例）Amazon、Wikipedia

スマホ特有の機能

GPS、ジャイロセンサー、カメラ、マイク、気圧計など。Macにも搭載されている機能もある。これらの機能は、HTML5でコントロールすることが可能。

Google の検索エンジン

Google の検索エンジンが、PCとスマホそれぞれ切り分けられると発表された。PCとスマホは一緒になるのではなく、それぞれ影響を与えながらも独自の進化を遂げていく。

最近は Twitter で検索する人も少なくない。リアルタイムな情報を得られるからというのが理由。

スマホ専用サイト

PCサイトは作らずに、スマホ専用サイトのみを制作するメリットもある。Webサイトが利用される場所が屋外に限られている場合など、スマホでの操作に特化したデザインを行える。また、スマホには比較的新しいブラウザ（モダンブラウザ）が載っているので、PCのように古いブラウザ（レガシーブラウザ）に対応させるための制作コストを抑えられる。PCでアクセスした場合にはサービスの案内のみにとどめて、あくまでもスマホから利用してもらう動線を作る。

タブレットへの対応

スマホよりもPC寄りのレイアウト。PCサイト（フルサイト）を表示させる。クリックでは点を狙えるが、タップは押し間違いが発生するのでマージンのとり方の違いがある。そもそも、この違いを理解していれば、PCサイトのWebデザインを行う際にマージンのとり方が広くなり、タブレット表示時のマージンを想定してデザインすることができる。

スマホアプリ

アップデートのスピードは、Webサービスに比べると遅い。こちらのタイミングで好きなようにアプリのアップデート公開を行えるわけではない。アプリ内に、ただWebページを読み込んでいるだけのものもある。操作すると必ずWebにアクセスするので操作性が悪い。スマホがオフラインの場合にコンテンツの表示が可能かどうかは、アプリとして大切な要素。

アプリ内ブラウザへの対応と、ページの高速表示

アプリからスムーズなコンテンツ閲覧を可能にする仕組み。Webサイトからデザインなどの要素を省いた、従来のRSSのような概念に近い。

• AMP（Accelerated Mobile Pages）｜Google が推進する
• instant article｜Facebook が推進する