はじめに
デジタル企画推進部エクスペリエンスデザイングループの里屋です。
私と同グループの木村は、画面開発を行うフロントエンドエンジニアとして業務を行ってきましたが、
2021年4月から新たに「デザインエンジニア」を目指して、UIデザイナーとしてのスキルを身につけるための施策活動を行ってきました。
今回はその活動内容についてご紹介したいと思います。
デザインエンジニアとは
そもそも私達が目指しているデザインエンジニアとは、「エンジニアとしてもデザイナーとしてもアウトプットができる人」を指しています。[1]
エンジニアのアウトプットとは、ソースコードを書いて開発を遂行できることを指します。そしてデザイナーのアウトプットとはSkecthやAdobe XD、Figmaなどのデザインツールを用いてUIデザイン、プロトタイプ作成などが行えることを指します。
組織の中に「デザインエンジニア」がいることで、以下のようなメリットが挙げられます。
- プロトタイプを用いたUIの仮説、開発、検証のプロセスを短期間で行うことができる
- UIデザインに対して技術的に可能かどうかの判断を早い段階で行うことができる
- デザインの品質を維持した実装が可能
デザインエンジニアが開発業務とデザイン業務の両方に携わることで、デザイナーとエンジニアの認識のズレ等を極力なくすことができ、システム開発効率の向上や高品質化を実現することができます。
施策活動の計画
前述したように、私達はいままでフロントエンド開発のエンジニアとして働いてきたため、デザイナーとしてのアウトプットはもちろん、業務での経験も一切ありませんでした。そこでデザインエンジニアとしてデザイナー面でも活動できるようになるために、まず今の自分たちに必要なスキルを整理しました。以下が必要なスキルとして挙げた内容です。
- デザインツールの基本操作の習得
- デザインの言語化
- ビジュアルデザインの基礎理解（レイアウト、配色 等）
また、書籍などでUIデザインの作り方やビジュアルデザインの知識を学んではいましたが、実際に「画面を作る」という作業になった場合、それらの知識をいつ、どのように使用して作成していけばよいかわからないという点を課題として感じていました。
以上のことを踏まえて、これらのスキルを鍛える方法を調べたところ、「Daily UI[2] 」や「Cocoda [3] 」というサービスがあることを知りました。
これらのサービスではUIデザインを行うためのテーマ（例：名刺交換アプリ、航空予約サイト 等）が与えられ、それをもとにUIデザイン作成を行います。作成後はSNSやサービス上で外部に成果物を発信することで、第三者にレビューをしてもらったり、自分のスキルのアピール材料として使用したりします。テーマによって業界や利用者層が異なる画面をデザインすることになるため、デザインの幅を広げることができます。
この方法を実践すれば先程挙げたスキルを身につけられるだけでなく、私達に不足している「デザイナーとしてのアウトプット経験」も補えると思い、施策の活動として取り組んでみることにしました。
活動内容
ここからは実際の活動内容について説明します。UI作成の活動は1テーマにつき2～3週間程度の期間があり、全体の作業時間はおよそ15時間程度です。
作業開始から1週間を目安にワイヤーフレーム作成までを行い、中間レビューを実施していました。
また「UI説明・フィードバック」までを実施したらKPTで活動内容のふりかえりを実施し、取り組み方を変えたり次のテーマ選定について話し合ったりしました。
テーマ決め
テーマは普段自分たちが利用しているアプリケーションの中でUI改善したいものを選ぶことが多いです。最近では社内で利用しているシステムやフードデリバリーアプリのUIをテーマに選定しました。その他に「Daily UI」や「Cocoda」を参考に選定したりもしました。
また慣れてくるとUI作成における制約も設けるようになりました。例えば「既存画面の改修なのでリニューアルされたことが画面を見てすぐにわかるようにする」「最近流行っているUIデザインを取り入れる」などです。こういった制約があると、普段とは違うデザインを作る必要があるので、作業のマンネリ化を防ぐことができます。
ユーザー調査、類似サービス調査
UIを作成する前に、ユーザー属性、アプリが利用されるシチュエーション、類似サービスの調査を行います。ユーザー調査では想定されるユーザーの年齢やITリテラシーの有無等を調査します。シチュエーションの調査ではどのような時間帯に利用されるか、生活の中でアプリがどのように関わっているかについて調査します。これらの調査結果はUIの色使いや画面における要素数等に影響します。例えば、仕事が終わった後に使いたいアプリであれば落ち着いた色合いにしたり、ITリテラシーの比較的低い人が利用するのであれば1画面の要素数を減らして簡易に操作できるようにする、などが挙げられます。
類似サービス調査では参考として、テーマと類似したアプリについて調査を行います。類似サービスの使いやすさとその理由について調べますが、自分で実際に使用したり、ユーザーのレビューを参考にすることもあります。これらの調査結果を踏まえてUI作成を行います。
UI作成
ワイヤーフレーム作成
UIはデザインツールFigmaを使用して作成します。作成画面の多くは主要な機能を持つ画面やホーム画面など合わせて2～3画面となります。最初に画面のワイヤーフレームを作成します。ワイヤーフレームとはWebページのレイアウトを決める構成図で、社内やお客様と認識を合わせるために使用します。ワイヤーフレーム作成の段階では白黒で作成します。その理由は色や形などの情報を含めず、構成の確認に注力するためです。このワイヤーフレーム作成が完了した段階で、デザイナーに説明を行い、フィードバックを受けます。以下が作成したワイヤーフレームの一部です。
デザインカンプ作成
ワイヤーフレーム作成の次は、デザインカンプを作成します。デザインカンプとはデザインの完成図のことです。また、この段階でカラーパレットを作成し、カラーパレットに基づいてUIに色を付けます。カラーパレットは UI作成に使用する色をまとめた表のようなものです。インターネット上でカラーパレットを自動生成するツールもありますが、まずは自分でカラーパレットを作成することを意識しました。カラーパレット作成後は各要素に装飾を付けてデザインカンプを作成します。以下が作成したデザインカンプの一部です。※デザインカンプは一部画像を変更しています。
以下が作成したカラーパレットです。
デザインコンセプト作成
UI作成の次はデザインコンセプト資料を作成します。デザインコンセプト資料とはデザインの方針などを記載した説明資料になります。以下はデザインコンセプト資料の項目の一例です。
- 事前調査結果
- 既存画面の課題点
- デザインコンセプト（要素の配置の方針など）
- ビジュアルデザイン（カラーパレットなど）
- 作成した画面イメージ
- デザインの工夫点
UI説明、フィードバック
ワイヤーフレーム作成後とデザインカンプ作成後にデザイナーや他の参加者に向けてUI説明を行い、質疑応答やフィードバックを受けます。UI説明では調査結果に加え、なぜ要素をそのように配置したのか、なぜその色を使用したのか、などの説明を行います。
その他にフィードバックに対する修正案を参加者同士で話し合ったりもしました。
実施した感想、得られたこと
他者に作成したUIデザインを見せる際に、色やボタンの形、各要素の配置など画面の細部まで「どうしてそうしたのか」の理由を説明する必要が出てくるため、そのあたりを考えながらUIデザイン作成を行えるようになったのが、今回施策で取り組んでみて良かった点だと思いました。恐らく個人学習でUIデザインを作っただけではこのような考えは生まれなかったと思うので、複数人でレビューしあえる環境はUIデザインスキルを向上させる上で大切だと感じます。
また当初の課題として感じていた「UIデザインをする上で何から行えば良いかわからない」という点も、2～3週間単位で繰り返しUIデザイン作成を行うことで、デザインする上で必要な情報やそれらの整理の仕方、デザインツールの操作方法などが徐々に身につき、スムーズに作成作業ができるようになったと思います。
（里屋）
これまでは画面実装をしているときに「なぜこの画面がデザイン的に優れているのか」などのデザイナー的な目線を持つことはあまりありませんでしたが、この活動を通して考える習慣が付くようになりました。また、ユーザーにとって操作しやすい画面や見やすい色などUIデザインの基礎が身についたり、UI作成の過程を整理し相手に言葉で伝えることも徐々に出来るようになりました。 今回の活動では最初は2名でスタートしましたが、途中から参加者が増えてチームでデザインを作成するなど活動の幅が広がりました。 参加者が増えたことでディスカッションが活発になり学ぶことが増えたことも良かったと思います。今後は参加人数をさらに増やして活動を続けたいと思います。（木村）
エンジニアとして活かせること
UIデザインをしている段階でどのように画面を実装するか、どの部分をコンポーネント化する必要があるか等を自然と考えられるので、実装作業のスピードが向上したような気がしました。また今までは表示位置の少々のズレを見過ごしてしまっていましたが、UIデザインをするようになってそういった部分に「気持ち悪さ」を感じられるようになったので、実装面でも細部までこだわるようになったと思います。 （里屋）
デザインの品質を維持した実装が出来るようになることや、デザインの実装が技術的に難しい場合に実装可能な代替案をデザイナーに提案することができるようになると思います。（木村）
引用元、参考サイト
[1] takram 田川欣哉に学ぶ、《デザインエンジニア》の仕事と思想。［前編] https://careerhack.en-japan.com/report/detail/17
[2]Daily UI https://www.dailyui.co/
[3]Cocoda https://cocoda.design/
