【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【超簡単】レスポンシブWebデザインの横幅を検証 RWD Bookmarklet

【超簡単】レスポンシブWebデザインの横幅を検証 RWD Bookmarklet

簡単検証ツール

レスポンシブWebデザインの検証を楽にするツール

レスポンシブWebデザインはサイトの横幅に応じて、コンテンツを最適化させることができるためとても便利です。しかし構築する上で横幅を常にチェックしながら調整をする必要があります。

  1. レスポンシブWebデザインの検証どうする?
  2. ブックマークレットって?
  3. RWD Bookmarklet を使おう!

1.レスポンシブWebデザインの検証どうする?

レスポンシブWebデザインで重要なのは横幅です。レスポンシブWebデザインでサイトを制作する際にはメディアクエリというものを使ってデバイスの横幅を基準にして最適化を行います。ここで大変なのがそれぞれの横幅でのチェック作業です。

横幅の違う各デバイスごとのチェックを行うのに一番いいのは実機での確認ですが、微調整を行うなどPCで編集を行いながら実機で確認するのは一苦労です。ましてやいくつかのデバイスを交互に持ち変えるのも大変です。

他にどういった方法があるかというと、レスポンシブWebデザインらしくブラウザの幅をドラッグして変更する、、、。これだと厳密にどの幅なのかというのが難しいですよね。なのでやはり何かシミュレータなりのツールがあると便利です。

そこで、最近見つけて便利だなと感じた「RWD Bookmarklet」というものをご紹介します。

image01

2.ブックマークレットって何?

この「RWD Bookmarklet」はブックマークレットと言われるブラウザ拡張機能です。ブックマークレットというのは簡単に説明すると、ブラウザのブックマーク機能とリンク機能と javascript を使ったちょっとしたアドオンのようなものです。

その名の如くブックマークするだけでインストールができ、ブックマークを選択するだけで様々な便利な機能を使うことができます。

image02

3.RWD Bookmarklet を使おう!

インストールは上記の通りブックマークするだけ。ブラウザで「Responsive Design Bookmarklet」のページへアクセスして「RWD Bookmarklet」をブックマークします。この際、ブックマークレットのページ自体にはアクセスできないので「RWD Bookmarklet」をドラッグ&ドロップしてブックマークしてください。

無事インストール(ブックマーク)できたら確認したいサイトを表示します。ページを表示した状態でブックマークにある「RWD Bookmarklet」をクリックしてみて下さい。そうするとページ上部に操作パネルが追加されます。

image03

後は簡単です。操作パネルの真ん中になるタブレットやスマートフォンのアイコンをクリックするだけ。それだけでそれぞれのデバイスに合ったサイズでプレビューしてくれます。

image04

しかも、さらにすごいのが「CSSrefresh」です。操作パネルの左側にある更新のアイコン。これをオンにした状態でサーバーにある CSS ファイルを更新するとブラウザのリロードをしなくても CSS ファイルの変更が反映されます。「CSSrefresh」は単体で動作するブックマークレットもあります。

image05

RWD Bookmarklet と CSSrefresh のセットでレスポンシブWebデザインにおける横幅別の対応が非常にスマートに行えます。ぜひお試しください。

※最終的な調整は必ず実機で行うことをオススメします。

河野

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+