代表の平尾です。
最近UIUXデザインのクリエイティブディレクションを担当しています。
僕自身はプロダクトデザインの経験はそこまで多くないです。
だから、ベテランの腕利きデザイナーを起用して二人三脚でプロダクト開発をしています。
ベテランデザイナーとの仕事はとても刺激が多く、勉強になることがたくさんあるので、ここにザッとまとめてい置いておきます。
それでは、はじめてUIUXデザインをするWebデザイナーにとって、あらかじめ知っておいた方がいいことを備忘録として紹介します。
コンポーネントで作らないといけない
コンポーネントで画面をデザインして行きます。コンポーネントってなに？って方はこちらを読むと概念がわかります。
ページ単位でデザインを作るというよりも、機能ごとにデザインが決まっていくため、コンポーネントをしっかり管理する必要があります。
機能ごとに追加したり、削除したりが増えるため、Figmaのオートレイアウト機能が役に立ちます。
テキストで説明するのは難しいですが、上のコンポーネントを削除したら、下のコンポーネントが上がってくる。
みたいな感じです。HTMLを追加したり削除したりする時のことをイメージするとわかりやすいです。
XDで作るとか無理すぎて、Figma以外で作るのはもう考えられません。
スタイルガイドを作る
プロダクト全体のデザインシステムを作らないといけない。
スタイルガイドとは、見た目を形作るガイドラインのこと。
ページが大量になるので、あらかじめ色とかフォントとかを決めておきます。
Figmaのプロダクト全体のスタイルガイドはこのようなものです。
100点満点のスタイルガイドを知ることで、最低限作っておけばいいポイントを知りましょう。
Figma上で複製してみてみると勉強になります。
でも、大量すぎて到底真似できません。
ゼロから作るのは強烈に大変。
そこで、限りある時間と予算の中で便利なものは使い倒したい。
colorbase
一色を選べば、おすすめの色を教えてくれます。
非デザイナーでもわかりやすい。
何気に色の名前がわかるのはプレゼン時に魅力的に映るかも。
noteで売ってる方がいる
実際に販売している方がいらっしゃるので、購入して使用しています。
ミニマムスタートなプロダクトであれば、全然十分だと思いました。
UX MOV
アプリのデザインを動画で紹介してくれているアーカイブサイトです。
登録をしないと研究できないアプリのデザインをわかりやすく動画でまとめてくれている神サイト。
使用言語やデータベースによってデザインの相性がある
Reactで開発されることが増えていますが、使用する言語とデザインコンポーネントの相性を考えると工数をダイエットできるかもしれません。
たくさんあるのですが、
NextUI
Reactの UIライブラリです。ダークモードも作れて美しい。
chakra UI
こちらもReactのUIライブラリです。
Vuetify
こちらはVueのデザインコンポーネントです。
テキストでのコミュニケーションが増えるのを解消する
ここ2年ほどで一気に拡大したリモートワークですが、テキストでのコミュニケーションが増えるあまりに、逆に非効率になったりもしますね。
なので、それらを解決するための雑談・ボイスチャットツールです。
oVice
こちらは見た目もオフィスのよう。パラレルオフィスとして人気拡大中のWebサービスです。
私も使ってます。
corom
こちらはスマホからでも簡単に使えて、オンラインの部屋がつくれるアプリ
Loom
5minほどの動画を簡単に作れる。
例えばブラウザ録画して、デザインの変更点を録画したり、テキストだけでは伝えづらいフィードバックをしたりすることができます。
テキストで冷たく感じている人たちは利用した方がいい。
こちらはChromeに拡張機能も用意されてるので、手軽に使えます。もはや使わなかった頃に戻れません。
制作進行について
hidane
ブレストした内容をまとめたり。
FigjamやNotionもあるけど、個人開発で作ったプロダクトらしく、応援したい。
見積もりは週単位や月単位の工数で決まる
Webデザインの見積もりはページ単位で決まったり、工数単位で決まったり、で決まることが多いです。(弊社の場合)
ただ、UIデザインは、週単位でデザイナーさん、エンジニアさんにお支払いするケースが今のところ全部です。
他社での見積もりを真似て、最初はこれでいいのかなーと不安に思ってました。
でも、実際には、Webプロダクトって複数を同時に考えてデザインすることってなかなかできることではないと思います。
デザイナーは、がっつり１週間そのプロダクトの機能とデザインを脳みそ全部で考えています。
必ずしも手を動かしている時間だけではなく、考えてる時間や要件定義の穴を探している時間などを含めると、１週間単位での見積もりが確かに正確だと思いました。
まとめ：クリエイティブディレクターは考えること近い
WebデザイナーとUIUXデザイナーの仕事の内容は使用するアプリケーションや使用言語なども違います。
ですが、上流にいるディレクター系職はあまり変わらないですね。
利用した人がどのような気持ちになって、どこで感情を動かされるか。
機能的にどのような課題を解決できるか。
当然プロダクトの規模にもよりますが、コアな目的は同じなのでは。
ほなね
