ヤフージャパンプレミアム広告賞受賞

自社書籍

新卒採用情報

長期インターンシップ募集

採用情報

Bigmac 社長ブログ

スタッフ厳選!!おすすめ情報

ITAL株式会社

twitter
@Bigmac_work
google+
rss
rss
a
follow us in feedly
hatena.bookmark
このエントリーをはてなブックマークに追加

おすすめ情報

おすすめ情報

2016年10月18日

今更聞けない?レスポンシブwebデザイン

not-hear-too-late-responsive-web-design

レスポンシブデザインとは?

ここ数年で定着してきた『レスポンシブwebデザイン』
(Responsive Web Design)。
日本語にすると『反応がするwebデザイン』。

現在、ホームページを見る環境はパソコン、スマートフォン、
タブレットなどさまざまなサイズの端末があって
パソコンのディスプレイだけを対象とするホームページでは
ユーザーに不都合を生じることが多くなりました。
ユーザーのデバイス(パソコン、タブレット、
スマートフォン)に関係なく、
同じURLで同じHTMLコードを配信しますが、
画面サイズの応じて最適化されるデザインを
レスポンシブwebデザインと呼びます。
単一URLにすることで検索ロボットが
サイトを巡回しやすくなります。

レスポンシブwebデザインのメリット

レスポンシブwebデザインのメリットとしては、
どのデバイスでも同じファイルを利用できるため、
管理が非常に簡単になること、
デバイスごとの表示エラーを減らすことにあります。
現在多くのブラウザによってサポートされている
CSS3を使用しているため、汎用的であり、
より多くの人に見てもらえます。
カラムや画像が、スクリーンサイズに合わせて
自動的に適切なサイズになります。
そのためサイトの情報適切に得ることができます。
HTMLを分けるモバイルサイトでは、
デバイスの数だけHTEMを増やしていかなければならないが、
レスポンシブで制作するとファイルが同じなので管理がしやすい。
修正も一つのHTMLだけでいいので、
モバイルサイトは更新されていないなどといった事態を防げます。

レスポンシブwebデザインのデメリット

レスポンシブwebデザインを使用した際のデメリットは、
スマホサイト上で起こるものがよくあります。
スマホでの方がパソコンと比べてスペックが劣るので、
データの読み込みなどの作業に負荷がかかります。
負荷がかかるとサイトの読み込みに時間がかかったりと、
ユーザビリティに大きく影響するため、
表示する情報はシンプルにし、できるだけ読み込み時間が
かからないようにすることが重要です。
他、デメリットとしては、CSSデザインが複雑で
記述テクニックが必要となります。
表示サイズによってデザインが崩れることもあるので、
それを想定したデザイン構成力が必要になります。

とても便利なレスポンシブwebデザインですが、
古いブラウザは新しい仕様に対応していないので、
どこまでフォローするかという問題もあります。

制作を行う際に必要な知識

・リキッドデザイン
幅を%で指定して横幅を可変させ、
レイアウトを変化させるデザイン
・フレキシブルデザイン
幅を%で指定して横幅を可変させ、
レイアウトを変化させるデザイン
※リキッドデザインとの違いは最大値(max-width)、
最小値(min-width)を設定して
デザインの崩れを抑えることができる。
・グリットデザイン
縦幅の格子状に均等に分割されたところに
コンテンツを配置していくデザイン
・可変グリッドデザイン
グリッドレイアウトとリキッドデザインを組み合わせたデザイン

レスポンシブwebデザイン制作の仕方

・Viewportを指定する
アイフォンやiPadでは、パソコン用のサイトも
そのまま縮小して表示します。
パソコン用のサイトをそのまま表示するので
端末の画面では小さくなりすぎます。
これを避けるためにMETAタグで、
Viewportをヘッダー内に指定し、
デバイスのスクリーンサイズに合わせた幅で
表示させるようにしましょう。

・メディアクエリ(Media Queries)を指定する

「Media Queries」は、従来のCSSからあった
「Media Type」の仕様を拡張し、
数値で指定した画面サイズなどの細かな条件に応じて、
読み込むスタイルシートを振り分けることが出来る
CSS3の機能です。
これによってパソコン、スマートフォン、タブレットなど
書くデバイスでの表示を変えることができます。
CSS3は従来のCSS2に新しい機能が加わったものなので、
古いファイルを書き換える必要はなく、
そのまま追加することが出来ます。
CSS3を使う際、特に問題となるのが、
IE(InternetExplorer)での対応が遅れている点です。
レスポンシブwebデザインを実現するために
最低限必要な「Media Queries」は
IE9から実装されていますが、IE8以下では
個別にCSSファイルを読み込むようにさせます。

どの幅でパソコン、スマホ、タブレット用の
CSSを使うかという指定を
『ブレイクポイント』と言います。
これは自由に設定することができますが
スマートフォンやタブレットは
どんどん新しい機種が発売され、高性能になっていくので、
それに合わせて『ブレイクポイント』を決める必要があります。
指定する『ブレイクポイント』は、
主要なスマホサイズなどを考慮して決めてください。

・メニューの切り替え
パソコンとスマートフォンでは
グローバルメニューが異なる場合が多いです。
このような場合、CSSの表示・非表示で
デバイスごとに切り替えましょう。

レスポンシブデザイン製作時の注意点

・スマートフォンページの文字は大きめに
スマートフォンのディスプレイは
パソコンの画面より小さくなるので、
パソコンと同じ文字サイズでは、
文字が小さくて読めなくなってしまうこともあります。

・テキストの量や改行の見直し
パソコンでは最適だと思われた文章も、スマートフォンでみると、
長文になりすぎてよみにくかったり、
改行が綺麗じゃなくなっていることがあります。
テキスト量や改行は、スマートフォンの表示を
考慮していれる必要があります。

・カラム数を調整する
画像だけではなく、サイト全体を見やすくなるように
横並びだったコンテンツを
縦並びにする必要があります。

アダプティブwebデザインとは?

レスポンシブwebデザインがパソコンやスマートフォン、
タブレットなどさまざまなデバイスのディスプレイ条件に
柔軟に対応できるということに対し、
アダプティブwebデザインは、
表示する複数の想定ディスプレイをあらかじめ決めて、
それらの条件に基づいて作成していくというものです。
レスポンシブwebデザインとの違いは、
レスポンシブwebデザインのように
一つのHTMLを使うのではなく、
デバイスの横幅サイズのブレイクポイントごとに、
最適化した別のHTMLを用意するということです。
レスポンシブwebデザインとくらべて
更新などは面倒な感じですが、
アダプティブwebデザインの方が、
調整に限界があるわけでなく、
無駄な非表示要素がなくなり、
読み込み速度が速くなるという利点があります。

『さまざまなデバイスに対応する』という面で見れば
レスポンシブwebデザイン、
『ブレークポイントに最適化する』という面では
『アダプティブwebデザイン』という感じでしょうか。

まとめ

さまざまなデバイスに対応するレスポンシブwebデザイン、
ブレークポイントに最適化する
『アダプテイブwebデザイン』について
紹介しましたが、メリットもあればデメリットもあります。
ユーザーがどのようなデバイスを使い、
どのような時に利用するかを考えて、
最適なデザインをする必要があります。
また、スマートフォンやタブレットは
新商品が次から次へと発売されています。
それにより、ディスプレイサイズも多様化していくので、
どんな表示サイズ、表示方法の流行、
それにあった見せ方などを
常に模索する必要があると思いました。

このエントリーをはてなブックマークに追加
メルマガ登録