画面解像度シミュレーター

このツールについて

さて、このツールを作ったのは、デザインがさまざまな画面でどう見えるかを推測するのにうんざりしていたからです。よくある話ですよね——4Kモニターで何かを作って、スマホで開いてみたら、「これなに？」ってなりますよね。そこで登場するのがこの画面解像度シミュレーターです。華やかじゃありません。AIの魔法も、サブスクリプションも、「革命的なブレークスルー」もありません。ただ、ウェブサイトやアプリがさまざまな画面サイズでどう表示されるかを確認できるシンプルなツールです。何かを本番環境に公開する前に、ちょっとした現実チェックをするようなものです。

主な機能

• 一般的な解像度での即座のプレビュー——デスクトップ、タブレット、モバイル、なんでもOK。
• ドラッグ＆ドロップ式のURL入力。リンクを貼り付けて実行するだけ。
• サイドバイサイド比較モード。タブを切り替えずに2つの解像度を同時に確認できます。
• カスタム解像度入力。1366x768の変わったキオスク端末がある？そのまま入力してください。
• トラッキングなし、クッキーなし、余計なものなし。あなたのサイトはあなたのもののままです。
• 初回読み込み後はオフラインでも動作。外出先でのテストに最適です。

よくある質問

ローカル開発サーバーでも使えますか？
はい、ローカルサーバーが起動していてアクセス可能であれば大丈夫です。別のデバイスからテストする場合は、同じネットワークに接続していることを確認してください。localhost:3000、localhost:8080など、いろいろなポートで使ってきました。追加の設定は不要です。

ブラウザの開発者ツールを使わない理由は？
開発者ツールはすごく便利です。でも、時には切り取られたビューポートではなく、ページ全体を見たいこともあるでしょう。さらに、このツールは直近のテストを記憶して視覚的に比較できるようにします。これが優れているというわけではありません——違いがあるだけです。時間を節約できる方法を使ってください。