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

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

こんにちは、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年でだいたい月収30〜50万
目次

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

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

Photoshopをまだ持っていいないという方は、Adobe CCを購入する必要があります。

Creative Cloudコンプリートプランを少しでも安く購入したい方は、「デジハリ経由でAdobe CCコンプリートプランを安く購入する方法」の記事をご覧ください。

TERU

Web制作では複数のAdobe製品を使用するので、Adobe CCは必須です。

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

既にコンプリートプランを契約しており、毎月の支払いが少し高いなと思ってる方にお得な情報です。
デジハリ版Adobe CC学生教職員版)に乗り換えることで、年間4万円以上お得になります。

単位の設定

コーディングする際はpx(ピクセル)単位で行うので、Photoshopの環境設定を変更します。
(1)[photoshop]-[環境設定]-[単位・定規]を選択します。
単位の設定
(2)環境設定画面の[単位]と[定規]箇所を「pixel」に変更し、[OK]を選択します。
単位の設定2

ガイド線の消去

デザインデータを開いたときに水色のガイド線が表示されています。
こんな感じで
ガイド線の消去
コーディングする場合は、邪魔になるので消去しちゃいましょう。
(1)[表示]-[ガイドを消去]を選択します。
ガイド線の消去2
これでガイド線が消えました。
ガイド線の消去3

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

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

Photoshop(psd)からのコーディング方法【覚えるのは3つだけ!】

数字の3が書かれたイラスト
結論として、Photoshop(psd)からのコーディングで必要なスキルは下記の3つです。

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

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

文字情報の取得

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

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

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

選定後に右側の属性パネルの文字プロパティを確認します。
Photoshopの画面2
※[letter-spacing]と[Line-height]以外の4つの値はこの画面を見るだけで分かります。
あとはCSSに反映してあげるだけです。

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

計算が不要な値

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

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

計算が必要な値

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

line-height
行の高さを指定するプロパティです。
行送りと文字のサイズ箇所を確認します。
Photoshopの画面4
行送り/文字のサイズで算出(単位はなし)

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

letter-spacing
文字の間隔を指定するプロパティです。
VA箇所を確認します。
Photoshopの画面5
VAの数字/1000で算出(単位はem)

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

画像の書き出し

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

  • 背景画像
  • イラスト
  • 写真

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

書き出し手順(一括)

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

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

書き出し手順(個別)

対象画像を選択します。
Photoshopの画面8

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

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

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

あわせて読みたい

要素の測定

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

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

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

属性パネルで横幅(width)と縦幅(height)が確認できます。
Photoshopの画面12

要素間の幅(余白)を測る

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

まず、長方形選択ツールを選択します。
Photoshopの画面13

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

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

草原に置かれたパソコン
ここでは、使用頻度は少ないが、覚えておくと便利は小技を紹介します。

画像のサイズ調整

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

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

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

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

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

画像の色調補正

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

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

明るさ・コントラストを選択して値を調整します。
明るさ:画像の明るさを調整
コントラスト:画像の明暗部分の差を調整(値を高くすると明るい部分はより明るく、暗い部分はより暗くなる)
Photoshopの画面20
Photoshopの画面21
※デザインデータとブラウザ表示で確認した時は見た目の印象も少し変わるので、後から画像の色調補正を行うことはたまにあります。

ドロップシャドウ、シャドウ

Photoshopで設定した影(シャドウ)をコーディングで実現するための方法です。
記載しようと思いましたが、丁寧に解説してくれているサイトがあったので下記を参照ください。

B-side Journal
PhotoshopのドロップシャドウをCSS3で表現する方法 | B-side Journal   Photoshopで作成されたデザインカンプを参考にしてコーディングする場合、 ドロップシャドウをCSS3でどう表現するのか。   その方法について記載していきます。 Photosho...

Zeplinとの連携

デザインの補足ツールである「Zeplin」と連携することでコーディングで使用するデザインデータの確認が効率良くできるようになります。

詳しい連携の手順は下記の記事にまとめています。


以上がPhotoshop(デザインデータ)からコーディングする具体的な方法になります。

まとめ

今回はPhotoshopで解説しましたが、XDやillustralerでも基本的にやること(文字情報の取得や画像書き出し等)は変わりません。
各ソフトで操作方法が変わるだけです。
Photoshopを使ってデザインデータからのコーディングに慣れていけば、大半の案件作業には対応できると思います。

これから案件作業をやってみようという方の参考になれば嬉しいです。
以上です。

サイト制作のご依頼について

フリーランスチームにて、ホームページ・ECサイトの制作も行っております。
計画立案から制作、納品、運用までトータルでサポートいたしますのでお気軽にご相談ください。
※初回相談無料

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次