レスポンシブ・デザインって何ですか？

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

　　　　　　　　　　ネットの活用で、地方が変わる！

　　　　　　　　　　　～地方はネットをこう使え～

　　　　　　　　　　　　　　　　　　　　　　　　　　2014/3/6
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

みなさん、こんにちは。
ビーチューの雨宮です。

アッという間に3月ですね。
しかも3月も残すところ3週間！
もう新年度はすぐそこまで来ています．．．。
早い！

さて、今回もみなさんからお寄せいただいたご質問からピックアップして
お届けいたします！

取り上げてほしい質問がある方は、お気軽にお寄せくださいね♪　(^_^)/
このメールアドレスはスパムボットから保護されています。閲覧するにはJavaScriptを有効にする必要があります。

■今週の質問━━━━━━━━━━━━━━━━━━━━━━━━━━■■■

┏…┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━…┓
┃Ｑ┃レスポンシブ・デザインって何ですか？
┗…┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━…┛

先日知り合いから「これからはレスボンシブ・デザインだよ」って言われた
のですが、レスポンシブ・デザインって何ですか？

┏…┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━…┓
┃Ａ┃「ワンソース、マルチデバイス」に対応させるデザイン方法です
┗…┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━…┛

「レスポンシブ・デザイン」というのは、ウェブデザインのデザイン方法
の名前で、ここ数年、スマートフォンやタブレットの普及とともに世界的
に注目を集めているデザイン方法です。

とにかく見ていただいた方が早いと思いますので、まずはご覧ください。

↓みたいなデザインです。
http://coiney.com/

一見すると普通のサイトなのですが、マウスを使ってブラウザーの横幅を
どんどん狭めてみていただけますか。すると…横幅に合わせて画面レイア
ウトがきれいに並んでいくのがお分かりいただけるかと思います。

しかも、一番上にあるメニューも、コンパクトなメニューボタンに収まり
ます。

このようなウェブ画面のデザイン方法のことを「レスポンシブ・デザイン」
と言い、ご質問にもあるように今注目のデザイン手法です。

●海外では2011年から、日本では2012年から

私が初めてこの手法に出会ったのは2012年頭だったと思いますが、すでに
海外では2011年から、日本でも2012年後半から積極的に採用されるように
なってきました。

ご参考までに Googleトレンド で、いつぐらいから注目が集まってきたの
かを見てると

　世界のトレンド　　http://goo.gl/vsCv49
　日本のトレンド　　http://goo.gl/dlxG0z

2011年以降、どんどん注目が集まっているのがお分かりいただけるかと思
います。

●なぜ注目が集まっているのか？

このようなデザイン手法に注目が集まっているのには理由があります。
それは、スマートフォンやタブレットの普及です。

先ほど、レスポンシブ・デザインの実例を見ていただいた際に、ブウラザ
の横幅を狭めていただいたかと思います。この「画面サイズが小さくなっ
た状態」こそ、スマートフォンやタブレットで見ている状態なんです。

かつて、「携帯サイト」という呼び名があったように、PC向けサイトと
一緒に携帯向けのサイトも備するというやり方が主流でした。携帯機種の
画面サイズに合わせていくつかのサイトを準備したり、携帯会社ごとに
サイトを切り替えたりと、「PCサイト　＋　携帯サイト数パターン」とい
うやり方をされていたところが多かったのではないかと思います。

（私はお客さんによっては「携帯サイトはいらない！」という選択をして
　いました…(^_^;)）

それが、スマートフォンやタブレットの普及によって、世界的にも国内的
にもスマートフォンやタブレットでウェブサイトをご覧になる方がどんど
ん増えてきています。

※皆さんも、スマートフォンからアクセスされている割合がどのくらい
　あるのか、ぜひ確認してみてくださいね♪d(^_^)

とにかく、スマートフォンの画面サイズの種類は莫大！(>_<)
以前の携帯サイトのように、iPhone はこっち…アンドロイドのあの機種
はこっち…と振り分けて、それぞれごとに最適化したデザインを作るの
はかなり大変です。

一方で、スマートフォンやタブレットはPCで利用するブウラザと同じ機能
のブラウザが使えますので、だったら画面サイズに合わせて自動的にレイ
アウトを変更するデザインで行けばいいんだ！　ということで、レスポン
シブ・デザインの手法が発明されて、色々な人の手によってどんどん改善
されてきている…というわけなんです。

●「ワンソース、マルチスクリーン」という考え方

とは言え、必ずしもすべてのサイトがレスポンシブ・デザインにならない
といけないわけではありません。そもそもPC向けサイトをスマートフォン
で見せたっていいじゃん♪っていう会社はそのままでOKだ思いますし、
携帯サイトのように 「PCサイト or スマートフォンサイト」と切り分けて
スマットフォンサイトの中で横幅に合わせて最適化する…という手法も
アリですしね！（*注）

それは、そのサイトをどんな人が見るのか、見た人にどうしてもらいたい
のかによって、「最適な表現手法を選べばいい」だけです。

それよりももっと重要なのは、レスポンシブ・デザインを単なる流行とし
て見るのではなくて、「ワンソース、マルチスクリーン」という考え方の
中で捉えるということです。d(^_^)

「ワンソース、マルチスクリーン」とは、ひとつの情報を DB で管理し、
その情報をアクセスしてくるツールに合わせて最適化して表現してあげる
ということですね。

アクセスしてくるツールが、スマートフォンのブラウザであればレスポン
シブ・デザインという切り口になりますし、アクセスしてくるツールがス
マートフォンアプリであれば、アプリのインターフェースデザインという
ことになります。

さらに広げて、誌面レイアウトとして出力すれば印刷物にもなる、という
ことなんです。

ワンソース、マルチスクリーン（マルチデバイス）

これこそ IT の本質ですね！

ですから、この根幹を抑えないで、レスポンシブ・デザインを流行のデザ
イン手法だと狭く理解してしまうのは実はもったいないことなんです…(>_<)

●お近くの制作会社さんで対応できます

さて、レスポンシブ・デザインへの変更には、デザインの土台から組み直
すことになりますから、基本的にはリニューアルの際に検討することにな
ります。国内でもレスポンシブ・デザインの情報が沢山ありますので、
お近くの制作会社さんにご相談いただければほとんどのところが対応して
くれるはずです。

気になる方は、ぜひご相談されてみてはいかがですか。

ということで、今回はこれを覚えてくださいね！　d(^O^)

●レスポンシブ・デザインは、「ワンソース、マルチデバイス」への
　対応方法のひとつです♪　d(^_^)

■今週のピックアップ━━━━━━━━━━━━━━━━━■■■

----------------------------------------------------------------------
■金沢市がオープンデータで実現したこと
　http://www.itmedia.co.jp/enterprise/articles/1402/27/news029.html
----------------------------------------------------------------------

国内でも自治体の「オープンデータ」への取り組みが進んでいますね。
特に積極的に推進している金沢市の取り組みが紹介されています。

先ほどの「ワンソース、マルチデバイス」との関連でいけば、自治体が
もっている「ワンソース」を公開して「アイデア × マルチデバイス」の
力を借りて有益かつ素敵な情報サービスを創り出していく取り組みだとい
うとこがご理解いただけるかと思います。

さらに地方にとって重要なのは、これが都市部や田舎とか関係なく、
どの地域でもしっかり取り組みさえすればトップランナーになれる…とい
うことなんです♪d(^_^)

　　 　　　  　　 　　　　　　それではまた次回をお楽しみに！　(^_^)/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【発行元】株式会社ビーチュー
　　　　　http://be-chu.com/
　　　　　http://www.facebook.com/bechucom

　　　　　〒399-0213
　　　　　長野県諏訪郡富士見町乙事5162
　　　　　TEL / FAX : 0266-75-2076　(受付 : 平日 10:00-17:00)

【発行責任者】雨宮伊織　Amemiya Iori
    
■━━━━━━━━━━━━━━━━━━━━━━ Copyright (C) 2014 ■

このメールマガジンの転送はＯＫですが、掲載された記事の内容を許可なく
転載することはご遠慮ください。

※購読を解除される方は、
　下記フォームよりお手続きをお願いします。
　https://1lejend.com/stepmail/delf.php?no=138062

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━