[{"data":1,"prerenderedAt":38},["ShallowReactive",2],{"post-ux-through-the-admin-interface":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":6,"title":8,"body":9,"categories":10,"author":13,"thumbnail":26,"ogpImage":30},"ux-through-the-admin-interface","2024-08-27T23:41:25.759Z","2025-07-29T07:59:12.358Z","2024-11-18T01:00:05.954Z","さまざまな立場から管理画面を通して考えるUX最前線","\u003Cp>2024年8月9日（金）に、DIST.44「管理画面から考えるUX」を開催しました。会場の中野セントラルパーク カンファレンスに130名を超える参加者が集まり、大盛況となりました。\u003C\u002Fp>\u003Cp>当日は、さまざまなバックグラウンドを持つスピーカーによる4つのLTと、2つのセッションで管理画面について語っていただきました。\u003C\u002Fp>\u003Cul>\u003Cli>LT\u003Cul>\u003Cli>Cosense（旧Scrapbox）で実現するコンテンツ管理画面\u003Cbr>株式会社Helpfeel：秋山博紀\u003C\u002Fli>\u003Cli>管理画面における反復操作のUXを突き詰めた話\u003Cbr>株式会社CRUTECH：堀田愛子\u003C\u002Fli>\u003Cli>管理画面の全体UXは利用時品質モデルで考える\u003Cbr>株式会社まぼろし：松田 直樹\u003C\u002Fli>\u003Cli>オペレーショナルエクセレンスの実現に向けた管理画面の改修\u003Cbr>株式会社マイベスト：井上 周\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>セッション\u003Cul>\u003Cli>効果的な管理画面を最短でデザインするための5つの罠と対策\u003Cbr>Ubie株式会社：大木 尊紀\u003C\u002Fli>\u003Cli>行政職員が「ふつうに使える」を目指した管理画面のUX設計とデザインシステム推進\u003Cbr>株式会社グラファー：佐野 彩、松倉 千春\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>本記事では、当日のセッション内容をレポートします。スライドや動画も掲載していますので、ぜひご覧ください。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F78d9ea7094654d39877430dac66eff12\u002Fdist-44-1.jpg?w=1320&h=742\" alt=\"開始前のイベント会場内の様子。左前方にプロジェクターでアンケート協力を促す映像が映し出されている。ぎっしり並べられた椅子には参加者がうまっている。\" width=\"1320\" height=\"742\">\u003Cfigcaption>満席にうまった会場内\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fa8e6e5ccdfd84b68a4a7d6265bdce003\u002FDSC01907.ARW.jpg?w=1320&h=882\" alt=\"開始直後の会場内容様子。室内は暗くなり、前方にプロジェクターでメインビジュアル「管理画面から考えるUX」が投影されている\" width=\"1320\" height=\"882\">\u003Cfigcaption>照明が落ちいよいよ開演！\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch2 id=\"he654684c90\">多様な視点から見た管理画面\u003C\u002Fh2>\u003Ch3 id=\"h8f7694e8f7\">Cosense（旧Scrapbox）で実現するコンテンツ管理画面\u003C\u002Fh3>\u003Cp>最初は、株式会社Helpfeelの秋山博紀さんによるLTから始まりました。Helpfeelさんが開発・提供するFAQシステム「\u003Ca href=\"https:\u002F\u002Fwww.helpfeel.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Helpfeel\u003C\u002Fa>」では、同社がCMSとして提供している「\u003Ca href=\"https:\u002F\u002Fscrapbox.io\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Cosense\u003C\u002Fa>（旧Scrapbox）」を活用しています。自社開発のSaaS（Cosense）を活用するテクニックについて紹介されました。\u003C\u002Fp>\u003Cp>実例として、\u003Cstrong>自社開発のプロダクトを「カスタム」して使う\u003C\u002Fstrong>ことについて、ポイントを解説していただきました。\u003C\u002Fp>\u003Cul>\u003Cli>Wikiやエディタといったツールを持っていると新規事業の立ち上げをブーストできるチャンス\u003C\u002Fli>\u003Cli>プラグインやコード埋め込みなど拡張できる機能を作っておくとプロダクトを応用できて便利\u003C\u002Fli>\u003C\u002Ful>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F1eee56bb89da40d8aa531c7162c5f641\u002Fimage.png?w=1328&h=736\" alt=\"\" width=\"1328\" height=\"736\">\u003Cfigcaption>出典：Cosense(旧Scrapbox)で実現するコンテンツ管理画面\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>メリットとしては、\u003Cstrong>新規事業の立ち上げを素早く、品質良く\u003C\u002Fstrong>行えること。一方で\u003Cstrong>UI\u002FUXの一貫性\u003C\u002Fstrong>などについては課題も残るということでした。\u003C\u002Fp>\u003Cp>スライド：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;\">\u003Ciframe src=\"https:\u002F\u002Fspeakerdeck.com\u002Fplayer\u002F1f276db16e7a4d37b67dd07a0d4cdfe0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>動画：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FpmG5d3Zi2oM?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch3 id=\"hbfcdf8861b\">管理画面における反復操作のUXを突き詰めた話\u003C\u002Fh3>\u003Cp>続いて、株式会社CRUTECHの堀田愛子さんによるLTでは、管理画面における反復操作を、\u003Cstrong>普段利用するユーザーにとっての効率性や使いやすさ\u003C\u002Fstrong>に重点を置いた情報設計・導線設計のUIについてお話しいただきました。\u003C\u002Fp>\u003Cp>実例として「在留カード就労資格管理サービス」のUX改善についての解説がありました。このサービスは、在留資格の期限（有効期限、在留期限）を確認するためのツールで、オペレーションには反復操作も多く利用時間も長いものとなっています。以下のようなポイントでUX改善を行ったとのことでした。\u003C\u002Fp>\u003Cul>\u003Cli>目線移動を極力減らし、キーボードのみで操作を完結\u003C\u002Fli>\u003Cli>誤操作対策についてはダブルチェックの仕組みを導入\u003C\u002Fli>\u003Cli>普段から管理画面をよく利用するユーザー向けのUX（\u003Cstrong>だれでも使える → いつも使う人が効率よく使えるものを目指した\u003C\u002Fstrong>）\u003C\u002Fli>\u003Cli>ショートカットの用意（利用を強制せず、選択肢として提供）\u003C\u002Fli>\u003C\u002Ful>\u003Cp>このUX改善によって、一人あたりの照会時間が約90秒から30秒に短縮されたそうです！\u003C\u002Fp>\u003Cp>対象ユーザーを考慮してUXを深めていく過程がとても参考になりました。\u003C\u002Fp>\u003Cp>動画：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F5OAGBniE3M0?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch3 id=\"h0081200f84\">管理画面の全体UXは利用時品質モデルで考える\u003C\u002Fh3>\u003Cp>3本目のLTでは、株式会社まぼろしの松田 直樹さんから、\u003Cstrong>必ずしも全員が喜んで使うわけではない\u003C\u002Fstrong>場合の管理画面UX設計について、国際的なモデルを交えながら解説していただきました。\u003C\u002Fp>\u003Cp>管理画面が組織に導入される際、1次ユーザーがその導入を選んでいないことが多いため、誰も好きで使っているわけじゃない（ことが、おそらく多い）という鋭い切り口から発表が始まりました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F3aaa39b5201f4d1faf589b816f42b33d\u002Fimage.png?w=1328&h=741\" alt=\"\" width=\"1328\" height=\"741\">\u003Cfigcaption>出典：管理画面の全体UXは利用時品質モデルで考える\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>1次ユーザーにとって価値のある体験は「面倒なことが早く終わる」ことであり、その実現のために「品質」に注目し、そこから体験設計を考える必要があると語られました。\u003C\u002Fp>\u003Cp>また、品質の標準化と向上を目指し、国際ガイドライン「SQuaRE」を基にした解説をしていただきました。「\u003Cstrong>品質から価値を生み出し、適切な体験につなげる\u003C\u002Fstrong>」というまとめの言葉も印象的でした。\u003C\u002Fp>\u003Cp>スライド：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;\">\u003Ciframe src=\"https:\u002F\u002Fspeakerdeck.com\u002Fplayer\u002F8ef26d0e162a4809aeedda1921e43cc5\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>動画：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002Fhq8N37DD24I?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch3 id=\"hffe73a33d1\">オペレーショナルエクセレンスの実現に向けた管理画面の改修\u003C\u002Fh3>\u003Cp>LTの最後は、株式会社マイベストの井上 周さんによる発表でした。社内のオペレーションの最適化を目指し、開発チームが管理画面をどのように改善しているかについてお話しいただきました。\u003C\u002Fp>\u003Cp>マイベストさんが開発する、商品比較サービス「\u003Ca href=\"https:\u002F\u002Fmy-best.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">mybest\u003C\u002Fa>」ではコンテンツやデータを入力する管理画面を自社で開発しています。管理画面の改善を行う際、「使用者のフィードバックを元に開発する」手法では、「\u003Cstrong>下請け感がでてしまう\u003C\u002Fstrong>」「\u003Cstrong>個別最適となるリスク\u003C\u002Fstrong>」といった問題があると指摘されました。これらの問題を解消するために、OpexDD（Opex Discovery and Delivery）という手法を生み出し、開発チームが主体的に動ける仕組みについて、以下の特徴を交えて解説していただきました。\u003C\u002Fp>\u003Cul>\u003Cli>リーンスタートアップ的な手法\u003C\u002Fli>\u003Cli>チームが主体的に動いていく仕組み\u003C\u002Fli>\u003Cli>アイデアから検証可能な仮説を作っていく\u003C\u002Fli>\u003C\u002Ful>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F2fb9451487874008b3d29a568c217385\u002Fimage.png?w=1328&h=743\" alt=\"\" width=\"1328\" height=\"743\">\u003Cfigcaption>出典：オペレーショナルエクセレンス実現のための管理画面改修の仕組み\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>オペレーション全体を俯瞰し、管理画面の改善ポイントを見つけていく過程を、非常に分かりやすく解説していただきました。\u003C\u002Fp>\u003Cp>スライド：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;\">\u003Ciframe src=\"https:\u002F\u002Fspeakerdeck.com\u002Fplayer\u002F7d11918150584dc69d0da209af785f60\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>動画：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FAZbNLdUwfZs?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"h2580c46dc6\">効果的な管理画面を最短でデザインするための5つの罠と対策\u003C\u002Fh2>\u003Cp>次に、Ubie株式会社の大木尊紀さんによるセッションでは、業務での管理画面開発から得た知見を「避けるべき5つの罠」として紹介し、それらを回避する方法について解説していただきました。\u003C\u002Fp>\u003Ch3 id=\"hd8d679b148\">1. 既存のオペレーションに引っ張られすぎる\u003C\u002Fh3>\u003Cp>1つ目に紹介されたのは、現場の人（管理画面利用者）の声を反映しすぎることで、改善できる部分を見逃してしまうという点でした。利用者は管理画面の操作に慣れてしまっているため、開発者側からの俯瞰した視点をうまく取り入れていけると良いとのことです。そのために、\u003Cstrong>利用者とコミュニケーションをとりながら、ゼロベースでオペレーションからデザインする\u003C\u002Fstrong>ことが大切であるとされていました。\u003C\u002Fp>\u003Ch3 id=\"hc1b6da6d14\">2. オペレーターのマインドとデータ構造が一致しない\u003C\u002Fh3>\u003Cp>2つ目は、データのモデリングをしていると利用者の目線が抜けがちになるという罠です。\u003Cstrong>管理画面の使いやすさとデータ構造は密接に関係している\u003C\u002Fstrong>ため、利用者のメンタルモデルを理解してデータ設計をすることで、UIの設計もやりやすくなると解説していただきました。\u003C\u002Fp>\u003Ch3 id=\"h013ebc1db6\">3. 階層が深くなりすぎて今どこにいるのかわからない\u003C\u002Fh3>\u003Cp>3つ目として、画面を作っていくうちに、気づいたらデータの階層が深くなっているという問題点について解説していただきました。改善策として、\u003Cstrong>ショートカットできるナビゲーション設計\u003C\u002Fstrong>が重要であるとし、ポイントとして「グローバルナビゲーションから1、2手で遷移できる」「前後にどのようなデータがあるのか明示する」といった点を挙げられました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F6e25a64c20a948dba6b9f617087d3f44\u002Fimage.png?w=1328&h=739\" alt=\"\" width=\"1328\" height=\"739\">\u003Cfigcaption>出典：効果的な管理画面を デザインをするために 避けるべき5つの罠\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"hf188ede57c\">4. Tableの呪縛から逃れられない\u003C\u002Fh3>\u003Cp>4つ目は、気を抜くとすべてTable UIになってしまうというもので、罠名もインパクトがあります。Table UIを利用するのに適した情報とそうでないものがあり、特に\u003Cstrong>Tableは情報に強弱をつけることが苦手であるため、項目が多くなると重要な情報を見落としてしまう可能性が高くなる\u003C\u002Fstrong>ということでした。 Tableが向いている場合、向いていない場合を分かりやすく解説して頂き、ケースバイケースで考えることが重要であるのだと感じました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F43d051f4b04c4e0aa2f656fa21143aaf\u002Fimage.png?w=1328&h=739\" alt=\"\" width=\"1328\" height=\"739\">\u003Cfigcaption>出典：効果的な管理画面を デザインをするために 避けるべき5つの罠\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"h502d3db6f3\">5. 汎用的に作りすぎて誰も使いやすくない\u003C\u002Fh3>\u003Cp>最後に紹介されたのは、役割や立場が異なる人が同じ画面で作業する場合、\u003Cstrong>全員の要望に応えようとすると、結果として誰にとっても使いやすくない画面になってしまう\u003C\u002Fstrong>というものでした。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fe9b657353c77428eb58c4ffd01c1c26b\u002Fimage.png?w=1328&h=738\" alt=\"\" width=\"1328\" height=\"738\">\u003Cfigcaption>出典：効果的な管理画面を デザインをするために 避けるべき5つの罠\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>管理画面開発における5つの罠について、各問題に対する考え方をわかりやすく解説していただきました。すぐに業務で活用できる実践的な内容と感じました。スライドも整理されてとても分かりやすいので、ぜひご覧ください。\u003C\u002Fp>\u003Cp>スライド：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;\">\u003Ciframe src=\"https:\u002F\u002Fspeakerdeck.com\u002Fplayer\u002Ff66ee87f0952445ea4830e0efb26788a\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>動画：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FpUCxlMXuQuU?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"hec14d6bf4f\">行政職員が「ふつうに使える」を目指した管理画面のUX設計とデザインシステム推進\u003C\u002Fh2>\u003Cp>この日最後のセッションでは、株式会社グラファーの佐野 彩さん・松倉 千春さんから、前半と後半に分けて「管理画面のUX設計」と「デザインシステム推進」についてお話しいただきました。\u003C\u002Fp>\u003Ch3 id=\"h56520d9d6a\">UX設計ユーザー調査から方針、情報設計\u003C\u002Fh3>\u003Cp>前半は、佐野さんの管理画面のUX設計についての発表から始まりました。管理画面を操作する対象ユーザーは行政・官公庁職員などで、「ビジネス」「ユーザー」「デザイン」「実装」それぞれに課題が存在しており、\u003Cstrong>行政職員らにとって普通に使えるプロダクト\u003C\u002Fstrong>を目指してUX設計をおこなったとのことです。\u003C\u002Fp>\u003Cp>\u003Cstrong>UXリサーチ（行政職員の環境・調査）\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>情報設計・リデザインの最初の工程としてUXリサーチを行い、「\u003Cstrong>既知から学ぶ\u003C\u002Fstrong>」「\u003Cstrong>自分で探索する\u003C\u002Fstrong>」「\u003Cstrong>実感する\u003C\u002Fstrong>」というポイントを挙げながら紹介していただきました。社内外にインタビューをしたり、実際に現場に行ってその場の雰囲気を感じるなど、とても丁寧にリサーチをされている印象でした。UXリサーチで得られた情報をモデル化（ペルソナの作成）し関係性を図に落とし込む過程についても解説していただきました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fcca004ee67964380b8f491034ecae751\u002Fimage.png?w=1328&h=746\" alt=\"\" width=\"1328\" height=\"746\">\u003Cfigcaption>出典：行政職員が「ふつうに使える」を目指した管理画面のUX設計とデザインシステム推進\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cstrong>UXデザイン、情報設計の検討・WF作成、UIデザイン作成\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>リサーチに続いて、得られた情報をもとにビジネス課題とすり合わせながら、プロダクト・UXデザインの方針を決定していったということでした。情報設計の検討とワイヤーフレームの作成についても、実例を交えながら丁寧に解説していただきました。情報設計では、「\u003Cstrong>サービス間のふるまいを統一\u003C\u002Fstrong>」「\u003Cstrong>OOUI化して階層を整理\u003C\u002Fstrong>」などを行い、プロトタイピングとUI作成を行ったりきたりして進めたということでした。\u003C\u002Fp>\u003Cp>\u003Cstrong>ユーザーテストの実施\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>ユーザーテストは、ステータスの異なる複数の自治体で実施し、フィードバックをもとに修正を行ったということでした。テスト方法では、ユーザーにFigmaのリンクを送って作業してもらう形ではうまくいかず、Zoom画面越しに操作説明したといった、リアルな話も聞くことができました。\u003C\u002Fp>\u003Ch3 id=\"h726adb05c0\">デザインシステムの実装と推進\u003C\u002Fh3>\u003Cp>後半のパートは松倉さんにバトンタッチして、デザインシステムの実装と推進についてお話しいただきました。\u003C\u002Fp>\u003Cp>デザインシステムを作る理由として、\u003Cstrong>開発の効率化やプロダクトごとの統一感\u003C\u002Fstrong>を目指したとのことでした。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F26d54629986b47d587d083b1d489c382\u002Fimage.png?w=1328&h=742\" alt=\"\" width=\"1328\" height=\"742\">\u003Cfigcaption>出典：行政職員が「ふつうに使える」を目指した管理画面のUX設計とデザインシステム推進\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>デザインにシステムを構築するうえでの方針として、\u003Cstrong>単体で意味を持つコンポーネントのみを公開\u003C\u002Fstrong>することを定めたそうです。これにより、メンテナンスの自由度を確保できたり、エンジニア内でのユースケースに対する議論の活性化などのメリットが得られるとのことでした。アクセシビリティに関する内容では、「ボイス＆トーンの統一」を例に紹介していただきました。\u003C\u002Fp>\u003Cp>また、\u003Cstrong>デザインシステムは作成して終わりではなく、社内に浸透させて使ってもらうことが重要\u003C\u002Fstrong>であると語っていただきました。デザインシステムの追加検討フローやStorybookの整備、デザインシステムを社内に布教するためのtipsなど実践的な内容を交えて解説していただきました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F6cab1a590c7e406c9c39a0e9908a28f0\u002Fimage.png?w=1328&h=745\" alt=\"\" width=\"1328\" height=\"745\">\u003Cfigcaption>出典：行政職員が「ふつうに使える」を目指した管理画面のUX設計とデザインシステム推進\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>「開発拡張性」と「社内利用率」のバランスを取って、持続可能なデザインシステムを目指して行くことが必要であるとまとめていただきました。\u003C\u002Fp>\u003Chr>\u003Cp>セッションの最後には、行政職員やユーザー（市民側）からのフィードバックを紹介しながら「\u003Cstrong>職員の方に少しでも仕事を楽しいと思ってもらうために日々管理画面を改善している\u003C\u002Fstrong>」とお話しいただき、とても素敵な考え方だと感じました。\u003C\u002Fp>\u003Cp>スライド：\u003Ca href=\"https:\u002F\u002Fwww.figma.com\u002Fdeck\u002Fpno3VGXWLiTqWy7cGLsgji\u002FDIST.44-%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2UX-%E8%A1%8C%E6%94%BF%E8%81%B7%E5%93%A1%E3%81%8C%E6%99%AE%E9%80%9A%E3%81%AB%E4%BD%BF%E3%81%88%E3%82%8BUX%2BDS?embed_host=twitter&kind=deck&node-id=1-44&page-id=0%3A1&scaling=min-zoom\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">行政職員が「ふつうに使える」を目指した管理画面のUX設計とデザインシステム推進\u003C\u002Fa>\u003C\u002Fp>\u003Cp>動画：\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F-vmnP2_amJs?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Chr>\u003Cp>以上、DIST.44「クリエイティブコーディングで生み出すWebデザインの世界観」の当日レポートでした。\u003C\u002Fp>\u003Cp>ご参加いただいた方からイベントレポートも書いていただきました。ありがとうございます！\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Fnote.com\u002Fnanaxx\u002Fn\u002Fn22a885a5106c\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">【DIST：管理画面から考えるUX】勉強会レポ\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fqiita.com\u002Fsgrs38\u002Fitems\u002Fa0d8761b0e2704cb1ed5?utm_campaign=post_article&utm_medium=twitter&utm_source=twitter_share\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">DIST.44 「管理画面から考えるUX　感想\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F58e88b129f0146e7864dabaa66a84f2c\u002Fdist-44-3.jpg?w=1320&h=881\" alt=\"セッション後の会場内の様子。沢山の参加者が手を挙げて質問している。\" width=\"1320\" height=\"881\">\u003Cfigcaption>セッション後の質問コーナーでは、沢山の方に手を挙げていただきました\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch2 id=\"h2c02aa9fd9\">次回、クロスメディア表現の演出とデザイン\u003C\u002Fh2>\u003Cp>次回の開催は、2024年11月19日（火）DIST.46 「クロスメディア表現の演出とデザイン」を予定しています。\u003C\u002Fp>\u003Cp>現代のメディア表現では、Web、映像、3D、インスタレーションなど複数のメディアを組み合わせ、それぞれの領域を飛び越えるような表現が注目を集めています。DIST.46 では、桟 義雄さん（バスキュール）、田中 陽さん（Rhizomatiks, IE3）にご登壇いただき、それぞれの制作事例・制作の舞台裏についてお話いただきます。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fdist.tokyo\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fdist.tokyo%2Fdetails%2Fdist-46&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>勉強会へのお申し込みは\u003Ca href=\"https:\u002F\u002Fdist.connpass.com\u002Fevent\u002F330271\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">connpass\u003C\u002Fa>ページから受け付けております。\u003C\u002Fp>",[11,12],"コミュニティ","イベントレポート",[14],{"id":15,"createdAt":16,"updatedAt":17,"publishedAt":16,"revisedAt":18,"name":19,"job":20,"avatar":21,"profile":24,"xId":25,"githubId":25},"koyama","2024-02-14T00:43:53.323Z","2024-03-20T13:41:39.499Z","2024-03-15T13:16:51.910Z","小山 樹人","フロントエンドエンジニア",{"url":22,"height":23,"width":23},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F74ad15c43b6042fe899472eb640b7db8\u002Fkoyama_202310.jpg",512,"静岡県出身。大学卒業後、桑沢デザイン研究所の夜間部でグラフィックデザインを学ぶ。専門誌や教育系の出版物を中心に、約10年間DTP制作の仕事に携わる。Webのフロントエンド開発の分野に興味を持ち、2023年に世路庵に入社。\nデザインと開発の両面からものづくりに携わっていきたい。","yamageji",{"url":27,"height":28,"width":29},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F943abf687a8f4137b97642af5f085880\u002Fdist-44.png",720,1280,{"fieldId":31,"type":32,"image":34},"ogpImage",[33],"タイプ2（タイトル＋画像）",{"url":35,"height":36,"width":37},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F38db87b6a25140b297df65f179b21a19\u002Fdist-44-ogp.png",630,1200,1776401665266]