モバイルWebプレビュー
Chromeのデベロッパーツールのように、スマホやタブレットなど様々なデバイスの解像度やフレームを設定してウェブサイトをテストできます。
×
モバイルウェブプレビューの利用方法と主な機能のご案内
スマートフォンやタブレットなど、さまざまなデバイス環境でご自身のウェブサイトがどのように反応するかをテストしてみてください。Google Chrome デベロッパーツールのデバイスシミュレーター機能を、ウェブ上で直感的かつ素早く使用できます。
主な特徴
- 様々なデバイスのプリセット対応: 最新のiPhone、Galaxy、iPadなど、代表的なスマートデバイスの解像度をワンクリックでテストできます。
- 自由な解像度調整: 基本のプリセット以外にも、Width(幅)とHeight(高さ)のピクセルを直接入力してカスタム画面を構成できます。
- スマートズーム(Zoom)機能: デスクトップモニターのサイズに合わせて、画面倍率を50%から150%まで自在に縮小・拡大できます。
- ワンクリック縦横切り替え: スマートフォンを横向き(Landscape)にした際にウェブサイトのレイアウトが崩れないか、即座に確認できます。
- モックアップ(Mockup)ボーダー: iPhone特有のノッチデザインや丸い枠を適用し、クライアント報告用のキャプチャ画面を綺麗に作成できます。
使い方
- 検索バーにテストしたいウェブサイトのアドレス(URL)を入力し、[プレビュー開始]ボタンを押します。
- ツールバーの最初のドロップダウンからテストするデバイス(iPhone、iPadなど)を選択します。
- 画面がモニターよりも大きすぎる、または小さすぎる場合は、拡大比率(Zoom)を調整して一目で見えるように合わせます。
- キャプチャが目的の場合は、右側の「枠(Mockup)表示」にチェックを入れてデバイスの枠を適用します。
- 縦横回転ボタンを押して、デバイスの向きによるレイアウトの崩れがないかを点検します。