海外デザインブログCanva Design School Blogで公開された「Top Photoshop Plugins for UI Designers」より許可をもらい、日本語抄訳しています。
Photoshopは発売から20年以上たった今も、デザインの現場でもっともよく利用されているデザイン編集ソフトのひとつです。その中でも、デザイン用途に合わせてカスタマイズできる拡張機能、プラグインは数多く公開されています。
現在グラフィックデザインにおいて、モバイルアプリやウェブサイトなどのUIデザイン制作は、もっとも成長を見せている分野です。今回は、ウェブサイトやモバイルアプリのUIデザイン作成に効果的な、Photoshop拡張機能プラグインをまとめてご紹介します。
詳細は以下から。
01. Browser Preview
Browswer Previewは、作成しているモックアップやデザイン素材を、ローカルサーバーを作成して、ブラウザ画面上にてリアルタイムで確認することができるプラグイン。Photoshop CC 2014+で利用できます。
背景レイヤーを変更すると、ブラウザ上でもすぐに適用されているのが分かります。
02. Markly
Marklyは、デザイン要素の幅や高さ、他の要素までの距離などを直感的に調べ、保存することができる、PhotoshopとSketchにも対応したプラグインです。
ボタンをクリックするだけで、各要素の詳細サイズなどを知ることができます。
03. PS Export
PS Exportは、作成したデザインをPNGやJPEG、SVGなど自由な書き出し設定が可能なプラグインです。また、スクリーン解像度に合わせて、@1xから@4xまでボタンひとつのお手軽操作。
04. Resonator
Resonator Pluginは、作成したデザイン要素をカテゴリー分けし、手軽にメンテナンスすることができるプラグインです。書き出したいレイヤーを選択し、再生ボタンを押すだけで、各スクリーン解像度に適したパーツが、新しいレイヤーに自動的にまとめられます。
05. GuideGuide
GuideGuideは、独自のグリッドラインを、簡単な操作パネルの設定だけで実現できる、UIデザインに人気の高いプラグインのひとつです。
カラム数や幅、マージンや溝なども細かく調整することができるので、プロジェクトに応じて活用できます。
06. WebZap
WebZapは、UIデザイナーのために作られたプラグインと言っても良く、Phtosohop CS5以降で利用することができます。
あらかじめウェブサイトに必要な、スライダーやボタン、入力フィールドなどのコンポーネントが揃っているので、配置したいパーツをパズル感覚で組み合わせ、モックアップを作成することができます。
以下のビデオではすべての機能が、1分ほどの短い動画にまとめられています。
07. JetPack
JetPackは、アイコン作成に特化したPhotohsop拡張機能で、ラスターイメージをベクターに変換したり、複数のアイコン要素を整列させたり、細かいデザインのしやすいズーム機能が充実しています。
シンプルなインターフェース画面も魅力的で、作業効率をアップさせてくれるでしょう。
08. Perspective Mockups
Perspective Mockupsは、作成したUIデザインを立体的なレイアウトを利用して、より魅力的に見せることができる拡張機能です。ボタンひとつで向きや厚さなどを設定でき、アプリのプレゼンテーションにも効果的です。当サイトでも一度紹介しています、こちらも参考にどうぞ。
09. Font Hero
Font Heroは、Photoshopのデフォルト文字パネルの使いにくさから生まれた拡張機能で、より分かりやすい書体プレビューや、お気に入りフォント毎にカテゴリ分けし、整理することもできます。
また、GoogleウェブフォントやAdobeのTypekitなどの、クラウドフォントにも対応しています。
10. Divine Proportion Toolkit
Divine Proportion Toolkitは、デザインにおいてよく利用される比率「黄金比」を、ボタン一つで描くことができるプラグインです。どんなレイアウトサイズにも対応し、無料という点もポイントです。
11. UberSpacer
UberSpacerは、選択した複数のデザイン要素の幅を統一してくれる、作業効率をアップさせる拡張機能です。揃える幅は自動および手入力を選択することも可能です。
12. Griddify
Griddifyは、カスタムグリッドを自由に作成することができる、Photoshop代替プラグインです。UIデザインだけでなく、雑誌などのプリント媒体のマージンも、柔軟に設定することができます。
13. Pixelator
Pixelatorは、正確にはプラグインではなくアクション素材で、選択した範囲をオシャレなモザイク状に仕上げてくれます。オリジナル画像に手を加えない、非破壊編集なのでいつでも再編集できます。
14. TemplateGen
TemplateGen Scriptは、こちらも自由なグリッドを描くことができるプラグインで、特にファイルを新規作成するときに、数字を入力するだけで、手軽にグリッドを作成できます。無料プラグインという点もポイント。
15. Photoshop Color Wheel
Photoshop Color Wheelは、配色を決めるのにいつも悩んでしまう、という人にオススメしたいプラグイン機能です。色の基本原則をベースに、美しい素敵な配色をスピーディーに実現します。
16. SplashHolder
SplashHolderは、ライセンス表記不要で商用利用できる、フォトストックサイトUnsplashから選択しし、自由に利用することができるプラグインです。デザイン性の高いダミー用画像として活用できる、無料プラグイン。
17. Titlemizer
Titlemizerは、通常のダミーテキストを進化させた拡張プラグインです。見出しタイトルや段落、リスト形式などさまざまな文字テキストを、ボタンひとつで変更することが可能です。
18. Layer Guides
Layer Guidesは、選択したレイヤーをより自由に、より直感的に配置することができる、無料拡張プラグインです。天地中央などデフォルトではむずかしい配置も、ボタンのみで行うことができます。
19. Subtle Patterns for PS
Sublte Patterns for PSは、高品質なシームレスパターンを配布しているSubtle Patternのコレクションを、Photoshop内で選択、利用できるプラグインです。
お好みのパターンをパレットより選ぶだけで、自由に選択範囲のテクスチャを変更することができるので、制作時間の短縮にもつながります。
20. Prisma
Prismaは、利用する配色パレットをカラースォッチとして、プロジェクトやファイルごとに保存することができる拡張機能です。デザインで頭を悩ますことの多い配色を、より効果的に選択することができます。
さいごに、。
用途に応じたPhotoshopの拡張プラグインを探すのは、なかなか大変な作業です。今回ご紹介したプラグインを利用して、作業時間の短縮や効率化を目指しましょう。
また、当サイトではこれまでにも、作業効率をアップするプラグインを定期的に紹介しています。こちらも参考にどうぞ。
参照元リンク : Top Photoshop Plugins for UI Designer – Vandelay Design
投稿UIデザイン制作がラクになる、Photoshop拡張機能・プラグイン20個まとめはPhotoshopVIPの最初に登場しました。