It does happily by the design.
Service
スマートフォン用サイト制作
レスポンシブウェブデザイン（RWD）
2010年度のスマートフォン販売台数は前年比3.2倍となる770万台で、2011年度は1720万台の販売が見込まれています。2016年度には3100万台が販売され、携帯電話販売の66％を占めると予測されるそうです。スマートフォン市場の急激な伸びに伴いWebサイトのスマートフォン対応を考えないといけないとお考えの方も多いかと思います。
しかし、スマートフォン用に新たにWebサイトを構築するとなると、時間もコストもかかり、運用の手間も更新にかかるコストも2倍になります。
そこで、ゲッコー株式会社がご提案したいのが「レスポンシブウェブデザイン」という手法です。
このページをPC（IE以外のブラウザ）でご覧の方は、ウィンドウサイズを縮めてみて下さい。
レスポンシブウェブデザイン
レスポンシブウェブデザインとは、PC用、スマートフォン用といったように、デバイスごとに複数のデザインを用意するのではなく、ブラウザのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法です。
ブレイクポイント一覧
- 320px
- スマートフォン縦
- 480px
- スマートフォン横
- 600px
- 7インチタブレットPC縦
- 768px
- タブレットPC縦
- 1024px
- タブレットPC横ノートPC
- 1280px
- デスクトップPC
【ブレイクポイント】
CSSを切り替えるブラウザの横幅
モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的ですが、レスポンシブウェブデザインではウィンドウ幅が480ピクセル以下になるとレイアウトが自動的に変更されるといったように、HTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更することができます。
レスポンシブウェブデザインの利点
- 1つのファイルなので画像やテキストの修正などの更新運用が容易
- スマートテレビや携帯ゲーム機、カーナビなどもデザインが最適化される
- 新しく発売されるデバイスへの対応が可能
スマートフォン用のサイトを制作する場合、スマートフォン用に別のディレクトリを切り、iPhoneやAndroidのスクリーンサイズ毎に調整したhtmlファイルを何枚も用意し、サーバーでユーザーエージェントを見て「iPhoneで閲覧するユーザーにはこのファイル」といったように切り分けて制作していましたが、レスポンシブウェブデザインにすることで1つのhtmlファイルで完結するのでユーザーがどのデバイスで閲覧しにきたかを判断する必要もありません。
更新業務も1つのhtmlファイルを修正すればいいのでコストも手間も大幅に圧縮でき、未来登場するであろうスマートテレビや次世代の携帯端末等、ウェブブラウズを基本とするデバイスに対応することも容易となります。
