CarelyのUIデザインで実際にコンポーネントを使用して業務を行ってみて良かった点_悪かった点.pdf

Transcript

1. CarelyのUIデザインで実際に コンポーネントを使用して業務を おこなってみて 良かった点・悪かった点 アオキタカユキ
2. スピーカー紹介 01 東京生まれ。1児の父。好きな芸能人は「伊集院 光」。好きなラ ジオ番組は「伊集院 光 深夜の馬鹿力」。営業職を経て当時の 上 司 から「お 前 パソコン 好 きそうだな」の 一 言 でウェブデザイ ナーの道へ。数 社でウェブデザインと UI/UXデザインを経 験し 「good design」「red dot」など受賞。2018年にiCAREへ入社。 @dorisukeone リードデザイナー アオキタカユキ
3. • 一覧性を保つよう努める • 普遍的なユーザビリティを提供する • 「一連の行動が終わった」という感覚を与えるような対話をデザインす る • 簡単にやり直しができるようにする • 内部の動きが把握できるようにする まずUIで大事なこと。ある人曰く 02
4. 一連性、一貫性、普遍的な デザインするのが大事 要はこういうこと？ 02
5. UIデザインに適してるデザイン手法 02 アトミックデザイン ⬇ パーツ単位でデザインして、 それらの集合体が完成形
6. それを意識して業務を行ったら 良かったのか、悪かったのか やっと本題 04
7. これまで使ってたツール 04
8. XDで作ったコンポーネントファイル 04
9. パーツファイル パーツをコンポーネント化して管理 画面ファイル パーツファイルを利用して各機能の画面ファイルを作成 こういうの作ってます 04
10. 制作までの初速が早い すでに画面デザインがあるので修正部分だけにフォーカスできる XD自体がシンプルなツールなので慣れるまでが早い コンポーネントを意識(パーツの使い回しなど)するとXDやfigmaなどのツールを選ばざる おえない。なんでツールを統一できるのでチームの知見を深めやすい フロントと連携が取りやすい コメント機能が地味に便利。デザインを中心にコメントを集約できる。 良かった点 04
11. 悪かった点 04 運用開始までが大変だった 2名のUIデザイナーが全画面をデザインにおこす作業をしたが途中で頓挫した。 →実装画面とビミョーーーにデザイン画面が違うのでデザインを正確におこす必要がな かった(当時)。いまはフロント専属のエンジニアさんがいらっしゃるのでデザインに沿った 実装をしてくれる。 管理が大変 常に実装画面とデザイン画面が最新で同期されていることが理想。なんで棚卸し感覚で 定期的にデザインをチェックすることが大事なのでわ？？？
12. まとめ 04 ・ツールはXDかfigmaがいいよ ・コンポーネントはチームでの運用が効果的なので人数に よっては無理にやらなくてもいいかも ・サービスの運用時期、まあ一般的にはリリース初期くらい が一番修正がかかるのである程度落ち着いてからのほう がいいかもね
13. @dorisukeone