1FrameWorks の高度なレスポンシブWebデザイン

レスポンシブWebデザインがウェブサイト制作の主流になってきました。

レスポンシブで制作されたウェブページでは
閲覧している環境、つまり横幅に応じてリアルタイムにレイアウトが変化・最適化します。

「PCレイアウト」「スマホレイアウト」が全く同一ページ（同一ファイル）になるため
URLも同一となり、Google検索エンジンにとっても分りやすい・優しいページになります。
※「タブレットレイアウト」も含めて３種類のレイアウトを用意している場合もあります。

もし別々のファイルだとしたら、同じような内容のページが複数存在することになり
どちらがメインコンテンツなのか検索エンジンも判断しづらいわけです。
そのため、GoogleではレスポンシブWebデザインを推奨しています。

ところがレスポンシブWebデザインには
いくつか欠点もあります。

欠点の１つは
PCとスマホの２つのレイアウトを単一ページで読み込ませるためにデータ読み込みに時間がかかることがあります。
スマホレイアウト時には不要であるPC用データも合わせて裏で読み込むためですね。
場合によっては、タブレット用デザインも含まれますから更に重いページになることがあります。

２つ目の欠点は
レスポンシブで制作することを最優先するため、デザインがシンプルになってしまうことです。
あまり凝ったデザインにすると、レイアウト可変時にうまく調整することが難しいため
まるでブログのような素人っぽいのっぺりしたシンプルデザインになることが多いです。
複雑なデザインは苦手です。

３つ目の欠点は
PCレイアウトを確認することが出来ない点です。
同じサイトをスマホでも見て、PCでも見て、タブレットでも見て、と環境を変えていろいろと見たいときに
「あれ？PCだとこの位置にこのバナーがあったのに、スマホだとどこにあるのか分らない・・・」
「デザインが全然違うけど同じホームページ？」
「PC用にして見たいけど、スマホ用でしか見れない・・・」
ということがあります。

スマホでもPCレイアウトで見たいときがありませんか？

（PC版で見る）のようにリンクをクリックしてレイアウト切り替えできるウェブサイトもありますが
それは、PC・スマホと別々にページが存在する場合です。
レスポンシブで制作されたページは同一ファイルであり、閲覧環境の横幅によってレイアウトが変わるため、スマホでPCレイアウトを見ることは基本的にはできません。

僕ら開発側としても、スマホでPCレイアウトが見れないと不便なときも多いです。

そこでその欠点を全てクリアできるものを作りました。

弊社制作の1FrameWorks システムなら、端末を90度回転させるだけでPCレイアウトにリアルタイムに変化します。
どんな感じかは一度下記の動画をご覧になってくださいね。

高度なレスポンシブWebデザイン