レスポンシブWebデザインをメインサイトに採用しました

メインサイトの閲覧にタブレットやスマートフォンを利用している方が増えてきたので、レスポンシブWebデザインを採用しました。

レスポンシブWebデザインとは、簡単に言えば『デバイス(パソコンやスマートフォンなど)の画面サイズに応じてサイトのレイアウトが変わるデザイン』の事です。

スマートフォンやタブレットをお持ちの方は、パソコンでの閲覧と比較する事でどのようなものか分かるかと思います。(お持ちでない方もブラウザのウィンドウサイズを変更する事で同様のことができます)

メインサイトでは次に示す横幅でレイアウトが可変するように設定しています。

540px以下
スマートフォンを想定した1カラムレイアウト。480px以下には縮小しません。
541~801px
スマートフォン・タブレットを想定した1カラムレイアウト。サイトメニューが2列になります。
802~961px
スマートフォン・タブレット・パソコンを想定した1カラムレイアウト。サイトヘッダー部分にサブメニューを追加する等、本来のサイト表示に近い状態。また、パソコンで閲覧時はサイト上部にスライダーを追加。
962px~1281px
タブレット・ノートパソコンを想定した2カラムレイアウト。962pxで固定した本来のサイト表示。
1282px以上
タブレット・デスクトップパソコンを想定した3カラムレイアウト。大きい画面サイズを活かすために本来のサイト表示を拡張したもの。1282px以上には拡大しません。(ブラウザ右下のボタン類は除く)

ここまでの説明だと、パソコンサイトとスマートフォンサイトみたいに分ければ良いのでは?という方もいると思いますが、次の理由からサイトを分ける方式を取らない事にしました。

  • レンタルしているサーバー(忍者ツールズ)がPHPなどに対応していないためサーバーサイドでの振り分けができない。
  • 現在のサイトアドレスをそのまま利用したい。(いわゆるリダイレクトも行わない)
  • 出来るだけ多くのデバイスでサイトを閲覧できるようにしたいが、サイトのコンテンツ充実の時間確保が最優先のため、対応に時間を取られたくない。(専用サイトでの対応はその言葉通りに想定したデバイス専用になるので、デバイスの種類が増えると大変)

最後に、今回のデザイン変更は初めて採用したデザイン技法である点とテストが不十分(MacOS・iOS・Linuxなどは実機上でテストしていません)である点から皆さんに不便を強いる事があるかと思います。

可能な限り修正はしますが、それでも直らない場合はご容赦下さい。(私が確認を行った環境はこちら

特にスマートフォンやタブレットで閲覧した場合に表示される広告に関しては、レンタルしているサーバー側で勝手に挿入するものであり、私にはどうする事もできません。

どうしても非表示にしたい場合は、ブラウザの閲覧モードをパソコンモードに設定して下さい。

以下はブラウザの閲覧モードの変更手順(Android)です。

Firefox (16.0.2)
ブラウザメニュー→その他→PCサイトモード
Opera Mobile (12.10)
ブラウザメニュー→設定→詳細ツール→User Agent→Desktop
Sleipnir Mobile (2.4.1)
サイト上をロングタップ(長押し)→ページの表示モードを変更→UserAgentを変更→PC

【2013-12-07追記】

リニューアル作業を行い、この記事内の環境と異なる環境に変更しました。

詳しくは『メインサイトをリニューアルしました(2013年)』をご覧下さい。