デザイナーが陥りがち！コーディングしにくいwebデザインを改善する12の方法

Webデザイナーとコーダーが分業でサイトを作成する場合、コーダーから「このデザインは予算オーバーだよ！」と言われたり、デザイナーから「イメージ通りにコーディングして！」と要求されたり、お互いの主張がぶつかることがあります。とはいえ、どんなデザインもコーディング作業を経なければユーザーには届きません。そこで今回は、コーダーから「このデザインはコーディングしにくいよ！」と言われないように、Webデザイナーが知っておくべきコーディングしやすいデザインについてまとめてみました。

レイヤー整理の改善点

一人のWebデザイナーがサイトのデザインからコーディング作業までを一手に行うなら、PSDファイル上で全ての素材が雑多に羅列されていようとデフォルトのまま「新規レイヤー1」になっていようと、作業効率にさほど大きな影響はないでしょう。

しかし、チーム内で複数のデザイナーが作業を分担している場合、もしくはWebデザイナーから受け取ったデザインカンプを元にコーダーがコーディング作業を行う場合は、下記の2点を満たせるようにレイヤーを分かりやすく整理しておく必要があります。

▼レイヤー整理の必須ポイント

• 誰であろうとレイヤーパネルを一目見ただけで「全体の構造」がイメージできる
• 各パーツがどこにあるのかが一目瞭然で、「書き出し」が簡単にできる

ここからは、コーディングの作業効率がアップするレイヤー整理のポイントについて個別に見ていきましょう。

セクションごとに意味のある名前でフォルダ分けする

コーディング作業において「探している素材に辿り着けない！」という状態は、工数のムダ以外の何物でもありません。

特に、要素が多ければ多いほど重要になってくるのがレイヤーのフォルダ分け！セクションごとにグループ化し、フォルダに意味のある名称をつけておくだけでコーディング作業の効率が格段にアップします。

フォルダ分けする時のレイヤー名に厳密なルールはありませんが、下記のようにWeb制作に携わっている人なら誰もが直観的に理解しやすい名称が良いでしょう。

▼フォルダ名の一例

• ヘッダー：header
• グローバルナビゲーション：navまたはgNav
• サイドバー：side
• メインビジュアル：mv
• コンテンツ：content
• ロゴ：logo
• フッター：footer

全角文字やスペースを使わない、連番は「1、2、3」ではなく「01、02、03」にするなどレイヤー名に関するルールを社内で統一しておくと、より作業効率が上がります。

デザインとレイヤーの階層を統一する

フォルダ分けする時に、階層を明確にしておくのもレイヤー整理の重要な要素です。

ただグループごとにフォルダ分けするのではなく、レイヤーパネルを見ただけで直感的に階層が分かるよう、Webデザインの流れとレイヤーの流れを統一させておきましょう。

この一手間を加えるだけで全体の構造がイメージしやすくなり、コーディングの書き出しにかかる時間が節約できます。

また、ヘッダーやフッターは共通パーツとしてリンクファイル化しておくと、一度の修正で全てのオブジェクトが更新される分、作業の手間が省けます。

前景と背景を別フォルダに分けて並べる

確かに、ボックスシャドウや半透明など一つの画像として書き出しするものは、関連するパーツを1つのフォルダにまとめておくと便利です。

しかし、シャドウや半透明画像を多用する場合は前景と背景を別フォルダに分けて並べておく方が理想的！これらの要素が多いデザインは、コーディングする前に前景と背景を個別にスライスしておく必要があるからです。

また、あまりにも画像やバナーなどが多くてフォルダが増えすぎてしまう場合は、別のデータとして編集できるスマートオブジェクトを活用するのも賢い方法です。

ホバーなど状態が変化する要素のレイヤー整理

ホバーなどオンマウスで状態が変化する要素のレイヤーを整理する方法は、下記の2種類があります。

• 通常のレイヤーパネル：「btn hover」と「btn defaule」に分け、カラーで色分けする
• レイヤーカンプ：あらかじめ変化前と変化後のホバーイメージを登録しておく

何度も表示と非表示を切り替えながら行う作業は、とても手間が掛かります。

その点、Photoshopのレイヤーカンプ機能ならあらかじめ2つの状態を登録しておくだけで、切り替えが簡単になるのです。

不要な非表示は消去し、ロックは外しておく

「PSDファイルに含まれている全ての要素を〇〇までにコーディングしなければ！」と考えているコーダーにとって、必要のない要素は厄介な存在です。

デザイナー側が下記の2点を考慮して、ムダな作業に時間を費やすリスクを未然に防いであげましょう。

▼コーダーに渡す前の注意点

• 必要のない要素は非表示ではなく消去しておく
• 保存時に全レイヤーのロックを外しておく

とはいえ、デザイナーの立場では「後で必要になるかも…」「こっちのデザインの方が採用されるかも…」と、なかなか消去しづらいのも事実。

そんな時は、「不要」のフォルダを作って残しておきたいレイヤーをまとめておきましょう。

画像の扱い方とレイアウトに関する改善点

Webデザイナーが苦労して仕上げたデザインも、いざコーディングしてみると意図した通りに表現できないことがあります。

特に、画像サイズやレイアウトに関する不具合が発生すると、一からコーディングのやり直しを迫られることも珍しくありません。

ここからは、画像やレイアウトの扱い方について解説します。

余白・インナー幅・行間をルール化する

コンテンツデザインの統一性は、SEOにとっても重要なUI（ユーザーインターフェイス）やUX（ユーザーエクスペリエンス）に直結する要素です。

ところが、余白とインナー幅の比率がページごとに違っていたり行間がバラバラだったりすると、ユーザーに「見にくいサイトだな」「使いづらそう」という印象を与えてしまいます。

コーダーが「これってミスなの？」「何か理由があるのかも…」と迷わないように、デザイナーの意図が正確に伝わる基本ルールを決めておきましょう。

単位をmmではなくpxで統一して端数を出さない

まず大前提として、画像やボタンなどのサイズはpxで統一するのがWeb業界の基本です。

そのうえで、小数点以下の端数が出ない「偶数の整数値」に統一しておきましょう。

もちろん、コーディング時に調整は可能ですが端数や奇数の整数値には下記のようなリスクがあるのです。

▼端数や奇数の整数値によるリスク

• 画像を縮小した場合：元画像に比べてエッジがぼやけてしまう
• 奇数の整数値：割り切れないため、SPサイトで表示にズレが生じる

技術的な面だけでなく、デザイナーのこだわりなのか意図的な意味はないのか、コーダーを迷わせないようにするのも効率化に繋がるはずです。

基準点を揃えてスペースをルール化する

基準点が不明だとユーザー視点で見栄えが悪いのはもちろん、位置設定を1つずつ個別にコーディングしなければなりません。

こういった細かい作業の手間を省くには、基準点となる要素から上下左右までのスペースをルール化しておくのが一番の近道です。

コンテンツ幅やカラム幅を統一する

カラム落ちや余白のズレといった不具合の要因として、画像サイズのバラつきが挙げられます。

特に、複数の画像を並べて掲載しているコンテンツに多く見られる現象で、たとえ正しいサイズでコーディングしていても、ほんの1pxでも画像のサイズが異なるだけで全体のバランスが崩れてしまうのです。

あらかじめコンテンツ幅やカラム幅を統一し、その範囲内で納まる画像サイズに揃えておきましょう。

テキストに関する改善点

Webデザイナーにとっては、テキストもデザインを構成するために欠かせない要素です。

ここからは、フォントの単位をはじめ使用する種類やデバイスによる影響などについて解説します。

文字の単位を統一する

結論から言うと、文字の単位は最もポピュラーな「rem」をはじめ「px」または「em」のどれを使用してもOKですが、コーディングのしやすさを考えると1つの単位に統一しておく必要があります。

とはいえ、「px」にはCSSでフォントサイズを指定した時に小数点が意味をなさない、実際の大きさが異なるなどの問題点があるため、「rem」または「em」の2択が現実的です。

WEBフォントで使えるものを把握して制作する

フォントはサイト全体のデザインの中核を担う要素ですから、Webデザイナーとしてはこだわりたいのも当然でしょう。

一方、コーダーとしてはデザイナーの意図を忠実に表現しようとはするものの、基本的にシステマチックに淡々とコーディング作業をこなしていきます。

このギャップを埋めるには、ユーザーがどのデバイスで閲覧しても同じように表示されるWebフォントを選択すべきでしょう。

特に、吹き出しなど画像に文字の要素が必要な場合は、画像化するよりWebフォントをテキストとして重ねた方がSEO的に有利です。

ちなみに、「日本語対応のWebフォントを無料で使いたい！」という方は、下記の記事を参考にして下さい。

▼関連記事

改行・行数・文字サイズはデバイスによって変化する

ユーザーがWebサイトを閲覧するデバイスによって、あらかじめ流動的に変化する要素を想定しておく必要があります。

たとえデザイナーがPC上で作成したデザインカンプでは1行で納まっていたとしても、スマホで見ると文字サイズが変更されて2行として表示されることも少なくありません。

あらかじめ、改行、行数、文字サイズが変化しても対応できるようなデザイン面での工夫が必要です。

まとめ

デザイナーの仕事はあくまでデザインですが、だからと言ってコーディングを無視したデザインは考え物です。

デザイナーの意図が読み取れずにコーダーが悩んでいる時間を節約できたら、作業効率はかなり改善されるはず。

コーダーのリクエスト全てに答える必要はありませんが、まずは両者の認識を統一するためにルール作りからはじめてみましょう。