DTP→WEB

「小数点以下」はありえない。DTP→Web違い/両方の実務経験

DTP→Webに脱皮中ですが、コーダー泣かせのデータを作っていました。プロとして両方できるよう違いを調べ中です。「Webの単位はピクセル」設定したのに何故ダメだったのか!DTPデザイナーがWeb制作を始めてやった時の壁を記録します。

Webで使う単位は全部ピクセル。ドラック操作はそれを崩す

実は、拡大縮小にドラック操作を使っていました。これが「単位をpixelにしている」のに、問題を引き起こした原因です。

必須!拡大縮小のドラックをしたら整数に直す

図形や文字をドラックで拡大縮小したら、0.1pxなど小数点が出てきます。WEBでは小数点以下の数値はボケるので使えません。

[WebがDTPと違う所]

  • 図形をドラックで拡大縮小したら、数値を整数へ
  • 文字をドラックで拡大縮小したら、数値を整数へ(行間なども含む)

ミスが起こらないように、ドラック後にはパッと目をやるクセをつけた方が良さそう。ピクセルを使うという事は「最小サイズを1ピクセルにする」という意味でもあったんですね。

ちなみに新しいバージョンのPhotoshop(v22.1.1)は、環境設定で単位をピクセルにしておけば、図形の拡大縮小で小数点以下は出なかったです。

Webの単位がピクセル一択な理由

Webには実寸がありません。スマホ・タブレット・パソコン、使うデバイスによってサイズや比率が変わります。そのため一番小さな粒のピクセルを、統一して単位に使っています。(印刷物は写真解像度指定だけでもpixel,per,inch,pixel/inchと複数ある)

グリッドシステムを利用して計画的なレイアウトをしよう

「DTPと違って、Webはドラックをする事が増えた」と感じていました。Illustratorみたいに「グリッドに分割(段組設定)」がないので、感覚でサイズを決めてしまっていて・・これトンデモナイ事らしいです。

本来、Webこそドラックを使いません。数値を入力します。

Photoshopって、レイアウトを作るのが難しいのですが、グリッドの計算ツール を使うと計算が楽です。最初に縦ガイドを引いて、それに沿ってレイアウトを作る。ここは別の記事でやってみます。

▼XDだとこの辺ラクらしい。

ちなみに現在は12分割が主流。均等な縦ガイドに沿ってレイアウト作るとデバイスによってレイアウトが変わった時動かしやすい。だからコーダーさんも設定が楽だったり、制作費用が抑えられたりします。

こだわりがある所は別ですが、通常は12分割を意識して作ってみよう!

バタコブログ:分かると楽しい

「Webのデータがめちゃくちゃだ!」と上司にお尻を叩かれ、昼休みや寝る前に少しずつ学んでいます。1個わかったら3個わからないといった感じです。「そんな顔するなら勉強なんてやめろ」とカツを入れられまして、分からんすぎてひどい顔していたようです。

最近は焦りが消えました。まだちょっとですが疑問が多い分スッキリする瞬間も多いです。わかると楽しい。