iTea4.0

Mac・iPhone・Apple Watch の最新情報とおすすめアプリを紹介

メディア運営者必携!ウェブサイトのモバイル表示を一発でチェックできるMacアプリ「Viewport」が神すぎてヤバい!

今回はウェブサイトのモバイル表示や、様々なブラウザ別の表示をワンクリックで切り替えることができるMacアプリ「Viewport」をご紹介!

ウェブサイトのデスクトップ表示、モバイル表示、タブレット表示はもちろん、「Internet Explorer」「Google Chrome」「Firefox」など様々なブラウザでの表示も、たったのワンクリックで確認することができる、メディア運営者におすすめのアプリです。

スポンサード リンク


「Viewport」の使い方

ViewportViewport
価格: ¥1,000(記事公開時)
カテゴリ: 開発ツール, グラフィック&デザイン
App Storeで詳細を見る

使い方は簡単です。まず「Viewport」を起動し、メインウィンドウ最下段にある歯車のアイコンをクリックし、「Breakpoint」タブにある「+」ボタンをクリックします。

Breakpointを設定する

つぎにプリセットの名前(Name)やデバイスの大きさ(Width、Height)を設定し、「User agent」の項目をクリックします。

ユーザーエージェントを選択する

iPhoneでのモバイル表示をチェックするプリセットを作りたいときは「Safari iOS7 iPhone」を選択します。

ちなみにユーザーエージェントは、iPhoneに限らず「iPod Touch」「iPad」「Internet Explorer」「Google Chrome」「Firefox」を選択することも可能ですよ!

任意のユーザーエージェントを選択する

プリセットを保存したら、「Viewport」のアドレスバーにウェブサイトのURLを入力しましょう。

アドレスバーにウェブサイトのURLを入力する

「Standard Window」タブを選択しているときは、ウィンドウの幅に合わせてウェブサイトを表示することができるのですが、

通常のウェブサイトの表示

あらかじめモバイル用のプリセットを作って保存しておけば、タブをワンクリックで切り替えるだけでiPhoneのモバイル表示に変更することが可能です。

タブの切り替えでモバイル表示を確認できる

ちなみに「iPhone 5s」「iPhone 6」「iPhone 6 Plus」など、微妙にデバイスの画面の幅が異なる場合は、スライドバーで簡単に画面の幅を調整することができますよ!

モバイルデバイスの大きさに合わせて画面幅を調整できる

さらに複数のプリセットを作っておけば、全プリセット毎のウェブサイトのスクリーンショットを一括保存することができたり、プリセット毎に表示させたウェブサイトの表示や操作を動画に保存してくこともできますよ!

スクリーンショットや動画撮影もできる

ちなみにプリセット毎に保存したウェブサイトのスクリーンショットがこちら。ウェブサイト全体のスクリーンショットを保存することができるので、レイアウトチェックにも便利です。

全プリセット毎にまとめてスクリーンショットを丸ごと保存できる

メディア運営者はとりあえず絶対に持っておくべき神アプリ!

あとがき

「Viewport」があれば、iPhoneのモバイル表示はもちろん、「Internet Explorer」「Google Chrome」「Firefox」などのブラウザ別にウェブサイトの表示を簡単に切り替えることができるので、メディア運営者なら持っておいて損はしないアプリです。

わざわざ手動でユーザーエージェントを変更する手間も省けるし、スクリーンショットや動画も保存できたりと万能すぎる神アプリですので、興味のある方は是非チェックしてみてください!

ViewportViewport
価格: ¥1,000(記事公開時)
カテゴリ: 開発ツール, グラフィック&デザイン
App Storeで詳細を見る

「いいね!」で
最新情報をお届け!

Twitter で トリゾーを
Return Top