cho-menは、世路庵メンバーがお届けする情報発信メディアです。
フロントエンドエンジニア
小山 樹人
投稿日： 2024.11.18
2024年8月9日（金）に、DIST.44「管理画面から考えるUX」を開催しました。会場の中野セントラルパーク カンファレンスに130名を超える参加者が集まり、大盛況となりました。
当日は、さまざまなバックグラウンドを持つスピーカーによる4つのLTと、2つのセッションで管理画面について語っていただきました。
本記事では、当日のセッション内容をレポートします。スライドや動画も掲載していますので、ぜひご覧ください。
最初は、株式会社Helpfeelの秋山博紀さんによるLTから始まりました。Helpfeelさんが開発・提供するFAQシステム「Helpfeel」では、同社がCMSとして提供している「Cosense（旧Scrapbox）」を活用しています。自社開発のSaaS（Cosense）を活用するテクニックについて紹介されました。
実例として、自社開発のプロダクトを「カスタム」して使うことについて、ポイントを解説していただきました。
メリットとしては、新規事業の立ち上げを素早く、品質良く行えること。一方でUI/UXの一貫性などについては課題も残るということでした。
スライド：
動画：
続いて、株式会社CRUTECHの堀田愛子さんによるLTでは、管理画面における反復操作を、普段利用するユーザーにとっての効率性や使いやすさに重点を置いた情報設計・導線設計のUIについてお話しいただきました。
実例として「在留カード就労資格管理サービス」のUX改善についての解説がありました。このサービスは、在留資格の期限（有効期限、在留期限）を確認するためのツールで、オペレーションには反復操作も多く利用時間も長いものとなっています。以下のようなポイントでUX改善を行ったとのことでした。
このUX改善によって、一人あたりの照会時間が約90秒から30秒に短縮されたそうです！
対象ユーザーを考慮してUXを深めていく過程がとても参考になりました。
動画：
3本目のLTでは、株式会社まぼろしの松田 直樹さんから、必ずしも全員が喜んで使うわけではない場合の管理画面UX設計について、国際的なモデルを交えながら解説していただきました。
管理画面が組織に導入される際、1次ユーザーがその導入を選んでいないことが多いため、誰も好きで使っているわけじゃない（ことが、おそらく多い）という鋭い切り口から発表が始まりました。
1次ユーザーにとって価値のある体験は「面倒なことが早く終わる」ことであり、その実現のために「品質」に注目し、そこから体験設計を考える必要があると語られました。
また、品質の標準化と向上を目指し、国際ガイドライン「SQuaRE」を基にした解説をしていただきました。「品質から価値を生み出し、適切な体験につなげる」というまとめの言葉も印象的でした。
スライド：
動画：
LTの最後は、株式会社マイベストの井上 周さんによる発表でした。社内のオペレーションの最適化を目指し、開発チームが管理画面をどのように改善しているかについてお話しいただきました。
マイベストさんが開発する、商品比較サービス「mybest」ではコンテンツやデータを入力する管理画面を自社で開発しています。管理画面の改善を行う際、「使用者のフィードバックを元に開発する」手法では、「下請け感がでてしまう」「個別最適となるリスク」といった問題があると指摘されました。これらの問題を解消するために、OpexDD（Opex Discovery and Delivery）という手法を生み出し、開発チームが主体的に動ける仕組みについて、以下の特徴を交えて解説していただきました。
オペレーション全体を俯瞰し、管理画面の改善ポイントを見つけていく過程を、非常に分かりやすく解説していただきました。
スライド：
動画：
次に、Ubie株式会社の大木尊紀さんによるセッションでは、業務での管理画面開発から得た知見を「避けるべき5つの罠」として紹介し、それらを回避する方法について解説していただきました。
1つ目に紹介されたのは、現場の人（管理画面利用者）の声を反映しすぎることで、改善できる部分を見逃してしまうという点でした。利用者は管理画面の操作に慣れてしまっているため、開発者側からの俯瞰した視点をうまく取り入れていけると良いとのことです。そのために、利用者とコミュニケーションをとりながら、ゼロベースでオペレーションからデザインすることが大切であるとされていました。
2つ目は、データのモデリングをしていると利用者の目線が抜けがちになるという罠です。管理画面の使いやすさとデータ構造は密接に関係しているため、利用者のメンタルモデルを理解してデータ設計をすることで、UIの設計もやりやすくなると解説していただきました。
3つ目として、画面を作っていくうちに、気づいたらデータの階層が深くなっているという問題点について解説していただきました。改善策として、ショートカットできるナビゲーション設計が重要であるとし、ポイントとして「グローバルナビゲーションから1、2手で遷移できる」「前後にどのようなデータがあるのか明示する」といった点を挙げられました。
4つ目は、気を抜くとすべてTable UIになってしまうというもので、罠名もインパクトがあります。Table UIを利用するのに適した情報とそうでないものがあり、特にTableは情報に強弱をつけることが苦手であるため、項目が多くなると重要な情報を見落としてしまう可能性が高くなるということでした。 Tableが向いている場合、向いていない場合を分かりやすく解説して頂き、ケースバイケースで考えることが重要であるのだと感じました。
最後に紹介されたのは、役割や立場が異なる人が同じ画面で作業する場合、全員の要望に応えようとすると、結果として誰にとっても使いやすくない画面になってしまうというものでした。
管理画面開発における5つの罠について、各問題に対する考え方をわかりやすく解説していただきました。すぐに業務で活用できる実践的な内容と感じました。スライドも整理されてとても分かりやすいので、ぜひご覧ください。
スライド：
動画：
この日最後のセッションでは、株式会社グラファーの佐野 彩さん・松倉 千春さんから、前半と後半に分けて「管理画面のUX設計」と「デザインシステム推進」についてお話しいただきました。
前半は、佐野さんの管理画面のUX設計についての発表から始まりました。管理画面を操作する対象ユーザーは行政・官公庁職員などで、「ビジネス」「ユーザー」「デザイン」「実装」それぞれに課題が存在しており、行政職員らにとって普通に使えるプロダクトを目指してUX設計をおこなったとのことです。
UXリサーチ（行政職員の環境・調査）
情報設計・リデザインの最初の工程としてUXリサーチを行い、「既知から学ぶ」「自分で探索する」「実感する」というポイントを挙げながら紹介していただきました。社内外にインタビューをしたり、実際に現場に行ってその場の雰囲気を感じるなど、とても丁寧にリサーチをされている印象でした。UXリサーチで得られた情報をモデル化（ペルソナの作成）し関係性を図に落とし込む過程についても解説していただきました。
UXデザイン、情報設計の検討・WF作成、UIデザイン作成
リサーチに続いて、得られた情報をもとにビジネス課題とすり合わせながら、プロダクト・UXデザインの方針を決定していったということでした。情報設計の検討とワイヤーフレームの作成についても、実例を交えながら丁寧に解説していただきました。情報設計では、「サービス間のふるまいを統一」「OOUI化して階層を整理」などを行い、プロトタイピングとUI作成を行ったりきたりして進めたということでした。
ユーザーテストの実施
ユーザーテストは、ステータスの異なる複数の自治体で実施し、フィードバックをもとに修正を行ったということでした。テスト方法では、ユーザーにFigmaのリンクを送って作業してもらう形ではうまくいかず、Zoom画面越しに操作説明したといった、リアルな話も聞くことができました。
後半のパートは松倉さんにバトンタッチして、デザインシステムの実装と推進についてお話しいただきました。
デザインシステムを作る理由として、開発の効率化やプロダクトごとの統一感を目指したとのことでした。
デザインにシステムを構築するうえでの方針として、単体で意味を持つコンポーネントのみを公開することを定めたそうです。これにより、メンテナンスの自由度を確保できたり、エンジニア内でのユースケースに対する議論の活性化などのメリットが得られるとのことでした。アクセシビリティに関する内容では、「ボイス＆トーンの統一」を例に紹介していただきました。
また、デザインシステムは作成して終わりではなく、社内に浸透させて使ってもらうことが重要であると語っていただきました。デザインシステムの追加検討フローやStorybookの整備、デザインシステムを社内に布教するためのtipsなど実践的な内容を交えて解説していただきました。
「開発拡張性」と「社内利用率」のバランスを取って、持続可能なデザインシステムを目指して行くことが必要であるとまとめていただきました。
セッションの最後には、行政職員やユーザー（市民側）からのフィードバックを紹介しながら「職員の方に少しでも仕事を楽しいと思ってもらうために日々管理画面を改善している」とお話しいただき、とても素敵な考え方だと感じました。
スライド：行政職員が「ふつうに使える」を目指した管理画面のUX設計とデザインシステム推進
動画：
以上、DIST.44「クリエイティブコーディングで生み出すWebデザインの世界観」の当日レポートでした。
ご参加いただいた方からイベントレポートも書いていただきました。ありがとうございます！
次回の開催は、2024年11月19日（火）DIST.46 「クロスメディア表現の演出とデザイン」を予定しています。
現代のメディア表現では、Web、映像、3D、インスタレーションなど複数のメディアを組み合わせ、それぞれの領域を飛び越えるような表現が注目を集めています。DIST.46 では、桟 義雄さん（バスキュール）、田中 陽さん（Rhizomatiks, IE3）にご登壇いただき、それぞれの制作事例・制作の舞台裏についてお話いただきます。
勉強会へのお申し込みはconnpassページから受け付けております。
ウェブ制作会社には、「言ったことしかやってくれない」「提案がない」といった不満を抱かれるケースがあります。目を引くようなビジュアルは作れるがビジネス理解が不足している、運用はしてもらえるがデザインやコーディングは外注に丸投げしている、といった体制では、しばしばプロジェクトが袋小路に迷い込んでしまいます。
世路庵は、ビジネスとクリエイティブを両立するウェブ制作会社です。ウェブサイトやウェブアプリケーションに課題を感じている方は、創業16年以上の経験と、業種・業態を選ばない800件以上の実績を持つ世路庵をぜひご検討ください。
合同会社世路庵
小山 樹人
フロントエンドエンジニア
静岡県出身。大学卒業後、桑沢デザイン研究所の夜間部でグラフィックデザインを学ぶ。専門誌や教育系の出版物を中心に、約10年間DTP制作の仕事に携わる。Webのフロントエンド開発の分野に興味を持ち、2023年に世路庵に入社。 デザインと開発の両面からものづくりに携わっていきたい。