こんにちは、Webディレクターの小川きぬです。

経歴としては1年ほどWebコーダーとして制作に従事し、その後Webデザイナーとしても経験を積みました。コーディング・デザインのどちらも制作者として取り組む中で、双方の連携がどれだけスムーズに取れるかで、かかるコストが圧倒的に変わると体感しています。

今回は、1年間Webコーダーとして色んな方のデザインを見てきた中で、「こういうデザインはとてもコーディングしやすかった」「こういうデザインはコーディングに苦戦した」というポイントをまとめています。

前提として、画像コーディングではなくSEOを意識したHTMLでのコーディングがしやすいかどうかの視点となっております。

コーディングを想定したデザインにしてある

一番大事なポイントだと思っているのが「コーディングを想定したデザインにしてあるか？」です。

例えば下記のようなデザインは、「どういう風にコーディングすればいいんだろう？」と思わず悩んでしまいます。

• 画像化が必要な文字の装飾が多数ある
• 画面サイズごとのデザインが想起しにくい（600〜1000pxあたりの画面サイズで崩れやすいデザインになっている）

Webデザイナーと謳っている以上、コーディングに落とし込む前提でのデザイン作りはとても重要だと思っています。
そのため、デザイナーがコーディングについて完璧でないにしてもきちんと理解していて、その上でデザインを作成することが大事だと感じています。

コーダーから「ここってどういう風に実装すればいいでしょうか？」と聞かれた時に、HTML・CSSの言語で回答ができるようなデザインになっているとベストです。

Webデザインに適したツール（XD、Figma）で作成してる

実践している制作会社が意外と少なく、コーダー泣かせなのが”XD、Figma以外を使ったWebデザイン”です。
具体的には”Photoshop、Illustratorなどグラフィックデザインに特化したツールを使ったWebデザイン”になります。

XDやFigmaはここ数年で生まれたツールのため、昔からデザイン業務を行なっている方はPhotoshop、Illustratorを使っていることが多いのが現状です。ただ、このPhotoshopとIllustratorを使ったデザインがコーディング作業時間を1.5倍にしている、と言っても過言ではありません。

なぜかというと、

• 機能が多数あるため初心者にはかなり使いにくい
• 余白サイズを図るのが難しい（四角ボックスを使って図るという原始的な方法になる）
• 画像が書き出しにくい
• 透明度（opacity）の数値がわかりにくい
• 影（box-shadow）の数値がわかりにくい
• ファイルが重く動きが遅くなりやすい

など、挙げ出すとキリがないぐらい出てくるのですが、とにかくコーディングする上では使いにくいことこの上ないのです。

ただ、BtoCのLPに代表されるような”装飾が多いデザイン”では圧倒的にPhotoshopやIllustratorが向いているため、必ずしもXD・Figmaが優れているというような話ではありません。画像コーディングでOKなデザインであれば、PhotoshopやIllustratorを使っていただく方がいいのかなと思っています。

ちなみに「Sketchはどうですか？」という話なのですが、ツールとしては使いやすくて良いものの、有料のためオススメできません。
過去に一度、Sketchを使用したデザインで作業したことがあるのですが、2ヶ月間の作業だけで1年分の費用（1万円ほど）がかかってしまいとても辛い思いをしました。（有料という点では、PhotoshopやIllusratorも同様ですが）

XDやFigmaは無料で使えるという点でも、Webデザインに適したツールであると考えています。

全てのページが1つのファイルにまとまっている

こちらもPhotoshopやIllustratorを使っている方に多い現象なのですが、”1ページずつ別ファイルで作成している”というものです。

同じデザイン部分を共通化したり、全体を見ながらコーディング設計をしていくコーダーにとって、この”別ファイルで作成されている”というのは無駄な作業が発生しやすい状態です。例えば、全てのデザインを一度に開くとPCが重くなり作業が遅くなったり、タブを何度も切り替えて確認する作業が生まれてしまいます。

私も以前は、Illustratorでもらったデザインファイルを画像ファイルにして、全てをXDに移し全体を見ながらコーディングするということもやっていました。（面倒ですが、これをやっておくと後々捗ります）

ファイルが重くなるため別ファイルに切り分けてもらっているかと思うのですが、せめて”数ページずつ同じファイルにする”、”PC、SPの場合だけファイルを分ける”など、可能な限り同じファイルにまとめていただきたいです。

文字サイズ・色・余白が揃っている

“共通化が命”のコーダーにとって、文字サイズやカラーコード、余白のサイズがバラバラな状態は非常にコーディングがしにくくなります。

• タイトルの文字サイズが統一
• カラーコードが揃っている
• セクション間の余白が統一されている

など、しっかり統一性を持たせた上でデザインしていただくとコーディング速度が上がります。

ただ、あえてサイズを変えたり色を変えたりしている部分もあるので、そういう場合は「あえてここは変えています」というような旨を記載しておくと良いかなと思います。（「ミスなのか？」「あえてそうしているのか？」がわからないため）

Webでの商用利用が可能なフォントを使用している

グラフィックデザインを主としていた方が陥りやすいのが”Webでの商用利用が不可なフォントを使ってしまう”というものです。

具体的には

• Adobe Fonts
• モリサワフォント

などの有料フォントは、コーディングする場合は使用ができません。

より詳しく言うと、”Webサイトを保持する企業あるいは個人（＝エンドクライアント）が有料フォントのライセンスを持っていないと利用ができない”という状態になっています。

グラフィックデザインではデザイナーが所持していれば使用OKなのですが、Web上で使うとなるとエンドクライアントが所持している必要があるのです。

ちなみに、Webデザインとして最も使い勝手が良いのがGoogle Fontsで、こちらはWeb上で使っても全く問題がありません。
Adobe Fontsやモリサワフォントの代替となるようなフォントも多数あるので、ぜひともGoogle Fontsを使っていただけたらと思います。

コンテンツ幅が指定してある

コンテンツ幅とは何かというと、”コンテンツに関わる文字あるいは画像などが収まっている幅”という意味になります。
要は、画面サイズを拡大していった時にコンテンツの最大幅をどのぐらいにするか？という指定です。

なぜコンテンツ幅の指定が必要かというと、例えば横並びの要素があった時に、コンテンツ幅の指定がないと画面幅に合わせて要素が無限に大きくなってしまったり、左右に離れていって中央に余白ができたりといった実装になりかねません。

こういった現象を避けるために、最大幅を設定することでどの画面サイズで見ても綺麗にデザインが見えるように設計しておくことがオススメです。

大体800px〜1000pxぐらいでコンテンツ幅を設定しておくと、どの画面サイズでも崩れにくいデザインができるかと思います。
デザインツールのガイドラインを引いておくとコーダーも視覚的にわかりやすいため、ぜひ実践してみてください。

左右の余白幅が設定されてる

コンテンツ幅の指定と似たような話でもう一つ。今度は、画面サイズを縮めていった時に「左右にどれぐらい余白を設けておくか？」という設計です。

なぜ余白幅の指定が必要かというと、コーダーが一番悩みやすいポイントとして、PCデザインとSPデザインの間である600px〜1000pxぐらいの時にどういったデザインにするか？という部分があります。

この時、コンテンツ幅よりも画面サイズが狭くなった際は両側に必ずこれぐらいの余白を設けておいてね、という指示も作っておくと、スムーズにコーディングすることができます。

私の場合は、PC版のデザインの両端に40pxほどの余白を開けたガイドラインを引いており、コンテンツ幅よりも画面サイズが狭くなったら両端に40pxずつ余白をつけてね、という指示をしています。

アニメーションの参考サイトを用意している

デザインで表現しきれないものの一つとして”アニメーション”があります。

ファーストビューはどんな動きをするのか、ボタンをホバーした時はどうなるか、などコンテンツごとの動きを決めておくのもデザイナーの仕事に含まれる場合が多いかと思います。

その時、頭の中で「こういう感じ」とイメージするだけではなく、参考サイトを探して提示してもらえるとコーダーとしては非常に助かります。スピード感や細かい動きのイメージをデザイナーとすり合わせる必要があるからです。

この時、参考サイトが既存のWebサイトではなくコードも併記してあるTipsサイトだとなお助かります。そのコードを転記するだけで済むからです。

たまに、予算が少ないにも関わらず大手企業が作ったリッチなアニメーションを提示される時がありますが、難しい実装を伴ったアニメーションは工数がかなりかかってしまうので注意です。
必ず「このアニメーションは実装可能でしょうか？」とコーダーに確認してから取り入れていただければと思います。

指示書がデザインに書き込んである

これは賛否両論あるかもしれませんが、個人的に指示書がデザインに書き込んであると非常に助かります。

指示書というのは、例えばリンク先のURL、アニメーション、OGP情報などデザインでは汲み取れない部分の指示をテキストを通じて行うものです。

指示書を別ファイルにてまとめる場合もあるかと思うのですが、情報が散乱していると見落としが発生しやすいためデザインに書き込んであるのがベストだと思っています。

日々いろんなデザイナーのデザインをコーディングしている身としては、情報が一つのファイルにまとまっているのはとても作業が進めやすいです。

さいごに

デザイナーとコーダーというのは、仕事の性質上対立しやすい関係かと思います。

思うような成果物が来なかった時はついつい「こちらの苦労をわかってくれていない」と考えてしまいますが、実は「ただ知らないだけ」なのだと思っています。

双方に「こうしてもらえるとすごく助かります」と伝えることで、もっとスムーズに、そして気持ちよく仕事が進められるのではないでしょうか。

この記事を読んで心に残ったものがありましたら、ぜひ実践していただければ幸いです。