背景と緊急対応:医師向け決済画面におけるフロントエンドUXのリファクタリング

e-casebookは、製薬会社や医療機器メーカーが医師を招き、レクチャーや啓蒙活動を行うマーケティング施策としての側面、医師によるレクチャー、ライブデモンストレーションなど医師による医師へのライブ配信プラットフォームとしての側面を持っています。この自社プラットフォームの運用において、学会や研究会の開催直前、あるいは進行中という極めてクリティカルなタイミングで「プランや料金の選択方法が分からない」という医師(ユーザー)からの緊急の問い合わせがカスタマーサポート(CS)へ寄せられました。
イベントが現在進行形で動いているため、バックエンドのロジック変更や、重い意思決定を伴うエンジニアの新規開発を待つ余裕は1分もありません。そこで私はCSチームから状況をヒアリングした上で、エンジニアの開発負荷が一切かからない「CSSの修正(見た目のハック)」による解決策を即座に立案。チームのデザイナー上司へ提案して迅速なGO(承認)を取り付けました。上司の承認のもと、エンジニアに対して「最速で本番へあげてほしい」という確実な投げかけを行うことで、即座にUIの問題を解決するアプローチを取りました。
元の画面は、4つほどの料金プランがラジオボタンの箇条書きとして素気なく並んでいるだけで、選択肢に境界線もなく、ユーザーから見て「ボタンとして押せる」見た目にすらなっていませんでした。これに対し、各選択肢を視覚的な「カード型UI」へと変更するための枠線を追加。さらに、クリックして選択した際には背景色がしっかりと変化するインタラクションをCSSのみで実装しました。これにより、操作した医師が「自分が今どのプランを選択しているのか」を視覚的に一瞬で確信できるUIへとアップデートし、ユーザーの迷いを無くして決済トラブルを最速で収束させました。
協働プロセス:エンジニア主導(制約ファースト)の画面をデザインで補完する
現在のe-casebookの開発環境において、私は「デザイナー主導」ではなく、あえて「エンジニア主導」のワークフローを敷いています。なぜなら、バックエンドの仕様や医療ドメイン特有の複雑な技術的制約を最も深く把握しているのはエンジニアだからです。社内向けのライブ配信管理画面や、業務の効率化のために突貫工事で必要になった「タグ付け機能」など、まずはエンジニアが仕様を満たした「機能としてシステムが100%動く状態」の画面を組み上げます。
そこからがデザイナーの職能の真骨頂です。エンジニアが担保してくれた機能ロジックやシステム制約を一切壊すことなく、ユーザーにとって使いやすいUIへと泥臭く調律(チューニング)していきます。
- 情報の再配置とグルーピング:エンジニアが実装順に並べた煩雑なフォームを、人間が認知しやすい自然な順序へ並び替え、バラバラだったデータを適切な塊へとまとめ直します。
- マイクロコピーの補足とラベル最適化:操作の迷いや誤入力を防ぐための補足文言を適切な位置に書き加え、ボタンのラベル表記を「システムの処理名」から「ユーザーの直感に沿った言葉」へと変更します。
- ブランドカラーと一貫性の担保:突貫実装でブランドカラーが適用されていなかったり、独自のコンポーネントが使われていたりする場合に、「ここの色、少し違いますよ」とブランドガイドラインに沿った一貫性をフィードバックします。
エンジニアのロジックをリスペクトし、彼らに嫌がられるような手戻りを作らずに、プロダクトの体験クオリティのラストワンマイルをデザイナーの手で確実に埋める。これが効率性と品質を両立させる、私たちのリアリティある協働プロセスです。
組織と職能:40人規模のインハウスにおける「ハイブリッド」の等身大

e-casebookを運営する約40名規模の組織において、インハウスデザイナーはシニアデザイナー(上司)と私の2名です。そのため、プラットフォーム自体のUI/UX設計という「プロダクトデザイン」から、製薬会社などの大手クライアントのマーケティング施策を支える配信告知用キービジュアル(KV)の制作という「クライアントワーク(グラフィックデザイン)」まで、社内で必要とされるあらゆるデザイン領域をハイブリッドに兼任しています。
これについて、大規模な組織が謳うような「2つの職能が交わることによる劇的なシナジー」といった大げさなメリットがあるとは考えていません。この体制は組織の規模ゆえの必然であり、今後会社がスケールしていけばそれぞれの専門領域へと綺麗に分担されていくべきだと冷静に捉えています。
ただし、実務を回す上での意思決定においては、デザインの品質に責任を持つ上司の確実なレビューとGO(承認)を経た上で、エンジニアチームや社外のクライアントへと共有される確実なガバナンス体制を敷いています。これにより、少人数でありながらチームとしてのクオリティコントロールを維持しています。
また、インハウスならではの「明確な手離れの良さ」と「スピード感」は確実に存在しています。自らが自社プラットフォームのUI仕様構造を深く握っているため、例えばKVから遷移させるための販促バナーや告知素材を制作する際にも、「プロダクト側のこの枠には、どのピクセルサイズでグラフィックを落とし込むべきか」がDay 1から完全に頭に入っています。実装イメージやサイズ要件で一切迷うことがないため、余計なコミュニケーションコストをゼロに抑え、小規模チームならではの機動力で施策を最速でパブリッシュし続けることが可能です。
振り返りとこれからの展望:制約の中で最大の価値を出すデザイナーの立ち回り
自社プラットフォームの運用改善、そして限られたリソースでのハイブリッドなデザイン業務を通じて、プロダクトデザイナーとして磨かれたのは「限られた制約(時間・人員・システム仕様)の中で、今できる最善の解決策を泥臭く見つけ出す能力」です。
綺麗なFigmaのプロトタイプを時間をかけて描くだけでは、起きているリアルな問題を解決することはできません。時にはCSSの数行の変更で、時にはエンジニアが作った動く画面に文言を足すだけで、ユーザー体験は確実に向上します。今後もビジネスの規模と開発チームのフェーズを見極めながら、デザイナーという枠に囚われず、上司との迅速な連携プロセスのもとでプロダクトが前進するための最も実効性の高い手段を選択し続けていきます。
