こんにちは、シンスのデザイナー千年原です。

今月は新入社員のデザイナーも加わって、自分自身ももっと頑張らないと！と改めて思う日々です。

今回は、コーダーとの実際のやりとりの中で指摘されたデザイン作成時に気をつけるべきことを書いていきます。

基本的なことが多いですが、意外と意識しないと漏れてしまう部分もあると思うので再度確認していきましょう！

縦の余白はきっちりと揃える

なぜこうするべきか

コーディングの際に、コーダーさんによってはデザインデータそのまま、正確に忠実に1px単位で合わせて組む人もいます。
それだとコードが複雑になる上に組みにくいので良くないです。
親切なデザインデータ作りのためにも、コンテンツ間の余白の数値は切りの良い数値で統一感があった方が良いですね。
数値に関してはデザインデータの段階で揃えておくことを意識しましょう。

改善のために

きりのいい数値にすることで先の工程でも作りやすいデザインにすることを意識するといいデザインデータ作りができます。
余白を指定したら、ガイドをつけてずれないようにすることも一つの手段です。

共通パーツのボタンのホバー時の指示をする

なぜこうするべきか

私も以前までは、ボタンデザインを作ってそのままコーダーさんに渡すだけでした。
しかし「ボタンを押した後のデザインはどうなるのか？」と聞かれてはっとしました。
確かに通常時のボタンのデザインを置いているだけでは、動きや押した時のデザインまでどうなるかは見ても分からないですよね。
それでは後の工程の人にとっても、情報不足として結果的に不親切なデザインになってしまいます。
ちなみにシンス内での基本的なホバー時の動作は、透過、もしくは色を反転などにしています。
コーダー独自で判断する場合もありますが、先に指示をすると修正の発生を防げることもできるので指示が必要です。

改善のために

デザインを作って終わりだけでなく、構築した後の動きも考えられるといいです。
いろんなボタンの表示方法があるので、いろんなサイトを見て勉強してみるとヒントがたくさん見つかります。
「こうしたい！」と思う表示方法があれば、デザインアートボードの横に「ボタンのホバー時はこんなデザインになります」と、ホバー時のデザインを別に作って置いておくと親切ですね！

アニメーションの動きをコーダーに指示する

なぜこうするべきか

Webデザインは、紙媒体と違って動くデザインです。
動きがつくものはヘッダーや追従バナー、FVの動きなど…たくさんありますよね。
これもボタンのデザイン同様、ただデザインを置いているだけだと、追従するのか？それともそのままなのか？透過するのか？など分かりません。
デザインを作った上で、「ここはこうしたい！」という要望はしっかりとコーダーさんに事前に説明をしておきましょう。
そうすることで、後から「こうしたかったんだけどな」という不満も防げる上、コーダーさんも事前に情報があった方が組みやすくなります。
これも独自の判断で進めてしまうコーダーさんもいるので事前に指示をしてあげると修正が発生することもなくなりますね。

改善のために

Webデザインにもいろんな動きがありますね。
記載したように何も伝えていないと思った通りのデザインと少し違うように感じるかもしれないので、前もってこうしたい！とコーダーさんに伝えるようにすることが大事です。
コミュニケーションはこまめにとった方が◎ですね！

1つのサイトに何種類のフォントサイズを使えばいいのかルールを決める

なぜこうするべきか

私は昔、細かく違いのあるフォントサイズをたくさん使用してスタッフに「ここは何px？」と聞かれても答えられないデザイン作りをしていました。
いいデザイン作りではフォントサイズは3〜4個を使用するのが大体の平均になっています。
なぜかというと多すぎても統一感のないデザインになる上、ただただ微妙な変化しかないフォントサイズがいくつも増えてしまい、自分でも把握出来なくなります。それはよくないですよね。
多すぎてもコーディングの際にも大変になるので予めどれだけ使用するかは決めてからデザインを作成しましょう。

改善のために

1px違い（14px・15pxなど）のサイズは、違いが分からないのでどちらかに統一するのが◎。
（1px程度のサイズ違いはなるべく避ける。）
本文15px、見出しサイズでその他3種類程度に収めるなど工夫をしてみることもポイントです。
自分自身でも把握しやすいようなデザインデータ作りを意識してみると作りやすくなります。

フォントの種類の統一をする

なぜこうするべきか

ゴシック体や游ゴシックは、ぱっと見同じように見えるフォントもたくさんありますよね。
しかし、ここの本文はヒラギノ角ゴシックなのにこっちは游ゴシック体になってる……など微妙な変化が起きるのはフォントサイズと同様に、フォントの種類もたくさん使用すると全体のデザイン構成として見た時に、ごちゃごちゃに見える原因にもなるのでNGです。
ごっちゃになるとコーダーさんもどれを基準に使えばいいのかとても困るので、フォントの種類は統一が大事です。

改善のために

フォントが本当に統一されているかもデザイン提出時に改めて確認するようにすることが大事です。
事前にアートボードに使うフォントを記載しておけば悩むこともありませんね。
フォント種類に限った話ではないですが、最終チェックは後々の工程の人のためにも必ず時間をかけて行いましょう！

まとめ

抜け漏れがなく、他の人にも親切なデザイン作りはとても大事ですね。
最初のうちは大変ですが、徐々に慣れていけるように意識してきましょう！