❝UIデザイナーから見た実装の話❞ をテーマに『UI＋FE合流点』を開催してきました。

gaji-staff

2024.2.15

活動の報告

2月6日、スタートアップ支援をしている Gaji-Labo と KARTE などの開発運営をしている株式会社プレイドさんとの共催で『UI＋FE合流点』を開催しました。

プレイドのプロダクトデザイナー tori（鳥越良子）さん
SmartHR のクリエイティブディレクター sekig（関口裕）さん
スマートバンクのデザイナー putchom（福嶋瞭）さん

三人のゲストと Gaji-Labo 代表の原田、UIデザイナーの今西がお話させていただきました。

ちなみに UI＋FE合流点は『ゆーあい・ぷらす・えふいー・じゃんくしょん』と読みます。

UIデザイナーとフロントエンドエンジニア向けにお互いの狭間になりやすいポイントを境界ではなく「合流点」として業界のトッププレイヤーたちに語ってもらうリアル開催イベント。

ネット配信や動画はしないオフラインイベントならではの踏み込んだ話になるので、今回も冒頭から「X(Twitter)への投稿は歓迎ですが、スピーカーが過激なことを言ってしまったら、そのときは柔らかな内容に書き変えてポストして」という参加者へのお願いをさせていただきました(笑)

「デザイナーさん」や「エンジニアさん」というラベルを貼らずに ❝プログレス感❞ を大事に。

序盤は、SmartHR の sekig さんから「デザイナーさん」「エンジニアさん」といった職能名で呼んだ時点でもう相手の役割を固定しているのではないかという問題提起が挙がって盛り上がりました。

それを受けてのプレイド toriさん

「”デザイナーさん”とか”エンジニアさん”と大きな主語で呼んだ瞬間に『こういうものでしょ』っていうラベルがついてしまう。もっと一緒に働く人の個をよく見てコミュニケーションしたい。相手の得意なことや苦手なことを知って橋渡しをしてプロダクトを一緒に作っていくプログレス感を大事にしていきたい」
――― プレイドプロダクトデザイナー tori（鳥越良子）さん

sekig さんが「プログレス感」という言葉に大ウケで爆笑していました。
会場のみなさんにもかなり刺さったようで、X(Twitter)にもハッシュタグ付きで「プログレス感」というポストが並び、職能名ではなく個とコミュニケーションしようというスピーカー陣の話に会場のみなさんもうんうんとうなづかれていました。

「その 1px 重要ですか？」へのアンサーは ❝合目的性❞ 。

「その 1px 重要ですか」というトークテーマでは、もちろん1pxはどうでもいいこともあるし、1pxが大事な状況もあるという話になり、それは「合目的性」で判断すべきというスマートバンクの putchom さんの発言に会場はおおっと盛り上がりました。

「うちの会社では、プロトタイピングフェーズと詳細設計フェーズを明確に分けている。1pxは重要だけど、リサーチを重ねて検証するプロトタイピングフェーズでは1pxではなく、まず合目的性をレビューしている。」
――― スマートバンクデザイナー putchom（福嶋瞭）さん

プレイド tori さんからは「もっとユルいアウトプットをしたい」とこんな発言が。

「チームメンバーが意見を言いやすいものを出すのが大事だと思っているけれど、Figma が進化しすぎてコンポーネントで作ったガチガチのものを見せても意見を引き出すような余白がない。ワイヤーフレームとか紙とかでやったほうがみんな意見を言いやすいのかもと思っている。」
――― プレイドプロダクトデザイナー tori（鳥越良子）さん

他のスピーカーからは「堅いコミュニケーションするとアウトプットも堅くなるよね」や「エンジニアからツッコミしやすいユルいアウトプットをしつつ、精緻にやるべきところではカチッとやるところを見せる」といった話も。

また、 putchom さんが IDEO のティム・ブラウンがTEDで言った「デザインはデザイナーだけに任せるには重要すぎる」という言葉を使いつつ、いかにフロントエンド開発者やチームメンバーに「デザイナーから降ってきたものは変えられないと思われないように」という話をしたことも盛り上がりました。

「デザイナーは『こういうものを作るんだ』とか『これじゃない』といった(チームの共通認識になる)プロダクト像をビジュアルで伝えている。みんなで議論するための土台をデザイナーが作っている。」
――― スマートバンクデザイナー putchom（福嶋瞭）さん

「この話はX(Twitter)に書かないで欲しいんですけど…」と出てきた sekig さんの話もとても参考になる面白い内容でした(ここに書けないのが残念です)。

デザインシステムの「堅さ」の話

「共通言語はデザインシステム？」というトークテーマでは、プレイド tori さんから「会社はミッションやそれを実現する事業のためにあるのであって、デザインシステムのためにあるわけではない。探索と保守のバランスが難しくて、デザインシステムの堅さをどうすべきか迷子です」という悩みが出て、会場からの参加者からも共感の声が上がりました。

「デザインシステムを作って良かったのは『なんでこの色なのか』『なんでこのステートか』『なんでこのデザイン』というのを言語化しなくちゃいけなくなったこと。
デザインエンジニアだけではなくデザイナーもこれがないと意図はわからないし、デザインシステムを共通言語にしている。」
――― プレイドプロダクトデザイナー tori（鳥越良子）さん

tori さんが実務で体験した「実装者もロジック・意図がわかって一緒に走れた」事例をお話されていたのも心に残りました。

「共通言語としてデザインシステムがワークしているかが大事。デザインシステムはそういう営み自体が大事。細かな話ばかりが目的になってしまって、共通言語になっていないとつらい」
―――SmartHR クリエイティブディレクター sekig（関口裕）さん

共通言語・コミュケーションツールとして使うデザインシステムの話、ここでご紹介した以外にもとても素晴らしい意見が交換されていて、会場の参加者のみなさんも刺激になったのではないでしょうか。

デザイナーに聞きたい、「状態」の話。

事前アンケートで「状態の話」を聞きたいという回答が多くあったので、司会の原田からみなさんに質問。

スマートバンクの putchom さんが、ソフトウェアテストの勉強してると状態をどうすべきか発想できるようになっていく、という興味深いお話をしてくださいました。

「ソフトウェアテスト設計の書籍を読んでいると、UIデザインでやってることと同じなんじゃないかと思って。
まだ試してみたわけではないけど、UIデザイナーがソフトウェアテスト設計の手法を学んだらUIデザインもっと上手くなるんじゃないかって仮説がある。
ボタンのステートとか画面遷移とかFigmaで作ってるのとソフトウェアテストの設計は似ているので、Figma のセクションを使って状態の意図を書くようにしてみている。
ソフトウェアテストの設計をもっとデザイナー向けにわかりやすく転用できないか考えているんですよ。」
――― スマートバンクデザイナー putchom（福嶋瞭）さん

また、「状態はUIデザイナーが事前に想定動作をすべて埋めることはとても難しい。ただ、どうしても実装時にフロントエンドで苦労するところだから、コミュニケーションが大事だ」という話も盛り上がりました。

Gaji-Labo のUIデザイナー今西の「エンジニアから『あれがない、これがない』って言われた経験が積み上がって埋められることが増えていく」という発言に、tori さんも「プレイドだとデザインエンジニアが『軽く作ってみたんですけど、この状態おかしくないですか』って言ってくれる」と反応。

『どっちかが埋めればいい』という押し付けをせず、お互いがパスを回すことで良い仕事ができるようになっていくというチームコミュニケーションの話も面白かったポイントだと思います。

❝『俺はそういう設計のものを実装したくない』と、自分の考えやこだわりをちゃんと言葉にして言ってほしい。❞

今回の『UI＋FE合流点 Vol.2』は、活躍するUIデザイナーたちに実装やプロダクト開発の実務を語ってもらい、会場にいるフロントエンド開発者と合流点を探っていこうというものでした。
(そのため今回はスピーカー全員がデザイナー。前回はフロントエンド開発者とUIデザイナーが半々でした)

そこでスピーカーであるデザイナーたちから出てきたのは「もっとお互いに踏み込んでいこう」というもの。

「デザイナーが『エンジニア怖い』とか言ってしまうのはよくない。どちらかが間違っているとか無知だとしても、自分のダメなところを教えてくれって姿勢をお互いが持つことが大事。どちらが正しいかとかはどうでもよくて、お互いを知ろうとするかどうか。
チームメンバーのエンジニアには『俺はそういう設計のものを実装したくない』と、自分の考えやこだわりをちゃんと言葉にして言ってほしい。」
「拒絶や攻撃的な意味じゃなく、『そもそもお前の価値観などわからんのですよ』って言いたい。人それぞれとかじゃなくプロなのだから言葉にして言わなきゃわからんだろと。」
「Figma がどうみたいな話とかしなくていいんですよ。話すことができてないプロジェクトチームは上手くいかないし、言わないと面白くならない。」
――― SmartHR クリエイティブディレクター sekig（関口裕）さん

前回もそうだったんですが、SmartHR の人たちはチームメンバーの「意思」を大切にしているのが素敵ですね。仲間を信頼して働きたいという文化を感じます。

それと、これも同じく前回同様なんですが、SmartHR の人って名言製造機と言わんばかりに名言をポンポン連発してくるのはなんなんでしょうね。そういう人ばかり働いてる会社なんでしょうか……

「プロジェクトメンバーと上手くやってはいるが、フィードバックや質問も”もっと踏み込んでこいよ！”と思ってはいて。
そうやってデザインの意図を理解しあって、一緒にやってる “プログレス感”を大事にしていきたい。」
――― Gaji-Labo UIデザイナー今西

この今西の”もっと踏み込んでこいよ！”に会場からは「かっこいい」という感想が飛んできていました(笑)

「説明と質問を諦めない姿勢が重要。
そうは言っても、組んだばかりのメンバーから『私はこういう価値観でデザインやエンジニアリングをやってる』と最初から言ってもらえるかというと、それは難しい。
自分からみんなに何を大事にしているか、どういう意図があるか質問することを大事にしている。」
――― スマートバンクデザイナー putchom（福嶋瞭）さん

スマートバンクの putchom さんのこの言葉。
チームメンバーと誠実なコミュニケーションをして、しっかり信頼関係を作っていこうという姿勢が素敵だと思いました。

最後に Gaji-Labo 代表の原田のまとめ。

「スタートアップ支援をしている Gaji-Labo は、色々な会社・さまざまなプロダクトに関わるが、上手くいってるところはデザインシステムやツールの使い方が上手いとかではなくて、ともかくチームコミュニケーションが上手いんですよね。」
――― Gaji-Labo 代表原田

合流を実践するための『UI＋FE合流点』

UI デザインとフロントエンド開発という隣接した職種の「合流点」を発見するためのイベントである『UI＋FE合流点』。

フロントエンド開発者と UI デザイナーが改めてその合流点を話し合う機会、他社の同業種と話し合う機会として開催しています。

スピーカーによるトークイベントに参加者のみなさんが「自分はこう考えた」だとか「もっとここの話を深掘りして聞きたい」と普段の仕事のチームメンバーとは違う人たちと懇親会で話し、隣接した職種の知り合いを増やして帰ることが「合流の実践」になるのではないかと考えてこのイベントを開催しています。

今後も『UI＋FE合流点』を続けていきたいと思っていますので、「参加したかったけど知らなかった」や「次は参加するぞ！」という方は、Gaji-Labo の X(Twitter) アカウントをフォローするか、 connpass のメンバーになると次回のイベント情報もキャッチできると思います。

ゲスト登壇者のみなさま

tori（鳥越良子）さん（@ryoko_torigoe）

株式会社プレイド　プロダクトデザイナー

プレイドではKARTE全体のプロダクトデザイン（企画・設計）やデザインシステム、DPM。

大学卒業後兄妹でデザイン会社を創業、創業以来UIUXデザイン事業を拡大。クリエティブディレクターとしてデジタル領域のプロダクトデザインに約15年携わる。2021年株式会社プレイドに入社。

sekig（関口裕）さん（@hanarenoheya_im）

株式会社SmartHR　クリエイティブディレクター

SmartHRのブランドに関わる取り組み、チームビルディングや広報や育成に携わる。

大学で工業デザインを専攻後、デザイン会社にて雑誌や広報誌のエディトリアルデザイン、コーポレートサイト等のアートディレクションに従事。転職後はクリエイティブディレクターとして幅広い施策の推進を行う。初めての事業会社として2020年にSmartHRへ。好物はゴボウと麩菓子。

putchom（福嶋瞭）さん（@putchom）

株式会社スマートバンク　デザイナー

株式会社スマートバンクでは家計簿プリカB/43のプロダクトデザイン及びデザインシステムの設計。以前はGMOペパボ株式会社でSUZURIのデザインリード及び共通基盤デザインシステムInhouseの設計を担当し、2022年のFigmaのグローバルカンファレンスConfigにて「One design system for multiple brands」を発表。書籍『デザイントークンのつくりかた』販売中。