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

ようこそ



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

2016-01-11

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

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

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

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

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




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

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

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

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

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

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

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

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

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






コメントを残す

*

PAGE TOP

更新通知

メールで更新情報をお届けします。メールアドレスを入力し「フォロー」ボタンを押してください。

いせきけんじ
新着コメント



株式会社ファーストニード
株式会社ファーストニード
1st-need Co,.Ltd.

代表取締役:いせきけんじ

〒650-0024
神戸市中央区海岸通3-1-1 KCCビル4F
TEL:078-862-6121




MENU

CONTACT
HOME