North Detail / ノースディテール

BLOG ブログ

ブログ
CATEGORY
デザイン

Webデザインをするときの小ネタ~横幅1100pxの中にブロックを3個。余白、どう計算します?~

デザインするとき、こういうオブジェクト間の余白を作成するときに電卓を使って計算していませんか?
デザインツールはPhotoshopから始めた、という方は結構知らない方が多いのかもしれません。
エクセルで計算式を入れて計っていたという方もいました。
オブジェクトと、オブジェクト間の余白を整数に保てる数字を探る方法をご紹介します。
DTPをやっていた方は表組でお馴染みのアレがおススメです。

Illustratorの「グリッドに分割」を使おう

流れは、Illustratorの長方形ツールで全長のサイズのオブジェクトを作る→整数になる値を探す、といった感じです。
プレビューでどれくらいの余白になるのかも視覚的に確認できるので便利ですよ。

1.Illustratorの長方形ツールで全長のサイズのオブジェクトを作る

1.Illustratorの長方形ツールで全長のサイズのオブジェクトを作る

2.メニューの「オブジェクト」→「パス」→「グリッドに分割」を選択

2.メニューの「オブジェクト」→「パス」→「グリッドに分割」を選択

3.ダイアログボックスで数値を調整する

3.ダイアログボックスで数値を調整する

1100pxの中に3個のブロックを作成したい場合、幅340pxで余白は40pxでした。
常にキレイな数値になってくれればいいのですが、いろいろな制限で複雑になる場合もありますよね。
794pxの中に6個のブロックを入れたい時・・・等、アタマではパッと計算できない時におススメです。

あとがき

Webデザインにおける「デザイン」は完成品ではなく画面設計です。
端数や小数点以下のピクセルのズレは、コーディング作業をするエンジニアが迷ってしまう原因になります。
デザイナーはコーディングをしてブラウザに適用した時のことを念頭にいれて作成(設計)しなければなりません。

  • レスポンシブやリキッドデザインに対応できているか
  • CMSに適用した場合、利用者のデータ入力に柔軟に対応できているか
  • 翻訳ツールを使用して閲覧した場合、文字量が収まっているか

など、一枚のデザイン画面を設計する際に考慮すべきことはとても多いです。

デザイン作成後にエンジニアからよく指摘/質問される点

  • 文字サイズや色、フォントのルールが不明確
  • 均等に並んでいるべき要素の幅や余白がバラバラ
  • 各セクションのパディング(padding)が統一されていない
  • 見出しや各ブロックのマージン(margin)が統一されていない
  • CMSで想定しないサイズの写真やテキスト量を入力されるケースを考慮できていない
  • 背景をデザインしている場合、ブラウザの画面幅を広げた時のために「アートボードの外」まで考慮しているか
  • レスポンシブサイトをスマホ実機で表示したとき、画像内の文字が小さくて読めない、線がつぶれる

など

どんなに深く考えてデザインを作成していても、コーディングする際に何かしらの疑問点や質問がデザイナーに寄せられるものです。
ポスターやパンフレットなどのDTPの世界ではデザイナーが作品を完成させますが、Web制作の世界ではデザインは制作工程の一部分に過ぎません。
全体の制作をスムーズに行うため、デザイン設計におけるピクセル数値の整理はプロとして心がけておくべきことですね。

あひる
WRITER:あひる
気付けばデザイン歴10年以上。
UC(色のユニバーサルデザイン)アドバイザー。
見た目だけではない、戦略的なデザイン設計を考えています
おやつ作りも好きですが、それ以上に自転車(ロード)とスキーが好きです。
特技は早起きです。
主な記事 一覧へ

一覧へ

IS 501383 / ISO 27001