デザインデータのサイズは3種類作って欲しい！

コーダーとして働いてて困ることの一つに、デザイナーから送られてくるデザインデータの作り方があまりにも固定でどうやってコーディングすればいいのか迷うというのがある。

デザイナーは紙のデザイナーが結構多くて、最初からWebデザイナーしかしたことのないという人はあまりいない。そのため、紙という固定のキャンバスでデザインデータを作ってしまいがち。

これがWebというフレキシブルなデヴァイスに向けて発信するデザインとしては非常に問題となる事がある。

Webにはいろんなサイズの閲覧環境がある

例えば、PC用の画面は1200ピクセルの横幅でもいいけど、iPadの場合は1200ピクセルでは横幅が足りず見切れてしまう。見切れた部分にメニューがあるとユーザーはメニューがどこに有るのかわからずサイトの価値を発揮できない。

今はスマートフォン用のデザインもデザイナーが作るのが当たり前になってきたけど、前はPCデザインをうまい具合に組み合わせてスマホ表示させておいてと言われたりしてかなりコーダーの負担になっていたこともある。

デザインデーターは3種類必要

デザイナーはウェブデザインを依頼された場合、3つのデザインデータが必要だと思って欲しい。

まず、普通のPC用デザイン。これは横幅1200ピクセル程度で作ってくれればいい。2つ目はスマホデザインで、これに関してはiPhoneの最新版に合わせてデータを作ってくれればいい。

あと一つは何か？というと横幅2000ピクセル以上ある画面で見た時の状態である。PCの画面は横幅1200ピクセルピッタリで終わるのではなく、広げれば画面サイズ分だけ広がる。

今のパソコン画面は大きな画面の人も多く、私のパソコンも1920ピクセルの横幅がある。なので全画面表示にした場合、1200ピクセル幅のWebサイトは横に空白が生じる可能性がある。

最近、デザイナーが提出してくるデータは流行のデザインを取り入れたものが多く、斜めに横幅いっぱいまで写真を使った物だったり、パララックスで背景を表示するなどの指定が入っていたりする。

写真に関しては横幅1200ピクセルのウインドウサイズならいい感じに見えても、もし1900まで横幅を広げた場合どうなるのか？まで想像できていない場合があり、顔が切れてしまったり、文字が見づらくなったりしたりする。
参考サイト

横幅ギリギリまでデザインが無く、ごく普通のニュースサイトみたいに横幅を広げても中心基準でレイアウトが崩れないなら大きな画面は必要ないが、おしゃれを意識したデザインで横幅いっぱいまで使うデザインの場合、1200ピクセルで切っていいのか？ずっと横幅１００％表示で大きくなるのか？コーダー側が考えないとダメになってくる。

コーダーは基本的に情報最優先で、文字が見えればオッケーみたいな考え方で組んでいることが多く、マージンがおかしかったり、余白が死んでデザインが崩れてもそれはデザイナーの指示ミスだと考えている。

そういうわけで大きな画面で見た時にデザインが崩れてほしくない場合は必ず横幅ギリギリに来るデザインの場合、大きな画面で見た場合、どう表示するのが正解なのかデザイナー側で考えて作っておいてほしいのだ。

あと、最近は予算の関係上、PCデザインとスマホデザインのデータしかもらえないことが多く、ブレイクポイントは768pxにすることが多くなっているがiPadでちゃんと見えるようなデザインも出来れば欲しいところ…。横幅1200ピクセルだとiPadでは見切れるし、ギューッとしたらかなり残念な感じになりがち…。

ということでコーダー的な立場としてはPCデザインとスマホデザインに横幅2000ピクセル、横幅900ピクセルを追加してくれるととても助かる。ちゃんとしたデータじゃなくて見え方だけなのでJPEGデータでも大丈夫です…。