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

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

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

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

Solisのキャプチャ

Solis -A Live Design Output

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

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

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

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

ビューポートの設置

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

  • HTMLエディタ
    Atom, Brackets, Sublime Text, VS Codeなど
  • CSSエディタ
  • JavaScriptエディタ
  • PHPエディタ
  • 画像編集ソフト
    Photoshop, GIMP, Pixelmatorなど
  • ベクター画像編集ソフト
    Illustrator, Inkscapeなど
  • ブラウザ
    Safari, Chrome, Firefoxなど

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

Solisの設定画面

Solisの設定画面

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

リアルタイム プレビュー

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

ライブ リロード

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

デベロッパーツール

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

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

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

複数のワークスペース

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

サイトのキャプチャ

Solis -A Live Design Output

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

sponsors

top of page

©2018 coliss