SwapSkills「レスポンシブWebデザインはトレンドではない！」

• 2012年6月27日 18:01
• Webサイト管理Webデザイン

Tweet

SwapSkills in Nagoya「レスポンシブWebデザインはトレンドではない！」に参加してきました。

レスポンシブWebデザインのことは知ってはいたのですが、イマイチ理解が出来ていない＆そろそろ理解しないとまずいという思いからの受講です。

注目を浴びている理由

レスポンシブWebデザインとは、モバイルのスクリーンサイズから始まって、大きいサイズのスクリーンまで、デザインを変えた物をアプローチとして提供していく手法のこと。

レスポンシブWebデザインの考え方自体は10年前からあったが、技術的な問題からなかなか実現には至らなかった。生まれたのは2010年5月ごろで、イーサン・マルコッテが考案した。日本では1年遅れて2011年頃から聞かれるようになった。

Digital Omnivore.
Not Simpler, Simplest.

昨今、Webのデバイスはドンドン増えてきている。AndroidやiOS、WEBOS、BLACKBERRY、モバイル、タブレットなどなど。そして、1人が使うデバイスも複数になってきている。そしてさらに、コンテキスト(外で使う、電車内で使うなどの環境)も増えてきている。

これらデバイスすべてのスクリーンサイズを判定し、そしてすべてに対応することはほぼ不可能になってきている。デバイスに対して複雑なアプローチをするのはだんだんと厳しくなってくるため、単純にブラウザの判定にまかせているレスポンシブWebデザインが選ばれてきている。

レスポンシブWebデザインが注目を浴びている理由、それは単純だから。アプローチとして複雑ではないから。

実現するには

レスポンシブWebデザインは次の3つを忠実に守っていけば、簡単ではないが誰でも実現できる。

1. Media Query
2. Fluid Image
3. Fluid Grid

Media Query

スクリーンサイズに合わせてCSSを切り替える手法。

@media only screen (min-width:480px)｛｝

Fluid Image

画像をスクリーンサイズに合わせて表示する方法。これ自体は昔からある手法。

img{max-width : 100%}

Fluid Grid

いわゆるリキッドデザインのこと。スクリーンサイズに合わせてカラム幅を変えていく手法。

div{width :20%}

画像問題の解決方法

レスポンシブWebデザインの問題の1つとして画像がある。PCサイトで表示していた画像をモバイルでも表示しようとすると、表示にとても時間がかかってしまう。この問題を解決するために色々な方法が提案されている。

複数のイメージを用意

次の方法は複数のイメージを用意し、それをウインドウサイズに合わせて切り替えている。

• picture要素
• srcset属性

picture要素

<picture alt="Duck">
	<source src="../img/smallImage.jpg">
	<source src="../img/largeImage.jpg" media="(min-width: 800px)">
	<noscript><img src="../img/smallImage.jpg" alt="Duck"></noscript>
</picture>

srcset属性

<img alt="image description" src="/path/to/fallbackimage.png" srcset="/path/to/image.png 800w, /path/to/otherimage.png 600w">

もっとシンプルに対応する方法

• dConstruct 2012

上記のサイトは複数の画像を用意していない。1つの画像で対応している。どうして1つの画像で対応できるかというと、理由は至極シンプル、画像を極限まで軽くつくることで、モバイルでも表示に時間が掛からなようにしているからだ。

軽く作る方法としては次の方法などがある。ナローバンド時代にファイルサイズを下げようとして試行錯誤した手法などが用いられている。

32色から16色に色数を減らす

主要でない部分をぼかす

複数のイメージを用意する方法の場合、本来は必要でないソースの記述が必要になってくる。この方法は、ソースの記述を減らすことにも役立っている。画像だけに注目するのではなく、サイト全体で容量を減らすことが大事なのだ。

アイコンフォント

アイコンは、アイコンフォントなどのベクターデーターを使うことで複数用意する必要はなくなる。

• アイコンフォント「Font Awesome」

• 補足：レスポンシブWebデザインの画像問題の解決法5種

まとめ

セミナーを受講するまでは「レスポンシブWebデザインを実現するためには、色々技術的に困難がありすぎる。これでは支持されないのではないか。一時的なトレンドではないか。」と考えていました。しかし多数のデバイス、スクリーンサイズ問題の現実を考えると、単なるトレンドではないなと考えが変わってきました。

画像のアプローチに関しては「複数用意するの？うーん」とか「色数減らすとかぼかすとか、こんな限定的な手法、使う場面あるかしら。」とか正直思いましたが、自分なりのベターな方法を見つけて対応して行かざるえないのでしょう(自分的には「srcset属性」がステキと思いました)。

このセミナーでは今まで知らなかった情報、考え方などをたくさん知ることができ非常に充実した時間を過ごすことが出来ました。しかし、改めて思ったのは「ウェブの最新動向をつかむためには海外サイトを購読しないといけないな」ということです。先ほども書きましたが、レスポンシブWebデザインが日本で話題になってきたのは1年遅れてですからね。

英語はからっきしなので、今からどうこうできるのかわかりませんが、やはり海外サイトからの得られる最新の情報は重要ですね。

同日に「ワークショップで学ぶ！モバイルファーストを取り入れたスマートフォンサイト設計」も受講してきましたので、そちらも忘れないうちにまとめます。

追記：
「ワークショップで学ぶ！モバイルファーストを取り入れたスマートフォンサイト設計」を追加しました。

Tweet