2016年1月22日

Photoshop本当に使いこなせてる?

通常の3倍速くなる!?Web制作が爆速化するPhotoshopプラグイン15選

通常の3倍速くなる!?Web制作が爆速化するPhotoshopプラグイン15選

WEB制作には欠かせないPhotoshop。
Photoshopには便利なプラグインがたくさんあり、作業に応じて使いわけることでWEB制作が爆速化します!
ガイド引き、レイヤー編集、レイアウト作成などを助けてくれるので、作業が通常の3倍は捗るでしょう。(※個人の感想です)
 
そこで今回は、WEB制作を爆速化して作業時間を短縮してくれる、無料のPhotoshopプラグインを15個まとめてご紹介します。
使ってみて損があるどころか、使わないと人生の時間を損するレベルのプラグインたちです!
 
 


ツールボックスにショートカットを表示「Keyboard Shortcuts Extension」


配布サイト:http://arronhunt.com/extensions/keyboard-shortcuts/
 
ツールボックスにショートカットを表示するプラグインです。
各ツールを長押しすればショートカットが表示されますが、ショートカットをおぼえるまでいちいちクリックして確認するのは面倒です。
このプラグインでショートカットを表示しておけば、スムーズにおぼえられますね。
 
 


1クリックでガイド引きができる「QuickGuide」


配布サイト:http://guchitaka.com/project-view/quickguidepro/
 
「QuickGuide」は面倒なガイド引きを超絶簡単にしてくれるプラグインです。
使い方はとっても簡単で、オブジェクト、または選択範囲に沿ってクリックするだけでガイドが引けてしまいます。
ガイドの種類は上・下・左・右・左上・左下・右上・右下・全方向の9種類です。
 
 


細かいガイド引きができる「Griddify」


配布サイト:http://gelobi.org/griddify/
 
こちらも同じくガイド引きをサポートするプラグインですが、ピクセルを入力して細かいガイド引きができます。
たとえば左から100pxごとにガイドを引いたり、100px・50px・25pxなど不等間隔でガイドを引いたり、より細かくガイド引きしたいとき重宝します。
分割する機能も備わっているので、4分割、8分割などのガイドを一瞬で引けて超便利!
 
 


Divine Proportions Toolkit


配布サイト:Divine Proportions Toolkit
 
黄金比、黄金三角形、黄金分割、黄金螺旋、対角線、1/3ルールなど、レイアウト作成に使えるパスを作成してくれるプラグインです。
使いたい構図を選択するだけで黄金比などをあてがうことができるので、美しいレイアウトの作成に役立ちます。
今までそうした比率を意識したことがなかった方は、ぜひ使ってみてください。
レイアウトのまとまりがぐっとよくなりますよ。
 
 


デザイン情報を表示する「Ink」


配布サイト:Ink. A Photoshop documentor plugin
 
作成した要素のレイヤースタイル、フォント、サイズなどのデザイン情報をまとめて表示してくれるプラグインです。
レイヤーを選択してボタンを押すと情報が表示されます。
日本語版はありませんが、使い方が簡単なので英語が苦手な方でも問題ないと思います。
スタイルガイドを作成するときなどに重宝するでしょう。
 
 


指定箇所のサイズを書き出してくれる「Size Marks PS」


配布サイト:Size-Marks-PS/images at master · romashamin/Size-Marks-PS · GitHub
 
オブジェクトのサイズ、オブジェクト間の距離など、指定した箇所のサイズを書き出してくれるスクリプトです。
計測した箇所には計測結果がレイヤーとして追加されるので、スタイルガイド作成が爆速化します。
「Ink」も便利ですが、サイズを計測するなら「Size Marks PS」があった方が捗ります。
 
 


長い影を一瞬で作成できる「Long Shadow Generator」


配布サイト:Long Shadow Generator for Photoshop - A PS extension to create long shadow with one click!
「Long Shadow Generator」、その名前の通り、長い影を簡単に作れます。
作るとなると意外と面倒なシャドウを一瞬で作れるので、まさにWeb制作を爆速化するプラグインです。
かゆいところに手が届く、便利で使えるヤツ。
 
 


Photoshop上でアイコン素材が検索&使用できる「flaticon」


配布サイト:Free Adobe Extension | Flaticon
 
Photoshop上でベクターアイコン素材を検索し、そのまま使えてしまう非常に便利なプラグイン。
ただ、フリープランはページあたり使えるアイコンは10個までとなっています。
それ以上使用したい場合は、有料プラン($9.99)が必要です。
 
 


ビットマップをベクター化してくれる「Pixel2Vector」


配布サイト:Watch and Download Full Movie Before I Fall (2017) – Orange Box
 
ビットマップのオブジェクトをベクター化してくれるプラグインです。
ベクターは拡大・縮小しても画質が低下しないので、Photoshopで描いたオブジェクトをIllustratorのようにベクター化したいときに使えます。
Photoshopメインでデザインしている方はきっと助かると思います。
 
 


オブジェクトをCSS3で書き出す「CSS3Ps」


配布サイト:CSS3Ps - free cloud based photoshop plugin that converts layers to CSS3 styles.
Photoshopで作成したオブジェクトをCSS3で書きだしてくれるプラグインです。
たとえば、Photoshopで作成した角丸やグラーデーションのボタンをCSS3で書き出せるので、なるべく画像を使わずサイトを軽量化したいときなどに使えます。
書き出されたコードをコピペするだけなので、Web制作が捗ること間違いなし!
 
 


スポイトツールにカラーコードのコピー機能を加える「Hexy」


配布サイト:missingpixels.io
 
スポイトツールでカラーをクリックすると、カラーコードをコピーしてくれます。
わざわざコピーする手間が省けるのでWeb制作が捗ります。
機能的にはすごーく地味なのですが、結構助かるんですよね。
デフォルトで備わっていて欲しい機能です。
 
 


たった4回のクリックでWEBサイトのレイアウトができる「velositey」


配布サイト:Velositey - Photoshop Extension for CS6 & CC by D&K
 
「Velositey」は4回クリックするだけでWEBサイトのレイアウトが出来上がるプラグインです。
ポチポチポチポチッとクリックするだけでいいので、ワイヤーフレームの作成が驚くほど簡単にできてしまいます。
まさにWEB制作の爆速化!
 
 


複数パターンのデザインを書き出す「render.ly」


配布サイト:render.ly
 
レイヤーを組み合わせて複数パターンのデザインを書き出してくれるプラグインです。
複数パターンのデザインをひとつひとつ書き出す手間を省けます。
利用には無料の会員登録が必要です。
 
使い方はこちらのサイトの解説がわかりやすいです。
 
複数パーツを爆速で書き出す無料Photoshopプラグインがスゴい – 東北起業・イノベーション塾
 
 


レイヤー編集が捗る「Layrs Control」


配布サイト:Layrs Control 2 - free PS extension
 
複数のレイヤー名をまとめて変更したり、未使用のレイヤー効果を削除するなど、レイヤー編集を効率化する機能を5つ備えているプラグインです。
使える機能は以下の5つ。
 
・複数のレイヤー名を一括変更
・未使用のレイヤー効果を削除
・レイヤーのエフェクトをフラット化
・空のレイヤーを削除
・スマートオブジェクトを一括でラスタライズ
 
 


適当に文章を作成する「Lorem Ipsum Generator」


配布サイト:Free Adobe Lorem Ipsum Generator - Layerhero Software
 
適当に文章を作ってくれるプラグインです。
ワイヤーフレームやサンプルを作るときに、テキスト部分に「テストテスト…」というのではイメージが湧きにくいですよね。
ネットで適当なサイトからコピーしてくるのも、消し忘れたときのリスクを考えると問題があります。
地味ですが意外と便利なプラグインです。
 
 


適当にサンプル画像を拾ってきてくれる「Lorem Picsum」


配布サイト:LoremPicsum
 
こちらは先ほどのプラグインの画像版といった感じです。
適当に画像を差し込んでくれるので、カンプ画像などを拾ってくる手間が省けます。


クリエイターの求人・案件探しは、
レバテッククリエイターへ

レバテッククリエイターでは、フリーランスや派遣で働くクリエイターを対象とした求人・案件の提案サービスを行っています。Web業界やゲーム業界を中心に年間1000件以上(※)の取り扱いがあり、様々なスキルを活かせる案件の提案が可能です。
※2016年度実績 自社調べ
求人・案件探しの相談をする

また、「今よりも年収をアップさせたい」「トレンドに敏感な現場でWebデザインスキルを磨きたい」などの理由からフリーランスへの転向を検討している方には、無料の個別相談会も実施していますのでお気軽にご相談ください。業界に精通したプロのコーディネーターが、一人ひとりの希望や状況に合わせて丁寧にサポートします。

「個別相談会」に申し込む

役に立った/参考になったと思ったら、シェアをお願いします。

この記事に関連する案件

Webデザイナーの案件を見る

人気のスキルの求人・案件情報

レバテッククリエイター
おすすめコンテンツ

レバテッククリエイターはWeb・ゲーム業界に特化したデザイナー・クリエイター向けの求人・案件提案サービスです。