僕はUI専門のデザイナーというわけではないのですが、ここ3〜4年で結構UIを作らせていただいてます。時代のニーズでもあるのでとてもありがたいことだと思ってます。そこで今回は僕がUIを作る時に気を付けていることをつらつらと書いてみたいと思います。
まずはコンセプト
まずはこれです。絶対のやつです。サービスを作る目的、誰の何を解決したりするのか目的が必ずあるのでそれを達成する、また達成に向けてスムーズに使えることを意識してUIを考えます。かっこいいアプリにしたいとかおしゃれなアプリにしたいとか、そういうのはあまり意識せずに「コンセプトに沿うUIとは何か」を考えるのが基本だと思ってます。
全体設計
コンセプトを確認したら全体を見るようにしてます。ワイヤーフレームとかカスタマージャーニーとかそういうのですかね。ユーザーがどういう気持ちで入ってきてどう使うかなぁみたいなのを意識しながらページ遷移考えている事が多いです。「1ページにこの情報・アクションは詰め込み過ぎやろ」みたいなページを2ページに分けたり、ページの順番変えて何も考えなくてもスッと利用できたりできるような、スムーズな使用ができるようにと思っていることが多いです。特に今はネイティブアプリでなくともスマホ利用が多いので、1ページ内で理解・操作できる要素は減らして作ってることが多いです。
UIを作る
上の2つを考えたら「そろそろ作れるかなぁ」みたいな感じになるのでFigmaで作り出します。Fgimaは独学なので「コレ使い方あってるか？」みたいな感じではありますが、エンジニアの方から特に文句も言われないのできっと大丈夫でしょう。（願望含む）
UI作る時に気を付けてることは、1.ページの目的に沿っているか 2.前後のページと齟齬がないか 3.デザインクオリティは十分か みたいなことを考えながら作ってます。
ページできたら確認
上記でUIできたら担当の方に確認してもらいます。通常はFigmaで確認してもらってますが、ページ内に動きがあるものや、ここぞ！という大事なページはプロトタイプで動きをつけて「実際こうなります」が極力わかる状態で確認してもらってます。ただ、プロトタイプで動きをつけるのも結構労力がかかり、毎回やるのは時間の浪費になると思って、大事なシーンだけにするようにしています。
修正
フィードバックもらって修正します。あまり大きな変更をもらう事は少ないですが、意見を元にさらに良いUIになるように作業しています。
エンジニアの方へ
デザインができたらFigmaをエンジニアの方へお願いしています。コーディングが社外の場合はかなり細かに説明入れてお渡しします。最終的には自分でコーディングしたいと思ってますが、HTML/CSSとかじゃないので現状お願いしています。こちらは細かなニュアンスまでいつか自分で実装できたらと思っているので地味に勉強してそのうち自分で…と思っています。
以上、ざっとこんな感じでしょうか。UIは手を動かす前に考えることがすごーく多いデザインだと感じています。完成したのがちょっとboxが変更されただけとか全然あるのですが、手数の少なさとは別に思考時間がかなり長かったりするので、その辺が大変かなぁと思います。webやグラフィックよりさらに考えてる時間が長い感じすらあります。
随分考えた挙句にちょっとしたデザインが変わらないとか、外部の人間が見たらサボってるように見えないか…と心配になることもあるのですが、この辺はうまく理解してもらえたらいいなぁと感じています。（他のデザインと同じく思考の深さが良いデザインに必ずつながるので）
今回UIのお話を書いてみましたが上記のような感じで作っています。結構難しい分野だったりするので、今後も勉強しながら続けていけたらいいなと思ってます。
