閲覧環境ごとに適したレイアウトで表示される様になりました
![PC閲覧時画面](https://image.jimcdn.com/app/cms/image/transf/dimension=584x10000:format=jpg/path/s5dc06f1db72ef024/image/id241ffc9478d9bd8/version/1431262919/pc%E9%96%B2%E8%A6%A7%E6%99%82%E7%94%BB%E9%9D%A2.jpg)
![スマホ画面](https://image.jimcdn.com/app/cms/image/transf/dimension=356x10000:format=jpg/path/s5dc06f1db72ef024/image/i9b77554ed063e9a7/version/1431262911/%E3%82%B9%E3%83%9E%E3%83%9B%E7%94%BB%E9%9D%A2.jpg)
先日LOVE!MAZDAをモバイル対応したのですが、一部コンテンツや掲載内容が閲覧出来ない等不便さがありました。
そこで、構成プログラムをえいやっ!と変更。最近話題の(?)レスポンシブ対応を行いました。
これで、閲覧環境ごとに最適なレイアウトで表示されつつ「どの環境でも同じ情報が表示される」という、一見当たり前の様ですごく大切な事が実現しました。
ページや閲覧機器によっては不具合があるかもしれません。随時修正していきますので、お気づきの点があればコメント等でご連絡頂ければ幸いです。
豆知識:レスポンシブWebデザインって?
レスポンシブWebデザインは 様々な閲覧環境を「ワンソース(1つのHTMLファイル)」で実現する制作手法
レスポンシブWebデザインとは、スマートフォンやタブレット、PCなどの様々な閲覧環境に対応したサイトを「ワンソース(1つのHTMLファイル)」で実現する制作手法です。
PCで当サイトをご覧頂いている方は、ブラウザの幅を狭めていくと、サイトが「カシャカシャ(こんな音はしませんが・・・)」っと変化していくのが分かるかと思います。
「モバイル対応」≒「レスポンシブWebデザイン」
ちなみに「モバイル専用」「タブレット専用」サイトとは、作り方等が異なり、モバイル専用サイトは(同じ場合もありますが)モバイル専用に設計されたメニューやHTMLファイルで構成されています。
- PC・スマホで、それぞれ専用サイトがある例
マツダ車種紹介サイト(2015年6月頃よりレスポンシブ対応になりました!) - PC・スマホがレスポンシブWebデザインで構成されている例
マツダ企業サイト
「モバイル対応」と「レスポンシブWebデザイン」は同じではなく、「モバイル対応」の手段の一つとして「レスポンシブWebデザイン」がある、とイメージしてください。うーん、ややこしいですね。
レスポンシブWebデザインも、ただサイトを可変させればいいという訳ではなく「閲覧環境に最適な情報掲載・レイアウト設計」を行う事が大切になってきます。
そういう点では、当LOVE!MAZDAサイトは、厳密なレスポンシブWebデザインではないかもしれませんね・・・。
JimdoでレスポンシブWebデザインに対応
当サイトは、Jimdoというシステム(サービス)を使用して制作・運用を行っていますが、実はJimdoで(独自レイアウトでの)レスポンシブ対応は結構大変なのです。
今回の対応に際しては、出来るだけシンプルな方法で行える様工夫しましたので、Jimdoでレスポンシブサイトを検討している方の参考にもなるかと思います。サイト制作に関するご相談は、お問い合わせから頂けると幸いです^^。