どうも7noteです。コーダーが喜ぶwebデザインについて

コーディングをするときはwebデザインが必要です。しかしコーディング未経験のデザイナーだったり、そもそもwebに詳しくない人だとビックリ仰天のデザインを渡されることも。

コーダーが喜ぶデザインについて、一意見をまとめてみました。基本的にはイラレで作成されているデザインを想定して書いているので、他のツールだと当てはまらないものもあるかもしれないですがご了承ください。

デザインをやる人は気を悪くせず見ていただきつつ、参考にしてもらえると嬉しいです。
コーディングする方はもしこれらの対処法などがあればぜひ共有ください。

それでは。↓

1、pcは1000〜1200pxが目安。スマホはデバイスの倍のサイズ。

幅はどれくらいで作るのが良いか？的な議論はいろいろなところでされています。その中で現在一般的なのが、pcは1000〜1200px、スマホデザインはデバイスの倍(iPhone SE2基準なら750px)で作られるのが1番多いのかな？と思います。
たまに幅1300pxくらいのpcデザインを見たりしますが、小さめのノートパソコンで見ている人だと文章などが見切れてしまうかもしれないので、大きくても1200pxくらいで納めて置く方が誰もが見やすいサイトになります。

2.画像系は小数点以下は使わず、整数にしてあると嬉しい

デザインから画像ファイルを作成する場合、画像のサイズがぴったり整数でないと書き出した後に微妙に隙間が空いたりします。なので画像や、画像になりそうな装飾コテコテのパーツなどはサイズを整数で作ってあると嬉しいです。

3.乗算やオーバーレイは基本使わない方が無難

今ではmix-blend-modeプロパティでモダンブラウザには対応できますが、IEにはまだ非対応なので極力使われてない方が無難かも。
まぁIE対応しなければ使っても問題ないです！

(ただコーダー的には乗算だと気付くのに時間がかかるのでせめてどこで使ってるか教えて欲しいというワガママな気持ちもある。)

4.ホバー時のデザインや、スライドショーの見え方について補足が欲しい

デザインデータは静的なので、どうしても動きの部分がコーダーに伝わらないことが多いです。
デザインデータなどに、動きに関するメモや参考にしたサイトのURLなどが記載されていると、「こういうのが作りたいんだな」と意思疎通ができるので、補足説明をつけてもらえるととても助かります。

5.日本語webフォントはできれば使わない方がベター。使っても日本語フォントは1種類。英字フォントはそこまで気にしなくてもOK

フォントはデバイスによっても変わってくるので難しい問題ですが、あまりゴリゴリwebフォントを使っていると重たいサイトになってしまいます。沢山のフォントが使われて綺麗に作れるかもしれませんが、それだけ沢山の読み込みが発生するので「読み込みが遅いしもう見るのやめよ」と思うユーザーも少なくありません。
もちろん読み込みまでの間に代替フォントを表示させたりもできますが、あまり読み込みが多いサイトは好まれないので、各デバイスに入っているフォントで綺麗に見えるデザインの方が、ユーザー目線のサイトに仕上がるのではと考えています。

6.フォントサイズは10px以上。そして整数のみ。(できれば11pxまでがベター)

ブラウザによって10px以下のテキストはすべて10pxで表示されます。なので再現する為には画像にするしかありません。
またフォントサイズに小数点は使えないので、整数で。

7.余白を統一

同じ見出しには、同じだけの余白を。
あえてしているわけではないのであれば、余白は統一して欲しいところ。場所によってマチマチだとどれに合わせていいのかわからないし、バラバラで設定してしまうと今後の保守管理がとても難しくなります。
なにより単純にデザイン的に統一感がなく気持ち悪いと感じます。。。
(もちろん意図があってのデザインならその通りコーディングしますよ！)

8.ほぼ同じ色は無闇に増やさないでほしい

デザインデータから16進数のカラーコードを持ってきてコーディングに色を反映します。そのためデザイン的には見た目がほぼ同じ赤だとしても、16進数の数値が違えばコーダーから見たら違う色だと認識します。
あらかじめメインカラー、サブカラー、テキストやリンクカラーは決めておき、その色を全てに適応するようにして欲しいですね。

9.納品時はアウトライン化したデータとアウトライン前の両方のデータをください

デザイン通りにコーディングするならアウトラインファイルだけでよさそうですが、コーディングするときにはテキストデータも反映します。なのでデザインからテキストデータを取得するためにアウトライン前のデータも一緒にください。

10.レイヤーのロックは解除しておいて。

まぁ、触れなかったらおかしいなと思って自分で外すんですが。
まだ経験の浅いコーダーだとなかなか気付かない事も多いので、サービスだと思ってロックは外してから渡してあげてください。

11.文章が長くなった場合、コンテンツが増えた場合のデザインを考慮する。

ブログのサイトのように、デザインではサンプルサンプルと書いた文字がぴったり入るようにデザインされているので問題ないが、いざコーディングするときには長い文章が入る可能性を考えたり、コンテンツが大量に増える事も想定してソースを書く必要があります。
長い文章が入ったときは…で省略するのか、それとも改行して2行にするのか。
コンテンツが増えるならもっと見るボタンは設置しなくてもいいのかなど、実運用のところまで見越したデザインデータをコーダーまでお届けください！

12.字詰め、行間はほどほどに。。。

いや、これはコーダーの問題かもしれませんが、正直字詰めされてたり、行間がビミョーに違うのに気付かない事は多いです。
ある程度ルールがあれば事前に共有してもらったり、統一していただけるとコーダーもありがたいです。デザインセンスの無いコーダーも、気づけるようチェックを入念にするなどお互いが歩み寄れたらいいのかなって思ってます。
細かいカーニングは、画像にしないと再現できないのでこだわりすぎないように。。

13.rgbで作る

イラレの設定によってはcmykで作っている可能性が。
webでは色はrgbで表現されるので、作るデザインデータはrgbの設定で作ってください。その時に色が違うとコーダーに言われても、こちらもどうしようもないので。。。

14.繰り返しのパターンを使うときは、1パーツのデータを別で用意しておいてほしい。

イラレで繰り返しパターンを使ってデザインされているところは、webでも同様に繰り返しパターンを使って再現します。なので元のパーツとなるデザインだけ画像で書き出せるよう近くに置いておいてもらえるとスムーズに作成できて、助かります。

15.難しいデザインでもバッチこい！

たまにコーダーの事を気を遣って、出来なさそうなやつは作らない方がいいのかなって思われるデザイナーさんがいますが、
難しいデザインバッチこいです！他のサイトで使われてる技術ならなんとしてでも再現するのがコーダーの仕事なので、デザイナーさんはどんどん難しいデザインをコーダーに渡してください。そうすることでコーダーも成長していくので。
(どうしても再現できない時は、ゴメンって言います。)

16.画面幅いっぱいのデザインは、縦横比固定なのか、高さのみ固定なのか教えてほしい。

流行りで画面幅いっぱいのデザインが使われることが多いですが、縦横比固定なのか、高さは固定で幅だけ可変になるデザインなのかはわかるようにしてほしいですね。
またあまり人の写真とかだと見切れた時に顔が切れてしまうので、単色やグラデーションにしたり、どこで見切れても問題ないような画像を使うようにしてほしいなと思ってます。

17.単位はpxで。よろしく。mmとかムリ。

web制作はpxでお願いします。（ぺこり）

18.ガイドを引く

端っこにくっついてる要素なのか、微妙に内側にある要素なのか、逆にはみ出る要素なのか。これを一目でわかるようにガイドは入れておいてほしいですね。

19.フォームはエラーが出た時のデザインも。

エラーが出たときのデザインって結構忘れられがちなので、入れてほしい反面、ライブラリを使うこともあるのであまり複雑なデザインだと対応しきれなかったり。

逆にデザイナーからコーダーへおねがされること

「デザイン通りにコーディングして」

はい。がんばります。ついつい手持ちの初期セットをそのまま使っていたりして、楽にコーディングできる方法を、とってしまい微妙にデザインと違うところが出てきます。ちゃんとチェックしますが人間ミスもあるので、もし間違っていても優しく注意してください。

まとめ

デザイナーとコーダー、お互いが寄り添ってよりよいものが作れるといいですね。
他にも思い出したら追加していきます。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ