スマフォでもPCでも表示を最適化！カッコいいレスポンシブウェブサイト厳選24個

近年、webページはスマートフォンやらタブレットからのアクセスが増えてます。
LIGのサイトも20％近くがPC以外から見られてます。（2012/5/25現在）
という訳で、制作現場でもスマートフォンにも対応して欲しいという依頼が増えてきてます。

ただ、スマートフォンサイトって意外に作るの大変なんです。
そこで、レスポンシヴウェブサイトの出番です。

レスポンシヴウェブサイトとは

デバイスで表示を切り替えるユーザエージェントを利用するのではなく、ブラウザの表示幅で判別して表示を切り替えようという技術です。
デバイス毎にHTMLを用意するのではなく、1つのHTMLファイルをCSS3で制御して表示を切り替えるので、PCサイトとスマートフォンの2サイトを制作するコストとスケジュールを抑えられるのではないかと思います。

それでは紹介していきます。

foodsense

http://foodsense.is/

jux

https://jux.com/

endloop

http://www.endloop.ca/

GRAVITATE

http://www.gravitatedesign.com/

CLEAN AIR WORKS

http://clearairchallenge.com/

ASU online

http://asuonline.asu.edu/

10k aneventapart

http://10k.aneventapart.com/

ANDERSSON-WISE

http://www.anderssonwise.com/

vml

http://www.vml.com/

saltsurf

http://saltsurf.com/

カヤック

http://www.kayac.com/

国内でも増えてきました。
僕の中ではカヤックさんのサイトが一番最初にみたレスポンシヴウェブサイトです。

Sony US

http://www.sony.com/index.php

IMJ INVESTMENT PARTNERS

http://www.imj-ip.co.jp/

MITSUE-LINKS

http://www.mitsue.co.jp/

Kanebo

http://www.kanebo-cosmetics.co.jp/

FANCL

http://www.fancl.jp/index.html

NHK STUDIO PARK

http://www.fancl.jp/index.html

mochrom

http://mochrom.jp/

マウリッツハイス美術館展

http://www.asahi.com/mauritshuis2012/

The Share

http://theshare.jp/

INSIGHT

http://www.ppi.jp/

iRobot

http://www.irobot-jp.com/

adobe HTML5特設サイト

http://adobe-html5.jp/

tsunagu

http://www.tsunagu-life.com/

まとめ

スマートフォンからのアクセスは今後も増えていくと思うので、比例してレスポンシヴウェブサイトの依頼は増えてきそうです。SEO的にも良さげな感じです。

参考：「スマホ向けサイトはレスポンシブwebデザインで」Google社員が語る…