Photoshopのデザインデータ（PSD）を元にWebサイトのコーディングを行う際、注意しておきたい3つのポイントをご紹介します。基礎的なことですが、各ポイントを押さえることで細部のズレが減少し、全体の完成度をアップできます。
PSDのどこを確認すればデザイン通りに正しくコーディングできるのか。当記事で見ていきましょう。
デザインのルールを理解する
まずは前提として、コーディングの元となるデザインデータのルールを理解する必要があります。
Webデザインのレイアウト・サイズ・余白にはすべて意味があります。好みでどちらでもいいという”遊び”が含まれていることもありますが、重要度の高いものを目立つ箇所に配置したり、要素同士の関連度によって余白を決めるなど、ルールに基づいてデザインされていることが多いです。
ですので、たとえ細部といえど、ズレてコーディングすると全体の完成度が著しく下がってしまいます。
こちらのTCDテーマ（HOMME）の例を見比べてみてください。
- OK例
- NG例
NG例でおかしな点は、次の通りです。
- 画像の配置が左にズレてる
- フォントサイズが異なる
- フォントウェイトが異なる
- テキストの配置がおかしい
- テキストの行間が異なる
細部の差が大きく印象を変えてしまいます。これがサイト全体となるとより顕著になります。
ゆえに各所のレイアウトやサイズ、ルールを理解してからコーディングすることが重要なのです。
デザインのルールが見えてくると、「ここの余白が50pxだから、ここも50pxになるのが自然。」という風に感覚的に理解もしやすくなるはずです。
デザインデータで確認すべき3つのポイント
デザインのルールを理解するためにも、デザインデータ（PSD）をしっかり確認しておきましょう。細部のズレが後々響いてきてしまいます。
1. 要素のサイズを測定する
まずは当たり前ですが、要素のサイズを正確に測っておきましょう。
各パーツの幅（width）高さ（height）を確認します。
対象の要素を選択して、右下のプロパティパネルを確認するとWとHとあります。
Wはwidth、Hはheightです。それぞれ数値を確認できます。
上記例は、茶色の正方形のサイズが、180px × 180pxということです。Ctrlキー（Macの場合は「command」）を押すとガイドラインも表示されます。
2. 要素間の余白を測定する
要素と要素の間の余白がどれぐらいあるのか測っておきましょう。
Photoshopの長方形選択ツールを使うと計測しやすいです。
例えば、テキストとボタンの間を、長方形選択ツールを使って計測すると次のように表示されます。
「H: 50 px」という部分でテキストとボタンの間（高さ）が50pxあいていることがわかります。
各所で高さ（H）と幅（W）を測ってみてください。複数の箇所を測るとデザインのルールが見えてきます。
3. フォントの情報を確認する
フォントまわりの情報を確認するには、テキスト箇所を選択します。
右下のプロパティパネルで、フォントの詳細情報をチェックしていきます。
上記画像からは、以下の情報が読み取れます。
- フォントファミリー：Osaka
- フォントウェイト：レギュラー
- フォントサイズ：16px
また、これ以外に注意しておきたいのが、文字の行間です。
上記画像では、行送りの「41.6 px」から行間（CSSのline-height）に指定する値を導き出せます。
という計算式です。次のような便利なツールもあるので使ってみてください。
>> line-height に使用する計算 | 計算が苦手な文系のための コーディング単位計算ツール
行間が異なると印象が大きく変わります。デザイン通りに正しく再現するために確認しておきましょう。
テキストや画像を入れて確認してみよう
サイズや余白、フォントの情報が確認できたら、ダミーでいいのでテキストや画像を設置してみましょう。
実際にコンテンツを入れてデザイン通りの見た目になるか確認することも大切です。コーディング上は正しいつもりでも、意図した通りに表示されないことがあるからです。
- 各要素のサイズは正しいか。
- 各要素間の余白は正しいか。
- フォントサイズ、タイプは正しいか。
- 意図した行間で表示されているか。
コンテンツを入れた上でデザイン通りになっていれば、正しくコーディングできているはずです。
デザインデータに画像が含まれているなら、それらの画像を書き出して設置すると、クライアントにもイメージが伝わりやすいでしょう。PSDから画像を書き出す方法はこちらの記事で解説しています。
Webサイトのデザインデータは、PSDで共有されるのが主流ですが、そのままサイト上で使うことはできません。 「デザインデータを基に、Webサイトに画像を設置してみたい」ときなどは、PSDから画像ファイルのみを書き出して、それらをアップロードする必要があります。 というわけで今回は、PSD...
まとめ
デザインデータ（PSD）を元に、正確にコーディングするための3つのポイントをご紹介しました。
どれも基礎的なことですが、ピクセル単位でこだわるデザインをコーディングに落とし込むために必要なことです。どこかが疎かになると、サイト全体で違和感を生むことになります。
デザインデータを正確に再現したいなら、チェックポイントを改めて確認してみてください。
WordPressテーマ
コメント