紙とweb、デザイン時の「違い」 その1

23/03/16

DS部のHです。

 近年スマートフォン、タブレットの普及率が上がり、webブラウザ上でできるアプリを付録や特典としてつける書籍も登場しています。スマートフォン等で手軽にゲーム感覚で反復学習できるため、問題集の書籍が特に多いように感じます。
 アプリを製作する際にあたって「表紙や誌面の素材を使って、同じようにwebデザインする」ということになった時、最初は「そのままサイズを調整すればいいのかな?」と簡単に考えていたのですが、異なることがたくさんあって。。。
 紙とweb、デザイン時の「違い」について少しまとめてみました。

◆単位の違い
紙:mm …絶対単位(環境が変わっても絶対に大きさが変わらない単位)
web:px …相対単位(解像度や画面のサイズによって大きさが変わる単位)
 表紙に使用していたデータをそのままmm(絶対単位)の状態で作成し、いざwebページに填め込んでみると、なぜか間延びした状態に…。最初はこんな失敗もしてしまいました。
 見る人のブラウザによって環境が変わるWebでは、相対単位で作成するのが正解です。

◆解像度の違い
 紙とWebは解像度も異なります。
 紙媒体の場合は、高解像度でも耐えられるかどうかを注意しますよね。
 その点Webは解像度が低いです。…が、その分、Webページの細かいパーツはドット単位で作りこむ必要あります。角丸のボタン一つにしても、画面できれいに見せるために角を拡大表示して1ピクセルずつ色を塗ったり消したりして作ります。
 印刷物も最終的にはドット(網点)で作られていますが、肉眼では認識できないドットをデザイン過程で意識することは基本的にないですよね。

◆文字サイズにこだわることができない
 単位について、Webは見る人のブラウザによって環境が変わると書きましたが、これはテキストにもいえることです。例えば「15.5px」と指定したときに、自分が使っているブラウザだと綺麗に収まったとしても、Bさんが使っているブラウザだと崩れるということが起きる可能性があります。なので、例えば組版ではよくある「この位置で改行してほしい」といったことはwebの仕様上ではできないのです。 長体やツメもできません。
 組版の経験者からすると、この間隔は最初はムズムズしてしまうかもしれないです。

 まずは一番はじめに躓いたことを書いてみました。
 次回はもう少し慣れてから気付いた、紙とwebのレイアウトと見る人の視点の「違い」をまとめたいと思います。