HTML・CSSのコーディングができないWebデザイナーに理解して欲しいこと

HTML・CSSのコーディングができないWebデザイナーに理解して欲しいこと

「Webデザイナーの仕事はWebサイトのデザインを作るのが仕事で、コーディングをやる必要はない。」

「いやいやWebデザイナーの仕事はWebサイトのデザインも作るし、コーディングまでするのがWebデザイナーの役割だ。」

と言った論争がよく業界内で議論されています。

私個人的にはコーディングまでやる必要はないけど、コーディングができると、デザインのクオリティが上がるし、仕事の幅も増えるので、コーディングができないより、できた方が良いという意見です。

またコーディングができるWebデザイナーと、コーディングができない・分からないWebデザイナーとでは、制作するデザインデータの違いがはっきりと分かります。

今回はHTML・CSSのコーディングができないWebデザイナーに、デザインを作るうえで知ってほしいこと、理解してほしいことをフロントエンドエンジニア視点で紹介します。

目次

HTML・CSSのコーディングができるWebデザイナーとできないWebデザイナーの違い

HTML・CSSの設計を理解しているWebデザイナーと、理解していないWebデザイナーとでは、いったい何が違うのか、ということについて先に説明します。

HTML・CSSのコーディングができるWebデザイナーは、HTMLとCSSの設計を理解したうえで、Webサイトのデザインを作っているので、マークアップエンジニア、フロントエンドエンジニアとのコミュニケーションの連携が取りやすいです。

またデザインデータを確認すると、ページの法則性やルール、余白のとり方、h1、h2、h3、pタグなどのフォントサイズのルールなどがしっかり決められています。

さらに気配りのできるWebデザイナーだと、マウスホバー後のイメージやJavaScriptの動きの参考イメージなども一緒に共有してくれます。

逆にHTML・CSSが分からないWebデザイナーの場合は、HTMLとCSSの設計を理解できていない状態でデザインを作っているので、エンジニアとの連携や解釈に齟齬が生まれやすいです。

ここの部分はどうなるのか、クリックしたらどんな動きになるのか、文字数を何行まで表示させるのか。

よく見ると左と右の余白のサイズが違ったり、ボタンのサイズもマチマチだったりなど、コーディングする時に、デザイン作ったデザイナーに細かく確認しなくてはいけないことが増えてきます。

そのため、プロジェクトを進めるうえで、余計な手間や、エンジニアとデザイナーの間でいらない気遣いが発生しやすくなります。

このような状況では良いWebサイトを作ることはできません。

ではHTML・CSSが分からないWebデザイナーは具体的にどんなことに注意してデザインを作ればよいか説明します。

デザインデータについて

少し前まではAdobeのPhotoshopでデザインを作るのが主流でしたが、最近ではSketchやAdobe XDなどを使ってデザインを作るデザイナーも増えてきました。

今回はPhotoshopでデザインした場合のデザインデータの扱いについて説明します。

カラーモードはRGB、解像度は72ppi

WebサイトのデザインをPhotoshopで制作する場合、カラーモードはRGB、そして解像度は72ppiで制作します。

極稀にですが、紙のデザイン出身のデザイナーが作ったデザインデータを確認すると、カラーモードをCMYK、解像度が300ppiになっている場合がありますので注意してください。

余計なレイヤーやグループを削除してデザインデータを軽くする

デザイン確定前なら問題ありませんが、デザイン確定後はデザインデータにある、余計なレイヤーやグループを削除して、なるべくデザインデータを軽くしてください。

これをするだけでデザインデータの送受信や、データを開く時間が短縮できるので、スピードが上がります。

さらに突き詰めるとレイヤー名やグループ名も、ヘッダー、フッター、ナビゲーションなどと意味のある名前を付けるとデザインデータの確認が楽になりますし、クライアントにデザインデータを納品する時にも親切です。

マウスホバー後やハンバーガーメニューが開いた状態もデザインする

マウスホバー後のボタンやリンクのイメージも制作してください。

またスマホサイトのデザインでハンバーガーメニューを設置する場合は、メニューが開いた状態のデザインも作る必要があります。

サイズや余白のとり方について

単位はpxのみで小数点は指定しない

Webデザインのサイズの単位はpx(ピクセル)で指定します。

またそれぞれの要素には小数点を指定しないでください。

グラフィックデザインや紙のデザイン出身の人で、単位がpxではなくpt(ポイント)で指定して作る人が稀にいます。

またCSSで小数点などの端数を指定することは可能ではありますが、できれば小数点のない整数でサイズを指定したもらった方がCSSの設計がしやすいです。

サイズの指定は法則性をもたせる

ボタンやボックスなどのパーツのサイズは法則性をもたせてください。

また余白のとり方にも法則性をもたせてください。

デザインにおいて法則性や余白は重要な要素です。これはマークアップをする場合も同じで、法則性のあるサイズを指定することによってCSSを効率的に設計することができます。

ナビゲーションのボタンのサイズがまばらだったり、左右の余白のとり方がまばらなデザインはCSSの記述量が膨れ上がり、保守性・更新性のないサイトに仕上がってしまいます。

モニターサイズも考慮してデザインデータを作る

PCサイトのコンテンツの横幅は大体960px~1200pxの間で作ることが多いです。

モニターサイズのシェア数は2021年現在で1920pxが1番が多いです。

実際にWebサイトをPCで閲覧する時は、1920pxのモニター上に、960px~1200pxのサイズのサイトを閲覧するわけですから、デザインデータもモニターサイズを考慮したデザインデータにする必要があります。

必ずしも1920pxのカンバスサイズで作る必要はありませんが、サイトの横幅(960px~1200px)からプラス400pxほどのカンバスサイズで作ってください。

そうすることによって、ヘッダーとフッターに関してはモニターサイズいっぱいに広げて作るんだな、とか、メインビジュアルはついてはモニターサイズいっぱいに広げて表示しないんだな、などとコーディングする時に理解できるからです。

フォントやテキストについて

デバイスフォントを理解してフォントを指定する

ブラウザで表示されるテキストは一般的にはデバイスにインストールされているフォントファミリーが適用されます。

日本語テキストの場合、游、ヒラギノ、メイリオなどが適用されます。

ですのでテキスト部分をデザインする場合は、基本的にはこれらのフォントを指定して作ってください。

それ以外のフォントでデザインしたい場合は、無料のWebフォントを使うか、フロントエンドエンジニアにフォントの種類とフォントデータを共有してください。

フォントサイズにも法則性をもたせる

フォントサイズは法則性をもたせて作ってください。

例えばメディアサイトを作る場合、h1要素のサイズは24px、h2要素のサイズは20px、h3要素のサイズは16px、通常テキストの場合は14pxにするなど、HTMLのタグの特徴を理解して適切なサイズ指定を心がけるとサイトの設計がしやすくなります。

デザイナーもできればコーディングできた方が良い

細かい点をいくつか説明して、デザイナーにとっては耳が痛くなる内容だと思いますが、Webサイトは作って終わりではなく、作り終わったあとも更新し続けるものです。

そのため、クライアントにとっても、開発者にとっても保守性・更新性のあるサイトを作る必要があります。そのためにはデザインについても、ある程度のルールや法則性がないといけません。

つまりコーディングの分からないデザイナーもある程度コーディング知識があった方が、クオリティの高いデザインを作ることができるので、できればコーディングはできた方が良いです。

それにコーディングができるデザイナーと、できないデザイナーとはでは、市場価値が違います。

最近ではエンジニアでも、デザインが分かるエンジニアの需要が高まっています。

自分の市場価値を高めるためにもデザイナーは、コーディングできた方が良いです。コーディングが分からないデザイナーが悪いとは言っていませんが、お互い歩み寄ることが大切です。

目次