HEMSアプリケーション

Jul.2025

HEMSアプリケーション〜UIデザイン制作例

HEMSアプリケーションのUIデザイン:
次世代UIの名に相応しいデザインとは

本事例では、新製品開発にあたって見栄えの進化を徹底して行いたいとのことで、静止画だけでなくUIアニメーションの提案も交えながらUIのバージョンアップを実施。競合・類似製品に負けないインターフェースを実現しました。

カテゴリ
タブレットアプリのUIデザイン
対象デバイス
iPad、Androidタブレット
担当範囲
画面設計(6画面)、アイコン・UIパーツ作成
デザインの狙い
視認性の向上、誤操作の防止、状態把握の迅速化
使用ツール
AdobePhotoshop
納品形式
PNG(画像アセット)
制作期間
約1ヶ月

今回のHEMSアプリケーションのUIデザインで、最も重要視したことは——?

次世代UIとは何かを具体的に検討・試作を徹底的に繰り返し、UIデザインを研磨したことです。

現行製品の操作画面も特に使いづらいということも無いのですが、競合・類似製品と横並びな印象が拭えませんでした。

そこで、以下の点に注力しました。

  • 他と差をつける先進的なビジュアル:
    常に変化し続ける背景アニメーションや、細部までこだわって描き込まれたアイコン画像
  • キャッチーで派手に、でも分かりやすく:
    グラフィック表現はキャッチーにしつつも、レイアウトは分かりやすく安定感のあるものへ

これにより、競合・類似製品に埋もれない存在感を持った製品へのバージョンアップを果たす事ができました。

HEMSアプリケーションのUIデザインの制作例。水を思わせる青系グラデーション背景の上に透明レイヤーが敷かれており、LED照明の消費電力グラフや照明の明るさや色温度を変更できるUIが配置されている。HEMSアプリケーションのUIデザインの制作例。水を思わせる青系グラデーション背景の上に透明レイヤーが敷かれており、各階各部屋を選択できるボタン類がある。家電を一覧できるUIが展開されている。

プロジェクトの課題を
ディ・フラットと共に
解決しませんか?

初回お問合せ時からデザイナーが対応するので、制作についてより深い話ができます。
概算であってもリアルなお見積もりの話も可能です。

まずはお気軽に、デザインのお悩みをお聞かせください。

お問い合わせ