このページの本文へ

海外UXデザイナーが選ぶ!本当に使えるWebデザイナー向けPhotoshopプラグインはこれだ!

2016年08月31日 06時30分更新

文●Jerry Cao

  • この記事をはてなブックマークに追加
本文印刷
Webデザインの作業効率化に役立つ、Photoshopのプラグイン+関連ツール。たくさんあるツールの中から、UXPinチームが選んだ10本を教えてもらいましょう。

そもそもPhotoshopは、Webデザインのために作られたわけではありません。しかし、特に設定を変更せずとも活用できる機能やメリットが多く備わっています。たとえば…

  • 扱いやすく、高い信頼性
  • Webデザイン全体の整合性をとるためのスタイルオプションが豊富
  • 高解像度に対応したSVGやラスター画像を簡単に編集可能
  • パーツの作成からレイアウトの画像化まですべてPhotoshopでできる総合環境

もちろんすばらしいツールだからといって、ユーザー1人1人が必要とする機能をすべて備えているわけではありません。これから紹介するプラグインを使えば、PhotoshopがWebデザイン用に再構成され、Webデザインで発生する問題が解決されるでしょう。

この記事では、デザインコードの互換性からファイル管理の改善までをカバーするプラグインを紹介します。紹介するプラグインはUXPin(デザインプラットフォーム)のチームが有効だと判断したものです。

1.Retinize It

Retinize It

Photo credit:Retinize It

複雑でなく簡単に使えるファイル書き出しプラグインを探しているなら、Retinize Itがお勧めです。レイヤーまたはグループを切り出し、必要な形で書き出せます。非破壊編集で形状を調整して、ほんの数回クリックするだけで、RetinaディスプレイやiOSのディスプレイ用に200%または300%の大きさで画像を書き出せます。

2.Codly

Codly

Photo credit:Codly

PhotoshopでWebデザインをするときの大きな悩みの種が、作業中のどこかですべてをコード化しなければならないことです。Codlyは、PhotoshopファイルをiOS、Android XML、Windows 10、BlackBerryで使えるモバイルデザインに自動的にコード化することで、悩みを解消してくれます。

3. Duplllicator

Photo credit:Duplllicator

Photo credit:Duplllicator

コピー&ペーストの必要がなくなります! Duplllicatorは自動的にレイヤーやグループを複製してくれます。最も単純で時間を食う作業を代わりにしてくれるのです。この高速なツールを使うと、縦横のスペースやコピーする数を選択でき、わずらわしい作業を数分で終えられます。

4.Photoshop Prototyping Plugin

Photo credit:UXPin

Photo credit:UXPin

Photoshopでモックアップを作ることは、作成済みのプロトタイプを作り直すことではありません。

共同デザインプラットフォームを提供するUXPinは、共同でプロトタイプを作成するツールとして、直接PhotoshopのPSDファイルをドラッグアンドドロップするプラグインを公開しました。すべてのレイヤーが保存され、すぐにインタラクティブな要素を追加できます。作業が完了したら、すぐに株主やチームメンバーに見せて、より速いフィードバックが得られます。

5.PSD Cleaner

Photo credit:PSD Cleaner

Photo credit:PSD Cleaner

PSD Cleanerは、その名の通り、PSDファイルのレイヤーを掃除します。レイヤー名の変更や空のレイヤーを見つけるのに特に役立ちます。19.99ドルで、修正が必要なところを正確に指摘し、修正点を探す時間を省いてくれます。

6.GuideGuide

06

Photo credit:GuideGuide

GuideGuideはPhotoshopでもっとも使われているプラグインですが、それなりの理由があります。キャンバスやアートボード、選択したレイヤー、自分でデザインしたデータなどに、ガイドを思い通りにひけるのです。弊社のデザインチームがもっともお勧めするプラグインの1つです。

7.Perspective Mockups

Photo credit:Perspective Mockups

Photo credit:Perspective Mockups

Perspective Mockups以外のモックアップツールでも、普通にプレゼンができるレベルのモックアップは作成できるでしょう。しかし、Perspective Mockupsを使えば、PSDファイルの見え方が操作でき、デザインとデバイスとの適合性をよりきちんと理解できるようになります。具体的には、ファイルを傾けたり、回転させたり、積み上げたり、互い違いに並べたりして、より印象的なプレゼンが実現できます。

8. Suitcase Fusion

Photo credit:Suitcase Fusion

Photo credit:Suitcase Fusion

Suitcase Fusionは、使っているPCにインストールされているすべてのフォント名を知っているようなデザイナーにこそ必携のツールです(日本版編注:プラグインではなく単体のアプリケーション)。インストール済みのすべてのフォントを管理し、Photoshopで作業していても手元で参照できます。ビジュアルプレビューを使ってタイポグラフィーのオプションを横並びで比較できるので、最終決定に役立ちます。

9. HTML Block

Photo credit:HTML Block

Photo credit:HTML Block

コーディングを助けてくれるプラグインをもう1つ紹介します。HTML Blockです。HTML Blockは、WebKitを利用して作業内容をHTMLやCSSに置き換え、その結果は別ウィンドウに表示します。Webフォントやフォントスムージングの利用、ブラウザーでのプレビュー、サイズ変更可能なブロックデザインなど用途は多岐に渡ります。

10. Renamy

Photo credit:Renamy

Photo credit:Renamy

Renamyは、レイヤー名をバッチ処理で変更するための専用プラグインです。レイヤー名の変更しかしませんが、非常に役立ちます。複数のレイヤー名をすべて同時に変更でき、出力する前の時間短縮に最適です。完全版は14.99ドルですが、無料体験版は扱えるレイヤー数に制限があります。

(原文:10 Photoshop Plugins to Speed up Your Web Designs

[翻訳:中村文也]
[編集:Livit

Web Professionalトップへ

WebProfessional 新着記事

Webディレクター江口明日香が行く