デザイン

デザイン

【Lunacy】待ちに待った!Windowsでsketchを使おう

UX Planet

UX Planet is a one-stop resource for everything related to user experience.

本記事は、The Long Awaited Sketch for Windows Comes From an Indie Team
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

3,009 views

読了時間 : 約7分24秒

Lunacyという新しいソフトウェアがあります。これは、何十億ものWindowsユーザーを対象にしたSketchプラットフォームの拡張です。 Lunacyは、次にご紹介するユニークな機能を備えた本格的なエディタです。

 

どういうこと?

 

  • .sketchファイルを開き、編集、保存するなど、Sketchとの完全な互換性を持つ
  • フォント管理(LunacyはGoogleフォントを自動的にダウンロードします)

CDN搭載サーバへの画像のワンクリックエクスポート

  • デザイン全体をSketch the Ripperにワンクリックでエクスポート

 

Lunacyは、CDNホスティングを含め、完全に無料です。

 

 

デザイン業界は、アプリやウェブサイトのデザインのため、主流のツールとしてSketchを採用しました。 Sketchは、パワー、柔軟性、スピードを兼ね備えた素晴らしいプラットフォームです。これにより、素晴らしいデザインを簡単に作成することができます。しかし、このツールには大きな欠点が1つあります。 Mac専用ということです。

 

デザイナーがSketchを使用し、開発者がWindowsで作業するチームで作業する場合、開発者がよく言うことは、「このSketchファイルを自分のPCで開くことはできません」です。

これは、Sketchを使用していて、Windowsを使用している関係者とデザインを共有するデザイナーの場合です。デザインを共有するという単純な作業なのに、本当に頭痛の種になるかもしれません。

 

それでは、どのようにしてお互いにすばやく協力できるのでしょうか。

 

Windowsでsketchを使えますか?

 

Windows上でSketchを使えるようにする方法はありますか?

 

残念ながら、Windows上でSketchを実行する簡単な方法はありません。 Sketchは、移行が難しいOS Xのコア機能(ネイティブテクノロジとフレームワーク)を多く使用しているため、非常に高速で軽量です。 Bohemian Coding(Sketchの作成者)がWindows版を近日中にリリースすることは考えられません。Windows上で動作するようにアプリを全体的に書き直す必要があるからです。

 

WindowsでSketchファイルを開く方法?

この問題を解決するための一般的な(かつ合法的な)方法を見てみましょう。

 

オプション1:Macを購入する

WindowsでOS X.sketchファイルを開くため、VMwareを使用することはできますが、これは法律違反です。ですから最も明らかなオプションは、Macを購入することです。しかし、Macという高価なものを購入するだけでなく、さらにSketchライセンスとして99ドルを支払う必要があります。 MacをSketch専用に購入して使用しなければならない場合、これは問題です。

 

オプション2:Avocode、Zeplin、またはFigmaを申し込む。

ほとんどの方はAvocode、ZeplinまたはFigmaをご存知でしょう。これらのツールはしばらく前から出ています。 AvocodeとZeplinを使用すると、Windows上のSketchで作成したデザインを調べることができますし、Figmaを使用すればファイルを編集することもできます。ツールは問題の解決に役立つのですが、ここでもいくつかの重大な欠点があります。

 

  • sketchからデザインをエクスポートする必要があります。つまり、誰か(デザイナー)が自分のSketchにプラグインをインストールし、.sketchファイルをアップロードする必要があるということです。新しいデザインを渡すたびに、まずファイルをアップロードするように誰かに頼む必要があるので、かなり面倒です。
  • ツールが全てクラウドベースであるため、常時インターネットに繋いでおかないといけません。また、デザインをクラウドにアップロードしないといけないのは、問題になる可能性があります(例えば、厳しいセキュリティ規則がある場合)。さらに遅いです。
  • ツールを使用するには有料アカウントが必要です。すべてのツールに無料プランがありますが、プロジェクトの数など制限がかけられています。プロとして使うためには、制限のない有料アカウントが必要です。月におよそ10ドルかかります。

 

オプション3:Lunacyをインストールする

Lunacyは、.sketchファイルを開いて編集して保存できる無料Windowsアプリです。

 

ではLunacyはFigmaやInVision Studioとどう違うのでしょう?

.sketchファイルを保存する

他のものは.sketchファイルのインポートして使います。(遅いです)。

Lunacyでは、.sketchファイルを開いて編集し、保存することができ、さらに高速です。すべてがWindowsアプリでコンピュータ上で行われます。

 

使いやすい

さらにLunacyは、追加設定のいらない軽量アプリで、業界初の初めにに登録する必要のない、スタンドアロンWindowsアプリです。Sketchファイルを直接表示し、他のプラグインをインストールする必要もありません。早速アプリをインストールして始めてみましょう。

 

インターネット接続を必要としない

Lunacyは、インターネットへの接続を必要としません。どこからでもスケッチファイルに取り組むことができるということです。

 

本当に速い

Icons8チーム(Lunacyの作成者)は常に製品の性能向上に取り組んでいます。 Lunacyは、パフォーマンスを落とさず100MBを超える.sketchファイルを開くことができるようになっています。

 

無料

Figma、InVision、Zeplinには月額固定料金(およそ10ドル)かかりますが、Lunacyは驚いたことに完全に無料です(後の課金もありません)。

 

Lunacyでできること

Lunacyが提供する機能を見てみましょう。

 

全バージョンの.sketchファイルを開くことができる。

Icons8は2016年にツールを作りました。2週間後には、Sketchはフォーマットを変更し、チームがコードの大部分を書き直しました。これがチームにとっても、ユーザーにとってもよかったのです。Lunacyは新しい.sketchファイルだけでなく、SketchAppSourceにある古いテンプレートもサポートできるようになったからです。

 

アートボードを変更し、プロパティを確認する

.sketchファイルを開いた後は、クリックするだけでそのファイルの情報を表示できます。左パネルでアートボードを切り替えることができます。各レイヤーを見て、レイヤーの各エレメントの色/サイズ/寸法を見ることができます。詳細はすべて画面の右側に表示されます。

ページとアートボードを整理する

 

.sketchファイルを保存する

.sketchファイルを保存できます。

スケッチファイルを開いて保存する

 

編集をする

Lunacyは編集機能を拡張しようとしています。既にこれはもうビューアではありません。エディタです。実際のデザインを作成することが可能になっています。

 

レイアウトにシンプルな形状のもの(楕円形、長方形、線を描く、あるいはビットマップを加えるなど)を加えたり、絵を描いたり、整列させたり、結合したりすることができます。

 

Lunacyはアートボード、シンボル、透明度、ストローク、ビットマップをサポートします。オブジェクトに対する操作について

Lunacyでは、オブジェクトを描画、整列、結合することができます。グループ、グリッド、定規、スナップを使用できます。基本的に、コンピュータにSketchをインストールしなくても.sketchファイルを編集するのに必要なものは、ほとんどすべて揃っているのです。

また、要素のプロパティ(色など)を変更することもできます。

既存のプロパティを変更する

 

もう1つの便利な機能は、URLから直接JPGファイルとPNGファイルをダウンロードできるということです。これは、写真や画像を保管する時に、時間節約できます。

 

アセットとCSSプロパティをエクスポートする

Lunacyは、.sketchファイルから必要なデータをすべて取り出すことができるため、デザインレビューのための強力なツールです。サイズとフォーマットを決定して「エクスポート」ボタンをクリックすると、各オブジェクトを個別にエクスポートできます。

オブジェクトをエクスポートする

 

このツールは、レイヤー用のCSSも生成できます。任意のオブジェクトのCSSおよびXAMLプロパティを確認、ワンクリックでコピーすることができます。

 

Lunacyを使えば簡単にオブジェクト情報をコピーできます。オブジェクトのCSSプロパティを参照して、ワンクリックでコピーできます。

 

PNGとSVGに画像をエクスポートする

.sketchを通常のPNGファイルとしてエクスポートする必要がある場合はどうしたらいいでしょうか?大丈夫です。デザインオブジェクトをPNG形式でもエクスポートできます。2倍または3倍で解像度を選択することができますので、直に見ても、画面上でも、高画質な画像を楽しむことができるでしょう。

 

アセットはPNGとSVGでエクスポートできます。

 

CDNへのアセットのエクスポート

ローカルディスクに画像を保存する代わりに、Lunacyではファイルをコンテンツ配信ネットワーク(CDN)にアップロードすることができます。 HTMLに挿入する準備ができたシングルクリックするだけでよいので、デザイナーは大助かりです。

 

Googleフォントの自動ダウンロード

Avocode、Zeplin、Figmaなどのツールを使用してのSketchファイルの表示には、ドキュメント内で重要なフォントが欠けているのを見るのはイライラしますよね。テキストの代わりに空白が表示されているなんてことが。 Lunacyは文書に含まれていない全てのGoogle Fontsを自動的にダウンロードし、空白が表示されるということを避けてくれます。Googleフォントのフォントを自動検索してくれますが、非常にスムーズに行うため、それに気付くことはないでしょう。

 

フォントに関するもう1つ重要な点は、他の編集者がことあるごとにフォントを交換する必要があるのに対し、Lunacyではフォントを1回で交換できることです。

 

デザインを調べる

LunacyはSketch the Ripperと使えます。  Zeplinのような特別なものに代わる無料のツールです。これを使えば、スムーズな受け渡しが可能です。作品の制作を終えたデザイナーがチームメイトに.sketchファイルを送る代わりに、デザインをワンクリックで共有し、すべてのアセットへのリンクを取得します。 ZeplinやAvocodeのような追加のビューワを必要としません。ツールが少なければ少ないほど、生産性は向上します。

 

Lunacyは、デザインをアップロードし、開発者のためにすべての写真とテキストを公開してくれます

 

今後は?

Icons8チームは、LunacyをSketch for Macと同等のものにしたいと考えているようです。Sketch for Macの機能をサポートする本格的なエディタへの改良に取り組んでいます。また主要なSketchプラグインの機能を追加しています。

Icons8チームが取り組んでいるいくつかの機能は次のとおりです。

 

1.グラデーションの編集。現在のところ、グラデーションは読み取り専用です。Lunacyはそれらを読み取って表示することはできますが、編集することはできません。

2.影とファンシーなストロークを表示する

3.オブジェクトを反転させる

4.シンボルの作成。 Lunacyはシンボルを読み取って使うことはできますが、現時点では作成することはできません

5.コンポーネントライブラリの作成

 

Lunacyはバグが多く、時にはクラッシュすることさえあり、週に10個ほどのバグを修正しています。しかし、実際のユーザーからのフィードバックよりも製品改善のためにうまくいくものはないとし、チームは今共有することを決めました。

 

次段階

 

Lunacyを試して、いいかどうかを判断してください。 Lunacyをダウンロードしてインストールするだけです。 Icons8はポータブルバージョン(セットアップなし)も開発しました。USBドライブで持ち運びたい人には最適です。使ってみてProduct Huntにフィードバックを共有してくれるとしたら、それは本当に素晴らしいことです。(LunacyはProduct Huntで今日特集されました!)

おすすめ新着記事

おすすめタグ