便利すぎる！さまざまなデバイスのサイズを同時に確認しながら作業できる、Web制作の連携支援ツール -Solis

Post on:2018年4月23日

sponsors

最近のWeb制作では、異なるスクリーンサイズでの確認が欠かせません。
スマホ、タブレット、デスクトップ、それぞれに異なるスクリーンサイズが多数あり、これらを一つ一つ確認するのはなかなか大変です。

そこで作業しながら、同時に確認できるツールの登場です。
HTML, CSS, JavaScriptで使用しているエディタ、Photoshop, Illustratorなどの画像編集ソフトで作業しながら、異なるスクリーンサイズでシームレスに確認できるWeb制作の連携支援ツールを紹介します。

私もさっそく使用してみましたが、Web制作のワークフローが劇的に便利になります！

Solisの大きな特徴は、さまざまなスクリーンサイズに対応したマルチビューポートのプレビューを備えていることです。デフォルトで主要デバイスのビューポートが用意されており、コードや画像を修正すると、リアルタイムに反映されます。

表示されているビューポートはすべて連動しており、ページのスクロールやクリック・タップなどの操作も同期して行えます。

マルチビューポートのプレビューとライブビューアー

ビューポートのサイズは定型以外にも、自由なサイズで、しかもいくつでも設置できます。

ビューポートの設置

Solisで統合できるソフトウェアは、何でもOK。
日常的に使用しているソフトウェアのすべてが利用できます。

Solisの設定画面では、自由にソフトウェアを割り当てることができます。

Solisの設定画面

HTML, CSS, SCSS, LESSなど、編集したコードは、すぐにビューポートで確認できます。

リアルタイムプレビュー

画像にも対応しています。
Photoshopで修正したら、すぐにビューポートに反映されます。

ライブリロード

Solisはデベロッパーツールにも対応しています。
ビューポートから1クリックで、デベロッパーツールを呼び出せます。

デベロッパーツール

プロジェクトで使用するファイルは一元管理でき、HTMLでもCSSでも画像でも1クリックでそのソフトウェアを開き、編集できます。

プロジェクトのファイル管理

さまざまなビューポートを設置できるワークスペースは、複数用意し、プルダウンから切り替えることができます。

複数のワークスペース

Solisのダウンロードは、下記ページから。

SolisはmacOS対応の有料アプリで、Free Trial版も提供されています。
料金はUS$29.99で、買い切りタイプです（2018年4月現在）。
Free Trial版ではビューポートの数などが制限されています。