Jun Sakuma
UI Design UX Design Design System HMI

UI/UXデザイン

建設機械のUX/UIデザイン業務の全体像及び自身が取り組んでいる内容について記載する。なお、本内容は現デザイン組織が立ち上げフェーズ期から自身が主体となって取り組み実施してきた内容である。 ※自身が取り組んだ製品と同等の事例を紹介

理路整然かつ精緻なデザイン

建設機械は、多様な現場および幅広いユーザ層によって使用される製品であるため、特定のユーザ属性に対象を限定することが困難である。また、ユーザは目の前の作業に集中しているため、邪魔をさせないデザインが求められる。そのため、人間工学や心理学の知見を活用し、人間の本質的な行動や感情に基づいたデザインアプローチが求められる。特に、ユーザビリティやユーザーエクスペリエンス(UX)といった従来の指標に加え、アクセシビリティの観点からデザインを検討することを重視している。すべてのデザインには明確な根拠を持たせ、人間にとって本質的に使いやすいユーザーインターフェース(UI)の実現を目指すとともに、細部にまで配慮が行き届いた美しい視覚表現を追求することが、デザイナーとしての自らの役割であると考えている。

車載モニタのUIデザイン例

Design Target

運転席に搭載されている情報表示モニタ(標準・オプション)

デザインシステムのコンポーネント

GUI Concept

商品コンセプトやこれまでの自社製品、製品リリース時期の世の中のトレンドを予想しGUIコンセプトを制定。3つのキーワード(Contrast, Sync, Sustain)を定め、人々の日常に潜むワンシーンとリンクし内容を感覚的に捉えられるよう意図した。

Contrast (コントラスト) イメージ

Contrast (コントラスト)

情報を瞬時に把握できる。配色やフォーカスを活用し、情報の優先度を明確にする。

Contrast (コントラスト) イメージ

Sync (シンク)

直観的かつ快適に操作できる。ユーザの操作や行動に寄り添ったインタラクションを設ける。

Contrast (コントラスト) イメージ

Sustain (サステイン)

確実に安心して操作できる。安定した表示・構造・操作で信頼や安心を感じさせる。

タッチとハードスイッチの融合

建設機械ではハードスイッチ操作は欠かせないため、タッチ操作とハードスイッチ操作のすみ分けを明確に定義。

  • タッチ操作専用エリア: 使い馴染みのあるスマートフォンのような「Flat Design」を適用。
  • ハードスイッチ操作エリア: 現実世界の延長として立体感のある「Rich Design」を適用。
Flat Design vs Rich Design

Building a Design System

GUIデザインを統一させるためにデザインシステムの構築を行った。各デザインパーツの表現方法についてはデザインチームメンバー間で議論しながら決定。その後いつでも閲覧可能な資料としてまとめ、他部署のステークホルダーへの展開も行いながら横断的かつ効果的に使用した。

デザインシステムのコンポーネント デザインシステム(キーボード、リスト、カラーガイド)

Interaction Rule

メニュー内のフォーカス操作や画面遷移など、多くのインタラクションルールを作成し、その後の画面設計に展開。具体的な画面デザインの前に抽象的な画面でルール制定を行うことで、機能に依存したルールの乱立を避け、UI/UXデザインの統一を図った。

フォーカス移動のインタラクションルール

ユースケースの理解と情報構造設計

建設機械に求められるデザインを行うために、まずはユースケースや利用文脈の理解から行う。社内の現場経験者へのヒアリングや、実際の現場に近い作業環境の観察を通じて、機能の利用文脈を把握することに努めた。

得られた理解に基づき、ユーザが迷うことなく確実に操作を行えるよう、情報構造設計段階から直感的かつ明瞭なインタフェース設計を重視。設計された構造図を基にFigmaで簡易プロトタイプを作成し、評価を繰り返しながらGUIのクオリティを向上させた。

ヒアリングと現場観察 情報構造設計とプロトタイピング

ガイドライン策定と開発プロセス

各機能のデザインを統合し、デザインルールや方針を整理・体系化した「デザインガイドライン」を策定。これにより、同一世代内での他機種へ展開する際にデザインの統一性を確保した。また、モニタの解像度や視距離を考慮したグリッド思想に基づき、最適な視認性や操作性を確保した。

開発プロセスは、大規模開発(ウォーターフォール型)と小規模開発(アジャイル型)の双方に対応。ウォーターフォール型ではリサーチ、要求定義、デザイン(プロトタイプ、仕様書作成)を担当。アジャイル型ではUX/UIデザイナーが各部署間の橋渡しとなり、デザインプロセスを高速で回す役割を担った。

デザインガイドラインとグリッド 開発プロセス図(ウォーターフォールとアジャイル)