- アシスタントディレクター
- フロントエンドエンジニア
- Public Relations
- Other occupations (2)
- Development
- Business
開発の現場において、エンジニアの主戦場はコードであり、技術です。 しかし、私たちブランコでは、エンジニアとデザイナーの垣根をできるだけ低くしたいと考えています。
もちろん、エンジニアにデザイン業務を兼任してほしいわけではありません。 求めているのは、「デザイナーが描いた意図を汲み取り、実装の観点から『もっと良くするには?』を一緒に議論できるスタンス」です。
今回は、私がこだわった「あるUI」の話を紹介します。 「なぜそこまでこだわるのか?」という私たちの思想を知っていただき、そこに共感してくれるエンジニアの方と出会いたいと思っています。※以下、Note記事より再編集して掲載
「◯」と「✕」に感じた、強烈な違和感
プロダクト開発の現場では、日々さまざまな要望が飛び交います。 昨日、スタッフからこんなリクエストがありました。
「現行のサービスで実装されているから、今回のプロトタイプにも、項目に『◯(マル)』と『✕(バツ)』を付ける機能を実装してほしい」
機能の引継ぎとしては、ごく自然な要望かもしれません。しかし、その言葉を聞いた瞬間、私の脳内で「クリティカルシンキング」のスイッチが入りました。「ん? そもそもそれ、本当に必要か?」と。
もちろん、言われた通りに実装することは簡単です。しかし、そこには私の「美意識」と「仕事へのワクワク」が欠けていました。私はこの小さな違和感を掘り下げることで、単なる機能実装以上の価値を生み出すことに決めました。
UIにおける「美しさ」は、機能要件そのものである
私が◯✕をつける機能に抵抗感を覚えた最初の理由は、「美しくないから」です。 画面上に◯や✕が羅列されている状態を想像してみてください。それは視覚的なノイズとなり、情報の優先度を曖昧にします。
UIデザインにおいて「美しさ」とは、単なる装飾ではありません。 画面が美しく整頓されていないと、ユーザー(作業者)の「目」は滑りやすくなります。目が滑れば、重要な情報を見落とし、誤操作を誘発します。さらに言えば、乱雑な画面で毎日作業をすることは、作業者のモチベーション、すなわち「やる気」を削ぐことにも繋がるのです。
「美しさは、誤操作の防止であり、やる気の源泉である」。 そう定義した時、安易に◯✕を並べることは、ユーザーにとってベストな解ではないと確信しました。
ユーザーが見ている景色を、憑依させる
では、なぜスタッフは◯✕を欲しがったのか。私はユーザーの視点に立ち、彼らのカスタマージャーニーを脳内で再生してみました。
資料を見る → 間違いがないか探す → 間違っていなければマークする。 ここまでは良いのです。問題は「間違っていた場合(✕をつける場面)」です。
ユーザー視点で深く潜って気づいたのは、「✕をつける時は、必ず『コメント』とセットである」という事実でした。 単に✕をつけるだけでは業務は進みません。「ここが間違っているので修正してください」というフィードバックや、「これはどういうことですか?」という上司への相談が必ず発生します。
つまり、本質的な課題は「✕をつける機能がないこと」ではなく、「スムーズに指摘・相談ができるコメント機能の不備」にあったのです。私はまず、コメント機能の改修から手をつけました。
「ドリル」ではなく「穴」を。さらにその先へ
マーケティングの格言に「ドリルを買いに来た人が欲しいのは、ドリルではなく『穴』である」という言葉があります。
今回のケースに当てはめれば、スタッフは「◯✕という機能(ドリル)」を欲しがっていたのではなく、「間違いなくチェックを完了させ、安心して次の工程に進める状態(穴)」を欲していたのです。
そこで私は、◯✕という記号を使わずに、その目的を「美しく」達成するUIを設計しました。
- 未確認項目の可視化 未確認の項目は、フォントのウェイト(太さ)を上げることで、パッと見た瞬間に「まだ終わっていない」と直感的に伝わるようにしました。
- チェックの簡素化 「確認済み」のチェックアイコンは、マウスをホバー(接近)させないと出現しないようにしました。普段は隠しておくことで、画面の美しさと視認性を担保します。
- 状態の明示 コメントがある項目に関しては、アイコンを常時表示し、色によってステータス(修正依頼中、相談中など)がひと目でわかるようにしました。
- 完了の定義 すべてのチェック事項(太字)が消え、課題が解決されない限り、「確認完了」とみなせないロジックを組み込みました。
これにより、残り何個チェックすべきかが明確になり、かつ画面は常に整理された美しい状態を保つことができます。
自分自身が「ワクワク」していなければ、誰も感動させられない
なぜ、ここまで考え抜くのか。 それは、言われた通りに◯✕をつけるだけの仕事なんて、「やっていて自分がつまらないから」です。
仕事において一番大切なのは、作り手自身がワクワクしているか、夢中になっているかだと思います。「このままやったらつまらない」と感じたら、それは改善のチャンスです。自ら面白い方へ、美しい方へと仕事をコントロールしていく。その熱量は必ずプロダクトに乗ります。
「ユーザーが本当に欲しいものは何か?」を突き詰め(クリティカルシンキング)、 「どうすればもっと美しく解決できるか?」を考え(美意識)、 「こうしたら驚くだろうな」と企む(遊び心)。
スタッフのリクエストには必ず応えます。しかし、違うアプローチは取りません。 「◯✕をつけて」というリクエストの要件(確認機能、ステータス管理)をすべて満たしたまま、彼らの想像もしなかった美しく合理的なUIを提示する。
「えっ、◯✕じゃないけど、こっちの方が断然使いやすいし、分かりやすい!」
そうやってリクエストした人を驚かせ、喜ばせ、最終的に自分やプロダクトのファンになってもらう。そこまでやって初めて、仕事は「面白い」ものになります。
単なる機能実装を、自分自身が熱狂できるクリエイティブな挑戦に変えること。それこそが、プロトタイプに命を吹き込み、チーム全体を前進させる原動力になるのだと信じています。
仕事を面白く、期待を超えるための「6つの思考法」
今回のケーススタディで実践した、単なる作業をクリエイティブな仕事に変えるためのマインドセットです。
- クリティカルシンキング 「言われたからやる」を脱する。リクエストに対する違和感を無視せず、「そもそも、それは本当に必要なのか?」と前提を問い直す勇気を持つこと。
- 本質を考える 手段と目的を履き違えない。ユーザーは「◯✕(ドリル)」という機能が欲しいのではなく、「間違いなくチェックし終わること(穴)」を求めている。その真の目的を見抜くこと。
- ユーザー目線 ただ想像するのではなく、自分にユーザーを憑依させる。一連の動作を脳内でシミュレーションし、「✕をつける時は、必ずコメントが必要だ」というような、言葉にされていない隠れた文脈を発見すること。
- 美意識 美しさは「機能」である。整ったUIは単なる装飾ではなく、情報のノイズを減らし、誤操作を防ぎ、そして働く人の「やる気」を守るための必須要件だと定義すること。
- ワクワク(遊び心) 「このままやったらつまらない」は、改善の合図。作り手が退屈していれば、使い手も感動しない。自ら仕事を「面白い方」へ、「美しい方」へと変換し、作り手自身が夢中になること。
- ファンになってもらう 要望は100%満たした上で、相手の想像を超えるアプローチで返す。「そう来たか!」という驚きと感動こそが、信頼を生み、自分やプロダクトのファンを作る。
デザイナーとタッグを組み、品質を高めるエンジニアへ
今回紹介したエピソードは私の例ですが、実際の開発現場では、デザイナーとエンジニアがチームでこの課題に向き合います。
「仕様書にはこうあるけれど、実装的にもっと動きをリッチにできる」 「デザイナーの意図を汲むなら、こっちのライブラリを使ったほうがいい」
そんなふうに、エンジニアの視点から提案をくれる方を私たちは求めています。 デザインや企画を丸投げするわけではありません。それぞれのプロフェッショナルが、互いの領域を尊重し合いながら「良いもの」を作る。そんな働き方に興味はありませんか?
「言われた通りに作るだけでは物足りない」と感じているエンジニアの方。 ぜひ一度、私たちのチームの雰囲気を見に来てください。「話を聞きに行きたい」ボタンからのエントリーをお待ちしています。