PSD作成時の10のポイント｜デザイン段階でコーディング工数が大幅に削減できる方法！

こんにちは、Webデザイナー兼フロントエンドエンジニアの薮口です。

Webサイトを制作するためにはデザイン・コーディングの業務は必要不可欠です。

少ない工数でコーディングを行うためには、デザイン段階でコーディングのことを意識しながらデザインを作成する必要があります。

しかしながら、フロントエンドの知識をお持ちでないデザイナーの方々は「そもそも何を意識すればいいのかわからない」と思っておられる方々も多いのではないでしょうか。

そのような方々のために今回は「デザイン段階で意識するだけでコーディング工数が大幅に削減できるPSD作成時の10のポイント」をご紹介したいと思います。

1. アートボードの横幅、コンテンツ部分の横幅を大きくしすぎない

記事執筆時点（2021年2月）では、世界のディスプレイモニター解像度シェア率の1位は「1920×1080」です。
■参考サイト：https://gs.statcounter.com/screen-resolution-stats

Webサイトではメインビジュアル部分などに画面いっぱいのサイズで画像を配置することが多いため、アートボードの横幅を1920pxにされている方も多いのではないでしょうか。

しかしながら、「1920×1080」のモニターを使用されている方でも、ブラウザを全画面表示にしてWebサイトを閲覧することは少ないと思います。

そのため、シェア率2位である「1366×768」に合わせ、アートボードの横幅は1366pxにすることがベストです。

「横幅1920pxで閲覧した際に解像度が足りなくなるのでは？」とお思いの方もおられるかもしれませんが、こちらの点につきましては、8番目のポイントとして後述する「画像のスマートオブジェクト化」で解決ができます。

また、昔はサイト内のコンテンツの横幅を960pxくらいで作成することが主流だったのですが、ユーザーの使用モニターの大型化に伴い現在は1000～1200pxで作成されたサイトが増えております。

僕の場合はBootstrap 4を基にした独自のグリッドシステムを使用することが多いため、Bootstrap 4の一番大きなブレイクポイントである1200pxに合わせて、コンテンツの横幅は1200pxにしております。

※5では更に大きな1400pxのブレイクポイントが追加されましたが、正式リリース前なので採用はしておりません。
■参考サイト：https://getbootstrap.jp/docs/4.5/layout/overview/

2. レイヤーをオブジェクトごとにグループ分けし、グループ順をWebサイトのコンテンツに合わせる

PSD内のレイヤー整理はエンジニアにサイトの構造を伝えるための大きなヒントとなります。

見出し・テキスト・画像・ボタンなどのオブジェクトごとにグループ分けされており、更にそれらが配置されている大きなセクションごとにグループ化して適切な命名がされている状態が望ましいです。

オブジェクトというと何だか難しい印象を受けるのですが、オブジェクト＝Webサイトを構成しているパーツと捉えるとわかりやすいです。

以下のXD用のUIキットのコンポーネント部分などが非常にわかりやすくまとめられているため、参考にしてください。
■参考：https://www.behance.net/gallery/67284971/Wires-jp

また、グループ順についてはWebサイトの構造に合わせて上から、「ヘッダー → メインビジュアル → 各セクション → フッター」といった順で並べるとコーディング時に該当箇所を探すことが容易になります（デザインの構造上、順に並べると不具合がある場合は例外です）。

レイヤーを整理した際にコーディングに使用しない不要なレイヤーが残っている場合もあるため、デザインデータを渡す際に削除しておきましょう（全てのグループを閉じておくと更に親切で好印象です）。

3. フォントサイズやオブジェクトのサイズや位置の指定小数点以下の数字、奇数を設定しない

普段、Webサイトを閲覧している際に画像の縁や画像内の線が滲んだような画像を見かけたことはありませんでしょうか。

その原因はPSDでのオブジェクトのサイズや位置の指定などに小数点以下の数字が入っていることにあります。

PCなどのモニターでは1px単位のドットでしか画像などを描画できません。

しかし、サイズ指定に小数点以下の数字が入っていると端数を1pxのドットとして切り上げて書き出されてしまうため、結果的に滲んだような画像が出来てしまうのです。

拡大・縮小ツールを使ってオブジェクトのサイズを調整している際に起きやすいのですが、CSSでオブジェクトの見た目を作る際にも、エンジニアが小数点以下を切り上げ・切り捨てして微調整するという無駄な工数が発生してしまいます。

百害あって一利なしですので、気を付けましょう。

また、オブジェクトのサイズに奇数を指定することも極力避けましょう。

オブジェクトを上下や左右で中央揃えする際に1pxずれてしまう上に、折角スマートフォン用に2倍サイズでデザインを作成しても、実際にコーディングする際には半分の数字でサイズを指定するため、奇数を半分にした際の小数点以下の端数を微調整しなければなりません。

1つ1つの修正は簡単ですが、数が多くなればなるほど不要な工数が発生します。

4. フォントサイズや行間・文字間は極力統一する

デザインに使用するフォントサイズのパターンを事前に決めておくことで、都度CSSでフォントサイズを指定する必要が無くなるため、コーディング工数が大幅に削減できます。

ベースとなるフォントサイズはスマートフォン閲覧時に14px、PC閲覧時に16pxにしておくと見た目のバランス・ユーザビリティが良くなります。

※雰囲気重視のサイトの場合はPC閲覧時にも14pxで作成するケースもあります。

ベースとなるフォントサイズ以外にもタイトルや注釈などでサイズ違いが必要になりますが、その際のサイズはPhotoshopのデフォルトの選択肢の

10px・12px・14px・16px・18px・24px・30px・36px・48px・60px・72px

から選ぶようにするとバランスがよくなる場合が多いので、悩む時間も削減できます。

行間は基本的にフォントサイズ×1.4～1.6で統一し、ゆったり見せたいテキスト用にフォントサイズ×1.8～2のバリエーションも用意しておくと使い勝手が良いです。

また、font-feature-settingsというCSSプロパティでWebサイトの自動カーニングを行うことが出来るのですが、最近多くのサイトで使用されているWebフォントであるNoto Sans JP（源ノ角ゴシック）はGoogle Fontsから読み込むと自動カーニングが効きませんので注意が必要です。

自動カーニングは極力使わないようにしましょう。

※font-familyの指定によっては、ローカルにインストールしているNoto Sans CJK JPが先に読み込まれて自動カーニングが効いている場合もありますが、肝心の一般ユーザーの環境では文字間が詰まっておらずデザインが崩れてしまうケースもあります。

5. セクション、オブジェクト間の余白を統一する

セクションやオブジェクト間の余白が統一されていない場合は、都度CSSで余白を変更する必要があり、コーディング工数が余計にかかってしまいます。

余白の統一をエンジニアの判断に委ねるケースもあるのですが、エンジニアにデザイン知識がない場合はデザイナーの意図していない見た目のWebサイトに仕上がってしまう恐れがあるため、デザインのプロであるデザイナーが事前に余白を統一しておくべきです。

僕はデザイン制作時にセクションごとの上下の余白は60～120px、見出しの下の余白は30～60pxの範囲でサイズを決め、全体に統一することが多いです。

また、グリッドを意識したデザインにする際には、カラム間の余白であるガター幅も統一してくことも重要です。

複数サイズが必要になるケースは少ないため、30～50pxくらいの間で統一する幅を決めておきましょう。

全てのデザインが完了した後に幅を変更するとなるとデザイン修正に手間がかかるため、早めの段階で統一しておくとよいです。

6. オブジェクトを共通パーツとして使用することを意識する

サイト内で使用するオブジェクトを共通パーツとして意識してデザインすると、コーディング時は一度作ったオブジェクトを流用することができるため、新規ページの作成の際にほぼコピー＆ペーストで済むケースがあります。

トップページのデザインを作成した段階で、共通で使えそうな見出し・ボタン・レイアウトなどをまとめておき、下層ページに流用することで不要なバリエーションを増やしてしまうことを防げる上にサイトに統一感を出すことができ、デザイン段階での工数も削減することが出来ます。

また、その際にサイト内で使用する色などのルールを決めておくとよいでしょう。

7. オブジェクトの内容量の増減に耐えられるようなデザインをする

デザイン段階ではダミーテキストを使用することもあり、コーディング段階で正式なテキストに差し替えた際に、レイアウトが崩れる・見た目に違和感が出てしまうなどのケースがあります（見出し・ボタン・カード式レイアウトなど）。

以下のような対応を行うことで、そういった事態を避けることができます。

コーディングを工夫することで対応できる場合もあるのですが、デザイン段階でもある程度意識しておくことで、トラブルを未然に防げる可能性が高くなります。

8. 画像を表示サイズよりも大きなサイズでスマートオブジェクト化しておく

昔はスライス機能を使って画像を切り出すことが多かったのですが、現在は画像アセットを生成する方法がスタンダードです。

画像アセットはPSD内のレイヤーやグループに「ファイル名.拡張子」というルールで命名すると、自動的に画像を書き出してくれる機能です。

スライスの方が適している場合もあるのですが、画像アセットには以下のようなメリットがあります。

現在はRetinaディスプレイを使用しているスマートフォン端末も多く、最低でも表示サイズの2倍サイズの画像でなければ、画像がぼやけて表示されてしまいます。

そのため、「ファイル名.拡張子, 200% ファイル名@2x.拡張子」のようにサイズ違いの画像を生成することになるのですが、その際に表示サイズと同じサイズで画像をスマートオブジェクト化していると解像度が足りず、ただ単に画像サイズを大きくしただけの粗い画像が出力されてしまいます。

そちらの点を防ぐためには、使用する画像を表示サイズよりも大きなサイズでスマートオブジェクト化しておくことが必要になります。

その際のサイズはレスポンシブのことも考えると計算が難しい場合が多いので、コンテンツ幅～1920pxくらいにしておき、書き出された画像が粗い場合のみ更に大きなサイズでスマートオブジェクト化し直す形が経験上スムーズです。

※あまりにも大きいサイズでスマートオブジェクト化すると、PSDのファイルサイズが大きくなってしまうため注意です。

9. SVG画像を配置する場合はスマートオブジェクトではなくシェイプで配置する

アイコンなどのSVG画像をそのままPSDに配置するとスマートオブジェクトとして配置されてしまいますが、スマートオブジェクト化したSVGをアセット生成すると正しく生成されないケースがあります。

その際は、使用するSVG画像を一度Illustratorで開き、PSDにコピー＆ペーストするとシェイプで配置することができます。

また、色を変更する際にはカラーオーバーレイなどは使わず、シェイプの背景色を変更してください。

デザイン提出後にアイコンが変更になる可能性がある場合は、一旦スマートオブジェクトで配置し、デザイン校了後にこちらの作業を行う方が工数削減できる場合もあります。

10. ホバー時など状態が変化した際のデザインも用意する

多くのサイトではリンク部分やボタンなどにマウスカーソルがホバーした際に見た目を変化させることで、ユーザーにクリック可能な範囲ということを伝えます。

ホバー時に透明度を変化させる程度であれば作成不要ですが、背景色が変化する・アイコンが動くなどの状態変化がある場合は変化後のデザインも作成しておき、どのようなアニメーションをして欲しいかなどを伝えることで、デザイナーの理想通りの状態変化が実現できます。

その際には、グループ名にホバー用であることを明記した上で非表示にしておくと分かりやすいです。

また、ハンバーガーメニューやアコーディオンメニューが開いた際の見た目、ヘッダー追従時の見た目の用意もしておくとよいです。

最小限の工数で同じゴールに到達できるデザイン制作

以上の点を全て意識しても、ユーザー視点では、出来上がったWebサイトに大きな差があるようには思われないでしょう。

ですが、最小限の工数で同じゴールに到達することができる上に、削減できた工数でWebサイトを更に良くするための工夫をすることもできます。

クライアントに期待以上に喜んでいただける上に、チーム内の関係も良好になるのでいいことづくしです。

この機会に、コーディングを意識したデザイン制作にチャレンジしてみてはいかがでしょうか。