Photoshopの便利なプラグイン（エクステンション）【CSS3Ps】を自分のパソコンにインストールする方法を紹介します。

CSS3PsとはPhotoshopで作ったシェイプデータをCSSデータとして吐き出せるエクステンションのこと。

例えばシェイプでつくったボタンを作った時に、ボタンをぽちっとおして少し待てば該当データをCSSで吐き出せる＆さらにコピーできるのでコーディングスピードが爆速的に上がります。

仕事でWEBデザインを請け負うデザイナーはこのように効率が上がるツールなどは無料のものから時に有料のものまで広く使って作業スピードを上げています。

さて、そんなCSS3Ps、本家が英語のサイトなのでインストール方法があまり日本語で紹介されていません。

私は最新のPhotoshopCCを使っているので、なおさら数年前の情報だとちょっと違うんだけど合ってんの……？となりました。

英語の本家サイトを読みながら、うまくインストールが完了できたので、だれかの参考になれれば幸いです。

（以前、別記事であまり日本語で紹介されていないフリーソフトのダウンロード方法を紹介したら複数の方からありがとう！いわれて嬉しかったので味をしめたというｗ）

では紹介していきましょう。

ざっくりいうと、以下の手順でPhotoshop上で利用できるようになります。

1. 本家サイトからzipデータをダウンロードして解凍する
2. 解凍したフォルダを後述する場所に丸っと放り込む
3. 放り込んだ中から「index.html」ファイルをブラウザで開く
4. Photoshopを再起動する
5. 画面上部のメニューバーから「ウィンドウ＞エクステンション」までマウスカーソルをもっていって”CSS3Ps”が表示されていればOK

では、詳しく説明していきます。

【AD】

１．本家サイトからzipデータをダウンロードして解凍する

私は最新のPhotoshop CCを使っていたので、

Download for Adobe Photoshop CC 2015 (see instalation instruction)

というものをダウンロードしました。

本家ダウンロードページへはこちらからジャンプできます

２．解凍したフォルダを指定箇所へ移動させる

解凍したフォルダをそのまま以下の置き場へ移動させます。

C:\Program Files\Common Files\Adobe\CEP\extensions\

プログラムファイルズへの到達方法は、

• エクスプローラー（フォルダのアイコンをしているやつ)を開く
• 左側のメニューからPCを選ぶ
• デバイスとドライブのカテゴリからwindows(C:)をクリック
• Program Filesまで到達できるよ！

ここで私は詰まったんです。

「え、AdobeのフォルダにCEPっていうフォルダないんやけど……作って大丈夫？」

結論からいうと、新しいフォルダ作成＆名前の変更で大丈夫でした。

人によってCEPフォルダが存在している人、いない人がいるようで、フォルダがない人は自分で作って名前をCEPに変更して解凍した先ほどのフォルダを放り込んでくださいな

3.index.htmlファイルを開く

先ほど移動したフォルダの中に「index.html」というファイルがあるのでそれをブラウザで開きましょう。

C:\Program Files\Common Files\Adobe\CEP\extensions\CSS3Ps\index.html

ダブルクリックすると、あなたが通常つかっているブラウザが起動して以下のスクリーンショットのようなページが表示されるはず。

一応、HTMLファイルのソースコードをちらっとみると、jsがいくつか動くように記述されていたので、これで動くようになるようです。

4.Photoshopを再起動する

もしPhotoshopを起動していれば、一度終了して、再度起動させてくださいな。

5.メニューバーからCSS3Psが追加されているか確認する

Photoshopの画面上部にファイルやら編集やらのメニュー表示があると思うのでクリック、

さらに表示されたメニュー内容からウィンドウを選び、さらにエクステンションを選びます。（マウスをもってく感じ）

すると、CSS3PSという項目が追加されましたとさ。めでたしめでたし。

CSS3Psは無料で使えるのもありがたいです。

実際使いこなすのはがっつりWEB案件に携わってからになるかもですが、あると便利なプラグインでした。