Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

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

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

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

今回はHTML・CSSのコーディングができないデザイナーに、デザインを作るうえで知ってほしいこと、理解してほしいことをフロント側視点で書きました。

 

目次

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

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

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

デザインデータを確認すると、ページの法則性やルール、余白のとり方、h1、h2、h3、pタグなどのフォントサイズの決まりなどがしっかり決められています。さらに気配りのできるデザイナーだと、マウスホバー後のイメージやJavaScriptの動きの参考イメージなども一緒に渡してくれます。

逆に後者はHTMLとCSSの設計を理解できていない状態でデザインを作っているので、エンジニアとの連携や解釈に齟齬が生まれやすいです。

ここの部分はどうなるのか、クリックしたらどんな動きになるのか。文字数を何行まで表示させるのか、よく見ると左と右の余白のサイズが違ったり、ボタンのサイズもマチマチだったりなど、コーディングするうえで確認しなくていけないことが増えてきます。そのためプロジェクトを進めるうえで、余計な手間やエンジニアとデザイナーの間で気遣いが発生しやすくなります。

それでは具体的にどんなことに注意してデザインを作ればよいか説明します。

デザインデータについて

少し前までデザインツールはAdobeのPhotoshopが主流でしたが、最近ではSketchやAdobe XDなどを使ってデザインを作るデザイナーも増えてきました。今回はPhotoshopでデザインした場合のデザインデータの扱いについて説明します。

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

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

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

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

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

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

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

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

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

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

 

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

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

Webデザインのサイズ単位はpx(ピクセル)で指定します。またテキストやボタンなどのパーツのサイズは、小数点を指定しないでください。

グラフィックデザインや紙のデザイン出身の方で、単位がpxではなくpt(ポイント)で指定して作ってこられる方が稀にいます。またCSSで小数点などの端数を指定することは可能ではありますが、できれば小数点のない整数でサイズを指定したもらった方がCSSの設計がしやすいです。

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

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

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

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

モニターサイズも含めてデザインデータを作る

PCサイトのコンテンツの横幅は大体960px~1200pxの間で作ることが多いです。またモニターサイズのシェア数は2019年現在1920pxが1番が多いです。実際WebサイトをPCで閲覧する場合は1920pxのモニター上に、960px~1200pxのサイズのサイトを閲覧するわけですから、デザインデータもモニターサイズを含めたデザインデータにする必要があります。

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

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

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

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

通常ブラウザで表示されるテキストはデバイスにインストールされているフォントファミリーが適用されます。日本語テキストの場合、游、ヒラギノ、メイリオなどが適用されます。

ですのでテキスト部分をデザインする場合は、これらのフォントを指定して作ってください。それ以外のフォントでデザインする場合は、ウェブフォントかテキスト画像で実装することになることを理解したうえで作ってください。

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

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

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

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

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

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

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

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

 

© Debriefing 2019 All Rights Reserved.