Webサイトで不可能なデザイン

HTMLコーダーは、デザインを基にWebサイトを構築していく仕事ですが、デザインさえあれば、なんでも出来るというわけではありません。

位置合わせ

背景と要素の位置を合わせる。紙媒体では基本的な事ではありますが、Webサイトではこれが非常に難しい事です。
特に親要素の背景に、子要素の位置を合わせるなど、ほとんど不可能と言ってもいいレベルです。

PCのブラウザは可変ですし、ユーザーはどんなブラウザサイズで閲覧しているのか、わかりません。
なので、ブラウザサイズによっては、テキストの改行やフレキシブルボックスなどにより要素が移動し、背景とのズレが必ず生じます。

フォントの太さ

フォントの太さを細かく指定する事は、実は不可能です。
紙媒体のデザインでは、フォントの太さを細かく設定する事により、見た目に起伏を持たせたり、Googleフォントでも様々な太さが用意されていたり、CSSの「font-weight」も、100単位で、100～900までの9段階の数値も用意されていますが、Webサイトブラウジングで実際に表示できるのは、「normal」か「bold」だけと思ったほうがいいです。

元々Webサイトのフォントサイズは、ピクセル単位で表示されています。
ピクセルとは、画素の最小単位であり、フォントは基本的に16ピクセルという最小に近いサイズで表示されています。
ピクセルは最小の単位ゆえに、本来なら0.5ピクセルのような1ピクセル未満のサイズは存在しません。
その最小単位の領域で表示されている文字に、段階的に太さを設定する事など出来ません。

スマホの場合、高い実解像度から横幅375ピクセルぐらいを疑似的に表現するぐらいにまで拡大されており、それなら文字の太さにも段階的な強弱を充てる事は、技術的には不可能ではないかもしれませんが、Webサイトにおける太字は情報の強調を意味している観点からも、ブラウザ自体が太さの有無しか対応していないのでしょう。
そもそもWebサイトにおける、フォントを太くするという手法の目的は、その箇所を重要視させる事にあります。
もしフォントの太さの強弱が曖昧になると、文章のどこが強調されているのかが、わからなくなってしまいます。
技術的な観点からも、認識的な観点からも、フォントの太さは、有無だけで充分なのです。

出来ない事は割り切る事が重要

出来ない事を無理やり出来ると言い切っても、ハッキリ言って無駄の極みです。
それなら代替案を考えるべきでしょう。

位置合わせが難しいのなら、逆に位置を合わせなければいい。
Webサイトは紙媒体と違い、要素に動きを持たせる事が出来ます。
背景は、位置を合わせるのが必要な絵を使わず、背景だけスクロールしないパララックスのような表現をするなど、Webサイトに出来る事で代替していけばいいのです。

フォントの太さも、ハッキリ言ってしまえば、情報を強調させるものなので、段階的な強弱は必要ありません。

ピクセルパーフェクトなら…

私が忌み嫌い、何度もしつこく繰り返している「ピクセルパーフェクト」ですが、これならどんなデザインの再現も、”ほぼ”可能です。

ただし、これはブラウザの大きさが変化しても、現在では嫌われている横スクロールを伴ってでも要素をピクセル単位で完全固定にする必要がありますし、特にスマホデザインにおいては、閲覧する人がデザインに合わせたビューポートの機種で観てもらう事が前提となります。

また、「再現が”ほぼ”可能」と言いましたが、フォントの太さに関しては、本当に太さの有無でしか表示されないブラウザや端末が多いので、太さを厳密に調整したデザインの再現は、まず不可能です。
ただ、「text-shadow」を駆使すれば、可能になるかもしれませんが、これも端末やブラウザによって、どんな見え方がするかわからないため、作業の労力に見合った結果は出ません。

つまり、デザインを完全に再現するという事は、レスポンシブを捨て、旧世代のHTML4時代の完全固定の作りに逆行するしかないのです。
ていうか、PDFをダウンロードさせるようにしちゃいえばいいって話でもありますがね。

話は少しズレますが、ピクセルパーフェクトは神エクセルのようなものと表現したコメントを、とある場所で見かけたのですが、まさにそれだと思いましたね。

デザインもWebサイトに合ったデザインにする事が必要

Webサイトで出来ない事の多くは、紙媒体向けのデザインに関する事が多いです。
Webと紙媒体の違いで多く言われているのが、CMYKとRGBの色の概念の違いが真っ先に挙げられている事が多いですが、それ以上に配置に関する事の方が、さらに重要です。

まず、Webサイトは可変であり、特にどんな端末で見られているのか、わからないものです。
Webサイト作りに求められるのは「合わせる」事ではなく、「柔軟に適用する」事です。

デザイナーの人からすれば、可変でないツールでデザインを行う事になるでしょう。
しかし、そもそもズレてもいいデザインにするのがWebサイトのデザインというものです。
デザインの方が苦手なコーダーである私が言うのもなんですが、デザインをする人も、コーダーに対して完全なデザインの再現を求めるのではなく、Webサイトに向いたデザインというものを考えていただきたいとは思っています。