日本語UIキットの活用 ex.)家計簿アプリ画面作成
この記事では、三菱UFJフィナンシャル・グループの戦略子会社であるJapan Digital Design（JDD）において、体験デザインを担うExperience Design Team（デザインチーム）の研究活動で作成したFigma用日本語UIキットの活用例について紹介します。
はじめに
はじめまして、Experience Designerの若狭です。
先日公開したFigma用日本語UIキットの紹介記事について、皆様から沢山の反響をいただきありがとうございました。本記事はこちらで配布しているUIキットを使った内容となっています。
まだ読んでいない方はぜひご覧ください。
プロジェクトでのUIキット活用
JDD内のプロジェクトで多く用いられるフレームワーク「デザインスプリント」の代表的なプロセスは以下の様なものです。
このプロセスの中でUIキットの主な使い所は、「試作」になります。
プロジェクトの進行度合いによって作成するプロトタイプの粒度も様々ですが、目的は大きく3つあります。
・アイデアを可視化するため
・ユーザーが実際に触れて操作感や提供価値を検証するため
・プロジェクトメンバー間のイメージのズレを防ぐため
プロジェクトの初期段階で必要なのは、ビジュアルがしっかり作られた画面ではなく、繰り返しのアップデートを前提とした必要な情報と機能が用意された画面を短期間で用意する必要があります。
このような場合にベーシックなコンポーネントが揃ったUIキットを用いる事で、スピードアップと一定の品質の確保を行うことができます。
また、途中で仕様変更が発生した場合も差し替えが容易で柔軟に対応しやすくなります。
今回は家計簿アプリのモックアップ作成を例に挙げて、UIキットの使い方について簡単に紹介できればと思います。
作成プロセス
今回はUIキットのデモなので画面の作成にフォーカスを当てて紹介していきます。以下の5つを主要機能とし、タブで各画面を切り替える方向で進めることとしました。
1,スケッチ&ワイヤーフレーム
各機能ごとに必要なアクションや情報について洗い出し、
画面上のどこに何を載せるかを最初のこの段階で検討します。
(私の場合、箇条書きで情報整理しつつFigmaでざっくりスケッチを描いてイメージを固めていきます。）
今回は一人で全画面作成していますがチームでのプロジェクトの場合、この段階で認識合わせをしておくとその後の作業もスムーズになり、手戻りも少なくなると思います。
2,コンポーネントの配置 (モックアップ作成)
ここからUIキットのコンポーネントを使って作業を行います。
もくもくと画面を作っていきます。
共通のコンポーネントを使っているので、リモート勤務下でチームメンバーと別々に作業をしていても大きなブレはなく、統一感を持って作成ができます。
オリジナルでコンポーネントを作りたい場合は、「対象のFrameを右クリック > Create component」で追加します。
追加したコンポーネントは置き場所を決めておくとメンバーがいつでも確認でき、重複や意図しない削除と変更を防げます。
今回はチャートや棒グラフを含んだオリジナルのリストを追加しました。
カテゴリ毎に色を割り当てたいので、合わせてカラースタイルも追加。
(ひとまずFigmaのデフォルトカラーをそのままお借りしています…！)
スピードを求められている場合に全てのパーツをコンポーネント化してしまうのは、管理するのにコストが掛かってしまうので、プロジェクト内で繰り返し使われるものだけ優先して作成すると作業効率が良いと思います。
3,完成
必要な情報と操作が可能な基本となる画面が完成しました。
この後に続く検証フェーズでユーザーテストや価値検証を行います。
プロジェクト後期でブランディング検討を行う際にも、マスターコンポーネントに加えた変更が全画面に適応されるので、抜け漏れなく更新できますし全体のイメージ確認に便利です。
(+α)インタラクションの追加
ここまでで作成した画面でもユーザビリティテスト等の検証は十分可能ですが、余力がある時は右ウィンドウの"Prototype"からインタラクションを追加してみましょう。
・ユーザーや開発関係者が完成品をイメージしやすくなる
・細かなアニメーションについて開発者に伝えやすくなる
などのメリットがあります。
(画面を動かすのが楽しくて、一人でずっといじってたりします)
おわりに
今回の記事でUIキットの使い方についてざっくりとでも理解していただき、デザイナーやエンジニアの皆様のプロダクト開発の手助けになれると嬉しいです。作成した画面は以下からダウンロードできますので、ぜひ触ってみてください。
iOS版とAndroid版の両方を用意しております。
オープンデザインの取り組み
また、JDDでは企業カルチャーとして「オープンである」ことを大事にしており、デザインチームでは「UXデザインのテンプレート」と「バンキングアプリのデザインアセット」、「Weekly Planner」、「リモートオンボーディングキット」のFigmaファイルを公開しています。
詳しくは以下のページで紹介していますのでぜひご覧ください
ー
この記事に関するお問い合わせはこちら
Experience Designer
Chie Wakasa（若狭 智愛）