HTML5 Conferenceでの @yhassyのセッションの話を聞いて、ひたすらウンウンとうなづくばかりだった。

僕の今の仕事というのは、デザイナーと（フロントエンド）エンジニアの間の立ち位置でいろんなことをしている。その重要な仕事のひとつが、このセッションの主題のようなデザインの言語化への取り組みをリードするということ。

具体的にやっていることの一つをあげると、例えばスライドにあるような、あるUIコンポーネントのことを何と呼ぶか、またコンポーネントの粒度についての話し合いの場を設けるようなことをする。はじめから原則と呼べるようなものがあればいいが、なかなかはじめから立てるのは難しく、各々の考え方・価値観というのをすり合わすため、ほぼ毎日に話し合いを時間をとって進めていたりする。

はじめはデザイナーが起こすデザインカンプ、といっても完全なものではなくある程度整ったSketchデータを確認しながらインベントリとしてUIコンポーネントを抽出する。そのコレクションからパターンやルールとして考えうることをデザイナー、実装のリードをするエンジニアとすり合わせる。

下記はすべて一例だが、

コンポーネントの定義に関して：
・名前はこれで良いか？
・（Atomic Designのようなものを取り入れていれば）この階層・粒度で良いか？

装飾に関して：
・スクリーンに応じて最大幅を持つか？
・余白のルールはどうなるか？
・余白は8の倍数のルールで揃えられるか？
・角のradiusのサイズは？

実際にこのようなやり取りを交わすことがあるが、これに加えて「どういうときにこのコンポーネントを使うか」を定義できるとなお良い。

世の中には立派なUI・CSSフレームワークは存在するが、そのコンポーネントを「いつ・どのように使うか」が適切でないと、見た目だけがそれらしいが、一貫性がなくどこか歪んだUIが出来上がってしまう。一見Material Designのように見えるが、中身が伴っていないUIはよく見かけるはずだ。

少し話が逸れたが、ともかくデザイナーとエンジニアの間に立ってファシリテートをするというようなことをやっている。しかし、なんだかんだ僕の場合にはコードを書く（時にはUIデザインもする）仕事もあるので、こればかりをやっているわけにもいかない。ということで、判断するための基準として「デザインの原則」というものを考えないといけない。

しかしこれをまた考えるのが大変だ。少なくとも1人で考えきるのは難しいし、考え抜いたのの正しい≒チームの価値観として合意が得られるものかどうかはシェアしてはじめてわかる。叩き台となるものは誰かがリードして考えても良いが、それを磨いていくのはワークショップ的にすり合わせていくのが良いのだとおもう、が、正直僕（僕ら）はまだまだ実践が足りない。

「言葉」が一番難しい

先に例にあげたUIコンポーネント自体のことはデザイナー、フロントエンドのエンジニアでのすり合わせでも悪くはないかもしれないが、その名前であったりというのはyhassy氏のセッションにあるように、Webサイトのグロースなどを担当するビジネス、マーケターサイドの人も同じ理解である方が良い。「XXXというページの、△△△の部分をA/Bテストしたい」みたいなときに「XXXってこのページのことですか？」とかそうした本来は不要であるようなコミュニケーションをし続けることになる。そういうことが発生する都度すり合わせていくことの方が経験上は多いが、根本的に理解を深めているほうが絶対に良いだろう。ビジネスサイドだけでなく、サーバーサイドなどバックエンド側での語彙とのすり合わせたいが、これもなかなか実践できていなかったりする。

誰がそれをやるのか

みんなでやる、という話だが、やはりそれをリード、ファシリテートをする人が必要だ。話が戻るが、僕の今いる環境だと僕がやろうとしている（やっっているつもり）だが、コードやデザインをするプレイヤーと兼務で片手間でやるというのは継続しないし、スケールしない。

つまりはこのnoteのオチとしては「みんなどうしてるのさ」という思いだ。考えられるひとつの方法として、yhassy氏のような外部の腕が立つ人を招いてワークショップを実践するというのは良い手立てだとおもっている。

あとは僕のような人がもっとほしい。

誰か一緒にこういうことやりません？

気になる人がいたら、もしくはこの手の話を分かち合ってくれる人がいたら、気軽にごはんにでもTwitterなどからお誘いください！

って、こういうオチにするつもりなかったけど、若干やらしい終わりでごめんなさい。

追記（2018/11/26 15:10）

冒頭に紹介した @yhassy氏から本記事へのフィードバックをいただいたのでこちらもぜひ。