デザインデータをコーディングする流れ

仕事でWebデザイナーからデザインデータを受け取り、コーディングするときに気をつける点を書いてみます。

必ず生データをもらうこと

デザインデータは.psdなどデザイン系ソフトで開けるそのままの生データでもらうことが基本となります。レイヤーが統合されたデータだと文字の打ち込みなどの作業が発生するのでお勧めしません。pngなど統合データのみしかもらえなかった場合は納期や費用面などの交渉も必要になるでしょう。

デザインソフトの確認

WebサイトのデザインはPhotoshop、Illustrator、Adobe XD、Sketch、figmaなど様々なソフトで作成されます。各ソフトにより若干扱い方など変わってくるので簡単な操作はできた方がいいと思います。
SketchはMac専用なのでデザインデータがSketchの場合、Windowsで作業している人はAdobe XDで開いて使います。

端数への対応

デザイナーがしっかりデザインしたとしてもデザインソフトによっては小数点が出てしまい画像を書き出したときに隙間が出たりします。特にIllustratorは小数点が出やすいため、ピクセルプレビューを使っても隙間がとれず手動で修正する必要があります。
他ソフトも同様に書き出した画像を目視で確認して、おかしな部分が見つかったら適宜修正していきます。

画像書き出しについて

コーディングするときにデザインデータから画像を書き出す作業をします。デザインソフトが違う場合それぞれ書き出し方法が変わってくるのでこちらも操作方法を知っておいた方がいいでしょう。

Photoshopの書き出し方法

Illustratorの書き出し方法

Adobe XDの書き出し方法

画像サイズはデザインデータを基本としますが、アイコン画像のサイズを統一するとか細かい部分の調整をすることもあります。画像の横幅はブラウザにより画像の縁がぼけると言われていたので許されれば奇数にならないようにしています。アイコンなどのシンプルな画像はSVGで書き出すと容量が軽くなる傾向があります。

アートボードサイズの確認

スマホデザインの場合、Retina対応のため横幅を375pxを倍にした750pxで作られることがあります。文字サイズや画像が倍角になっているので実寸なのか倍デザインなのか先に確認しておきましょう。

統合データをもらうこと

生データの他にPDFやpng、jpegなどの統合データももらうようにします。生データの場合フォントが見つからず別なフォントになってしまうことがあるので実際の表現と変わってしまいます。統合データは実デザインの確認用として使います。

デザインデータをどれだけ忠実に再現するか

デザイナーによってはデザインデータを1pxたりともずれたりしないように作るような人もいれば、余白など細かい部分をコーダーが上手に合わせるよう任せる人もいます。

基本的にデザインデータに合わせてデザインすることが多いですが、どの程度デザインデータに合わせていくのか最初に確認しておくと作業がスムーズに進みます。

動的表現の確認

スライドショーなど動きにあるリッチコンテンツはどう表現するのかの確認が必要です。基本はjQueryのプラグインを使う前提となりますが、クライアントによってはプラグインを指定するケースもあります。CSSアニメーションも同様です。
このあたりはプロトタイピングツールでのアニメーション表現されているといいのですが、今のところ仕事でそこまで作られたデータを見たことはありません。

端末の間の表現

PCデザインとスマホデザインの間にあるWebページの表現の仕方をどうするか確認する必要があります。横スクロールが出てもデザインデータに沿った作りにするのか、ブレイクポイントを使ってレイアウトを変化させつつ見せるのか、確認が必要です。
また、スマホはstatcounterで調べると横幅360pxが多いようですが、横幅320pxでも崩れないようにすることが基本のようです。

不足情報の確認

デザインデータは未完成で送られてくることも多々あります。画像や文章がダミーになっていたり一部コンテンツができていないなどいろいろあります。PCデザインのみでスマホデータがない状態で作ることも多いです。
不足情報は逐次確認して早めにもらえるよう促しておかないと納期ギリギリに来ることがあるので注意しましょう。

Webフォントへの対応

Webブラウザで表示するフォントはGoogle Fontsを始めとしたWebフォントが使えるサービスを使うことが基本となります。こちらもMac、Windows、スマホなどの端末でどんなフォントを使うのか確認しておきましょう。

WebフォントはNoto Sans JPの人気が高いのですが、容量的に重いので一部抜粋するなど対応する必要があります。また、Webフォントのサービスは参加しているフォントメーカーが提供を取りやめた場合使えなくなる可能性がありますのでこちらも注意する必要があります。

画像の切り替え、圧縮

画像はなるべく軽くする必要があるので必要に応じてpngやjpeg、SVGなどファイル形式を変えて対応します。また、画像圧縮サービスなどを使って劣化を少なくサイズを小さくする工夫も必要です。Retina対応する場合、通常と2倍角の画像を使うことになりますが、その切り替えが必要なのか、3倍、4倍にも対応するかどうか確認しましょう。

フォントサイズの対応

フォントサイズはrem単位が多いですね。少し前に流行った62.5%はブームが過ぎているようです。フォントサイズはデザインデータに合わせることが基本となります。フォントも奇数を使うとブラウザにより見え方が微妙に違うケースがあるということで偶数を優先して使うこともあります。

コーディングルール

企業によってはコーディング時にこうして欲しいというルールが提供される場合があります。そのときはルールに従って作業を進めていくことになります。中には細かいルールが決まっていることもありますので、大きく外れないよう気をつけましょう。

実機による検収作業

特にスマホは文字サイズや行間、余白などPCのままだと読みづらくなるので状況によっては全体的に調整する必要があります。スマホは端末の数が膨大なので開発者ツールを基本とし、AndroidとiPhoneの実機1種類を使って確認しています。
今のところIE11はまだ確認対象外にできませんでした。