webワーカーライフ

技術

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

投稿日:

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プログラミングの独学は難しい!

オンラインでプロのマンツーマンでの徹底指導を受けることが出来たらプログラミングに挫折する率が下がる!
プログラミングを武器にした転職の近道です。
4ヶ月で成長の限界に挑戦 徹底指導のエンジニア転職プログラム【CodeCampGATE】

\SNSでシェアしてね/

人気の記事

1

毎朝「いらっしゃいませー」とみんなで大声で復唱するような普通の店舗での販売員だった私が、職業訓練を3ヶ月受けて社内WEBデザイナーになった話を紹介してみます。

2

今はいろいろな働き方があってWebデザイナーでもアルバイトや派遣社員などの非正規雇用で働いている人も多い。 実際のところ派遣社員でWebデザイナーをするのはどんな感じなのか?派遣社員でWebデザイナー ...

3

Web制作の仕事で生活していこうと思うといろいろな職種がある。 Webデザイナー フロントエンドエンジニア コーダー プログラマー Webディレクター WebデザイナーやWEBディレクターはデザインや ...

-技術

Copyright© Webワーカーライフ , 2020 AllRights Reserved.