エンジニアさん向けにUIデザイン講座を開いてみた（成果物編）

はじめに

こちらは
「エンジニアさん向けにUIデザイン講座を開きたい！（準備編）」
「エンジニアさん向けにUIデザイン講座を開いてみた！（完結編）」
の続きとなりますので、先にそちらをご一読いただけますと話が理解しやすいかと思います！

UIデザイン講座「実務編」の成果物

UIデザイン講座の実務編では、弊社で使用している勤怠管理システムの一画面を再デザインする内容を実施しました。画面を再デザインする上でカラーやボタンなどを一から考え直して、簡易なUIライブラリを作成しました。
下記が受講者の皆さんの成果物の一覧になります。

画面デザインではないので、ちょっとわかりづらいかもしれませんが、ご了承ください！
ここまで大人数で同じテーマのものを作る機会はそうそうないですし、見ることも少ないので、私としても貴重な機会でした！
デザイン経験のないエンジニアさんでも色のチョイスのセンスがいい方がたくさんいて驚いた記憶があります。
ちなみに私のデザインもこの中にあります！見つけてくださいw
全然目立ってないのが、エンジニアさんたちが素晴らしいのか、私がデザイナーとしてしょぼいのか。。
うーーん、深くは考えないでおきましょう。。

UIデザイン講座「グループ課題」の成果物

２時間半という長丁場の講座の他に、グループ課題も用意したのですが、３チーム×３名の皆さんに参加していただきました。業務がある中で、トライしていただき、本当にありがとうございました。

グループ課題の内容は、弊社で使っている勤怠管理システムのトップ（ログイン後に最初に表示される画面）の再デザインになります。元々の成果物からロゴや個人情報は私の方で外させていただきました。

Aチーム

画面デザイン

UI改善のポイント

一画面でできることを少なくし、ユーザーを迷わせない工夫しました。

チーム制作で工夫した点・苦労した点

常にこのデザインが最善なのか意識しました。途中既存のサイトのデザインにひっぱられたのはよくなかったです。

Aチームへのコメント

Aチームには、デザイン経験のあるメンバーが一人いたので、色の使い方や配分、レイアウトなど、難なくこなせていたかなと思います！　（直したい点は別で共有しているので、こちらでは書かないことにします！）
出勤・退勤のアイコンの表現が可愛いですね！

---

Bチーム

画面デザイン

UI改善のポイント

一画面で表示させる機能を絞り、その画面で何ができるのかを明確にした。他機能もサイドバーに常時表示させることでアクセスしやすくした

チーム制作で工夫した点・苦労した点

要素同士のバランスを取ること
Figmaの使い方
どういう人が使うのかを考えてからそれを基準にデザインできたのが良かった

Bチームへのコメント

Bチームは、デザイン経験のあるメンバーがいなかったのですが、上手にデザインできているなという印象でした。メインカラーを出勤退勤ボタンで使い、画面のメリハリも効いてますよね！
エンジニアさんだけで作ったことを考えると「センスあるなー」という感想が一番に出てきました！

---

Cチーム

画面デザイン

UI改善のポイント

利用者がすべきことを迷わないようなボタンや案内の表示を意識しました。

チーム制作で工夫した点・苦労した点

色の使い方に苦戦した。(セカンドカラーや非活性を表現するなど)

Cチームへのコメント

Cチームも、デザイン経験のあるメンバーがいないチームでした。
Cチームは元々の勤怠管理システムのカラーを使わず、（A,Bチームが使った色）メインカラーを決めるところからチャレンジしたチームです。フォントも見せたいデザインを意識して変えていただいて、デザインに真摯に取り組んでいただいたという印象が強く、とても好感が持てました。
最終的に出来上がったデザインに関しては、別のところでコメントしているので差し控えますが、チャレンジする姿勢がとても良かったチームだと思います！

グループ課題について

グループ課題は、成果物の出来より、チームで話し合いながらUIを作る過程を重要視する課題でしたが、各チームから飛んでくる鋭い質問に感心し（ヒヤリとし）、出てきた成果物も申し分ないものになっていて、本当に驚きました。
逆に私が要件から画面を起こす過程（ワイヤーフレーム作成）をもっと勉強しなければと思うきっかけを与えてくれました。

こういう機会を与えてくれた開発部の皆さんに感謝いたします！

最後に、もし私が３チームにデザインを依頼した担当者だったら、何を選ぶかを書こうかなと思います。
デザインはいつも順番をつけられ、採用・不採用の判断を掛けられるものなのでw
私が担当なら、A・Bチームの方向性を採用して、よりメリハリの効いたBチームのデザインをブラッシュアップ・もう一度デザインを提出という形にするかなと思いました。
ただ今回のグループ課題のMVPを上げるとするなら、Cチームかなと思いました。チャレンジする姿勢がとても良かったので！

ということで全三回のUIデザイン講座の記事も今回で完結です！
お疲れさまでしたーー！