初心者のためのレスポンシブWebデザインガイド

いまWeb界隈では現在ブームのように言われている「レスポンシブWebデザイン（レスポンシブウェブ）」ですが、これは、ほんの一時期の流行でしょうか？ 　プロのWeb制作者でなくても知っておきたい、レスポンシブWebの基本と特徴をまとめました。

なぜレスポンシブWebデザインが脚光を浴びる？

レスポンシブWebデザインとは、PC用のWebだけでなく、スマートフォンやタブレットで表示させた際にも、それぞれの画面サイズに合わせたデザインで表示することができるサイトのことです。

レスポンシブWebデザインにサイトリニューアルするサイトが増えているのには、いくつかの理由があります。

モバイルサイトを見るユーザーが圧倒的に増えている

スマホでWebを見るとき、文字が読み難くて画面を拡大縮小するのが不便だな、と思う人はすくなくないでしょう。単純に、よくできたスマホサイトは便利で使いやすい。でも、自分が作るサイトとなると、スマホから見られることはあまり意識していない人が多いのではないでしょうか。しかし、今はどんなサイトもスマホで閲覧される時代です。そんななか、1つのサイトを作っただけでどんな端末でも最適な状態で見せてくれる、その仕組みが「レスポンシブWebデザイン」です。

フラットデザインや新しいモバイルデバイスとも関連する

レスポンシブWebデザインはよく、そのほかのWebトレンドとも並べて語られます。たとえば、iOSの進化で広がった「フラットデザイン」に始まり、スマホの影響による消費行動、iPadやAndroid、Chrome OS端末など、次々と発売される手軽に持ち運びできるデバイスなどです。これらがすべて、レスポンシブWebデザインの登場と関連しています。フラットデザインは、「PCブラウザがメイン」という時代がすっかり昔の話となってしまったことを告げる話題なのです。

操作方法もよいWebの価値観もPCとは違う

PCのブラウザに比べスマホではさまざまな操作が異なります。たとえば、スクロールをマウスで「クリック」していたのがPC時代であれば、スマホ時代では人差し指で画面をなぞる「フリック」で操作します。PCでスクロールしていた時代は、クリックという労力を避けたいので、ユーザーはあまりページの下まで見たくない、という気持ちがありました。ところが、フリックによるスクロールは、気持ちよくページの下のほうまでスクロールしていきます。ひゅーっと人なぞりすれば画面が加速移動するので、労力がいりません。

積極的にスルーっとスクロールするこの操作の違いによって、ページの滞在時間がどんどん長くなりました。それだけでなくモバイルの普及は「どんなWebデザインがよいか」という価値観も変えてしまいました。PCサイトであれば、ページ読み込みと同時に表示される「ファーストビュー」という最初の画面にどう効果的にレイアウトするか重要とされていましたが、スマホサイトでは、縦方向にわかりやすい順番でコンテンツを並べるほうが使い勝手のよいサイトになっています。

「閲覧する画面サイズやタッチ操作によって最適なデザインが変わる」ということです。

一番のキーはコンテンツの一元化

img

Webコンテンツは、公開するところからがスタート地点です。コンテンツを日々追加・改善してこそ、結果が出るサイトへと育っていきます。そのために重要なのがメンテナンス作業です。
しかしコンテンツの更新を簡単に行えないとすれば、ウェブサイトで発揮できる効果は半減してしまいます。更新が重要度を上げる中で、運用するサイトの種類がPCとスマホとで複数あれば、１つの修正も2倍以上の手間と時間が必要になります。更新コストも上がり、常に二重の手間をともないます。
だからこそ注目されているのが、作業を一元化できるレスポンシブWebデザインなのです。

BiNDで実現するレスポンシブWeb

レスポンシブWebを作るには技術的にもデザイン的にも対応テクニックが必要ですが、ウェブ制作ソフトBiND for WebLiFE*8に入る新作のサイトテンプレートはすべてレスポンシブWebデザインを採用し、マルチプラットフォームに対応したサイトを制作できるようになりました。

さらに、BiNDで作れるレスポンシブWebサイトには2つの特徴があり、
1つ目は、モバイルサイトとPCサイトでは情報ボリュームを変えることができること。
2つ目はスマホで表示されるレイアウトをカスタマイズできることです。

001_img_01

もう少し詳しく言うと、BiNDではページをデザインするときに構成要素をブロックという単位で分けますが、そのブロックごとにスマホで表示するもの、しないものを決められるので、小さい画面に最適なデザインで情報を届けることができます。

また、BiNDでは、PCとスマホとで表示するレイアウトの段数を指定できるので、見せたいコンテンツによって任意に設定を変えられるのも特徴です。つまり、自動で最適表示されるとはいえ、任意に見せ方を決めたいときには設定できる仕組みなので、より細やかに、見やすいデザインへとカスタマイズできるようになります。
たとえば、スマホサイトでは1段のレイアウトにすることもできますが、2～3段に並べることもできます。

スマホ対応と聞くと難しく感じがちですが、ツールを使えばそんなことはありません。
今の時代に求められるWebサイトを意識して、ぜひ新しいサイト作りにチャレンジしてください。
BiND 8について詳しくは、以下の記事をどうぞ。

BiND8でできること。レスポンシブWebと新機能をご紹介