スマートフォン・アプリ UIデザイン
App UI design for Smartphone

  • ホーム画面
  • 画像
  • 画像
  • 画像
  • 画像
  • 画像
  • 画像
  • 画像
  • 画像
  • 画像
  • 画像
  • 画像

家庭用蓄電システム操作アプリ

　要件定義書を元に全52画面とそのダークモード用画面をFigmaにて制作。メインの操作画面であるホーム画面では下部にタップで隠れるドロワーを設置し複雑になりがちな画面を見やすく配置。家庭用であるため明るくわかりやすいUI設計を目指しました。ホーム画面では電気の流れを視覚的にわかりやすくするためにアイコンとアイコンの間はGIFアニメを使っています。
　デザイン、コンポーネント、スタイルとページは3つに分け、エンジニアにも全体の設計がわかりやすいように制作しています。

主要担当部分

  • FigmaによるUIデザインおよびプロトタイプ制作

Home Energy Storage System Operation App

Created 52 screens and their dark mode variants using Figma, based on the requirements document. For the main interface, the home screen, a bottom drawer that can be hidden with a tap was implemented to organize complex information into a visually accessible layout. Since the app is intended for household use, the UI design aimed to be bright and user-friendly. On the home screen, GIF animations were used between icons to visually represent the flow of electricity.
The design was divided into three sections: design, components, and styles/pages, ensuring clarity for engineers and facilitating understanding of the overall structure.

Key Responsibilities

  • UI design and prototype creation using Figma