見よう見まねでデザインしてる
こんにちは、freeeでデザインシステムとかをやっているymrlです。この記事はfreee Designers Advent Calendarの2日目です。
わたしは、デザイナー組織内ではfreeeでは最古参で、2014年1月入社なのでもうすぐ勤続10年ですが、最初の5年半はエンジニアとして勤務していました。現在はマネジメントもやりつつ、Figmaも触るしコードも書くし、必要なことはなんでもやっています。
さて、今回は、エンジニアがデザイナーになって、どんなマインドで仕事しているの？というところについて書いてみます。わたしの感覚ではずっと「見よう見まね」でやり続けています。
うまい人の成果物を使う
「デザイナーの仕事」として真っ先に思いつくものが、やはりグラフィックであるとか、ビジュアル的なもの、「なんかクリエイティブなやつ」という人は多いんじゃないかと思います。
わたしは残念ながら、絵を描くのは苦手だし、美術の専門教育を受けたこともありません。IllustratorやPhotoshopでちょっとしたものを作ったりは元々やっていましたが、せいぜい趣味レベルのものです。
わたしはこれまでずっと、Vibesというコンポーネントシステムを作ってきました。最初の頃のビジュアルは別のデザイナーが作ったものや、既存のfreee内のUIをVibesのコンポーネントとして、Vibesのトンマナや技術仕様に揃えていく形で作ってきました。
数年前に、freee全体のブランドのリニューアルとして、ロゴやカラーパレットを大きく変更する機会があったのですが、このときVibesのコンポーネントの色も変更しました。これもブランドチームが定義したカラーパレットの色を、UIコンポーネントに当てはめて調整していきました。そしてそれを他のデザイナーにも見てもらいながら、リブランディングにより印象が変わる部分とユーザーの使い勝手に影響が出すぎないところを探っていきました。
総じて、Vibesのルック＆フィール、「クリエイティブな」部分に関しては、わたし自身が0から作った部分は少なくて、ビジュアルが得意なデザイナーのアウトプット、ブランドチームが整備しているブランドフィロソフィーや各種の素材、そして普遍的に知られているベストプラクティスを見ながら、見よう見まねでやってきたものがほとんどだと思っています。
わたしが作っているのは、デザイナーにとってもエンジニアにとっても使いやすく、freeeのプロダクトが目指す品質の高いプロダクトを早く作れる仕組みで、そこにVibesという名前がついている認識をしています。ビジュアルな部分は仕組みではないので、そこは必ずしも自分のスキルだけではなく、社内にすでにあるものを転用したり上手な人の手をたくさん借りています。
相手の懐に飛び込む
わたしの仕事では、UIコンポーネントやガイドラインやアクセシビリティに関連して、けっこう実際の開発チームで起きている問題や、やりたいことの相談、そしてときどき実際の画面そのものを作っていることもあります。そういう場合にはチームの違うデザイナー、エンジニア、QA、プロダクトマネージャーと話をしていくことになります。
チームが違い、関わるプロジェクトが違い、そして職種が違うと、そもそもこちらが前提だと思っていることがあちらでは前提ではなかったということがしばしば起きます。こういうものは時間をかけてコミュニケーションしていけばだんだんとお互いに理解していけるものだとは思います。しかし、できればそういうフェーズをすっ飛ばして、最初から話ができたほうがいいはずです。同じチームでないならなおさら、相互理解の醸成は難しくなりがちです。
ということで、他のチームの人と喋るときには、なるべくそのチームが何を重視しているのか、その人自身はどんな役割を担っているのか、その上でどんな提案をこちらからできれば良いのか、というのを先に考えておくようにしています。関係するドキュメントを探してみたり、Slackで「from:@ユーザー名」で検索して、誰とどんなやり取りをしているのかなどをざっくり把握します。可能であればその時点である程度の回答を用意しておくとか、答えに辿りつくための道筋を考えておきます。説明の仕方も、相手がデザイナーなのかエンジニアなのかQAなのかプロダクトマネージャーなのかで、使う用語や説明の内容を変えています。
これをやるにはエンジニアだった経験がとても活きていると思っていて、特にエンジニア側にのメンバーが、誰が何を知っていて考えていてアクションしているのかみたいなことが、やり取りやコードを読むことによって理解できることです。長期にわたって在籍していることで、どの機能が何をするための機能でどんな人が作っているのかも、ざっくりしたものは把握できています。
まず、相手が「今すぐほしい」と思っているものは何なのか、それはどんな姿をしているのか、そしてその「ほしい」が発生している要員は何なのか、相手の想像を超えるものを作れないか……というところを考えながらコミュニケーションしていくというのを、常に意識しています。
小さな差異や違和感を見つけ、理由を言語化する
デザイナーという職種は、なんか「センスが必要」と思われている気がします。これは自分はずっと違うような気がしていたんですが、最近はある種の「センス」みたいなものは必要で、しかしあとから獲得できるものなのかもなと思うようになりました。
その「センス」とは、一般に想像されるクリエイティブな部分という感じではありません。なにか既成のUIだったり、誰かの作ったモックだったり、自分の作ったものだったりについて「何かいイケてない気がするんだよな」「A案とB案でB案の方がよさそうな気がするんだよな」と思うとき、その「イケてない」「よさそう」な部分をより具体的に、細かいピクセル単位の差異から全体の情報構成に至るまで、あらゆる差異や違和感に敏感に気付き、それらがどう作用しているのかを整理する行為です。これは確かに、デザイナーが持つべき「センス」のように思えます。
なぜその大きさの余白にしているのか、ココとココの余白はなぜ大きさが違うのか、この情報はなぜこの画面には置かないのか、なぜこの順番で配置しているのか、なぜこれをこの名前で呼んでいるのか、みたいな細かいところまですべて理由をつけてデザインすることを心がけています。もし理由が思いつかないのであれば、それは別の姿でも良いはずで、その場合はその姿も検討し、そして比較したうえでどちらかが良い理由を再び言語化します。
案を作る作業はこれまでに作ってきたデザインシステムの素材を組み合わせていて、あまり「センスのある」「クリエイティブな」作業をしているようには見えないかもしれません。しかし、細かな部分を決めるところまでいろいろな考慮を積み上げ、目的に対して最適と言えるようなものを作る作業のなかには、エンジニアの活動のなかでも得てきた知識や経験によって培われた「センス」が活きているんだろうな、と思っています。
使えるチャンスを使う
ということで、エンジニアの視点からみて、デザイナーの「クリエイティブな」感じに見えることはあんまりやれていません。それでもデザイナーとして活躍できていて、そしてそれは先人の偉大な知恵を見よう見まねしつつ、自分なりに考えて分析することで成り立っています。
しかしたまに、ゼロから何かをクリエイトするチャンスというものはあって、開発組織のブランディングのためのバナーをはじめとする画像は、練習の場として積極的に引き受けたりしています。
たとえば、freee Tech Night という開発チームの取り組みを紹介するイベントのバナーだったり
ゲストを招いたYouTube配信トークイベントだったり
たまには失敗してしまうこともあります
そして本日12月2日と3日のSpecturm Tokyo Festivalにfreeeでブース出展するため、ブースで配布するコーヒーのカップスリーブのデザインを担当しました。freeeのブースで美味しいコーヒーを提供しますので、会場にお越しの方はぜひお越しください！
freee Designers Advent Calenderの、あしたの担当はmさんです。お楽しみに。
私は freee Developers Advent Calendar の18日目の担当でもあるので、つぎは18日に、freee Developers Hubでお会いしましょう！
この記事が気に入ったらサポートをしてみませんか？