フロントエンドエンジニア
DevTools の切り替えもウィンドウの調整もなしに、実際のデバイス幅で生きた DOM に対してブレークポイントを検証できます。
新機能ワークスペースボード - 10 台を同時に
あなたのサイトを、完璧にすべての iPhone で。
Viewport は、いま開いているサイトの上に仕様どおりのデバイスフレームを重ねます。ブレークポイントを並べて比較し、QA より先にレイアウトの不具合を見つけ、フレーム付きのスクリーンショットや 4K 録画を書き出せます。すべて自分のマシン上で完結します。
どんなサイトでも · 38 デバイス · 設定はタブ間で同期 · アカウント不要、テレメトリなし、アップロードなし
Chrome ウェブストア★ 5.0·5,000 人以上が利用
注目の拡張機能Chrome のおすすめ
yourstore.com
こんな人のために
ひとつの拡張機能、三つの働き方
レスポンシブな画面をつくる人、それを設計する人、そして「ちゃんと動く」と示さなければならない人のために。
プロダクトデザイナー
余白、タイプスケール、セーフエリアを正確なフレームで確認し、フレーム付きのキャプチャを仕様書や資料へそのまま書き出せます。
制作会社とフリーランス
打ち合わせの場でレスポンシブ品質をそのまま見せられます。画面共有ひとつでデスクトップとモバイルが一緒に動く様子が伝わり、ウィンドウを分ける必要はありません。
できること
とりわけ得意な四つのこと
機能の寄せ集めではありません。この拡張機能はこの四つを軸に組み立てられています。
ライブデモ
この場で拡張機能を動かす
これが実際の流れです。ツールバーでデバイスを選び、回転させ、スクリーンショットを撮り、録画を開始する。その奥にあるページが、あなたのサイトです。
yourpage.com
402 x 874/34%
実装から承認まで
聞かれる前に、動くことを示す
レスポンシブ品質は、説明するより見せるほうがはるかに簡単です。Viewport は社内チェックを、そのままクライアントに渡せるものに変えます。
はじめかた
3 クリックで動きます
設定ファイルもアカウントもプロジェクトの準備も要りません。
01
好きなページを開く
ツールバーのアイコンをクリックします。実際のサイトの上にデバイスが現れ、すでに読み込み済みで完全に操作できます。
02
表示を整える
デバイスを選び、回転・拡大縮小し、好きな位置へドラッグ。スマートフォン、タブレット、モニターを並べたボードを組むこともできます。
03
比較して記録する
すべてのフレームを同期スクロールさせ、フレーム付きのスクリーンショットを書き出すか、一連の操作をまるごと録画します。
主張ではなく、実測
Viewport が抜きん出ているところ
Chrome ウェブストアで最もインストールされているレスポンシブプレビュー拡張機能と比較しました。
ローカルファーストの設計
何ひとつ端末の外に出ません。その仕組みも公開します
Viewport にはあなたのデータを扱うバックエンドがありません。解析もテレメトリもリモート読み込みのコードもありません。設定は chrome.storage.local に保存され、キャプチャはそのままディスクへ保存されます。
ページをフレーム内に描画するために、ブラウザはプレビュー要求に対して X-Frame-Options と Content-Security-Policy の緩和を求めます。この緩和はプレビュー対象のオリジンだけに限定し（ページ内のサードパーティ製フレームは保護を維持します）、有効な間はバナーを表示します。プレビューを閉じた瞬間に解除されます。
多くのツールはこれを黙って、しかもタブ全体に対して行います。私たちは、知っていただくほうを選びます。
料金
ずっと無料。必要になったときに Pro へ。
無料プランは期限のない実用ツールであって、試用版ではありません。
無料
$0ずっと
- 38 種類すべてのデバイスフレーム
- 同時に最大 3 台まで表示
- フレーム付きスクリーンショットが無制限
- 2 分間の WebM 録画
- 制限の厳しいサイトでは実ウィンドウにフォールバック
Pro
人気$4.17/ 月、年額 $50 でのお支払い
- 無料プランのすべてに加えて:
- 10 台構成のボードと保存済みシーン
- 無制限の 4K MP4、トリムと再生速度
- ビルド比較とレイアウト監査
- ネットワーク制限、位置情報、ロケール
無料プラン、アカウント不要いつでも解約可能決済は Lemon Squeezy が安全に処理
よくある質問
聞かれる前に、お答えします
インストール前に開発者が必ず尋ねる五つの質問。
なりません。ブラウザ内で動くものはどれも代わりにはなりません。Viewport は実際のページを各デバイスの正確なビューポート幅で描画し、client hints も一致させるため、レイアウトとブレークポイントの問題の大半を見つけられます。リリース前の重要な確認は、やはり実機で行ってください。
一度も見ていないブレークポイントを、そのまま出すのはもう終わりに。
Viewport を Chrome に追加して、いま見ているそのページで全デバイスを確認しましょう。無料、アカウント不要、アップロードなし。