【完全版】Photoshopデザインカンプからのコーディング方法（無料デザインカンプ付き）

2024年3月7日

Web制作で使用されているデザインツールといえば、Photoshop、Illustrator、XD、Figmaなどが挙げられます。

コーダー目線ではXDやFigmaが使いやすく人気がありますが、デザイナー目線だと必ずしもそうではありません。
Webデザイン作成にPhotoshopを使用している制作会社はとても多いので、コーダーとして受注できる仕事の幅を狭めないためにも、Photoshopの使い方は知っておくべきです。

Photoshopは非常にたくさんの機能があって扱いにくい部分もありますが、コーディングのために覚えるべきことは少なく、使い方もそこまで難しくありません。

この記事では、Photoshopデザインカンプ（PSDデータ）からコーディングを行う方法を、初心者の方にもわかりやすく１から解説しているので、是非ご覧ください。
無料のデザインカンプを配布しているので、実際に手を動かしながら学ぶことも可能です。

Photoshopを使うには？

PhotoshopはAdobe CC（Adobe Creative Cloud）の有料ソフトであり、使用するには月額料金が必要です。
７日間の無料体験版を使用することもできるので、お試しで使いたい方は「無料で始める」をクリックしましょう。

選択するプランは一番左の単体プランで問題ありません。
いずれのプランも７日間は無料で使用できるので、IllustratorやXDなども合わせて使用したい場合は一番右のコンプリートプランを選択するのも良いでしょう。

７日間の無料期間が終わると自動的に継続課金に移行します。
継続利用するつもりがなければ、無料期間内に忘れずに解約しておきましょう。

Web制作で本格的に仕事を受注したい方は、Photoshopを含む主要なデザインツールを全て揃えるためにも、Adobe CCコンプリートプランを購入することを強く推奨します。

Adobe CCコンプリートプランは公式サイトから購入すると高額ですが、以下の記事で4万円以上安く購入できる方法を解説しているので、是非ご覧ください。

無料のデザインカンプ配布

Photoshopのデザインカンプをお持ちでない方のために、無料のデザインカンプ（PSDファイル）を配布しております。ご自由にダウンロードしてお使いください。
以下は配布しているデザインのイメージになります。

↓ デザインカンプ（PSDファイル）のダウンロードはこちらからどうぞ

ダウンロード

コーディング前の準備

Photoshopの設定変更を行い、コーディングに必要な準備を整えます。
確認および設定が必要なのは以下の５項目です。

単位をピクセル（px）に変更
画像のカラーモードをRGBに変更
邪魔なガイド線を非表示
必要なウィンドウの表示
使用フォントの確認

単位をピクセル（px）に変更

PhotoshopはWebデザイン以外の用途でも使用されるので、単位がピクセル（px）でない場合があります。
コーディングを始める前に単位を確認し、ピクセル以外が使われている場合は変更しましょう。

まず、上部メニューバーから「Photoshop」→「設定（環境設定）」→「単位・定規」を選択します。

下のようなウィンドウが表示されるので、「定規」および「文字」の単位を「pixel」に変更して[OK]ボタンを押せば、単位がピクセル（px）に変更されます。

画像のカラーモードを確認

Webサイトで使用されるカラーモードはRGB形式が一般的です。
他のカラーモードに設定されていると、書き出した画像のWeb表示時の見た目が、デザイン上の見た目と変わってしまう場合があるので、RGBに変更が必要です。

上部メニューバーから、「イメージ」→「モード」と選択し、RGBカラー以外が設定されている場合は、「RGBカラー」にチェックが入れることで、RGB形式に変換されます。

もしもデザインがRGB形式以外で作成されている場合は、デザイン作成者に確認をとりましょう。
RGB形式に変換した際、色の表現が意図した通りに変換されず、調整が必要になる場合があります。

邪魔なガイド線を非表示

Photoshopのデザインデータを開くと、下画像の水色の線のように、ガイド線が表示されている場合があります。

これらのガイド線は、デザイン作成時の補助として使用していたものなので、コーディングの際には無くても問題ありません。作業の邪魔になる場合にはガイド線を非表示にしましょう。

上部メニューバーから、「表示」→「ガイド」→「ガイドを消去」と選択することで、ガイド線が非表示になります。

必要なウィンドウの表示

デザインから各種データを読み取るために必要なウィンドウを表示します。

上部メニューバーから「ウィンドウ」をクリックし、最低限必要な以下の３つにチェックを入れましょう。

カラー：要素の色情報の取得
プロファイル：要素のサイズや装飾関係の取得
レイヤー：全要素の一覧と配置関係の表示

Photoshopのウィンドウ設定から「カラー」、「プロパティ」、「レイヤー」を選択

もし上記以外のウィンドウが表示されていて作業の邪魔になる場合は、該当のウィンドウのチェックマークを外すことで非表示にできます。

使用フォントの確認

Photoshopデザイン内のテキストは、PCに搭載されているフォントを使用して表現されます。
この時、ご自身のPC環境に無いフォントが使用されていると、代替フォントに置き換わってしまい、正確な見た目になりません。

もし環境にないフォントが使用されている場合は、該当のフォントをPCにインストールしましょう。

まずは、環境にないフォントが使用されているかどうかを確認するため、上部メニューバーから「書式」→「環境にないフォントを管理」を選択します。

環境にないフォントが見つかった場合、足りないフォントが以下のように一覧表示されます。ここに表示されているフォントをご自身のPCにインストールしましょう。（場合によっては有料フォントを使用していることもあるので、その際はクライアントからフォントデータをいただけるか確認してください）

Google Fontsからインストールする例

Google Fontsにアクセスし、必要なフォント名を検索して、該当のフォントをクリックします。

フォント詳細ページに移動したら、右上の「Get font」ボタンをクリックしてください。

Google Fontsのフォント詳細ページで「Get font」ボタンをクリック

画面が遷移し、これまでに選択したフォントが一覧表示されます。
選択状態のフォントは、画面右上の（鞄）マークをクリックすることで、いつでも確認できます。

他にも必要なフォントがある場合は、同様の手順でフォントを選択状態にしてください。

「Download all」ボタンをクリックで選択状態のフォントを一括ダウンロード、各フォントの右側のをクリックで個別にダウンロードが可能です。

ダウンロードしたフォルダを開き、「.ttf」形式のファイルをダブルクリックします。

以下のようなウィンドウが表示されるので、「インストール」をクリックします。

これで、フォントが自身のPCにインストールされました。
Photoshopに戻り、環境にないフォントの表示がなくなっているか確認しましょう。
（Google Fontsからダウンロードしてきたファイル類は削除して大丈夫です）

※ 上記の手順はあくまで、自身のPC（ローカルな環境）でフォントを使用するためのものなので、公開するWebサイト側には別途フォント読み込みのための対応（scriptタグ埋め込みなど）が必要です。

画像の書き出し方法

Webサイトで使用する画像を、Photoshopデザインカンプから書き出す方法を解説します。
画像の書き出しには、①１枚ずつ書き出す方法と、②一括でまとめて書き出す方法があります。

① １枚ずつ書き出す方法

左サイドのツールバーから「移動ツール」を選択します。

移動ツールで書き出したい画像をクリックして選択すると、該当するレイヤーが選択状態になります。
（画像をクリックせずにレイヤーから直接選択することも可能）

選択状態のレイヤーを右クリックし、「書き出し形式」を選択します。

以下のようなウィンドウが表示されます。

まずは、左上の赤枠エリアで画像サイズを設定します。サイズは原則、2倍サイズである「2x」を選択しましょう。（理由についてはこちらの記事で解説）
[＋]ボタンを押すことで、画像サイズのバリエーションを増やせます。imgタグのsrcset属性で複数サイズの画像を出し分ける場合に使用してください。

続いて、右上の赤枠エリアで画像ファイル形式を選択します。ファイル形式はPNG、JPG、GIFの中から選択可能で、JPGの場合は画像の画質を選択して圧縮することもできます。

最後に「書き出し」をクリックし、保存先の選択やファイル名の入力をして保存します。

SVG形式で書き出すには

最新バージョンのPhotoshopを使用している場合、デフォルトだとファイル形式の選択欄にSVGが表示されません。

書き出し時にSVGを選択可能するためには、設定の変更が必要です。
まず、上部メニューバーから「Photoshop」→「設定（環境設定）」→「書き出し」を選択します。

オプションの「従来の書き出し形式を使用」にチェックを入れ、OKを押して設定を保存します。

これで、画像の書き出し時にSVGを選択できるようになります。

② 一括でまとめて書き出す方法

左サイドのツールバーから「移動ツール」を選択します。

レイヤーが選択状態のまま、上部メニューバーから「ファイル」→「生成」→「画像アセット」を選択します。
「画像アセット」にチェックマークがついていればOKです。

同様の手順で、書き出したい画像を全て「画像アセット」に設定してください。

続いて、書き出す画像のレイヤーをダブルクリックし、レイヤー名を以下のように変更します。

レイヤー名の先頭に「200%<半角スペース>」と入力（画像を2倍サイズで書き出すため）
レイヤー名の末尾に「.png」などの、保存したいファイル形式の拡張子を追加

画像のレイヤー名を「画像倍率(%) 半角スペースファイル名.拡張子」の形式に変更

同様の手順で、書き出す全ての画像のレイヤー名を変更してください。

PSDデータがあるフォルダ内に「〇〇-assets」という素材フォルダが自動生成され、そのフォルダ内に上記手順で設定した画像ファイルが自動的に保存されます。

その後は、画像が変更されたり、ファイル名が変わる度に、素材フォルダ内の画像ファイルも自動的に更新されます。

画像書き出しの注意点

画像を書き出す際には、以下の３つのことに注意してください。

画像の装飾は含めずに書き出す
適切なファイル形式で書き出す
テキストをSVGにする場合、事前にシェイプ化する

注意① 画像の装飾は含めずに書き出す

画像に付いている角丸やドロップシャドウなどの装飾は書き出す画像には含めず、CSSで実装しましょう。
理由は以下の通りです。

JPGの場合、透明度を扱えないため、角丸やドロップシャドウを表現できない
ドロップシャドウを含む画像は、影の領域分だけデザイン上の画像サイズより大きくなってしまう（widthやmarginなどの計算が面倒になる）
後に画像を差し替える場合に、加工した画像を用意しなくて済む

・角丸つきで書き出したJPG画像の例

・ドロップシャドウつきで書き出したPNG画像の例

注意② 適切なファイル形式で書き出す

ファイル形式が不適切だと、画像の見た目が劣化したり、容量が非常に重くなるなどの障害を招きます。
画像のファイル形式（拡張子）は適切なものを選択しましょう。

ファイル形式は、画像の特徴に応じて以下のように選択すると良いです。（画像フォーマットに関する詳しい解説はこちらの記事をご覧ください）

PNG：イラストやロゴなど、色数の少ない人工的な画像
JPG：写真など、色数の多い実写的な画像
GIF：カンプからの書き出しでは基本的に使用しない
SVG：アイコンやテキストなど、色が数色でシンプルな形状の図形

注意③ テキストをSVGにする場合、事前にシェイプ化する

SVGとして書き出したテキストに使用されているフォントが閲覧ユーザーのデバイスに存在しない場合、違うフォントが適用されてSVG画像の見え方が変わってしまいます。
そのため、テキストを文字情報から図形に変換する「シェイプ化」をする必要があります。

まずはSVG画像として書き出したいテキストのレイヤーをクリックして選択します。

選択したレイヤーを右クリック→「シェイプに変換」を選択します。

以上でテキストがシェイプ化され、デバイスのフォントに依存しない（常に同じ見た目の）SVG画像を出力することが出来るようになります。

要素情報の取得

幅や高さ、背景色など、その要素自身の情報を読み取る方法です。

要素を移動ツールでクリック、またはレイヤーを選択すると、プロパティの欄にその要素の各情報が表示されます。

主に以下の要素情報を読み取ることができます。

幅と高さ（width, height）
回転（transform: rotate）
不透明度（opacity）
背景色（background-color）
ボーダー（border）
角丸（border-radius）
影（box-shadow, filter: drop-shadow）

幅と高さ（width, height）

要素の幅（width）と高さ（height）の値はそれぞれ、W, Hと記載された箇所から取得できます。

記入例:

width: 230px;
height: 56px;

回転（transform: rotate）

下画像の赤枠部分が0°でない場合は、要素の回転角度が指定されています。

Photoshopでは反時計回りを正、CSSでは時計回りを正とする点に注意しましょう。

記入例:

transform: rotate(-90deg);

不透明度（opacity）

レイヤーウィンドウ内の不透明度の値が100%でない場合は、要素の不透明度が指定されています。

記入例:

opacity: 0.45;

背景色（background-color）

アピアランス欄の「塗り」と記載されたエリアのボックスをクリックします。

下のようなウィンドウが表示されたら、右上の赤枠部分をクリックします。

下のようなウィンドウが現れ、赤枠部分にカラーコードが表示されています。

記入例:

background-color: #ffffff;

以下のように、レイヤーの「塗り」（または「不透明度」）が100%でない場合は色が透過されているので、CSSにはRGBA形式で記載します。

記入例:

background-color: rgba(255, 255, 255, 0.5);

ボーダー（border）

アピアランス欄の「線」と記載されたエリアから、ボーダー色（border-color）とボーダー幅（border-width）を取得できます。（ボーダーのカラーコード取得方法は背景色と同様です）

記入例:

border: 1px solid #2099EB;

角丸（border-radius）

下画像の赤枠部分が0でない場合、角の丸み（border-radius）が指定されています。

記入例:

border-radius: 20px;

影（box-shadow, filter: drop-shadow）

シャドウがついている要素には、該当のレイヤーに「ドロップシャドウ」という表示が出ています。
「ドロップシャドウ」の文字をダブルクリックしてください。

以下のようなウィンドウが表示されます。

確認するポイントは以下５つです。

カラー：シャドウの色
不透明度：シャドウの不透明度（RGBAにおけるα値）
角度：光源の位置
距離：シャドウのオフセット（box-shadowにおける<offset-x>または<offset-y>）
スプレッド：シャドウの端のぼかし（box-shadowにおける<spread-radius>）
サイズ：シャドウのぼかし（box-shadowにおける<blur-radius>）

上画像の例では、角度が90°なので光は上方向から当たっていることになり、シャドウは下向きに発生します。
そのため、X方向のオフセットは0、Y方向のオフセットが3pxとなります。

記入例:

box-shadow: 0 3px 20px rgba(0, 0, 0, 0.4);
  /* or */
filter: drop-shadow(0 3px 20px rgba(0, 0, 0, 0.4));

（通常はbox-shadowを、PNG画像など透過性のある要素に影をつける場合はfilter: drop-shadowを指定します）

要素間の距離（余白）の取得

移動ツールで基準となる要素をクリックして選択状態にし、command ⌘ キー（Windowsの場合Ctrlキー）を押しながら距離を測りたい対象にマウスカーソルを合わせると、２つの要素間の距離が表示されます。

margin

記入例:

margin-top: 40px;

padding

記入例:

padding: 20px 69px 18px;

command（Ctrl）キーを押しながらホバーで取得できない場合

要素によっては、command（Ctrl）キーを押しながらホバーで距離が取得できない場合があります。
そのような場合は、以下２つの方法で要素間の距離を測定できます。

ものさしツールで測定
長方形選択ツールで測定

① ものさしツールで測定

ツールバーから、「スポイトツール」を長押し又は右クリック→「ものさしツール」を選択します。

距離を測りたい要素の端から端までをドラッグし、直線を引きます。
（shiftキーを押しながらドラッグすることで、水平・垂直な線が引きやすくなります）

測定した数値は画面左上に表示されています。（表示されていない場合、メニューバーから「ウィンドウ」→「オプション」にチェックを入れてください）
水平線の場合はW、垂直線の場合はHの値を使用します。

② 長方形選択ツールで測定

まずは、上部メニューバーから「ウィンドウ」→「情報」にチェックを入れ、情報ウィンドウを表示します。

ツールバーから「長方形選択ツール」を選択します。

距離を測りたい箇所に長方形を作成します。

作成した長方形の幅・高さは、情報ウィンドウ内のW・Hに記載されているので、これらの数値を使用します。

文字情報の取得

テキスト要素を選択状態にすると、プロパティ内の文字というエリアに、テキストの文字情報が表示されます。

テキスト関連の以下のCSSプロパティに相当するデータを取得できます。

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

font-family

記入例:

font-family: "Outfit", sans-serif;

font-size

記入例:

font-size: 40px;

rem表記にする場合、対象テキストのfont-sizeを、ルートのhtml要素のfont-sizeで割った値になります。
（上の画像の場合、html要素のfont-sizeが16pxなら、40 / 16 = 2.5rem）

記入例:

font-size: 2.5rem;

font-weight

記入例:

font-weight: bold;
  /* or */
font-weight: 700;

text-align

記入例:

text-align: left;

line-height

行送り（行の高さ）を指定するプロパティです。

px単位で表記されていますが、line-heightの値は倍率（行送りの値 / フォントサイズ）で指定することが推奨されます。上の画像の場合、line-heightは 32 / 16 = 2 となります。

記入例:

line-height: 2;

letter-spacing

文字の間隔を指定するプロパティです。
「VA」の値を使いますが、この値をそのままCSSに記述するわけではありません。

letter-spacingに記述する値は、（VAの値 / 1000）という計算で求められます。（単位はem）
上の画像の場合、30 / 1000 = 0.03em となります。

記入例:

letter-spacing: 0.03em;

color

「カラー」と記載されたエリアのボックスをクリックします。

下のようなウィンドウが表示されるので、赤枠部分からカラーコードを取得できます。

記入例:

color: #2099eb;

まとめ

Photoshopのデザインカンプ（PSDデータ）からコーディングを行う方法について解説しました。

Photoshopは使用人口がとても多いデザインツールですので、使いこなせれば仕事の幅は大きく広がります。
是非この記事を参考に、使い方をマスターしていただけると嬉しいです。

現在Web制作を学習中でこれから実案件に臨むという方は、Photoshop・Illustrator・XDを使用するためにも、Adobe CCコンプリートプランを購入することが必須になります。
以下の記事で4万円以上安く購入する方法を解説しているので是非ご覧ください。（すでに契約済みの方でも安価なプランに乗り換え可能です）