目次
Sketchは、多くのデザイナーが愛用しているUIやWebデザインの定番アプリケーションです。直感的な操作性がSketchの大きな魅力であり、まったくの初心者でも慣れればすぐに高度なデザイン制作に集中できます。本記事では、これからSketchを活用したい方に向けて、以下の２つの内容について詳しく解説しています。
・まずはじめに覚えておきたい6つのSketch便利機能
・作業効率をさらに高める5つのプラグイン・ツール
UIデザイン・プロトタイプ作成ソフト選びで迷っている方も参考にできますので、ぜひ最後まで目を通してみてください。
Sketchのおすすめ便利機能一覧
はじめに、覚えておくと便利な、6つのSketchおすすめ機能をご紹介します。
シンボル管理機能
シンボル管理機能は、「ナビゲーションバー」「各種ボタン」「ブランドロゴ」といった、よく使うデザインを登録して管理・再利用できる機能です。シンボル化したデザインは一括管理できるため、何度も同じ修正をする手間を省くことができます。もちろん、一括管理をオフにすれば、個別にデザインを変更することも可能です。
スマートレイアウト機能
スマートレイアウト機能とは、デザインを変更したとき、元の余白バランスに合わせてデザインが自動修正される機能です。例えば、ボタンのテキストを変更した場合、文章の長さに合わせてボタンのサイズが大きくなったり小さくなったりします。余白はピクセル単位で細かく設定できるほか、上下左右のどの方向に拡大縮小させるかも指定できます。
シンボル化したオブジェクトにスマートレイアウト機能を使うことで、さらに効率よくデザイン作業を進められます。
プロトタイピング機能
プロトタイピング機能は、アートボード上のシンボルに動作を指定するだけで、画面遷移をリアルに再現したプロトタイプが作成できる機能です。
「画面遷移させたい対象を選ぶ」
「移動先を選ぶ」
「遷移アニメーションを選ぶ」
このような簡単な3ステップだけで、誰でも簡単にアニメーションを生かしたプロトタイプを作ることができます。作成したプロトタイプはプレビューボタンですぐに動作確認できるほか、iOSアプリ「Sketch Mirror」での実機確認もスムーズに行えます。
ツールバーのカスタマイズ機能
ツールバーカスタマイズ機能は、Sketchの画面上部に表示されるツールバーのアイコンを、好きなように変更できる機能です。ツールバーを整理することで、以下のようなメリットが得られます。
・よく使う機能を配置して作業効率がアップする
・使わない機能を削除して集中力がアップする
デフォルトのツールバー設定にもすぐに戻せますので、安心していろいろな組み合わせを試すことができます。Sketchには50以上のツールバー用アイテムが用意されているため、自分の作業スタイルに合わせて選ぶ楽しみがあります。
テンプレート設定機能
テンプレート設定機能は、デザインの目的に合わせて自由にテンプレートの設定をカスタマイズできる機能です。
この機能を活用すれば、
・サイトやアプリの目的やデザイントーンに合わせて、高クオリティのデザインをスピーディーに作る
・Sketchの豊富なテンプレートから好みのパーツを組み合わせる
といった、UIデザインに合わせた柔軟なテンプレート運用が可能になります。
設定・保存したテンプレートはいつでも呼び出せるため、打ち合わせの最中でもクライアントに視覚的なデザイン提案ができます。
他メンバーへの共有機能
Sketchの共有機能を使えば、クラウドにアップロードしたプロトタイプやデザインをほかメンバーと簡単に共有できます。作成したファイルを「Sketch Cloud」にアップロードすれば、URLを知っている全員が閲覧・コメントできるようになります。Sketchのライセンスが無くてもファイルを閲覧できるので、クライアントにデザインを提案する際も都度画像ファイルに書き出す手間が省けます。特定のメールアドレスだけに共有範囲を限定したり、パスワードの設定もできるため、セキュリティ面の信頼性も高い機能です。
Sketchを使うときにおすすめプラグイン
次に、Sketchの作業効率をさらに高める、5つの便利なプラグインをご紹介します。
Auto Layout For Sketch
Auto Layout For Sketchとは、画面サイズや向きが変わっても、一度設定したレイアウトどおりに自動調整してくれるプラグインです。
この機能を使えば、
・iPhone 13 Pro Max
・iPhone SE
・Google Pixel 6
・iPad Pro
・iPad mini
といった、多種多様な画面サイズにも数クリックで即座に対応できるようになります。いちいちピクセルや余白調整する手間を省けるため、効率よく作業できます。
Sketch Runner
Sketch Runnerは、Macではおなじみの「Alfred」のようなランチャー機能がSketch上で使えるプラグインです。
今までマウスが必要だった、
・レイヤーやエレメントの表示
・プラグインの起動・操作
・シンボルの作成や挿入
などの、頻繁に行う複雑な操作もキーボードだけで実行できるようになります。何度もクリックする必要があった深い階層のレイヤーも簡単に探せるため、作業に費やす時間の短縮に繋がります。
Craft: Data/Stock
Craft:Data/Stockは、選択した画像やテキストから即座にダミーデータを作成してくれるプラグインです。選択できるのはPCやクラウドに保存された画像だけではなく、「iStock」や「Getty Images」といったストックフォトから質の高い画像を選べます。作成したダミーコンテンツは簡単に複製できるため、重複する要素が多いUIやプロトタイプ制作に非常に役立ちます。自分で作成したダミーデータをアップロードし、チーム内で共有することも可能です。
Diya
Diyaは、Sketchの制作画面でタイムラインアニメーションが作成できるプラグインです。画面をタップ、スワイプしたときの細かな動きを、簡単な操作だけで作り込む事ができます。
ほかにも、以下のような便利な機能が実装されています。
・作成したアニメーションを即座に動作確認
・アニメーションをシンボルとして登録・再利用できる
・作成データのHTML出力も可能
Diyaを使えば、アニメーションを駆使した高度なプロトタイプもすばやく仕上げられます。
kactus
Kactusは、Githubを使ってSketchファイルのバージョン管理ができるMac用アプリケーションです。保存したバージョンごとに画像で確認でき、いつ、どのように変更されたのか簡単に判別できます。プログラミングに精通していないデザイナーにも変更点が分かりやすいため、複数人での共同作業にも役立ちます。
Sketchは初心者でも使いやすいおすすめUIデザインツール
Sketchは、これからUIデザインの学習を始めたい方には特におすすめのアプリケーションです。
おすすめのポイントを以下にまとめました。
①豊富なテンプレートから選択するだけで、楽しくデザインが作れる
②直感的な操作画面で初めから使いやすく、途中で挫折しにくい
③便利なプラグインが多く、どんどん作業効率を上げていける
今なら30日間の無料体験版もダウンロードできますので、まずはインストールしてじっくりと試してみてはいかがでしょうか？
