SketchファイルをWindowsで開いて、編集・保存できる無料アプリが登場 -Lunacy
Post on:2018年3月22日
Windowsユーザーの方に朗報です!
Windows 7, 8, 10で、Sketchのファイルを開くことができ、編集も保存もでき、CSSの書き出し、SVGやPNGのエクスポートもできてしまう無料アプリが登場しました。
もちろん、日本語のWindows環境でも利用できます。

前回紹介した時はファイルを開くだけの機能でしたが、ついに編集・保存にも対応し、Sketchの機能の80%を備えました!
Windows版のSketchといっても過言ではないでしょう。
Lunacyの特徴
Lunacyは、.sketchファイルを開き、編集し、保存することができるWindowsのネイティブアプリです。しかも、完全無料で利用できます。

Lunacyの画面
- Sketch(最新を含む、過去13ヵ月分のバージョン)で作成された.sketchファイルに対応。
- .stecthファイルをWindows環境で開くことができます。
- .sketchファイルを編集して、保存できます。
- Sketchの主要プラグインの機能に対応予定(2018年7月)。
現在はベータ版としてリリースされており、将来的にはSketch for Macと同等の機能を実装する予定とのことです(現在は80%実装)。
サポートするOS
Lunacyは、下記のOSに対応しています。
- Windows 7, 8, 8.1, 10(x86 and x64)
※要.Net Framework(無い場合はインストール時に自動でインストールされます)

.sketchファイルをWindowsで開いて、編集・保存できる

ページ・アートボードに対応

CSS, XAMLのコード生成

アセットのエクスポート(PNG, SVG)
Lunacyのダウンロード・インストール
Lunacyのダウンロードとインストールは、簡単です。
面倒な登録なども、一切不要です。
Lunacyのダウンロード
下記ページにアクセスして、「Get Lunacy for Free」をクリックするだけで、Lunacyをダウンロードできます。
もしくは、その隣のボタンで、Microsoft Storeからダウンロードできます。

Lunacyのインストール
ダウンロードした「LunacySetup.exe」をダブルクリックするだけで、インストールできます。
インストーラー無し版はダウンロードページの「Portable version」をクリックして、ダウンロードします。

Lunacyの使い方
当方の環境(Windows 7)で、Lunacyを使用してみました。
まずは、Lunacyの起動画面。ブランクのファイルが開いた状態です。

Lunacyの起動画面
メニューは、SketchのFileメニューを少しシンプルした感じです。

Lunacyのメニュー
Sketchでファイルを用意してみます。
使用したバージョンはSketch 49で、デフォルトのテンプレート「Material Design」を作成しました。

Sketchでファイルを作成
Sketchで作成したファイルをWindowsに移動して、.sketchファイルをLunacyで開いてみます。

.sketchファイルをLunacyで開く
普通に開けました! 感動です!!
せっかくなので、編集もやってみます。ボタン要素を選択すると、右パネルにプロパティが表示されました。

ボタン要素
ボタンのカラーをFills(塗りつぶし)で変更します。
まずは、塗りのカラーを変更。

塗りのカラーを変更
BlendingもLunacyで編集できます。Blendingの項目もSketchと同じブレンドが揃っています。

ブレンドを変更
変更すると、普通に反映されました。

ボタンのカラーを変更
Lunacyで編集した.sketchファイルを保存してみます。
「ファイルの種類」は「.sketch」を選択します。

ファイルの保存
ファイルをmacOSに移動して、Sketchで確認してみます。
普通の.sketchファイルと同様に開くことができ、変更した箇所も反映されていました。

Sketchでファイルを確認
sponsors