三菱電機オンラインブランドリソースライブラリのスクリーンショット

三菱電機 グローバルブランドガイド

プロジェクト概要

三菱電機の基本ガイドラインに関して、私は数年にわたり、継続的な更新と品質維持を担当してきました。約200ページにおよぶこのガイドラインは、日本語・英語・中国語の3言語で展開されており、国際的な翻訳チームと連携しながら、全言語版の品質を私自身が監修しています。

三菱電機ブランドガイドラインの印刷冊子
三菱電機ブランドガイドライン冊子の中面

A4サイズのレイアウトは、印刷・デジタルPDFの両方で世界中に配布されることを想定して設計されており、三菱電機から正式に配布されています。近年では、私の所属する会社が「デジタルアセットライブラリ」と呼ばれる大規模なオンラインサービスの構築に着手し、そのプロジェクトにも深く関わりました。この長期にわたる取り組みの中で、三菱電機の関係者、開発チーム、デザイナーたちと密接に連携しました。

私の主な役割は、従来のPDF版ガイドラインを、より柔軟で実用的なWebツールへと一貫性を保ちながら変換することでした。プロジェクト期間中、私はステークホルダーや開発者との数多くの会議やプレゼンテーションに参加し、ユーザーのニーズに応じたさまざまな解決策を検討。ユーザー体験(UX)の改善や、インターフェースの最適化に向けて、反復的なデザインプロセスを重ねました。

デザインプロセス

以下の図は、コトアカデミーのウェブサイトリニューアルにおいて使用したデザインプロセスを示しています。

1: 共感
競合分析
ユーザーリサーチ
課題定義
2: 定義
インタビュー分析
ペルソナ設計
エンパシーマップ
3: 発想
ブレスト
ワイヤーフレーム
情報設計
4: プロトタイプ
UIキット
中間WF
プロトタイプ
5: 検証
ユーザーテスト
FB反映
必要に応じ改善

デザインライブラリ

デザイナーや開発者とチームを組み、私たちは「デジタルアセットライブラリ」で使用されるデザインシステムおよびコンポーネントライブラリの構築を開始しました。

三菱電機デジタルアセットライブラリ用UIキット:カラースタイルとコンポーネントスタイルの表示

インタラクションの活用

繰り返しの改善プロセスの一例として、静的デザインにはない利点をどのように活かすかという検討が挙げられます。従来の基本ガイドラインでは、すべての表、テキスト、ルールなどを1ページ内に同時に表示する必要がありましたが、「デジタルアセットライブラリ」では、情報の構造化や表示方法において、より柔軟で多様な選択肢が可能となりました。以下の事例では、ユーザーにとって最適なソリューションを導き出すために、ステークホルダーおよび開発者と協議を重ね、複数のバージョンを試行しながらデザインを洗練させていきました。

このケースでは、ユーザーは「目次ドキュメント」に関する詳細な仕様やルールを参照する必要があるデザイナーです。従来の基本ガイドラインでは情報量が多く複雑だったため、理解しづらい側面がありましたが、このデジタルツールにより、格段に見やすく、使いやすいものになりました。