採用情報はこちらレアジョブについてレアジョブのデザインチームがFigmaを導入したお話レアジョブについてデザイナー挑戦する2019/08/06ツイートシェアはてブ渡辺:レアジョブのデザイナー。デザインも好きだけど、コーディングも好き。メンチカツはもっと好き。まとめ最近、レアジョブのデザインチームで、Figmaというデザインツールを導入したのでそのお話をしたいと思います。依頼者とのやり取りの中で、「あの時なんて言ってたっけ?こう言ったよね?」と“言った・言わない”のトラブルは、デザイナーであれば誰しもが1度は経験していると思います。チャットツールやメール、議事録で内容を残しておけばいい。確かにそうなのですが、これが結構面倒くさかったりもします。した内容だから口頭で済ませてしまい、後々わからなくなってしまったなんてこともよくあるし、「もっと簡単に、ちゃんとログを残したい!」と日頃から思っていました。́ー・`)どや」と思ったりすることもあるんですが、デザインとコーディングを別の人がやる場合はそうはいきません。デザイナーとエンジニアで分業となった場合は特にそうです。『スマホで見たときの横幅100%のボタンと、横幅280pxのボタンの違いなんてものは、デザイナーとしては、全体を横幅100%に揃えているページで100%のボタンを設置しても、サイズ感が揃いすぎてしまい、逆に目立たない。フラットデザインなら特に、ボタン感が薄れてしまうからあえて280px!』などの説明ができるかもしれませんが、エンジニアはデザインを勉強してきたわけではないので、ボタンを見ただけではデザインの意図はわかりません(そりゃそうだ)。そこにボタンがあるから、ボタンを実装したんです。「違う違う!そのボタンの位置の座標はこれで、色はこれで......!」といちいち共有するのは、なかなかめんどくs、、、大変だろうし、かと言って「もうSketch見て勝手にやってくれー!」なんて適当なことは言えません...。少なくとも私が経験してきた会社では、依頼者とデザインチームの他の誰か1人にデザインレビューをしてもらうというのが常でした。「レビュー者がこの人ならこう言うだろうな。しておけば通るだろう」...なんて、忙しい時には特に、デザイナーらしからぬ邪な考えが出てくることもあります。(もちろんイラストは大げさですが。「こうしたらよくなるんじゃない?」デザイン視点からでは想像もつかないような(ありえない)提案を受けることがたまにあります。「文字目立たせたいから赤にして!」(......それは葉っぱを隠すなら森に隠せということですか?)と問いたくなるような提案とか、、、(新卒のときに遭遇した怖い話です)こういった場合にデザイナーなら説明をしますよね?なぜ赤ではだめなのかを。́Д`)ハァ...)もやもやすることこの上ない、、、Figma:リアルタイムで調整して確認できるデザインツール、あるよ渡辺:Figmaだー!本当に天の声が聞こえたかはさておき、今まで問題だったことを解消できる画期的なデザインツール、それがFigma!これは、導入しない手はない!Sketchとも互換性があるし、使い方はだいたい一緒だ!ということで導入しました。導入について導入も簡単で、登録したらすぐ使えます。日本語に対応していない、Sketchファイルをアップしたら文字がずれた...といった課題があり、それらの最適化に時間がちょっと必要だなーとは思いました。いえ、なんのツールでもそのようなことは起きるので、特に気にはならなかったです。ショートカットや使い方もSketchと大きく変わらないので、Sketchを使っている人ならすぐに使いこなせると思います。導入をしてよかった点は、大きく3つあります。・ライブデザインでペアデザインできる・具体的な意見が出やすい・コメントが嬉しい楽しいライブデザインでペアデザインできる「その場でデザイン作業ができ、そのまま共有」つまり、ライブデザインが簡単にできる!ことが一番のメリットに感じました。ライブデザインのメリットには、2つの要素があると思います。「全員が納得すること」を実現するためには、全員が意見を出し切り、腹落ちする内容に意見をまとめ、デザインを調整をして、、、となかなか時間がかかるし、骨が折れます。「これは?」「それならこれは?」とスピーディに話が進みます。言われたままにデザインをしてしまっては、目的がずれてしまうのである程度それを回避するために、知識や経験などは必要になってくるかもしれません。同時作業が可能また、Figmaでは、1人はデザインし、1人は違う部分を確認してコメントを残し、さらにもう1人は文言の修正をしていく...といった同時作業も可能です。Photoshopでも同じようなことをやろうと思えば、正直できてしまいます。「ごめん!上書いちゃった(*ノω・*)テヘ」と他の人が自分のファイルを上書き、、、、なんてことになりかねないです。そんなのは効率が悪いし、最悪の場合は修羅場です。私「どうも!」と、デザイナーが2人なら、1人はサイト全体を、もう1人は細かいパーツを同じ画面で同時に作成するというペアデザインもライブデザインしながら行えちゃうわけです!(すごい)具体的な意見が出やすいFigmaで作ったものはCSS、iOS、Androidのコードをそれぞれ吐き出してくれるのでこの通り作ってくださいねと、デザインツールに慣れていないエンジニアに渡したとしても簡単に数値を確認してもらうことが可能です。以前よりも精度の高い【具体的な意見】を出してもらえるようになりました。デザイナー以外の人が「デザインはわからないから、、、」と意見を言わないよりも、自ら意見を言ってくださるのはとても嬉しいことですし、新しい発見につながります。コメントが嬉しい楽しいチーム全員がプロジェクトに対して前向きに取り組んでいる様子を、コメントの数や閲覧者の数などで感じることができるので、コミュニケーションツールとして、チームワーク向上にもつながるなと思いました。なにより、リアルタイムに「このデザインいいね!」とコメントされると、嬉しくてモチベーションも上がるものです!デザイナーだと「あー、デザインレビューで何を言われるんだろう」とデザインレビューを投げるのが怖いと感じる人も少なくないと思うのですが、Figmaだと簡単にコメントが残せるので、皆さんフランクに意見をしてくださいます。“怖い”という感情はなくなり、デザインレビューが楽しくなりました。これに関しては、社風にもよると思いますが、レアジョブはノリがいい人が多いので楽しいです。(もちろんコメント内容は真面目ですよ!)Figmaはリアルタイムなので見ている人のカーソルがあっちこっちと動くのですが「うわ!今ここ見られてる!」と個人的にも楽しんでいます(笑)その他その他、下記のような利点も実感しています。・ファイルではないので、各ページのデザインがすぐに確認できて統一がしやすい。・以前の作業した内容や、他のデザイナーのデザインがすぐに確認できる。・シンプルで使いやすく、見た目もいい。・タスクの内容だけがコメントとして残るので、チャットツールのように他の話と混ざることがない。Fontsが初めから導入されており、インストールせずに使えるので、フォントを試したい時は便利。・気になる場所に直接ピンを立て、コメントをしていくので、レビューされた場所がすぐわかる。レビュー箇所の説明も不要。いまひとつだったこと逆に、ここが改善したらもっと使いやすいのに!という部分もあります。修正はSketchで行い、確認はFigma上で行いたい...となることがあります。修正したファイルを都度アップロードすると、アップロード毎にファイルが生成されてしまい、共有したFigmaのURLから変わってしまうのが不便。同じファイルをアップロードしたら、そのまま上書きしてほしいところ。他にも以下の内容が当社では挙がっています。・Sketchファイルとの互換性がもっと改善されたら嬉しい。・SketchからFigmaにインポートはできるが、FigmaからSketchにインポートできないのが不便。・インポートではなくコピペの場合もSketchからFigmaはできるが、FigmaからSketchはできない。・デザイン業務を円滑に進められるようになった。・みんなが参加することでレビューの質が上がった。・デザインレビューが楽しくなった。と今の所メリットが多いです。Figmaを使う上での運用方法は設定しきれておらず、オブジェクトのcomponent化だったり、使いこなせれば効率化の上がるであろうFigmaの機能を使い切れていないなと思うところが多くあります。今後はそういった部分を改善して行きFigmaを使いこなすことで、よりデザイン業務を円滑にし、チームメンバーが納得したクオリティの高いデザインを創出できるよう取り組んで行きたいです。日本時間の8/2(金)にプラグインが公式でリリースされFigmaがより使いやすいものに進化した模様です。゚д゚)ノシレアジョブでは、デザイナーを募集しています。Tokyo!2017/01/13カスタマーサポートの仕事は、奥が深い2017/10/20経営者は何故スキルでなくマインドで抜擢するか。