本稿は、WebDesignerDepotのブログ記事を許可を得て日本語翻訳し掲載した記事になります。
本記事は、ライターでありUXデザイナーでもあるJake Rocheleau氏によって投稿されました。
Sketch44のベータ版終了に伴い、Sketchの最も優れた機能のひとつである豊富なオープンソースのプラグインを見ていきましょう。
Sketchのコミュニティはとても便利で、ワークフローを根本から改善させるすばらしいプラグインをたくさん見つけることができます。この記事では、デザイナーの皆さんが持つべき12のベストSketchプラグインについて説明します。
なお、初心者向けにSketchの使い方も解説しているので、詳しく操作方法を見たい方は参考にしてください。
1. Sketch Measure
Sketch Measureは、デザイナーが開発者・プロジェクトマネージャー・および他のチームメンバーの作業を計画し、その要点を説明するのに役立ちます。
しかしこのプラグインは、自分でデザイン・コーディングすべてを行う一匹狼にとっても便利なものです。Measureプラグインを使用すると要素の幅・高さが表示され、ひと目で適切な測定を行うことができます。
ボタン・テキスト・アイコン・アートボードの主要部分など、ページ内のすべての要素を測ることが可能です。
Sketch Measureを使用すると、ページをそのままHTMLとCSSにエクスポートすることもできます。Adobeのツールでも同じことはできますが、Sketch内でこの機能がすべて備わっていることによって仕事がより簡単になります。
2. InVision Craft
以前にInVisionチームは新しいプラグインCraftを発表しました。これはどちらかというとプラグインのパッケージのようなもので、たくさんの機能とショートカットが追加されています。
ひとつの例として、デザイナーがWeb上のパブリックAPIからテキストとデータを直接取り出すことができるようになるDataプラグインというものがあります。これによって、実際のコンテンツと画像をその場で自動的にアプリに取り込むことが可能です。
CraftはInVisionの開発者によって常に新しい機能のプラグインが更新されており、デザイナーにとってとても価値のあるものになっています。
現在Craftには、6つの主要なプラグイン機能があり、そのすべてがデザインワークフローに追加すべきものです。
- Freehand：リアルタイムでの共同作業
- Prototype：動的で再現度の高いプロトタイピング
- Sync：InVisionのプロトタイプとSketchのインスタント同期
- Data：Webにある実際のデータを、Sketchのモックアップ上で取得する
- Library：チーム全体で共有できる、クラウド上のデザインアセット
- Duplicate：軽快なUIクローニング
Craftのホームページを見て、一度試してみると戻ってこれなくなるでしょう。
3. Sketch Toolbox
すべてのSketchユーザーはSketch Toolboxについて知っておく必要があります。プラグインのインストールとカスタマイズをとても簡単にする、優秀なプラグインマネージャーです。
Toolboxを使用すると、何百ものSketchプラグインを検索してそこからインストールするものを選ぶことができます。必要なものをクリックするだけで自動的にコンピュータにダウンロードされ、すぐに使用が可能です。
また、Sketch Toolboxはプラグインをスムーズに動作させるために自動的に更新を行います。
このプラグインはまだベータ版でありGitHubで常にアップデートされていますが、制作ワークフローで使用するのには充分です。実際、この素晴らしいプラグインマネージャーなしでは良いSketchのワークフローは完成しないと思います。
4. Export Assets
デザイナーにとって最も詳細なタスクのひとつとして、リソースを割り当てて開発者と共有するということがあります。すべての小さなアイコンやグラフィック、背景パターンを(通常は手作業で)エクスポートしなければなりません。
Export Assetsプラグインを使うと、このプロセスが簡単になります。このプラグインは、デザイナーがAndroid・iOSインターフェイスのアセットをエクスポートしなければならないモバイルアプリに向けたものです。@2xと@3x画面サイズのRetinaアセットが含まれています。
Sketch Exporterプラグインもチェックするのもいいでしょう。現在ベータ版であり、元々のバージョンを改良したものです。
5. Content Generator
前述のCraftプラグインはコンテンツの生成に役立ちますが、Timur CarpeevによるこのContent Generatorのようなシンプルなものが必要なときもあります。
このプラグインをインストールすると、以下のような自動生成されたダミー素材を入れることができます。
- ユーザーアバター
- ファーストネームとラストネーム
- ダミー段落テキスト
- カスタム文字列(位置情報・価格・CCカード番号など)
すべてのコンテンツはUnsplashやUinamesのようなオープンソースのデータベースから取得されているため、商用プロジェクトでも利用することができます。
6. Looper
Photoshopは独自のアクションパネルで繰り返しアクションを自動化することができます。Sketchにはこのようなパネルはありませんが、完全無料で使いやすいLooperプラグインがあります。
このプラグインはページ全体を占める繰り返しパターンを作成する場合に便利です。Webデザイナーよりもグラフィックデザイナーにとって便利なプラグインかもしれません。繰り返しの調整や複製のタスクによる時間を短縮してくれます。
Looperのホームページで機能を確認することができます。誰にでも必要であるというプラグインではないかもしれませんが、使いこなせる人にとっては時間の節約になるものだと思います。
7. Sketch Iconfont
Webデザイナーはアイコンフォントを愛用しています。UIデザインがやりやすくなるだけでなく、フォントファイルは一般的に画像よりも容量が小さくなるというメリットもあります。
Sketch Iconfontプラグインはアイコンフォントを格納・ソート・取得するための完成された管理パッケージです。
デフォルトでは空の状態なのでプラグインを利用する際にはアイコンフォントをダウンロードする必要がありますが、それによってオンラインで見つけたアイコンフォントを使い作業するためのアクセスを完全に得ることができます。
アイコンフォントフォルダをすぐに充実させたい場合はこのプラグイン用に特別に作られたフォントバンドルパックを使うことができます。そしていつでもサイトを精錬することができるようになります。
私はこのパッケージを必ず持っておくことをおすすめします。アイコンフォントは普及しており、現在のWebサイトに欠かせないものです。
8. Style Inventory
Sketchファイルを新規作成するときは最初からスタイルを作り直すか、以前のモックアップからスタイルをコピー＆ペーストする必要があります。
Style Inventoryプラグインを使うとこの余分な作業を回避することができます。数回のクリックで以前のすべてのスタイルが新しいSketchドキュメントにインポートされ、簡単にアクセスできるようになります。
これらのスタイルには色・テキストスタイル・シンボル・特定のレイヤースタイルが含まれます。
このプラグインはめったに更新されませんが、同種のモックアップをマージするために導入をおすすめします。カラースキームの保存とインポートのためにSketch Palettesプラグインを使用するのもいいかもしれません。
9. Pixel Perfecter
デジタルデザイナーは誰もが、ピクセル・パーフェクトなモックアップを誇りとしています。この作業は難しいことではありませんが、すべてのデザイン要素が重なりや欠陥なくグリッドと完全に合わさっていなければなりません。
エクスポートの前に確認したい場合はPixel Perfecterを使用しましょう。この小さなプラグインはすべてのファイルアセットをチェックして、従来のX・Y座標からのピクセルのはみ出しがないか確認を行います。
このプラグインは、相殺するピクセルを自動で修正するものではありませんので注意してください。問題の原因となっているレイヤーがハイライトされるので、それを自分で直すことになります。それでも、各レイヤーを手動で確認するような時間を大いに短縮することができます。
10. Dynamic Button
オリジナルの動的ボタンプラグインは2015年に廃止されましたが、新しいDynamic ButtonプラグインはSketch3.5+との互換性がさらに向上しました。
作成した任意のテキストレイヤーにパディングとボタンスタイルを自動的に追加します。またパディングは動的なので、テキストサイズに関係なく更新されます。これはモックアップを常に変更しているUIデザイナーにとってとても役立つものです。
このプラグインはボタンが一般的に固定のサイズ・比率に従うモバイルアプリケーションにも使用できます。Dynamic Buttonは最も魅力的なプラグインというわけではありませんが、そのタスクはよく機能しています。
11. Compo
ボタンジェネレータといくつかの特別な機能が必要な場合は、Compoプラグインを試してみるといいでしょう。
Compoの製作者は、Dynamic Buttonをしばらく使用してアイデアを得ました。Compoは仕様に合わせて、適切なボタンサイズとテキストサイズを自動生成します。このプラグインを使うとワンクリックで自動的にサイズ調整・配置されたSketchコンポーネントを作成することができます。
通常はボタンを作成してからテキストを変更すると、テキストレイヤーにしか反映されず下のボタンはサイズが小さすぎる状態になります。Compoは、ボタンとテキストを自動的にひとつの要素としてサイズ変更を行います。
GitHubレポジトリには、初めて使用する人のためのいくつかのユーザーズガイドとたくさんのデモがあります。
12. CSSketch
最後にCSSketchプラグインを紹介します。これは作成している全てのスタイルのCSSコードに直接アクセスしたい、デザイナーと開発者の組み合わせにとって便利なものです。
デザインしたページのアセットを含むスタイルシートを丸ごとエクスポートすることができます。ただし、自動化されたものであるためA++品質のコードは期待できません。
私はまだ手作業でCSSをコーディングする方が好きですが、このプラグインは技術を持っていないデザイナーや、時間を節約したい開発者にとっての手助けとなるでしょう。
デザイナーにとって当たり前のツールとなりつつあるSketchですが、機能や使えるプラグインもどんどん増えています。
プラグインは状況によっては非常に作業時間を短縮するツールになり得ます。今は必要なくても必要になった時に知っておくとデザインの作業に役立つでしょう。
また、TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
大谷翔平・野球ニュース