「使いにくい」も「運用疲れ」も卒業する UIデザイナーとエンジニアが創る持続可能な内製開発

Transcript

1. 「使いにくい」も「運用疲れ」も卒業する UIデザイナーとエンジニアが創る持続可能な内製開発 2026/02/25 東影 勇太 大林 優斗
2. 1 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services NRIネットコムについて NRIネットコムについて
3. 2 Copyright（C） NRI Netcom, Ltd. All rights reserved. > NRI Netcom / 「使いにくい」も「運用疲れ」も卒業するUIデザイナーとエンジニアが創る持続可能な内製開発 Web Creative / UIUX Design Cloud Solution / Operational services 「使いにくい」をなくす体制づくり UIデザイナーと進める内製プロジェクト クリエイティブ / UIUXデザイン 今日お話すること 前半 後半 クラウドサービス / 運用支援 統合的な運用で AWS環境の内製開発を加速させる
4. 3 Copyright（C） NRI Netcom, Ltd. All rights reserved. UIデザイナーと進める内製プロジェクト 「使いにくい」をなくす体制づくり
5. 4 Copyright（C） NRI Netcom, Ltd. All rights reserved. 東影 勇太 UI UX デザイナー UIデザインのアイデア帳 著書 アプリ・Web制作の現場で使える基本＋実践ノウハウ83 普段はPC業務システムの開発に携わっています ・デザインガイドライン・コンポーネントライブラリの作成 ・アプリ開発チームとデザイナーの橋渡し Yuta Higashikage PROFILE Web Creative / UIUX Design Cloud Solution / Operational services
6. 5 Copyright（C） NRI Netcom, Ltd. All rights reserved. 想定読者 ・UIデザイン初学者 ・デザイナーと協業するエンジニア ・取りまとめするリーダー 著書紹介 UIデザインのアイデア帳 Web Creative / UIUX Design Cloud Solution / Operational services
7. 6 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 私の普段の仕事 普段は業務アプリケーションの開発に携わっています。 ・情報設計 ・UIデザイン作成 ・アプリ開発メンバーとのやり取り ・デザインガイドラインの作成 などなど、UI全般広く関わっています。 ※画像は存在しない架空のアプリケーションです
8. 7 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 内製開発におけるUIデザインの悩み 機能は満たしているが、 現場から使いにくい と言われる エンジニアが 画面を考えると、 仕様＝画面になりがち 開発終盤での UI変更要望による 手戻り デザイナーが伴走する体制で解決!
9. 8 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 「伴走型」のデザイン支援とは 「納品」ではなく、「参加」するスタイル 開発MTGへの 参加 チャットでの 即時相談 Figmaなど リアルタイムな 共同編集 デザインガイドライン を構築し、開発を サポート チームの一員として一緒に悩み、考える時間を作る
10. 9 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services なぜ「社内にデザイナーがいない」と品質が落ちるのか エンジニアのみ デザイナーの役割は「見た目を整えること」以上に、 この「情報の整理整頓」にあります。 デザイナーが参加 DBのカラムをすべて入力欄として並べる 「漏れなく機能があるか」が最優先 業務フローに合わせて項目をグルーピングし、 情報に強弱をつける 「ユーザーが迷わないか」が最優先 理論的には正しいが、直感的でない画面 学習コストが低く、ミスが起きない画面
11. 10 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 最大のメリットは「後工程の手戻りの削減」 要件定義 設計 開発 リリース テスト 開発工程以降に手戻りが発生するとコストが高い 数百万円の損失が出ることも・・・ 要件定義、設計フェーズから参画し、 デザイナーが設計段階で「使い勝手のバグ」を減らす デザイナーの参画 !
12. 11 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services プロジェクト例 在庫管理システムのリニューアルプロジェクト アプリ開発リーダー デザインディレクター デザイナー マークアップエンジニア アプリエンジニア フロントエンジニア サーバーサイドエンジニア PM バックエンドリーダー PMが出す要件を噛み砕いて、 情報設計し画面に落とし込む CSSのプロがアプリ開発者とコミュニケーションをとり、 再利用、拡張性の高い画面モックを開発
13. 12 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services デザイナーの具体的な動き 頻繁に使う機能と管理メニューを分離 ボタンを並べすぎず、ドロップダウンメニューに 格納し視認性を高める ボタンに強弱をつけ、重要なボタンに気づきやすく エンジニアに実装コストや実現可否を確認 PMの要件を整理・ヒアリング アプリ開発チームと相談しつつ、CSS実装 使い勝手、開発要件、社内事情など、 さまざまな要素を踏まえて画面検討 ※画像は存在しない架空のアプリケーションです
14. 13 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services デザインシステムによる資産化・開発効率化 共通のガイドラインを作るのも デザイナーの仕事 共通言語ができることで、 デザインレビュー時の指摘が減る UIコンポーネントの再利用ができ 実装スピードが上がる デザイナー不在時でも、80点の 画面を作成できる ※画像は存在しない架空のガイドラインです
15. 14 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services AIの活用でデザインは内製化できる？どう変わる？ AIの画面作成能力は飛躍的に向上しており、業務フローが変わる可能性が高い Figma Makeで画面を自然言語で作成 （HTMLも同時に出来上がる） おかしい箇所をFigma上で手直しして、 コードを再生成 デザインシステムをClaude Codeに読み込み、 自然言語で画面を生成 Git上のソースコード上を手直し Figmaをマスターとする場合 ソースコードをマスターとする場合 ソースコードを崩さないFigmaの手直し （デザイナーによる高度なFigma操作）が必要 ・事前に完成度の高いデザインシステムを作る ・デザイン品質を維持するためのレビュー しかし、品質維持のためにデザイナーはより必要になる
16. 15 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 前半（UIデザインパート）まとめ 「伴走型」のデザイナーは開発フェーズ手戻りを減らす デザインシステムを作成して、チームの資産に デザイナーの関わり方次第で「使いやすい」UIは作れる AI開発時代、今以上に必要になりそう
17. 16 Copyright（C） NRI Netcom, Ltd. All rights reserved. 統合的な運用で AWS環境の内製開発を加速させる
18. 17 Copyright（C） NRI Netcom, Ltd. All rights reserved. 大林 優斗 クラウドエンジニア ・著書 ・AWSの薄い本の合本Vol.01 ・ 「AWS、それぞれの戦い方」 ー認証基盤・ファイアウォール・データ移行との実践記ー 過去のアウトプット ・登壇資料：https://speakerdeck.com/yuobayashi ・2025 Japan AWS Top Engineers ・AWSクラウドアーキテクトとして、エンタープライズ企業の内製開発・運用を支えるクラウド基盤設計に従事 ・大規模マルチアカウント環境におけるセキュリティガバナンス改善やCCoE支援を中心に、要件定義から運用 設計までを一貫して担当 Yuto Obayashi PROFILE Web Creative / UIUX Design Cloud Solution / Operational services ・ブログ：https://tech.nri-net.com/archive/author/y-obayashi
19. 18 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services なぜ「運用」の話をするのか 技術選定に 注目が集まる 新サービス 導入への評価 内製＝開発力 の話になりがち しかし、『運用』がボトルネックになって 内製開発が減速するケースが多い
20. 19 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 現場でよくある5つの課題 『運用』を標準化することで、運用負荷が軽減されるため、 内製化を加速できる アラートが多く疲弊 対応判断が人に依存 セキュリティ設定に 抜け漏れが発生 深夜・休日対応 組織や役割を跨ぐと 話がつながらない
21. 20 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services システムごとに運用を設計すると、運用効率が下がる ベンダー A システム A 基準 A ベンダー B システム B 基準 B ベンダー C システム C 基準 C 運用担当者
22. 21 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 標準的な運用基準を作成し、統一することで運用を効率化する ベンダー A システム A ベンダー B システム B ベンダー C システム C 運用担当者 標準的な運用基準
23. 22 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 標準的な運用を統一して、課題にアプローチする アラートが多く疲弊 運用統一前 セキュリティ設定に抜け漏れが発生 対応判断が人に依存 運用の標準化 運用統一後 監視・アラート基準を定義 セキュリティ基準を定義 対応フローを定義 不要なアラートが削減され、 アラート対応に取られる時間が減る 一定のセキュリティレベルを維持した 構成を実現できる 対応判断が標準化され、 属人性が排除される
24. 23 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 標準的な運用を統一するための仕組み作り 統一的な監視基盤により、システム横断の相関分析と一元的な可視化を実現し、 原因特定の迅速化と運用負荷の低減を実現する
25. 24 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 標準的な運用を統一するための仕組み作り 標準リソースを自動デプロイ仕組みを導入することで、セキュリティ設定のばらつきや ログの取得漏れがないAWS環境を迅速に構築する
26. 25 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 標準的な運用を統一するための仕組み作り 組織共通のセキュリティポリシーを中央管理し、全アカウントに適用することで、 組織として求めるセキュリティ基準を確実に担保する
27. 26 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 標準化を進めても、残る負荷はある アラートはゼロにならない 24/365運用⇒深夜・休日対応 外部の力を活用して運用負荷を軽減し、 社員のリソースをビジネス成長に直結する領域へ集中する 24/365運用により、社員への負荷が残る
28. 27 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 外部の監視サービスによる24/365運用への対応 AWS account Amazon CloudWatch 運用担当者 定常作業・障害対応 ログ・メトリクス収集 ベンダー AWS account Amazon CloudWatch 運用担当者 定常作業・障害対応 ログ・メトリクス収集 通知・連絡
29. 28 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services NRIネットコムの監視サービス NRIネットコムの監視サービスは、24/365の監視・障害対応に加え、運用の標準化からご支援することが可能です。 これにより、内製開発やサービス改善に注力できる環境を構築できます。 AWS account Amazon CloudWatch ⚫ 対象システム、監視内容の選定 ⚫ 定常運用の依頼 ⚫ 改善の優先度の決定 運用担当者様 通知・ご連絡 定常作業・障害対応 ログ・メトリクス収集 障害一次対応で復旧しない、もしくは運用手順外の対応が必要と判断される場合 オプション 24時間365日の システム監視・障害通知 障害一次対応 障害一次対応で復旧 出来ない場合のエスカレーション 定型運用作業の実施 障害二次対応 アプリケーションレイヤの復旧に必要なAWS・OS・ミドルウェアレイヤの支援
30. 29 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services 後半（AWS運用パート）まとめ 運用の標準化と外部サービスの活用により運用負荷を最小化し、 内製開発を加速させる 標準的な運用を実現し、統一する 内製開発を加速！ 運用の一部を監視サービスで補う
31. 30 Copyright（C） NRI Netcom, Ltd. All rights reserved. Web Creative / UIUX Design Cloud Solution / Operational services まとめ デザイナーが「伴走」することで 手戻りを削減する 効率的な内製開発に！ 標準化・統一した運用の一部 を監視サービスで担うことで 運用負荷を軽減し、 内製開発を加速させる！