―HOMEABOUTSERVICEWORKSRECRUITBLOGACCESSCONTACTBLOGTOPBLOG2017/06/15【保存版】Sketchで効率的にUIデザインをするための便利なプラグイン9選こんにちは。デザイナーの飯山です。デザイナーチームに属しながら、CMSを使った運用案件では簡単な実装タスクを担当しています。そのせいもあって、エンジニア界隈のトピックに興味が湧いて首を突っ込むことも増えてきました。version43がリリースされてから約2ヶ月。デザインデータをgitでバージョン管理しやすくなったり、デザインとエンジニアリングの融和がどう進んで行くのか気になるところです。今回は、先日参加した『UIデザインのための「Sketch」1dayブートキャンプ』で学んだ中から、私が便利だと思ったプラグインを幾つかご紹介します。プラグイン紹介Sketchは動作の軽さが大きな魅力です。デフォルトの機能だけでも充分使い易いのですが、自分のワークフローに合わせてサードパーティーのサービスやプラグインで拡張することが可能です。Runner」Sketch操作をコマンド入力で簡略化できるツールです。ランチャーアプリのAlfredのような使い心地でオススメです。Sketchのプラグイン管理としても使えます。Toolbox」は開発終了しているようなので、プラグインのアップデートを管理する際にも重宝しそうです。Organizer」シンボルの並び方をデフォルトの横並びから縦並びにしたり、シンボル間の間隔調整が可能です。面倒なダミー画像やテキストが、簡単にWeb上やJSONデータで挿入することができます。先日のアップデートではSketch上で画面遷移のリンク設定がきるPrototype機能が追加されました。Layout」レイアウトに関する細かな設定ができます。ページ下部のタブメニュー要素にピンを打っておけば、アートボードサイズを変えてもページ下部に固定できます。styleの一括設定ができるようになります。Palettes」ドキュメント単位またはツール自体のグローバル単位で、カラーパレットの読み込みや保存などの管理が楽にできます。作成したコンポーネントをドラック&ドロップしてスタイルガイド共有が管理できます。2017年夏までは無料で使えるようです。各要素のサイズ、色、位置などインスペクト機能がとてもわかりやすく高機能です。プロトタイピングだけじゃない「InVision」Craft同様、画面遷移のリンク設定でプロタイピングが簡単にできるだけでなく、アップデートで追加されたインスペクト機能がSketchだけでなくPhotoshopにも対応しました。おわりに日々の作業効率化を実現するには、作業スピードを上げて無駄な時間を省く必要があります。そのためには、Photoshopのような使い慣れているツールを磨くことだけでなく、Sketchのような他のツールの良い部分を取り入れるのが効果的な場合もあります。ツールはあくまで手段です。顧客に早く・確実に解決策を届けられるならば、PhotoshopであろうがSketchであろうがツールの選定自体は特に重要ではありません。作業効率化の目的に目を向けると、私の場合は「情報設計やデザインを考える時に必要な"かたまった時間"を捻出したい」という思いから来るものでした。効率化の追求は、顧客の課題解決に充てられる時間の創出に繋がります。今回の記事が読んで頂いた方のお役に立てれば幸いです。プロトタイピングによるプロダクト開発をお手伝いしていますシナップは、Webサイト、アプリ、IoTなどインターネットとつながるユーザー接点すべてをデザインし、クライアントのビジネス立ち上げ、サービスの継続的発展をサポートすることを得意としている会社です。プロトタイピングによるプロダクト開発に関するご相談がございましたら、お気軽にお問い合わせください。大学ではマスコミュニケーションを専攻。経験後、デザイン専門学校の扉を叩く。学校でのアシスタントを経てデザイナーとしてシナップに入社。草野球、ボルダリング、コーヒー、写真が好き。公式アカウントブログの更新情報やシナップからのお知らせを配信しています。SINAPシナップの活動報告や、IT業界のトレンド情報などを発信しています。ご相談・お問い合わせお仕事のご依頼やご相談など、お気軽にお問い合わせください。