2014年02月03日

レスポンシブWEBデザイン設定方法

PRODUCEして先日公開した『メテ乙女』OFFICIAL WEBSITE、
なかなか好評♪

ご覧頂いた方ならおわかりかと思うけど、
PCで見た時はPC仕様で、
スマホで見た時はスマホ仕様で表示される。

↑今、私のPCとスマホ両方で表示した見た光景w

なぜこの仕様にしたかと言うと、
最近、スマホで閲覧する人が非常に増えているので、
ソコに上手く対応しようというMARKETING視点から。

実際、
TwitterでコノSITEについて書いてくれてる人を見ると、
やはり、スマホでご覧いただいている方が多いようで、

佐藤亜沙美@『メテ乙女』ユカ役出演中 @8mymelody8
今日はメテ乙女放送日★スカパー216ﾁｬﾝﾈﾙ毎週日曜日20時～20時30分放送空想科学恋愛ドラマ『メテ乙女』
出演者一覧に乗ってます^^/♪
下記のサイト見てみてね(*ω｀*)
http://t.co/4zn5zNWwKu http://t.co/9Rr5SBgIiA
2014/02/02 10:01:02

↑このドラマに出演している女優の佐藤亜沙美さんも、
キャプチャしていただいている写真がスマホモードのものだった♪

で、
この閲覧した端末に応じて最適な見せ方をする方法は、
「レスポンシブWEBデザイン」と呼ばれる手法を使っている。

私はHTMLのコードでPCを軸としてWEBを作るのだけど、
PC、スマートフォン、タブレット、
それぞれの画面サイズによって、それぞれのCSSを用意することで、
実際にUSERが見た時には、そのUSERの端末に合った表示になる、
という仕掛け。

↑こんな風に、コードを記述。

従来のWEB制作者は、
PC、スマホそれぞれ独自にSITEを作り、
スマホ版のURLには、m/とかついてたのだけどw、
これだと１つのSOURCEで２つの手間をかけていて、
効率的とは言えなかった。

レスポンシブWEBデザインなら、
１SOURCEで３つくらいの別表示に対応デキ、
m/みたいなURLもつけなくていいので、
シームレスで理想的。

ホント、作り手にとっても、
USER側にとっても、
快適な方向へと進んでいるなぁ。

今日は、
私自身のPAGEも進めてみた。
なぜかスマホで見た時にレスポンシブ対応されてなかったので、
CODEをCHECKしたところ、
上記の部分が変わってしまってたので、修正して改善！

SHUN69

↑スマホで閲覧した際の表示。

イイ感じ♪

P.S.

今夜も『BASS MAGAZINE』の、
「ダンスクラシクスを弾き倒せ！」特集に載ってる曲を
中心にYOUTUBEで聴きつつPLAYING BASS♪

↑CHIC "DANCE DANCE DANCE"

『BASS MAGAZINE』に載ってるのは"GOOD TIMES"という曲だけど、
↑ "DANCE DANCE DANCE"のGROOVINGが素晴らしい♪

NILE RODGERSあたりをもっと研究しよう♪
'70年代のCHICでのDISCO GROOVEに始まり、
昨年のDAFT PUNKのALBUMにも参加してるあたりがスゴイ！