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

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

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

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

レスポンシブデザインモードでサイト制作のデバッグがより簡単便利に

レスポンシブデザインモードでサイト制作のデバッグがより簡単便利に

2015年10月1日にリリースされた、OSXの最新バージョン「El Capitan(エルキャピタン)」。新しいフォントの追加やSplit Viewなど便利な機能が沢山追加されました。

OS X El Capitan App
カテゴリ: ユーティリティ
価格: 無料

今回はEl Capitanの新機能ではないのですが、Mac純正のブラウザである新しいSafari 9に搭載されている「レスポンシブデザインモード」も非常に便利なのでご紹介したいと思います。

特にレスポンシブなサイトを制作されている方に取っては目から鱗の機能になりそうです。

レスポンシブデザインモードに切り替えてみる

注)事前にSafariのバージョンを9にしておいてください。

まずはSafariを起動して初めに開発メニューを表示させる設定が必要になります。※デフォルトの状態では「開発メニュー」は表示されません。

「Safari」→「環境設定」→「詳細」→「メニューバーに”開発”メニューを表示」にチェックを入れます。

設定

すると上部のメニューバーに「開発」が表示されるようになり、開発メニューをクリックします。すると中から「レスポンシブデザインモードにする」という項目が現れるので、ここをクリックで切り替えが出来ます。

レスポンシブデザインモード

レスポンシブデザインモードを触ってみる

では実際にレスポンシブデザインモードに切り替えて触ってみます。以下は起動直後のPCモードで表示。PCのディスプレイサイズそのまま表示されています。

標準のPCモードでの表示
標準のPCモードでの表示

次にiPad mini3での表示に切り替えてみます。切り替えは画面上部のデバイスボタンを押すだけ。表示しているサイトはもちろんレスポンシブサイトなので、途中で画面が切れたりサイズがおかしくなっているということはありません。

iPad miniでの表示
iPad miniでの表示

最後にiPhoneでの表示に切り替えてみます。デバイスのアイコンをダブルクリックすると横向き表示でも確認することが出来ます。

iPhoneでの表示
iPhoneでの表示

用意されているデバイスは、

  • iPhone 4s
  • iPhone 5s
  • iPhone 6
  • iPhone 6Plus
  • iPad mini 3
  • iPad Air 2
  • ブラウザ 800X600
  • ブラウザ 1366X768
  • ブラウザ 1920X1080

と豊富。基本的なモバイルデバイスはカバーされている感じ。

嬉しいのはRetinaディスプレイの確認のために「@1x〜3x」の変更も用意されている点。さらにユーザーエージェントを変えて確認出来る機能もついてます。
ユーザーエージェント

2〜3年前のレスポンシブサイト制作では簡単なデバッグでも、毎回ブラウザの幅を調整したりして確認しなければなりませんでした。今回のアップデートでより便利に簡単になったSafari 9、ぜひ一度お試しください。

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+