スマートフォンからでもWebサイトが美しく表示され、ユーザーが操作しやすいサイトをデザインするための方法を学習しましょう。
近年はスマートフォンの普及により、スマホを使ってWebサイトを閲覧するユーザーが増えています。Webサイトをデザインするうえで必須項目と言える、スマホ対応について学びましょう
スマートフォン対応を考える
スマートフォンの普及により、ネットの利用もスマホからという方が多くなっています。
また、PCから見た場合のデザイン・設計を先に行ってしまうと、スマホはPCよりも画面が小さいのでコンテンツが入りきらなくなってしまったりすることもあるかもしれません。
引用元：総務省 通信利用動向調査
Skillhubでも、割り合いを見るとスマートフォンとPCの割り合いはほぼ半々です。
このようなWebサイト制作を勉強するようなサイトでも、スマートフォンで行う方は多いようです。
ですので、最初からスマホ対応にすることを考え設計していくようにした方がよいでしょう。
レスポンシブwebデザイン
レスポンシブwebデザインとは、PC、タブレット、スマートフオンといったデバイス毎にページを作り分けるのではなく、ワンソース(HTMLなど）で各デバイスに最適な表示に自動的に切り替える制作手法です。
CSSに記述されるMediaQueriesと呼ばれる制御式を用い、そこで定義された画面幅に合わせてて適用するス夕イルシートを切り替えて表示を最適化します。 ワンソースでマルチデバイス対応ができるという大きなメリットから、近年のwebサイトではよく使われる方法となっています。
SKILL HUBの講座でも@media screen and (max-width: 767px) {}などを使い、一つのcssファイルの中でPCとスマートフォンの表示を変更しましたね。
ブレイクポイントを使用する
ブレイクポイントとは、画面幅に合わせてCSSを切り替える際の「切り替えポイント」のことです。
このポイントの幅を超えた、またはこのポイントより小さくなった時にどう表示するかを設定しておきます。
この設定により、ワンソースでも最適なコンテンツの配置を実現することが出来ます。
大抵のサイトでは大きく、PC版、夕ブレット版、スマートフオン版での見栄えを想定したブレイクボイントを設定しています。
複雑なレイアウトや、細かな調整をしたい場合は、更に細かくブレイクポイントを設定することもあります。
下の図はBootstrapというフレームワークで設定されているブレイクポイントです。
５つの基準ポイントがありますね。
ブレイクポイントを何pxに設定するかという決まりはありません。
多く使われているデバイス/モニター類のサイズを考慮して設定しましょう。
レイアウトの変化
前回のレッスンで、Webサイトの段組み＝カラムについて学習しました。
パソコンの場合はモニターが大きいので３カラムでも、それぞれのブロックの幅を確保することが出来ますよね。しかし、スマートフォンの画面幅で縦３つに分割してしまうと、ものすごく読みにくくなってしまいます。
そこでスマートフォン向けのデザインではコンテンツの並びを変化させる必要があります。
代表的なレイアウトパターンは、画面幅が狭くなるにつれてカラム数を減らしていく→スマホ幅のときにはシングルカラムレイアウトで表示するという方法です。
どちらも入り切らなくなった列（カラム）を、下へと移動させていますね。
このように配置を変更することで、狭い画面でも無理なく表示させることが出来ます。
また、元々シングルカラムで構成されているページは微調整のみでOKなこともあります。デザインもコーディングも楽ですし、ユーザーにとっても分かりやすいですよね。
これが近年シングルカラムレイアウトのサイトが増えている理由でもあります。
その他の変化方法
その他にも、レイアウトを変化させる方法はいくつかあります。
例として２タイプご紹介します。
レイアウト変更型
表示領域の幅に合わせて複数のレイアウトを設定するパターンです。
単にはみ出したカラムを下にスタックするのではなく、画面幅に合わせてベストな配置を実現できるというメリットがあります。が、複数のブレークポイントを設定し、レイアウトを細かく設定していくため手間がかかります。
オフキャンバス型（off canvas）
画面のサイズが小さい場合もコンテンツの並びを変更せず、表示領域の外に配置します。
グレーの太枠が表示領域です。
ボタンをタップするなどのアクションによって、表示領域内のコンテンツとの切り替えを行います。
画面の幅が大きくなるにつれ、表示領域内に配置される要素が増えていきます。
カルーセルやメニュー部分など一部では使われていますが、全面このタイプのレイアウトはあまりありません。
スマートフォン対応の検討ステップ
制作の工程上、PCサイトのデザインを先行して作成し、スマートフオンサイトに最適化することが多いです。最初はいきなりオペレーションツールを使ってデザインを作成せず、コンテンツの配置パターンをどうするかラフ画を作成してみるのもオススメです。
まとめ
- Webデザインはスマートフォンからも見やすいサイトを作る必要がある。
- ブレイクポイントを決定し、レスポンシブデザインにする。
- スマホ向け表示では要素をカラム落ちさせるなど、見やすいように調整する。
- コンテンツの並び順など、狭い画面内でも伝えたい情報がすぐに分かるよう工夫する。