実機に近いモバイルデザインを簡単に再現できる拡張機能「Mobile FIRST」

ホームページやWebサイトは、スマホやタブレットなど、様々なデバイスで閲覧されることを考える必要があります。

Chromeのデベロッパーツールでもモバイルデザインのシミュレーションはできますが、多機能な反面、操作画面は少し煩雑な印象です。Webサイトの資料やプレゼンとして見せたいときにはあまり向いていません。

そこで今回は、モバイルデザインの再現のみに特化したChromeの拡張機能「Mobile FIRST」をご紹介いたします。初心者の方でも簡単に使えて、実機に近いモバイルデザインを再現できます。

「Mobile FIRST」の機能概要

「Mobile FIRST」は、Webサイトのモバイルデザインをワンタッチで再現できるChromeの拡張機能です。さまざまなスマホやタブレットでの見え方をリアルに再現できます。有料版もあるようですが、当記事では無料版で使える機能のみをご紹介いたします。

• 複数のデバイス（29種類）を選べる
• デバイスごとにビューポートや解像度を確認可
• 個人使用のみのモックアップ画像が無料
• スクショや動画（gif）も撮れる
• 微調整が可能（画面内のスクロールバーの有無など）

無料でも十分過ぎる機能ですよね。実際に触ってみるとわかりますが、モバイルデザインの再現に特化しているため、直感的な操作のみで簡単に使えます。

「Mobile FIRST」のインストール

まずは「Mobile FIREST」の公式ページからインストールします。

Mobile FIRST

Chromeのウェブストアに飛ぶと、日本語では「モバイルシミュレーター-レスポンシブテストツール」という名前になっていますが、それで間違いありません。

拡張機能をインストールすると、ご丁寧にセットアップの方法が載った次のようなページが開きます。

↑の手順の通り、右上のパズルのようなアイコンをクリックして「モバイルシミュレーター-レスポンシブテストツール」の右端にあるピンのマークをクリックすれば、準備完了です。

あとは、お好きなWebサイトを開いた状態で、右上のアイコンをクリックすればOKです。

モックアップの中にWebサイトが表示されます。もちろんデバイス内で操作も可能です。URLや時刻、スマホのヘッダーやフッターまで表示され、実機に近い見え方で再現されているのがわかります。

「Mobile FIRST」の使い方

UIが見やすく日本語にも対応しているので、インストールすれば誰でも簡単に使えます。「Mobile FIRST」の画面右端に表示されているアイコンごとに順番に解説いたします。

29種類からデバイスを選ぶ

まずは、一つ目。ここから任意のデバイスを選べます。「PRO」と表示されているものは有料版専用です。

無料版でも、AndroidとAppleのスマホ、一部のタブレットやノートパソコンまでを含めた29種類ものデバイスを再現可能です。

ビューポートや解像度を確認する

2つ目のアイコンでは、ビューポートや解像度を確認可能です。ビューポートは表示領域のことで、デバイスごとに異なります。

上記画面で「機能」の部分をクリックすると「iPhone 12 Pro」の場合は、次のようなページが開きます。

↑で表示領域を確認できます。下にスクロールしていけば、実際の解像度も確認できます。

↑の赤枠部分が実際の解像度です。さらにその下部には、無料のモックアップまで置いてくれています。個人利用のみで使えるようです。アイコンから直接「無料のPNG透明モックアップ」をクリックしてもDL可能です。

デバイスの向きを変える

3つ目のアイコンでは、デバイスの向きを変えられます。

横向きで閲覧することも多いタブレットでの見え方を再現できます。

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

4つ目のアイコンでは、スクリーンショットを撮影します。

デバイスのフレームの有無を選択したり、ページ全体のスクリーンショットを撮れます。操作方法の説明なのか、実機に近い見え方を伝えたいのか、目的によってスクリーンショットを使い分けられます。

動画（gif）を撮る

5つ目のアイコンでは、動画をgif形式で撮影します。

ブラウザの画面キャプチャ機能を使っても動画は撮れますが、Mobile FIRSTなら最初からgif形式になっているため、mp4などからの変換が不要です。

ただ、弊社が試したところ、iPad proサイズの3秒のgifで3MBとなっていました。容量が大きすぎるので、こちらのアプリを使って軽量化するのがおすすめです。操作はドラッグのみで数秒で圧縮されます。3MBのgifが609KBに圧縮されました。

ナイトモードを使う

下から4つ目の月のアイコンでは、ナイトモードを有効化できます。

スマホのOSやブラウザでも実装されていることが多いナイトモードですね。背景を暗くして閲覧できます。

サイトのデザインによっては、見やすくなるかもしれません。

第三者におすすめする

下から3つ目のアイコンでは、知人や第三者に「Mobile FIRST」を紹介してあげる際に使います。

Chrome ウェブストアへのページリンクがコピーされます。

バグの報告や改善を提案する

下から2つ目のはてなアイコンでは、主にバグの報告や、改善の提案を行います。

クリックすると、下記のフォームが表示されるので、英語かフランス語で送ってみましょう。

また、「必要な機能に投票する」をクリックするとプロジェクト管理ツール「Trello」の画面にリンクます。

簡単な英文なので、Trelloのアカウントを持っている方は、欲しい機能に投票してみるのもおもしろいですね。このようなフィードバックがしやすい点が、ツールをより使いやすく進化させそうです。

見え方の微調整を行う

最下部のアイコンでは、見え方の微調整を行います。

それぞれのトグルボタンで、デバイス内のヘッダーやフッター、スクロールバーの有無などを調整できます。

デバイス（モックアップ部分）の有無を変更したり、「Mobile FIRST」を使う時に最初にシミュレーションするデフォルトのデバイスも設定可能です。

まとめ

ワンタッチでモバイルデザインを再現できるChromeの拡張機能「Mobile FIRST」をご紹介いたしました。

操作が直感的で誰でも簡単にお使いいただけます。無料版でも十分実用的です。実機に近いモバイルデザインをすぐに再現できるので、Webサイトの資料作成やプレゼンなどにご活用いただけそうです。