株式会社SonicGarden(ソニックガーデン)
お問合せ

お知らせ

【後編】デザインできるプログラマの育てかた〜「デザインメンター制度」のキモは理由で納得! 2015年01月22日

最終回の後編では「エンジニアをデザインができるように育てるデザインメンター制度」について引き続き現場のエンジニアと、一緒にお仕事をさせて頂いているデザイナーの方をお迎えして、お話を伺いました。ついに謎に包まれていた「デザインメンター制度」の詳細が明らかに!

  • 【前編】エンジニアの会社でデザインがうまくいくワケ〜「エンジニア病」にはダメ出しされよう
  • 【中編】プログラミングとデザイン、やっていることはわりと同じ〜「デザインは感覚じゃない」
  • 【後編】デザインできるプログラマの育てかた〜「デザインメンター制度」のキモは理由で納得!
  • デザイナーとプログラマーの紹介画像。左から町田、赤塚、松村、遠藤、前田の順。

    ”育てる”という関わり方が「デザインメンター制度」

    倉貫顔写真 倉貫
    では次は最後。3つ目のテーマ、 エンジニアをデザインができるように育てる方法として、デザインメンター制度という仕組みを始めたわけですが、「デザインメンター」とはそもそもどういうものなのか、赤塚さんから説明して頂けますか?
    赤塚顔写真 赤塚
    はい。「P4D(デザイナー向けプログラミング部)」という活動をしていたんですが、 その中でデザインのちょっとしたこつや、テクニック的なものをスライドにしたらすごく反響があり、世のエンジニアはデザインに興味があるんだなと実感したんです。

    デザイナーの赤塚さんが笑っている

    倉貫顔写真 倉貫
    あの話題になった「ズルいデザインテクニック(*1)」ですね
    (*1)ズルいデザインテクニック: https://speakerdeck.com/ken_c_lo/zuruidezaintekunituku2013-plus-semihuratuto-version
    遠藤顔写真 遠藤
    「これを知りたかった!」と思いました(笑)
    赤塚顔写真 赤塚
    突き詰めるとデザインもプログミングもそこまで境がないし、バックエンドがどんどん楽になるにつれてもっと境はなくなると感じたんです。だから、私たちも開発の中に入りやすくなったし、その流れならばデザイン方面の比重が重くなる可能性がある。そういった中でデザインメンターという存在には需要が出てくると思いました。
    赤塚顔写真 赤塚
    また、普通にプログラミングをしてシステムを作っていく中でも、デザイン的なコツや小技がある程度頭に入っていた方が、いいシステム設計ができるという期待もありました。特にソニックガーデンさんみたいに、 エンジニアが1人でコンサル的な部分から請け持っている形だと、その方がいいソリューションが出せるんじゃないかな と。なので、その部分でお手伝いできればと思ったのがきっかけです。
    倉貫顔写真 倉貫
    今までは手を動かしていたんだけど、そうじゃなくて、 エンジニアさんが手を動かすことに対してレビューをしたり、進め方の原理原則を伝えたりということで、育てるという関わり方が「デザインメンター制度」 なんですね。
    赤塚顔写真 赤塚
    そうです。だから、以前であればコードを書いていたところを、あまり書かなくなって、若干絵を描くデザイナーと同じ感じにはなっているんですけどね(笑)違うのは、絵を描いて、それがコードになったところも見るという、 最初と最後の両方に手を出して、間のところをエンジニアの方にやってもらう ような感覚でいます。
    倉貫顔写真 倉貫
    描いたデザインをバトンとしてまるまる渡してしまうのとはやっぱり違って、一緒にやるんだけど、あくまで手を動かさずに後ろから支えてあげる、ということですね。
    赤塚顔写真 赤塚
    そうですね。CSSを書いたりするケースもあるんですけど、全部書くわけじゃなくて、基本はエンジニアさんのほうで書いてもらったりして、部分的に直したりするくらいです。デザイナーとしてがっつり入ってCSSをすべて担当してしまうと、プログラマーさんがCSSはもういじりたくない、となってしまうので注意しています(笑)

    「ああ、そっか。そこか」というのが分かってくると楽しくなる

    倉貫顔写真 倉貫
    実際、ソニックガーデンのデザインメンターをやってみてどうですか?
    赤塚顔写真 赤塚
    すごくうまくいっています。エンジニアの方も勉強熱心ですごくいい。
    倉貫顔写真 倉貫
    逆に、エンジニアの二人は、メンタリングを受けてみてどうですか?これまでは町田さん、赤塚さんに手を動かしてもらっていたのを、自分たちでやらなきゃいけない。そうなってみてどんな感想ですか?
    遠藤顔写真 遠藤
    正直なところ結構きつかったですね。 自分でやりたいという気持ちはあったのですが、最初は本当に暗中模索な感じでどうしていいか分からず。すごく頑張って考えて赤塚さんのところへ持っていくと、ケチョンケチョンにされながらも 「ああ、そっか。そこか」というのが都度分かってきて。それを繰り返すことによって、ちょっと分かってくると楽しくなってくるんです。 そうなってくると、お客さんと話すときもやっぱり話しやすさが増してくるんですよね。

    プログラマの遠藤さんが座っている

    遠藤顔写真 遠藤
    「この画面でお客様がやりたいのはこういうことだから、こうした方がいいんじゃないですか?」と提案して、お客様が「そう!」と喜んでくれる場面が出て来るんです。ただやっぱりそのあとの最後の詰めの部分が足りなかったりするので、そのときは相談をしたりして、より良いものに仕上げていくという、良い流れができています。 きついところからだんだん楽しいところに来て、またその次の段階に行けかかっている気がしています。
    倉貫顔写真 倉貫
    前田さんどうですか?
    前田顔写真 前田
    僕、たぶんその領域にはまだ達していないです(笑)ただ、さっきのspanの話ですけど、以前は全くspanをつけなかったけれど今はつけていますし、大きくしなかった数字を大きくしたりとか、一覧でもただテーブルで横に並べるんじゃなくて、塊ごとに認識しやすくする工夫を考えるようになりました(笑)
    赤塚顔写真 赤塚
    すごく育っていますよ!

    理由が聞けると、自分の中で理論が構築されていく

    赤塚顔写真 赤塚
    デザイナーが最初から作ってしまうより、エンジニアの方がそうやって自分で作れて提案ができると、「分かっているね」という風にお客様からも評価頂けますよね。

    プログラマの松村さんとデザイナーの町田さんと赤塚さんが話している

    倉貫顔写真 倉貫
    そこの教え方は、エンジニア自身にやらせてみて、最後に指摘をするのが一番いい育て方ですか?
    赤塚顔写真 赤塚
    そうですね。 手を出しつつ、なぜそうするのかという理由を一緒に伝える場合もあります。
    前田顔写真 前田
    理由があると、僕らも納得感がすごくあるので、腹落ちするんです。 そうすると、それはちゃんと次からできるようになるんです。
    遠藤顔写真 遠藤
    理由を聞けないと、センスの問題になってしまいますが、「ここはこういう理由でもうちょっと隙間をあけた方がいい」とか「色を薄くしたほうがいい」という 理由が聞けると、自分の中で理論が構築されていきます。
    倉貫顔写真 倉貫
    理由をちゃんと伝えるというのは、コードレビューにも通じるところがありますね。実は僕らは、プログラマーをアーティストだと思っています。デザイナーももちろんアーティストなので、アーティストの育て方という点で通じるところがあるのかもしれないですね。
    赤塚顔写真 赤塚
    元々アーティストなので教えやすいみたいなのはありますよね。 いいものを作ろうと基本思っている人はすごくやりやすい。
    倉貫顔写真 倉貫
    そこが大事なのかな。あくまでもいい製品、サービスを作りたいという気持ち。デザインについてはまだ、おぼつかないところはあるけど、目指しているところは一緒という事ですね。その辺はどう、アーティストと呼ばれて?(笑)
    遠藤顔写真 遠藤
    ひたすら照れていますけど、 確かに自分が悩むときは、「どうにかしてよくしたい」と思っているのに、大体の場合どうしたらよくなるかが分からなくて困っているんですね。 プログラムの場合だと、大体道筋が見えていて、なんとかあがけるんですけど、デザインだと完全に分からない領域なので、 質問ができて、理由をつけて回答を頂けることはとても有難いです。
    倉貫顔写真 倉貫
    デザイン、これまで距離があったけどだんだん楽しくなってきましたか?
    前田顔写真 前田
    僕はまだそこまで(笑)でも、以前ほど変な悩み方はしなくなったように感じます。悩んだ結果、ダメダメな感じだった奴がまぁまぁ位にはなりました。 少なくともなぜそのダメなデザインにしたかの理由は言えるぐらいになってきたので(笑)

    きれいにプログラムを作るのに、見た目もきれいにしたくならないのが不思議

    倉貫顔写真 倉貫
    デザイナーさんから見て、エンジニアがこういうデザインをやっていこうという姿勢を持つことについては、どう感じていらっしゃいますか?「自分たちの仕事がなくなるかもしれない」「いや、もっとやった方がいい」など、どういう感覚を持たれるのか興味があります。
    町田顔写真 町田
    そうですね。エンジニアの方たちは自分であそこまでプログラムを作れるのだから、見た目もきれいにしたくならないのが、純粋に不思議です(笑) デザインをきれいにすることは楽しいじゃないですか。それをちょっと時間割いてやればいいのになって思います。

    デザイナーの町田さんと赤塚さんが話を聞いている

    赤塚顔写真 赤塚
    そうですね、同じ感じです。垣根があるのが不思議です。
    前田顔写真 前田
    正しい値が出せたらわりと満足しちゃうんですよね。正しい値をきれいにしようというところまで。 グラフを出すならグラフの値のところまで出せると「ああ、値が出た」みたいな感じで満足しちゃう(笑)
    遠藤顔写真 遠藤
    「値を出す仕組みのところ超きれいになった」って(笑)
    赤塚顔写真 赤塚
    結局、目的はエンドユーザーが見たときにどうなのかという点なので、デザインってタッチせざるを得ない部分だとは思うんですね。だから、やっぱり使う頭の部分が違うなっていうのは分かるので、大変な作業だなと思うんですけどね。
    遠藤顔写真 遠藤
    確かに使う頭の部分違いますね。すごく頑張って切り替えています。
    赤塚顔写真 赤塚
    同時にはやれないですよね。
    遠藤顔写真 遠藤
    同時には無理ですね。「よし今からデザイン頑張って考える」って切り替える(笑)
    町田顔写真 町田
    そうですね。基本的にはエンジニアの方はみんなデザインはできるようになりたいと思っているんですよね。
    倉貫顔写真 倉貫
    憧れがあるんですよね。
    遠藤顔写真 遠藤
    憧れがあるけど、その憧れに対してどう行動していいか分からない。
    倉貫顔写真 倉貫
    そのためにソニックガーデンとしてはデザインメンターという制度を取り入れました。エンジニアがデザインをできるように教育してもらうし、プロジェクトを高速化するときは、バトンを渡してもらうのではなく、デザイナーさんも一緒に手を動かしてやってもらう。
    僕らソニックガーデンとしては、このお二人はプロジェクト単位のお付き合いではないんですね。ずっと続く契約でお仕事して頂いていています。「納品のない受託開発」では、僕らはお客様の顧問プログラマーとして継続的にお仕事しているのと同じように、実はソニックガーデンには、今まであまり表に出ていなかったんですけれど、お二人の顧問デザイナーがいることが今日のインタビューで明らかになりましたね(笑)
    赤塚顔写真 赤塚
    明らかに(笑)
    倉貫顔写真 倉貫
    謎のベールに包まれていた、ソニックガーデンのデザインの中身が分かったので、 ソニックガーデンの顧問デザイナーとして正式に就任 頂いたということを改めて発表してもいいですか?(笑)
    赤塚顔写真 赤塚
    全然大丈夫です。
    町田顔写真 町田
    大丈夫です。
    倉貫顔写真 倉貫
    他にも育てがいのあるメンバーがいっぱいいるので、顧問デザイナーとして目覚めさせて頂けたらと思います。今日は長い間ありがとうございました!

    ソニックガーデンでは、エンジニアとデザイナーを募集しています

    デザインを学びたいと考えているエンジニアの皆さん、gitやsassなど開発スキルを身につけたいと考えるいるデザイナーの皆さん、ぜひお問い合わせください。

    人が増えても速くならない ~変化を抱擁せよ~ ザッソウ 結果を出すチームの習慣 ホウレンソウに代わる「雑談+相談」 管理ゼロで成果はあがる「見直す・なくす・やめる」で組織を変えよう