ホームページ制作アトリエ

心えがおホームページ制作 atelier(アトリエ)は、ホームページ・動画制作、教育ICT・アプリ開発、名刺・ポスター・チラシの作成を行っております。

レスポンシブWebデザイン

カテゴリー:css3
「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整するデザインのことを指します。
スマートフォンがこれだけ一般的に浸透した今、私の持っているサイトでもアクセス元はスマートフォンが4割になりました。

2014年11月現在での主要企業サイト マルチデバイス対応状況

※画像はクリックで拡大してご覧ください
世界主要企業サイトマルチデバイス対応状況 レスポンシブルデザイン
国内主要企業サイトマルチデバイス対応状況 レスポンシブルデザイン2
世界主要企業サイトマルチデバイス対応状況 レスポンシブルデザイン3
日本では、今現在(2014年11月)にしてスマートフォン専用サイトの割合が目立って高いですが、今後、日本も他国同様にレスポンシブデザインが増加すると見られます。
現在でも、スマホ対応されたテーマ・テンプレートがデフォルトになっているものが殆んどですが、まだレスポンシブWebデザインに対応していないデザインを使用している場合、自力で対応させなければなりません。
今回はその方法をまとめます。

※基本的な操作は省きます。今回はあくまでレスポンシブWebデザインの制作についての記述です。

従来の方法との違い

今までは、PCやスマートフォンなど、デバイス毎に各HTMLファイルやCSSを複数用意し、最適化し、HTTPリダイレクトなどでアクセスを振り分ける手法が、一般的な制作方法でした。 が、「レスポンシブWebデザイン」では、1つのHTMLファイルを、CSS3(Media Queries)で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。

「レスポンシブWebデザイン」のメリットって?

・すべての機器に同じ内容を表示できるので、更新作業の簡略化更新漏れの防止になる。
・検索エンジンやアクセス解析に内容が重複した複数の異なるURLが出現することも避けられる。
これによって、リンク・シェアがしやすくなり、SEOにも有効ということになります。
Googleは下記のように述べています。
-Googleも推奨しています-
PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。
また、デバイスに合わせた見た目になるので、操作性が向上し、ユーザビリティ点数も上がります

ところで・・・
メリットだけ書いてデメリットを書かないのも何なので、一応デメリットも書きます。

・端末ごとに細かいデザイン/サイト構造調整ができず、デバイスごとのUI最適化/コンテンツ出し分けが難しい。
・デザインを行う上でのルール/制限があり、レスポンシブWebデザインを使いこなすためにはノウハウが必要。
・閲覧時は、全デバイスで同一のhtmlファイルをダウンロードするため、見えない部分に必要のない要素が読み込まれてしまい、ページの読み込みが重くなる可能性があります。

個人的には、制作が大変なくらいかと。1つのHTMLファイルで複数のデバイスの表示を実現するには、設計が重要です。PCとスマホで、どこをどのように画像を切り替えるのか、CSSで対応する箇所・画像にする箇所の関係も、複数デバイスのことを考慮しなくてはならなりません。その分、費用と時間がかかります。

「レスポンシブWebデザイン」に使われるレイアウト

レスポンシブWebデザイン+○○レイアウトというように、レスポンシブWebデザインと合わせて制作することで、さらに良い魅せ方を目指します。

リキッドレイアウト

画面サイズに応じて、要素が横幅100%相対的または可変的に調整されます。
「リキッドレイアウト」のメリットは、テキストや画像などだけではなく、ボックスとしての要素が、PC・タブレット・スマートフォンに関わらず、伸縮して伝えられることです。

フレキシブルレイアウト

リキッドレイアウトととても似ており、こちらも要素が相対的または可変的に調整されます。 しかし、フレキシブルレイアウトでは最小幅と最大幅も指定するので、大きな画面サイズの場合は、周りに余白が生まれます。PCで見た時だけ幅の固定をしたい場合などに使われるレイアウトです。

可変グリッドレイアウト

グリッドレイアウトのもつ、ブロックごとに文字や画像などを配置するレイアウトに加え、リキッドレイアウトによる可変レイアウトを利用したレイアウトです。
ブラウザサイズに合わせて決められたサイズのボックス要素が再配置されるので、情報サイトなどに多く使われています。 効果的に見せることはできますが、その分小さい画面サイズの場合に縦長となってしまい、見づらいと思うユーザーも少なくはありません。

「レスポンシブWebデザイン」によく使われる技術

レスポンシブWebデザインでよく見かける技術を少しまとめます。

Fluid Image (フルードイメージ)

Fluid Image とは、画像サイズをブラウザのウィンドウ幅にあわせたい時に使う技術です。
開いているウィンドウサイズに応じて、縦横比を保持したまま自動で拡大・縮小してくれます。

Fluid Grid (フルードグリッド)

Fluid Grid とは、任意のグリッド(格子状の区切り)に要素を当てはめていく「グリッドデザイン」と、要素を可変にレイアウトする「リキッドレイアウト(可変レイアウト)」と呼ばれる手法が組み合わさったもので、可変なグリッドデザインを「フルードグリッド」といいます。

Media Queries (メディアクエリー)

Media Queries とは、CSS3の機能で、デバイスの状態(表示幅等)を条件に見た目を切り替える技術です。

※今回は、基本である、このMedia Queriesについての記述になります。

対応デバイス

レスポンシブWebデザインをのを制作するには、まず対応デバイスのサイズを知っておかなくては始まりません。
以下に主なものをまとめてみました。※PCの解像度に関しては、省略します。
iPhone 4 / 4S縦:640px x 960px 横:960px x 640px
iPad縦:768px x 1024px 横:1024px x 768px
PC横幅:960px~
iPhone 3GS縦:320px x 480px 横:480px x 320px
Crappy Android縦:240px x 320px 横:320px x 240px
Nicer Android縦:295px x 515px 横:515px x 295px
Kindle縦:600px x 1024px 横:1024px x 600px
全てを対応させるととても大変な事になってしまいますので、大抵の場合2~3つの対応デバイスを決めて設計していきます。

私の場合は、
・PC (横幅:960px~)
・iPhone 4 / 4S (縦:640px x 960px 横:960px x 640px)
は絶対で、時と場合により、
・iPad (縦:768px x 1024px 横:1024px x 768px)

IE対策

Media Queriesの記述方法(CSS3)

css内にソースをまとめて書く場合

外部CSSとして記述

css3-mediaqueries.jsを使用する場合、外部cssの読み込みを使用するとIE8以下では動いてくれないこともあるようなので、その場合は@media規則で指定してください。

@importで各CSSを読み込む

画像の伸縮設定

スマートフォン用・タブレット用のCSSに以下のコードを記述して、画像を伸縮させます。 こうすることで、画像が元のままのサイズで表示され、画面からはみ出てしまうのが防げます。
「height」をautoにすることで縦横比もそのままになります。

css内にソースをまとめて書く場合だと、以下のようになります。

Viewportプロパティを記述する

Media Queries を使い、デバイスサイズごとにスタイルを振り分けるだけでは、スマートフォンでブラウジングした際に、せっかくスマートフォン用に制作したものも、980pxのサイズで表示され、PC用の画面が表示されてしまいます。 そこで、スマートフォンのブラウザにあるViewportという機能を使います。 メディアクエリを使用してレスポンシブWebデザインを制作する際には、このViewportをデバイスの横幅であるdevice-widthに指定。

実装してみました。

※画像はクリックで拡大してご覧ください
PCiPhone
レスポンシブWebデザイン res-s-1
PCiPhone
res-p-2 レスポンシブWebデザイン
PCiPhone
レスポンシブWebデザイン レスポンシブWebデザイン