【初心者必見】イチからプロトタイプ開発のUIデザインを実際に作成してみて学んだ・気をつけるべきポイント
ベトナム拠点、ディレクターの長野です。私の役割はディレクターなのですが、UIデザイナーに興味がありディレクター業務の傍らデザイナーとしてEnlyt自社サービスのEstimのプロトタイプ作成を行っています。
今回は自分で一からUIデザインを作成してみて学びになったことや今までの経験からデザイナーとして大事にしたいことをフェーズごとにまとめます。（※一般的にこうした方が良い！こうするべき！というのはわからないので個人的に大事だなと思ったことをまとめています）。
フェーズ1：メインカラー・骨組みの作成
前述しました、自社サービスEstimで活用されるプロトタイプ作成タスクで私が行っていることは、シンプルに言うと、要件リストの必須機能をUIに落とし込んで画面遷移まで付ける作業を行っています。
細かくは下記のようなことも行っています。
| ・要件リストの必須で含める機能を確認（Estimでは見積もりの際の必須機能とオプション機能に大きく分かれており、私の作成するプロトタイプは必須機能のみを含めたものになります） ・UI作成 ・プロトタイプの作成 ※Figmaを利用して作成しています |
いままで4つほどプロトタイプを作成してみて、徐々に流れが自分の中で出来てきたのでまず作業の初めの段階で行うことをまとめていきます。
メインカラー決め
UI作成の際、色味やトンマナの指定はないのでここから決めています。どんな感じにしようか、どの色の組み合わせが良いのか悩むので、下記のサイトを参考にしています。
迷ったり時間がかかりそうであればすぐに調べるようにしています。
類似アプリのチェック
例えば自分が使ったことの無い種類のアプリに関してはまず類似アプリをいくつかダウンロードして実際に触ってみるようにしています。それを行うことで、
・基本的にどんな機能が含まれているか？
・ユーザはどんな使い方をするか？
など新しい発見が沢山あり自分のUI作成にとても参考になるからです。もちろん私の作業は予め準備された機能をUIに落とし込むことなのですが、機能として無くてはならないものが欠けてはいないか？も見ながら作成するようにしています。
全体の骨組みを作成
これはUI作成に限ったことではないのですが、例えばこのブログを書くときもまず目次を決めました。また、何かプレゼンテーションしないといけない時のスライド作成でもまず目次を決めて簡単にそれぞれの項目に対してのテキストを準備していざスライドに起こしていく、というような流れで作成していました。
UI作成も同じように、まずは全体の骨組みを作ることによって予期せぬ漏れが後のほうになって見つかり、手直しが多く大変ということが起きづらくなると思っています。
自己流ですが、私は必要な画面をすべてFigma上で準備して、各画面にまず箇条書きで必要な要素をどんどん載せていき、その後適当な骨組を作っていっています。こうすることでまず全体が見えるので漏れが起きにくいです。
要件以外のものを勝手に盛り込まない
Estimで重要な機能の要素は下記の２つです。
- 必須機能
- ユーザーさんが選択したオプション機能
しかしながら、私が作成しているプロトタイプには必須機能のみが必要でした。なので、例えば私が「このカテゴリにはこの機能もあったほうが良いからUIに盛り込んでおこう」と良かれと思って追加すると、含まれている必須機能と異なるものが出来てしまいます。
仮にその機能がプロトタイプに含まれていると、それを見たユーザーさんはその機能も当たり前のように含まれていると思いますよね。
となると、下記に記載のように齟齬がでてしまいます。
・こちらで想定している含まれている機能
・ユーザーさんが想定している含まれている機能
要件と異なるものはまず確認OR提案、を意識しています。
フェーズ２：FigmaでUIデザインを作成する
ここからは実際に画面ごとのUI作成をFigmaを使用する上で学んだ、もう少し細かい部分を共有したいと思います。
８の倍数の法則
UI作成をする際にまず疑問に思ったことが「各要素（ボタンなど）のサイズってどれくらいにしたらいいんだろう…? 」でした。普段使っているアプリの中の要素のサイズがどれくらいだったかは正直考えたこともなかったので取り敢えず調べました。
結果、UI作成は8の倍数を意識しろ！ということを知りました。確かに、以前携わっていた案件で「マージンは基本的に８の倍数で」とデザイナーさんから指定があったのを思い出しました。調べてみると、各デバイスの基準となるサイズが８の倍数のものが多いのでこのルールに沿うことによってデザインがしやすいということが書かれた記事を沢山見かけました。実際８の倍数を意識してやってみて、たしかに８の倍数で要素を作っていけば割ときれいに余白が揃ったりするので、今後も基本的にこのルールに沿って作成していこうと思っています。
便利なコンポーネント化
例えばスプレッドシートでセルBとセルDは同じデータが入る場合に、
①セルB、セルDをそれぞれのセルで管理
②セルB、セルDはセルAからの参照としセルAのみで管理
この2つの管理方法があった場合に更新や変更に対応しやすいのは②ではないでしょうか？
デザインも同じで、複数箇所で使い回すような要素は全てコンポーネント化(Figmaではコンポーネント、Sketchではシンボルと呼び方が異なるのですがどちらもある要素の元を作るための機能です）してしまいます。例えば色味に変更があってもその要素の元の1箇所のみを変更することでその要素が使われているすべての箇所に自動反映されるので、更新漏れが起きなく安全で時間も短縮できます。
整理整頓の重要性
これはまだ出来ていないなと感じる部分ではあるのですが、整理整頓はデザインでも重要だなと感じています。例えば後で見返した時によく分からない名称を要素に付けていたり、いくつかの塊ごと配置を変えたい時にグルーピングされていなかったりすると変更の際にちょっと時間が掛かってしまいます。また、通常はデザインを作成したあとに開発者がそれをもとに実装を進めるので、原則として誰がみても分かるような画面名や要素名を付けることが大事なのかなと感じます。
不要な要素が他の要素の重なって紛れていたこともあったのできちんと今後もやっていこうと思います。
【番外編】Google Mapのキャプチャはデザインに利用できない？
GoogleMapのキャプチャの商用利用は著作物の複製に当たるので使用してはいけないと最近知りました。
というのも、最近Estimの種類の1つであるデリバリーのプロトタイプを作成する際に地図のキャプチャを利用したかったのでそれを調べている過程で知りました。
こちらに詳しくまとめられていてとてもわかり易かったです。
Googleマップのスクリーンショットは使用禁止だよ？ブログやチラシ・名刺も
結果、UI作成の際には簡易的なマップを自分で作成しました。
規約を読んで問題が有るのか無いのか微妙な時には使わない、もしくは代わりになるものを探すのが良いかと思っています。
フェーズ３：プロトタイプ作成とフィードバック
UI作成も概ね出来たあと、遷移付けと最終確認に入ります。
プロトタイプ作成
デザインが出来上がったら画面遷移やアニメーションを付けてプロトタイプを作成します。画面遷移をつけていくと、ここの遷移おかしいな、ということや不足画面を見つけることが何度かありました。なので、プロトタイプ作成は開発者が画面遷移を理解出来るだけではなく、デザイナー側の漏れ防止にもとても大事な作業であると感じました。
また、FigmaにはSmartAnimateという機能があり、（自分の理解では）画面Aと画面Bの差分を探していい感じにアニメーションを付けてくれるというようなものです。
実際に作ったものを端末で見てみる
FigmaにはFigma Mirrorという便利なアプリ(iOS,Android)があります。これは、実際に作成したUIを端末に反映させてプロトタイプを確認できるものです。PC上のFigmaのデザインをミラーリングして端末のアプリ上に反映させてくれ、変更もリアルタイムで反映されるので、修正と確認がかなりスピーディに行えます。余白が思ったよりも少し狭かったり全体のバランスがおかしかったりしていたのを見つけられるのでとても助かっています。
フィードバックをもらう
自分の中で完成まで持っていけたら社内の依頼者（デザイナーではない）に完了報告をし、確認依頼を出します。機能漏れがないかの確認ももちらん大事なのですが、実際に自分以外の人が触ってみることで使いづらかったり、パッとみてデザインの意図がわからない部分があったりして、とても勉強になります。自分は作っている側なので、AはAとしか見えないのですが、自分以外の人はAがBに見えることがあるからです。
他者からのレビューはデザインに限らず、何事にも重要だなと感じます。また、社内のデザイナーさんにも見てもらってアドバイスをもらっています。
UIデザインをする上で大事にしたいこと２つ
今まで開発側として、頂いたデザインをもとに実装をチームのメンバーに進めてもらう側だったので、その観点から見て大事にしたいなと思うことが2点あります。
1点目：開発されるOS
例えば以前、iOSとAndroidのアプリ作成案件でデザイナーさんから頂いたのはiOSのためのデザインのみだったことがあり、Androidユーザが慣れていない動作になるようなデザインになっている箇所がありました。こうなると開発者は余分な工数がかかったりそもそもUX的に良くないデザインになってしまいます。
2点目：デザイナーと開発者のコミュニケーション
デザイナーと開発者は密にコミュニケーションを取れるような体制でいることもとても大事だなと感じます。結構過去の案件でもデザイナーさんとは直接コミュニケーションを取れず、クライアントさんを経由しないといけないことも多かったように感じるのですが、これもまた齟齬があったりきちんとこちらの要望が伝わっていなかったこともあり、中々大変でした。なので、もし自分がデザイナーになったらそこの重要性はきちんと周りに理解してもらい、積極的に開発者とコミュニケーションを取っていくようなデザイナーになれたらなと思います。
以上、自分が今まで学んだことと今までの経験から大事にしたいことをまとめました。
最後まで読んでいただいた方、ぜひEstimでプロトタイプを実際に触ってみてください！
Enlytについて
株式会社Enlytはベトナムに開発拠点SupremeTechを持ち、これまで50以上の開発プロジェクトを行ってきました。ベトナムと日本のグローバルなチームで、数多くのプロジェクトを成功に導いてきました。
お客様の納得のいくまで、共に開発させていただき、アイデアを最高のかたちにサービス化いたします。
オフショア開発についてのお悩みやご相談がございましたら、下記ボタンより気軽にお問合せください！
