Photoshopのデザインカンプを使ってコーディングする際、「どこを見ればいいの？」「どうやってサイズや色を調べるの？」と迷いませんか？
ふぅあんPhotoshop初めてさわるけどボタンがいっぱいあってわからないにゃ〜
ウチノそれじゃこれから一緒にやってみましょう！
わたしも初めてPhotoshopのデザインカンプを受け取ったとき、何から始めればいいのか戸惑いました。
この記事では、私がフリーランスとして実務で経験した内容をもとに、基本設定から、要素のサイズ・カラー・余白・フォント情報の取得方法、画像の書き出し方までPhotoshopの最新verで確認し、初めて触るコーダーさんにもわかりやすく丁寧に解説しています。
Photoshopカンプからコーディングを始める前に
まずはpsdファイルを開いてデザインカンプファイルを開いてください。
それから素早く正確に値を取得するために現在のPhotoshopの環境を確認していきましょう。
単位設定をピクセル（px）に変更する
Photoshopでコーディング作業を行う際、始めに単位をピクセル（px）に設定することが重要です。
デフォルトではポイント（pt）になっている場合がありますが、ピクセルに変更する必要があります。
Photoshop画面上部メニューより
設定→単位･定規をクリック。
環境設定パネルが開くので単位の部分をピクセル（pixel）に設定します。すでになっている場合は何もしなくて大丈夫です。
これにより、定規やガイド、情報パネルなどで表示される単位がピクセルに統一されます。
プロパティ画面の設定
Photoshopの作業画面で右側にプロパティ画面が表示されているかどうか確認しましょう。
上の画像のパネル部分（カラー、プロパティ、レイヤー）が最低限必要です。
そして値が表示されるか確認のために
十字マークの移動ツールか、Tマークの横書き文字ツールを選択して開いているファイルのコンテンツを選択してください。
選択後、下の画像のように
それぞれ値が表示されれば大丈夫です。
表示されなければPhotoshop画面上部メニューより
ウィンドウ→カラー、プロパティ、レイヤーにチェックを入れてください。
値の取得方法
それでは、デザインカンプから値を取得していきましょう。
移動ツールでのサイズ確認
移動ツールを使い、要素をクリックすると
プロパティパネルに各要素の値が表示されます。
サイズ・幅（W）・高さ（H）やborder、border-radiusの値も取得できます。
色コードは｢塗り｣の横にある色をクリックすると下の画面が開くので
画面の右上のカラーパレットアイコンをクリック。
するとべた塗り画面が開いて画面下にある色コードを確認できます。
opactiyの値はレイヤーパネル（プロパティパネルの下）で確認できます。
不透明度 80%ならopactiy : 0.8です。100%なら不要です。
要素間の余白を調べる
Photoshopで便利なのが、要素間の余白チェックですね。
距離を測りたい要素をクリックして⌘（コマンドキー）またはCtrlキーを押しながら相手要素にカーソルを近づけると、Photoshopが自動でガイドを表示し、余白をピクセル単位で表示します。
この機能は本当に助かります。Illustratorにもつけてほしい（笑）
もし取得できない場合は
上記アイコンの長方形ツールを選択。
測りたい部分に長方形を作成してサイズを確認。
値を確認したら作成した長方形は削除、もしくは取消しすれば大丈夫です。
フォントサイズと行間の確認
テキストコンテンツをクリックするとプロパティパネルにテキストレイヤーが表示されます。
下の画像で例えると
フォント種類（Noto Sans JP）、font-weight（Regular400）、フォントサイズ（16px）、letter-spacing（30 （30 / 1000 = 0.03em））、line-height（32px（32/16 = 2））color（文字色）の情報を確認できます。
画像書き出し方法
1枚ずつ書き出しする場合
移動ツールを選択。
書き出したい画像を選択。
画像を選択すると画面右にあるレイヤープロパティに選択している画像レイヤーに薄いブルーつきます。
レイヤープロパティで希望の画像を選択できていれば問題ないですが、
上部画像のようにフィルター（長方形2）が存在する場合、フィルターは重なり順という観点でみると、画像の上にあります。
移動ツールで書き出したい画像を選択しているつもりでも、フィルターが上にあればフィルターを選択しています。
画像を書き出すときは選択した後に、レイヤーパネルで選択したい画像かどうか確認し、フィルターが選択されている場合は、直接レイヤーパネルから書き出したい画像を選択して右クリックします。
書き出し形式をクリック
上記画面が開くので、
画面左上のサイズ等倍、2倍など書き出しサイズを設定し、
画面右上のファイル設定でファイル種類を設定して最後に画面右下の書き出しをクリックします。
あとは保存場所を指定すれば完了です。
フィルターと画像を一つにまとめたい場合は、各レイヤーをShiftキーを押しながらクリックして、⌘（コマンド）+ GもしくはCtrlキー + Gでグループ化して一つにできます。グループ化したものにファイル名.pngなど拡張子をつけると画像として書き出せます。
SVG書き出し
Photoshop では、「SVG として書き出し」機能は、常に試験的にサポートされていました。低い使用率および制限のため、Photoshop 22.5 の 8 月リリースをもって、この機能は廃止されました。
Adobe公式より
公式によるとSVG書き出しを行いたい場合の施策として
設定→書き出し→従来の書き出し形式を使用をクリックとありますが、その項目は現在ありません。（2025年4月現在）
その他の方法としてXDやIllustratorで開く方法も案内されていますが、正しく書き出せているかどうかは、よく確認したほうがいいでしょう。
複数の画像を一度に書き出す場合
「画像アセット」機能を使って、必要な画像を同じフォルダにまとめて出力します。1枚ずつ書き出すより時短になり、かつ画像を編集するとフォルダ内の画像も自動で変更されるスグレモノです。
それでは手順ですが、
書き出したい画像を1枚ずつ書き出す場合と同じように選択します。（このときレイヤーにある画像名にファイル種類を設定します。例）ファイル名.png）
その後、Photoshop上部メニューよりファイル→自動処理→ジェネレータプラグイン→画像アセットを選択
これで現在開いているPhotoshopファイルがある同階層に｢Photoshopファイル名-assets｣というフォルダが作成されます。今後その中に、画像アセットしたものが追加されます。
画像を2倍で書き出す場合はファイル名の前に200%半角スペース ファイル名とするとサイズが2倍書き出しになります。（例 200% test.png@2x）
私自身もそうでしたが、最初はジェネレータープラグインがグレーアウトされている場合があります。
その場合は、Photoshop上部メニュー→設定→プラグインをクリック。
次に
開いた環境設定パネルで プラグイン→Generatorを有効にするにチェックを入れる。
その後、再起動すると私の場合はジェネレータープラグインが選択できるようになっていたのでご確認ください。
大量の画像ファイルに2倍書き出しと等倍書き出しを一括設定
大量の画像を書き出すとき、ファイルひとつひとつにファイル名をつけて200% 〇〇@2x.jpgなどと命名するのは大変です。
そこで
レイヤーパネルの下にあるプラスボタンをクリックして新規レイヤ―を追加。
追加されたレイヤーを一番上にドラッグ&ドロップして移動。
そしてレイヤーに default 1x/, 200% 2x/@2x と名前を付けるだけです。
これで
上記画像のように整理されます。途中まで書き出しちゃったよっていう方も -assetsフォルダの中身は自動で書き換えられるので安心してください。
まとめ
今回は初めてPhotoshopのデザインカンプを受け取ってコーディングする方向けに書きました。
コーディング作業を行うためには、各種情報を素早く知ることが一番だと思います。
そこで情報の取得をメインにわかりやすくまとめてみました。たまにしかPhotoshopのデザインカンプさわらないんだよねって方も参考にしていただければと思います。
この記事がPhotoshopに不慣れな方のお役に立てることを祈っております。
そろそろAdobeの契約更新なんだよなぁって方は下の記事を参考にしてください。
