株式会社ケイライン ビジネス システムズ(川崎汽船グループ)

UI/UXデザイン支援・デザインシステム構築・社内向けデザイン研修支援
  • UI/UX
  • Web
  • デザインシステム
  • 研修
  • 開発チーム支援
株式会社ケイライン ビジネス システムズ(川崎汽船グループ)

プロジェクト概要

Proximoは、川崎汽船グループにおける情報通信システム分野の牽引役である、ケイライン ビジネス システムズ様(以下KBS様)のシステム開発プロジェクトのUI/UXデザインを支援しています。川崎汽船グループ企業様の、バックオフィスを管理・運用する業務システムのUI/UXデザインをおこない、デザイン画面、デザインガイドライン、その他UXやデザインに関連する資料一式を作成しました。
また、KBS様のシステム開発プロジェクト全般の業務効率化とデザインクオリティ向上を目的とした汎用デザインシステムの構築と、社内のプロジェクトマネージャやシステムエンジニア向けに、UI/UXデザインの基礎知識・スキルを学習するためのデザイン研修を実施するなど、単体プロジェクトではなく、会社全体のデザイン課題の改善にアプローチしました。

株式会社ケイライン ビジネス システムズ(川崎汽船グループ)
プロジェクト概要
プロジェクト概要
プロジェクト概要

実業務に沿い
日常的な活用に適した
デザインシステムを目指して

“業務内で活用できること” を目標にデザインシステムの設計がはじまりました。
今までどのようなシステム開発をしていたのか、その流れ・成果物・コミュニケーションに関して最初にヒアリングを行い、どんな用途に応えられるものが条件に合うのかすり合わせをしていきました。
その結果、まずは過去に作成されたシステムをデモンストレーションしていただき、汎用的に必要な要素の洗い出しをおこないました。今後の拡張性にも考慮する必要があったため、過去に頻出だった要素以外にも、一般的なシステムで利用されることが多いものも含めた定義をおこないました。

実業務に沿い日常的な活用に適したデザインシステムを目指して

サンプルレイアウト・
診断チャートを持つ
具体化に寄り添う設計

デザインシステム導入の目的が要件定義の担当者ごとの品質のブレや、UIを提案するクライアントへの説明用という側面も大きかったため、デザインシステムの具体的な活用例も同時に設計しました。
各種ダイアログ・詳細ページ・複数カラムを持つページなど、頻出のレイアウトには複数のパターンが有りました。どのような場合にどのレイアウトからはじめるのがよいのか?指標の手助けになるよう、チャート形式で質問に答えて進んでいくと最適なレイアウトを提示する診断チャートも一緒に提案し、ガイドラインに掲載いたしました。

サンプルレイアウト・診断チャートを持つ具体化に寄り添う設計

デザインシステム
定着させるためのインナーブランディン
グと実践研修

ヒアリングからコンポーネントライブラリ・各種スタイル集・モードなどを定義し、ルールをまとめたガイドラインが完成しました。より一層の具体化や定着化のため、ガイドラインを実際にPJメンバーに使ってもらい、模擬UI設計を今後おこなう予定です。今後の活動を通して実務に品質・スピードの面でポジティブな効果が出るよう、引き続きサポートを進めていきます。

デザインシステム定着させるためのインナーブランディングと実践研修

プロジェクトマネージャ・システムエンジニア向けのUI/UXデザイン基礎研修を設計・実施

加えて、デザインについての知識・スキル向上と、汎用デザインシステムをより効果的に使っていただくため、プロジェクトマネージャ・システムエンジニアを中心としたKBS社員様に向けて、デザインの基礎、ユーザビリティ、人間中心設計(HCD)の基本概念と実践方法を学習するための研修をオンライン形式で実施しました。
参加者にデザインの基本原則や実践方法の理解を促進することを目的とし、ユーザーのニーズや要求を中心に据えた設計プロセスを学び、製品やサービスの品質向上につなげることを学習目標としました。また、これらを学ぶことにより、開発プロセスの効率化や手戻りの減少を図ることも目標として設定しました。
上記の学習目標から、ユーザビリティの定義、HCDサイクルの導入方法をメインとした座学を中心に、具体的や事例を通じて、デザインの重要性と適用方法を学べる内容の研修を設計・実施しました。また研修動画を作成し、YouTubeに限定公開しました。

【学習目標】
  • デザインの基本概念とユーザビリティの重要性の理解デザインの基本概念ととユーザビリティの定義を理解し、製品やサービスの品質向上につながることを認識する。ユーザーの多様性を考慮した設計の重要性を理解する。
  • HCDサイクルと手法の理解利用状況の把握、要求事項の明確化、設計による解決策の作成、要求事項に対する評価という4つのステップを理解する。またプロトタイピングやユーザビリティテストなどの手法を理解する。
  • 開発プロセスの効率化と顧客満足度の向上HCDサイクルを理解することで、開発プロセスの効率化や手戻りの減少を実現する。またユーザーのニーズや要求を中心に据えた設計プロセスを学び、顧客満足度の向上につながる製品やサービスを開発できるようにする。
【カリキュラム】
  • 1.なぜデザインを学ぶのか?1-1.ソフトウェア開発におけるデザインの重要性
    1-2.デザインとは
  • 2.UX/UIデザインの基礎2-1.UX/UIデザインとは
    2-2.ユーザビリティ
    2-3.UX/UIデザインの基本原則
  • 3.人間中心設計(HCD)3-1.HCDの考え方
    3-2.HCDのサイクルと導入
プロジェクトマネージャ・システムエンジニア向けのUI/UXデザイン基礎研修を設計・実施

お客様の声

お客様の声
株式会社ケイライン ビジネス システムズ
取締役
有馬 博文様

弊社において以前から課題となっていたUI/UXスキルの底上げに向け、実際のシステム開発プロジェクトにご参画いただき、弊社の強みや改善点を踏まえて、デザイン研修の実施や画面デザインの標準化にご協力いただきました。まだ道半ばではありますが、弊社企画・開発部門にとって大きな気づきと成長の機会となりました。心より感謝申し上げます。

担当者のコメント

担当者の声
株式会社Proximo
CDO / Designer
荻野 博章

KBS様とのプロジェクトは、エンタープライズアプリケーションのUI/UXデザインから始まりました。そこから、デザインについて他のプロジェクトでも課題を感じられているとおうかがいし、システム開発プロジェクト全般の開発業務効率化とデザインクオリティ向上のため汎用デザインシステム構築、社内のUX/UIデザインの知識・スキル向上のための研修のご支援をさせていただきました。単体プロジェクトではなく、会社全体のデザイン課題の改善にアプローチすることができ、非常に有意義な取り組みになったのではないかと自負しています。
引き続き、単体の開発プロジェクト、汎用デザインシステムのエンハンス、本格的なデザイン研修の実施などを通して、KBS様のデザイン全体のクオリティを向上できるようご支援いたします。

担当者の声
株式会社Proximo
Designer / Director
朝比奈 志帆

主にデザインシステムの設計をサポートいたしました。キックオフで何故デザインシステムの導入を検討しているか、それにより解消したいことや思い描いている未来像に関してヒアリングいたしました。最も大きいご要望が「活用できるデザインシステム」と仰っていたことが印象的でした。
活用されるデザインシステムにするために、今までKBS様が設計されたものや発注先担当者のご要望から”よくあること”をまずは明らかにすることからはじめました。また要件定義者がスムーズにレイアウトを提案できるよう、サンプルレイアウト・診断チャートというものを用意したのが1つの特徴となっています。デザインシステムは、制作チームや技術の発展によって更新されていく生き物的な側面があるため、伴走していきながらその時々に合わせてアップデートのご提案をしていきたいです。

Client : 株式会社ケイライン ビジネス システムズ(川崎汽船グループ)
研修設計・講師 : Hiroaki Ogino
Creative Direction : Shiho Asahina