アンガーコントールは、6秒らしい。怒りを感じたら6秒待つ。大体の怒りの感情は6秒経つと収まるらしい。それを踏まえると、子供へのイラッは、12秒待てば良い。同じく、12秒後、タヌキのように行動に出れば良い。

そう考えると、タヌキは偉大だ。

案件のリサーチで、Three.jsを引っ張り出してくる。1年前ぐらいに、結構いじっていたWebGLを使った3Dエンジンで、WEB上で比較的容易に3Dをつくれるものだ。Flashの終焉ごろに流行ったPaperVisonの様だ。メイン案件で、Unityを使っているが、Three.jsのコードを見ている方が興奮する。なぜだろうか。3Dツールへのトラウマもあるが、やはりコード好きなのか。それともWEB好きなのか。

TwitterのTLで、パーフェクトピクセルという言葉、やたらと流れてくる。UIデザイナーが出したカンプをフロントエンジニアが1pxのズレなく再現できるかという話だ。当たり前だという意見から、そんな議論は不毛だという意見まで、立場や思想の違いから様々な声が。

現実的な話として、レスポンシブル時代において、1pxを忠実に再現できるかというのは果たして、重要なのかというのは一理ある。PCの画面サイズが1024*768前後の時代であれば、ブラウザのウィンドウサイズも、ユーザー環境が違ってもほぼほぼ同じだったので、画面の左上を原点として、1pxの狂いも無く配置すると言うことが大事だったのかもしれない。しかしながら、現代、PCの画面サイズもバラバラであるし、スクリーンも様々だ。PCもあれば、スマフォもあれば、タブレットもある。求められるのは、そのスクリーンサイズの中で、比率的に、レイアウトされているかと言うことになる。これは、余白やボックスサイズだけでは無く、フォントサイズなども含まれる。

UIデザイナが、1pxのズレを許せないか。これは、意図した1pxだからである。設計された1pxだからである。使いやすさ、美しさが考えた上に算出された1pxなのである。それが守られていないと、設計された機能を実現されないのだ。つまり、1pxが重要では無い。その1pxを導き出した設計が重要なのである。設計が守られているか。これが、デザイナが意図したUIを実現できるかの一つの大きな要素になるのだ。

レスポンシブル時代において、その設計は絶対値から相対値へ変化しても来ている。実際に、CSSでは、vhとvmという単位が導入されてきている。これは、画面の高さ、幅に対しての比率からの値を指定する考え方だ。

グラフィックデザインの基本とも言えるグリッドデザインシステムは、顕著な例とも言える。紙の横幅を何分割かして、ここにグラフィック様子をはめ込んでいく考え方だ。この場合、A4なのかA3なのかによって、グリッド毎の間隔は広がり、その中に納められるグラフィックのサイズも変化するし、もしくは左寄せなのか、中央、右寄せでサイズは固定にするのかなど、グラフィックデザイナは判断を求められる。

エンジニアならば、このデザインは、多階層なif文による条件判定で実施無ければならないと、アルゴリズム的なものだと感づいているはずだろう。現代のオンスクリーンデザインにおいては、絶対値より相対値、そして相対値よりアルゴリズムが求められている。

この議論の中で、UIデザイナが上に立ち、エンジニアの力量を試す構図ができているが、果たして、それもそうなのだろうか。UIデザイナが、その値にきちんと意味を持たせているかも、我々は考慮しなければならない。自分の場合、エンジニアの立ち位置でUIデザイナが求める実装を求められることが多い。その際にデザイン指示書に対して質問を投げかけるが、即答で返ってこないことが多大にある。特に動的なデザインの場合に、デザイナは答えに窮することがある。WordPressやヘッドレスのCMSから流れ込んでくる情報を表示するテンプレートを用いたデザイン場合、様々な情報の量や質に合わせて、形を想定して実装する必要があるが、そのパターン出しが甘いデザイン指示書も多い。なぜならば、情報量(文字数など)によって、行数が一定では無く複数行が想定される場面において、(UIデザイナが思い込んだ)1行の情報量の場合のピクセル単位での指定はされているが、複数行になった場合の施策が考えられていない場合がある。複数行の場合の行間は?行末の処理は?その場合他パーツとのマージンは単一行の場合とどう違ってくるのか?フォントサイズは、同じサイズで適正なのか?などなど。エンジニアは、そういった想定を考えて実装を求められることもあるが、それはフリー演技として彼らに求められるのでは無く、UIデザイナが当初から考えるべきことである。

そもそも、1pxというが、オンスクリーンデザインにおいて奇数の指定というのは、多用すべきもでは無い。というのも、コンピュータというのは2進数で動いている計算機である。そのため、処理を速くしたり、変なアンチエイリアスが掛からないようにするには、2の乗数でサイズを出していくことが求められることが多い。2,4,8,16,32,64,128,256,512,1024など見覚えがある数値では無いだろうか。一方で、Rを指定する場合は、計算上奇数の方が好ましいと言うのもある。こういう数学的以前の道具の特性を理解した数値出しがされているか?これも、考えなければならない重要な点である。0.5pxなどという数値指定を出しているデザイナは、影でエンジニアに嘲笑されていると覚悟しよう。

話をさらに進めるならば、未だにUIデザイナがデザインカンプをつくり、それをフロントエンジニアが実装するというワークフローにも疑問を感じなければならない。デザインエンジニア的な人材が、UIデザインもUIの実装もかねて、設計と実装、検証をループさせて実施していくことが本来は求められるべきである。私は絵しか書けないというからという時代は終えて欲しい。私はコードしか書けないからと言うUIフロントエンジニアの時代も終えて欲しい。確かに、高機能なUIコンポーネントを実装するフロントエンジニアの場合は、それに当てはまらないかもしれないが、今、分断されているUIデザイナとフロントエンジニアの境界は融けるべきものではないだろうか。