2019/06/27

Webデザイン:要素のサイズ指定は「整数値」でー小数点はNG なぜ?

 

初めてWebデザインに関わった時、私はチームで仕事をしていました。

デザインチームとコーディングチーム。

私はその頃、コーディングの知識はもとより、Webデザインの基礎知識も皆無な状態でディレクターさんに指示を受けながら作業をしていました。

ある日、ディレクターさんより、「整数値で要素をおいてください。」と指示が…。なんのこと?と思いつつ、その都度整数値に修正しつつも何回か同じことを注意された挙句に「何回も同じこと言わせないでください。落ち着いて作業していますか。直す気持ちがないから同じ間違いをおかしているのではないですか?」と結構気まずい状況に…。

知らないが故に色々かなりの勘違い作業を繰り返していくうちに修正を出すのが恐ろしくなり、photoshopの前にに座ると動悸がするまでに。

超初心者の皆さん、こういうことしていませんか?

小数点画像

 

気まずくなる前に理由を知って出戻りが少ない、楽しい作業したいですね。

 

なぜ、整数値なのか?

その答え知っていたら、回避できた問題。放っておくと肩たたきにあいそうだ。躍起になって調べ始めました。

小数点問題

子供が算数につまずいているような響き。私はデザインの小数点問題に完全につまずいてましたが…。小数点を含む数値が及ぼす影響はいくつかあるようです。

  1. 画像のシャープさが失われてしまう
    シェイプのサイズに小数点以下の値が含まれてしまうとエッジが滲んだように見えてシャープな画像が表現できなくなります。
    パソコンのモニターでは1px より小さなドットは打てないのです。小数点で指定されたものは隣のピクセルにまたがってしまいぼやけて見えてしまいます。
    (駆け出しの私にはその1pxのぼやけやズレが見えなかったのですが、デザインを続けていくうちに数値を見ずとも見えるようになってきました。今だから納得。)
    整数値の線 整数値
    小数値を含む線 小数点
  2. 小数点はコーダーさんを迷わせてしまう(  ̄~ ̄;)ウーン…
    チームで制作を行うときは特に気をつけたいですね。
    ブラウザごとに小数点が反映されるかどうかはバラバラ。小数点が反映されないとサイズが変わってきます。
    図形の場合:小数点が含まれていると、1px分の大きさの差異が出ます。たかが1px。。。WEBデザインでは、”されど1px”です。
    ないはずの余白ができたり、入りきるはずの行が入らなかったり…。見える人にはその1pxに違和感を覚えたりするのです。
    フォントサイズの場合:例えば18.6pxとなっていた場合。18pxですか?19pxですか?となるわけです。この1pxの差はデザイン上は大きかったりしますね。
    コーダーさんは、デザイナー側の意図を汲み取ってくださろうと「どっちなんだ!」と頭をかかえるわけです。

そんなことも知らずご迷惑をおかけしていたわけです。すみませんでした<(_ _)>

なぜ起きてしまう少数値問題

私の場合ですが、いくつかあげてみると:

  • 何も考えていなかった( ̄。 ̄)ボ~
  • 手動でバウンディングボックスをドラッグして拡大縮小していた。
  • 過去のデータを流用していたことが多い
  • ダイアログやパネルをあまり活用していなかった

なんとなく思い当たる方もいませんか?

小数値問題解決案

私の場合PhotoshopCCを使用しています。その場合のことメモ書きします。

  1. ダイアログやパネルを開いて整数値を入力。同じデザインの要素を繰り返す時は同じ数値を指定。
  2. バウンディングボックスで手動による拡大縮小はしない
  3. hotoshopCCの場合は、シェイプのツールバーに「エッジを整列」という項目があるのでこれにチェックを入れておく
    (私は、このチェック項目へのチェックもしていませんでした。過去のデータを流用する機会も多かったというのも小数点問題の原因かと思うのですが…)

そんなところでつまずいていたのか…。と思われた方もいらっしゃったかもですね。
小数点問題!結構重要でした。コーダーさんの嘆きも聞こえたような気がしました。

 

  関連記事 - Related Posts -

 

  最新記事 - New Posts -

 

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です