スマホ版サイトやレスポンシブデザインのチェックならこれ【LT Browser】

2021年10月28日
カテゴリー ツール
B!

スマホ版サイト・レスポンシブデザインのチェックならおまかせ!

web開発者用に便利なブラウザを見つけたので紹介します。

もしあなたが「サイト制作時、特にスマホ版のサイト表示を確認するため何か便利な方法があればいいな」と思ってたら、今回の記事は当たりです。

もう誰でもスマホは持っていると思いますが、サイトの表示と挙動を確認するため、自分で使うもの以外にいろいろな機種を手元に揃えている人は少ないでしょう。

webの制作会社へ勤めていると、サイトをチェックする用として現場に様々なデバイスが用意されています。

でも、個人で働くフリーランスやリモートワーカーの場合、自前で会社と同じだけのデバイスを揃えるのはコストの面で難しいですよね。

自分が持つiPhoneでは散々チェックしたはずなのに、クライアントのAndroidで見るとレイアウトが崩れていた、というのは珍しい話ではありません。

そこでぜひ試してみてほしいのが今回紹介する「LT Browser」。
以下のようなことができます。

  • スマホ33種、タブレット4種、デスクトップ14種でサイトの表示・動作を確認
  • デベロッパーツールでデバッグ
  • スクリーンショット。画面録画も
  • 表示速度のチェック

web開発者用のブラウザとして、わりと機能が豊富なのに無料でダウンロードできます。

webデザイナーやフロントエンドエンジニアなら、持っていて損はないアプリだと思うので、ぜひ今回の記事を参考に試してみてください。

「LT Browser」とは?

LT Browser

「LT Browser」はwebサイトの開発に関わる人に便利なブラウザです。

以下の3つの特徴があります。

  • 無料でダウンロードできる
  • 様々なデバイスでデバッグできる
  • クライアントとのコミュニケーションにも役立てられる

【LT Browser】 無料ダウンロード

「LT Brwoser」の使い方

使い方は非常に簡単です。

普段の使い慣れたブラウザと変わりなく、アドレスバーへURLを入力後、表示を確認したいデバイスを選択。

画面を二分割し、左右で異なるデバイスで表示を確認することもできます。

スマホ版とデスクトップ版を表示すれば、レスポンシブデザインで変わるレイアウトを同時に確認できますね。

デバイスを選択、左右で別のデバイスを選択可

スマホ33種、タブレット4種、デスクトップ14種でwebサイトの表示・動作をチェックできる

表示が確認できるデバイスはかなり豊富に揃ってます。

スマホ版の表示をチェック

モバイルチェック

タブレット版の表示をチェック

iPad

デスクトップ版の表示をチェック

デスクトップ

デベロッパーツールでデバッグできる

web開発時に欠かせないデベロッパーツールが使えます。

デバイス上のアイコンをクリック。

デベロッパーツール

デベロッパーツールが開きました。

スクリーンショットを撮れる

ワンクリックでスクリーンショットを撮影できます。

スクリーンショット

スクリーンショットに書き込める機能はクライアントや開発チームとやり取りするときに便利ですね。

○や→を書き込んだりコメントを書き込んだりできる

画面を動画撮影できる

クライアントや開発チームとのコミュニケーションには、静止画よりも動画のほうが便利なことも多いです。

サイトの動きを動画に撮りたいときは、このアイコンをクリックします。

画面を動画撮影

横画面での表示もできる

スマホ版では忘れず横画面でもチェックが必要。
このアイコンをクリックすると画面が回転してくれます。

画面を回転

接続環境を変えて表示をチェックできる

ネットへの回線速度を設定できます。

接続環境ごとの表示速度を体感した結果を速度改善へ活かしましょう。

ネットワークを選択

パフォーマンスレポートも利用できる

さらに表示速度について具体的な改善案を手に入れたいなら、パフォーマンスレポートを利用しましょう。

以下の画像のように、データでサイトの動作に関する改善箇所を教えてくれます。

パフォーマンスレポート


以上です。

使い方は非常にシンプルですが、web開発の最中は役立つ場面が多いと思われる「LT Browser」。

スマホ版の表示確認だけでなく、レスポンシブデザインのチェックのためのツールとしても役立ちます。

ぜひ試してみてください。

読み終わったらシェア!

B!

ついに再開!私たちにホームページの制作を任せてみませんか?

あなたにはこんな記事もおすすめ!
ん?最新情報を見逃さない方法!?
わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね!」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね! しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
ウェブさえマガジン
  • facebook
  • twitter
Top
ウェブさえ
@websae2012