初めまして、エンジニア５年目です
詳細には、バックエンドも触るエンジニアとして２年半ほど、フロントエンドのエンジニアに転向して3年ほどです。
元々デザインなどに興味があった私ですが、デザイン課題という形で現役デザイナーにレビューをもらいながらデザインデータを作成する機会をいただき、デザイン未経験からUIデザインスキルアップを目指したので、スキルアップできたのか、何が有効的であったと感じているかについてまとめていこうと思います。
※個人の意見になりますので、参考程度にご覧ください。
結論、UIデザインスキルはアップしたのか？何が有効的だったのか？
結論、UIデザインスキルはアップしたと思います。
特にデザインツールの使い方、デザインの考え方については、ただ興味があった以前の自分と比べると、
パーツの配置などに理由を持ってデザインデータを作成できるくらいには、スキルがアップしたように思います。
このスキルアップには、手を動かして作成したものをデザイナーにレビューをもらい改善するというサイクルが、必要不可欠だったように思います。
デザイン課題の内容
上記にも記載した通り、デザイン課題は1年ほどやってきたのですが、1年で6つの課題に取り組みました。
私のデザインスキルレベル感
今の会社に入る前の転職活動中、独学でXDなどを少々勉強し、オンラインの学習サービスで成果物を作成し投稿していました。
使用ツール
今回は1年を通してFigmaを使用しました。
各課題でやってきたこと
各課題では以下のように段階を踏んで制作するものが本格的になっていきました。
- webサイトをトレースする
- 所属事業のトンマナを刷新する
- webサイトを改善・リニューアルする①
- webサイトを改善・リニューアルする②
- LP制作
- ポートフォリオ制作
2つ目までの課題で基礎的な部分を学び、3、４つ目の課題から、ユーザーを見据えたデザインの作成を行うようになり、より本格的なデザイン作成になっていきました。
デザイナーや共通の課題に挑戦したエンジニアから学んだこと
興味はあっても、インプットの仕方もよくわからなかったが故に、「良きデザインを作るコツとかがあるんだろうな」とぼんやりと思っていた筆者ですが、良きデザインの裏にはたくさんの努力がしっかりとありました。
たくさんのデザインを見てたくさんインプット
課題の3つ目から5つ目の制作中、「どう改善していいかわからない」「何を参考にすれば良いかわからない」という気持ちになり、手が止まってしまう場面が多くありました。
そんな中、レビューの中で「Pinterestなどで探してみるといいかも」と言ったようなコメントをもらったことがありました。Pinterestというと、いろいろな画像を見ることができるサイトというレベルの認識だったのですが、デザイナー曰く、Pinterestで良いと思うサイトデザインなどを探したりしているとのこと。
それを聞いて、5つ目の課題ではPinterestやwebデザインをパーツで絞り込んで探せるサイトなどを使いつつ、デザインを作成しました。
また、成果物のデザインの評価が良かった共通の課題に挑戦したエンジニアのデザインを見ると、明らかに自分とは桁違いな量の調査結果がまとめられていました。
デザインを作るにはたくさんのインプットが必要不可欠であると言えると思います。
デザインシステムとは何かを理解すること
1つ目から4つ目の課題まででよくもらっていた指摘に、「他と違っていて違和感がある」や「一貫性がない」という指摘がありました。
一貫性がないということは、「デザインシステムに沿えていなかった」のだと、今振り返ると思います。
デザイン未経験だった筆者は、そもそもデザインシステムがなんのためにあり、どのようにして活用していけるのかという点の理解が、甘かったです。そのため、本来デザインシステムに沿ってデザインしていれば一貫性が保てた箇所も一貫性がないデザインになってしまっていました。
これは考察なのですが、サイト内の一貫性がないということは、ユーザーが直感的に理解・操作しにくいUIになっているということで、実際、決定ボタンが今まで赤だったのに、急に青いボタンになっていたら操作に迷いが生じるかと思います。
課題を実施するまでは、なんとなく揃っているから良さそうやこのほうがそれっぽいなど曖昧な理由で見てしまっていたUIデザインですが、実際に指摘をもらい考えて制作することで、納得しながら学ぶことができた、大事なポイントだったように思います。
最後に
「手を動かすこと」「レビューをもらうこと」「基礎を知ること」「たくさんのインプット」の4つがUIデザインスキルアップへの近道だと筆者は考えています。そのため、課題は終了していますが、これからもこれらの4つを実施し、スキルアップを狙っていけたらと思います。