Photoshop（PSDデータ）からコーディングする具体的な方法

2022 6/21

2022年6月21日

こんにちは、TERUです。
SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。

プログラミング初学者Aさん

デザインデータからどうやってコーディングするの？
デザインデータを利用したコーディングで気をつけるポイントは？

本記事では、こういった疑問に答えます。

WEB制作をするために必要なコーディングのスキルについて、Progateやドットインストールなど勉強できる環境は整っています。
ただ、実際に制作会社からWEB制作（コーディング案件）を依頼された際に、デザインデータを提供されて、それを元にコーディングを行うのが一般的です。
Progateやドットインストールでは学習してないポイントなので、初めて作業する方は戸惑ってしまうと思います。

デザインデータを扱うソフトはXD、Photoshop、illustratorといくつか種類がありますが僕が経験した制作案件ではPhotoshop（psdデータ）を使ったデザインが多いので今回はPhotoshop(psdデータ)からコーディングを行う方法について解説いたします。
※僕の経験では、Photoshop：5割,illustrator：2割,XD：3割で、最近少しずつXDが増えてきています。

Adobe XDのデザインデータ（xdデータ）からのコーディングについては、以下の記事を参考にしてください。

本記事の信頼性

制作会社でWEBディレクターとしての勤務経験あり
自身も現在フリーランスとして制作会社案件も対応している。
コーディング歴2年でだいたい月収３０〜50万

Photoshop（psd）からのコーディング方法【準備編】

Photoshopでコーディングする際に必要な環境設定を紹介します。

Photoshopをまだ持っていいないという方はまずこちらからインストールしてください。

illustratorやAdobe XDなど普段から他のAdobe製品も使われる方は、Creative Cloudコンプリートプラン（税込6,480円）がオススメです。

TERU

Web制作では複数のAdobe製品を使用するので、コンプリートプランで契約されている方が多いです。

とりあえずPhotoshopだけ使えればいいという方は単体プランで十分です。

コンプリートプラン契約済みの方へ

コンプリートプランが少し高いなと思ってる方にお得な情報です。
学生教職員版のコンプリートプランに乗り換えることで、年間3万円以上お得になります。

単位の設定

コーディングする際はpx（ピクセル）単位で行うので、Photoshopの環境設定を変更します。
（１）[photoshop]-[環境設定]-[単位・定規]を選択します。

（２）環境設定画面の[単位]と[定規]箇所を「pixel」に変更し、[OK]を選択します。

ガイド線の消去

デザインデータを開いたときに水色のガイド線が表示されています。
こんな感じで

コーディングする場合は、邪魔になるので消去しちゃいましょう。
（１）[表示]-[ガイドを消去]を選択します。

これでガイド線が消えました。

参考のデザインデータ準備

今回は、Photoshopの操作方法を説明するためのデザインデータとしてデザイナーのヨーコさんから参考デザインを頂きました。
上記のリンク先から同じデータをダウンロードできます

Photoshop（psd）からのコーディング方法【覚えるのは３つだけ！】

結論として、Photoshop（psd）からのコーディングで必要なスキルは下記の３つです。

文字情報の取得
画像の書き出し
要素の測定

Photoshopの機能を全てマスターするのは時間がかかり過ぎますが。。コーディングに必要なスキルはこの記事を見ていただければ十分です。
必要なスキルについて、１つずつ詳細を解説いたします。

文字情報の取得

コーディングに利用する文字情報は以下の６つになります。

font-family
font-size
font-weight
line-height
letter-spacing
color

対象のスライスを選択します。

選定後に右側の属性パネルの文字プロパティを確認します。

※[letter-spacing]と[Line-height]以外の４つの値はこの画面を見るだけで分かります。
あとはCSSに反映してあげるだけです。

colorの箇所をダブルクリックするとカラーピッカー画面でカラーコードを確認することもできます。

計算が不要な値

上記の画像から下記の４つの情報は画面を見るだけで取得することが可能です。

font-family→筑紫B丸ゴシック
font-size→30px
font-weight→bold
color→#000000

計算が必要な値

[line-height],[letter-spacing]については、画面で取得した値から計算して取得する必要があります。

line-height
行の高さを指定するプロパティです。
行送りと文字のサイズ箇所を確認します。

行送り/文字のサイズで算出（単位はなし）

例：画像の場合
48/33=1.45
line-height:1.45;

letter-spacing
文字の間隔を指定するプロパティです。
VA箇所を確認します。

VAの数字/1000で算出（単位はem）

例：画像の場合
VA→50
50/1000=0.05em
letter-spacing:0.05em;

画像の書き出し

デザインデータからコーディングに必要な画像を書き出す方法です。
書き出す画像は主に下記の３パターンです。

背景画像
イラスト
写真

フォントに関しては、画像として書き出さずに、なるべくコーディングで
実装した方がいいです。
※Googleの検索エンジンが画像の文字情報を読み取れずSEO観点でよくないため

書き出し手順（一括）

[ファイル]-[生成]-[画像アセット]を選択するだけです。

psdデータと同フォルダ内に画像データが入ったassetsフォルダが生成されます。
手順はこれだけです。

書き出し手順（個別）

対象画像を選択します。

対象レイヤーを右クリック-[書き出し形式]を選択します。

ファイル形式を選択し、[書き出し]をクリックします。

ファイル形式については、透明箇所がある画像はPNG、それ以外はJPGで特に問題ないと思います。
※ファイルサイズが小さい時は拡大縮小の値を上げて大きめに画像を書き出すことで画像の解像度をあげることが可能です。（コーディングでサイズ調整は必要）
僕はよく、小さめの画像は200%で２倍書き出しを行うことが多いです。

画像の書き出し方法について、詳しくは下記のサイトが参考になります。

要素の測定

要素の幅や高さ、要素間の長さを測定します。

要素の横幅（width）,縦幅(height)を測る

対象の要素を選択して、属性パネルを確認するだけです。簡単ですね。

属性パネルで横幅（width）と縦幅(height)が確認できます。

要素間の幅（余白）を測る

要素間の幅については、長方形ツールを用いて測ることが可能です。

まず、長方形選択ツールを選択します。

次に余白を確認したい箇所で枠を広げるだけです。

【おまけ】Photoshop（psd）からのコーディング方法〜便利な小技4選

ここでは、使用頻度は少ないが、覚えておくと便利は小技を紹介します。

画像のサイズ調整

たまに書き出した画像のサイズが実際のデザインより大きい場合、サイズ調整や切り取りが必要になります。
そんな時に利用できる方法です。

書き出した画像をPhotoshopで開き、切り抜きツールを選択します。

次に切り抜きたい「横幅」と「縦幅」を指定します。

対象画像から切り取り範囲を選択してEnterを押します。

これで切り取り完了です。あとは、もう一度画像を書き出すだけです。

画像の色調補正

画像を明るさを調整したい場合に、色調補正を利用します。

[イメージ]-[色調補正]-[明るさ・コントラスト]を選択します。

明るさ・コントラストを選択して値を調整します。
明るさ：画像の明るさを調整
コントラスト：画像の明暗部分の差を調整（値を高くすると明るい部分はより明るく、暗い部分はより暗くなる）

※デザインデータとブラウザ表示で確認した時は見た目の印象も少し変わるので、後から画像の色調補正を行うことはたまにあります。