見出し画像

神様が宿る1px はどこに

『ぐりとぐら展』を見に行った時、展示されている原画に残された、試行錯誤の痕に感激した。

鉛筆による下描き、切り貼りされた紙片、不完全な色合い。完成された絵本には何一つ残っていない軌跡がそこにはあった。
有り体にいうと、凄く、きたなかった。

絵本の原画展にはわりとよく行く方だと思うけれど、あそこまで原画と絵本の絵に差があるものは珍しいと思う。

『ぐりとぐら』の初版当時は、今ほど印刷技術がデジタル化されておらず、原画をそのまま再現するのはコストもかかり、困難だっただろう。
だから作者や編集者は、原画を忠実に再現するのではなく、あくまで原画は原画として、読者が手にする印刷物こそが完成された最終形態だという姿勢で、紙に向かっていたのかもしれない。

あの かすてら は、原画の方が繊細な色をしていたけど、絵本のものの方が美味しそうだった。そうなるように計算して描かれた原画なのだ。


アプリケーションの UI デザインは Illustrator とか Photoshop とか、Sketchとか、何らかのグラフィックデザインツールで作成され、プログラムでそれを再現させる。

デザイナーの細かな配慮でもって構築されたグラフィックは、しばしプログラマーに伝わらなかったりして、何だか別のものになってしまうこともある。

「デザイナーは 1px にこだわって作っているんだ、1pxの違いも蔑ろにしてはいけない」なんて言ったりもする。細部に神は宿る、と。

デザイナーの意図どおり、完璧に再現された美しいユーザーインターフェイス。それは原画の再現だ。
しかし、アプリケーションのデザインの完成形は、グラフィックデザインツールで作成された静止画ではない。もっと動的で、有機的なものだ。

画面の大きさも、表示される情報も、人によって異なる。
枠やコンテンツだけではなく、フォントの種類、大きさ、色の見え方もすべて。そしてそれぞれが時間軸をもっている。

建築は凝結した音楽といわれているが、音楽を流動する建築と呼ぶこともできる。

とは、九鬼周造の『「いき」の構造 』の一文だが " 流動する建築 "という表現は、アプリケーションにこそ相応しいように私は思う。

印刷物のデザインと似たようなツールを使うし、Webデザインもアプリケーションのデザインも、最初は印刷物のデザインを踏襲してきた歴史がある。
だから、つい同じ感覚になってしまいがちだけど、本当は全然違うものだ。

以前、印刷物として配布されたパンフレットのデータをそのままアプリケーションに入れる作業をやった経験があるが、元のデータはページ毎にタイトルと写真間にあったラインの位置が微妙に異なっていた。

それは、写真の色味の違いによって、タイトルとのマージンが違って見えることを考慮して調整されたものだ。
パンフレットでは、ページをめくる動作を挟むため、その位置のズレに気づく人はまずいない。むしろ、そのズレによって同じ位置にラインがあるように見えるように計算されている。

しかし、これをアプリケーションに格納し、ボタン操作によってページを遷移させた場合、そのラインの位置のズレは誰にでも分かり、違和感を呼ぶものになってしまった。一枚一枚の絵だったものが密接に繋がって、よりハッキリとした時間軸を持ったからだ。ズレが気にならない程度にページ送りのトランジションを入れると、表示のもたつきにイライラしてしまう。

結局、すべてのページでラインの位置が同じになるように元のデータを修正しなければならなかった。別のものなのだから、同じ体験をうむには手法をかえる必要がある。

また、印刷物の場合ではマージンによる画面内オブジェクトのグールーピングがシビアに行われるが、これをアプリケーションのデザインに当てはめると困ったことになる。画面の大きさもフォントもユーザーの環境によって異なるからだ。

マージンは環境によって微妙に変わってしまう可能性がある。だからそれを考慮して背景をしいたり、線をひいたり、枠で囲ったり、マージンによるグールーピングを補助する必要がある。

どのデバイスでも、完全にマージンが一致するように、こだわって調整をはかるのもいいが、それが単に原画の再現に執着しているだけなのではないかと自問してみる必要はあるだろう。

なぜなら、表示される文字によって見た目のマージンは変わってしまう。表示される文字を制御できない以上、デザインデータ上の仮の文字でのマージンにこだわっても意味はない。
もともとそのマージンは見やすくするためのものなのだから、その px にする以外の方法だってあるはずだ。

ユーザーの見え方を完全には制御できない、Web やアプリケーションのデザインは、少しぐらいズレてもグールーピングがおかしくならない耐久性をもっていた方がいい。


そもそも、環境によって表示されるものが変化するものを、印刷物や静物のデザインのために登場した従来のデザインツールで表現するのは困難だ。

そこで近年ではデバイスのサイズ変化を考慮した画面デザインが可能な Sketch をはじめとする UI デザインツールや、時間軸やインタラクションが考慮できるPrott や Flinto 、Principle、Adobe XD などのプロトタイピングツールが続々登場している。しかしまだ十分とはいえず試行錯誤が始まった段階だ。

デジタル化が進む以前の絵本の原画が、完成に至るまでのプロセスに過ぎなかったように、アプリケーションのデザインデータも、それを完璧に再現するための原画ではなく、完成に至るまでの軌跡にすぎない。今のところ。

アプリケーションは流動する建築。
デザインデータはプログラムのための楽譜ではない。むしろデザイナーはプログラマーとともに作曲の真っ最中で、できあがったプログラムこそが本当の楽譜なのだろう。

では、そこにおける細部とは何か?

神様が宿っているのはデザインデータの 1px ではない。
プログラミングされ、ユーザが手にしたデザインの 1px だ。

当たり前のことだけれど、時々見失いそうになる。
神様のいるところ。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

✨🍬 有難うございます 🍬✨
24

ai

文系デザイナーです。note で文章を書く練習をしています。 普段はひっそりとアプリの UI デザインなどをしています。

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
2つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。