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

インタビュー

4ity 2uli1

【中編】プログラミングとデザイン、やっていることはわりと同じ〜「デザインは感覚じゃない」 2015年01月20日

中編では「エンジニアから見たデザインの謎」について引き続き現場のエンジニアと、一緒にお仕事をさせて頂いているデザイナーの方をお迎えして、お話を伺いました。デザインにもあるという理論や理由についても詳しく語ってもらいました。

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

    プログラミングとデザイン、やっていることはわりと同じ

    町田顔写真 町田
    エンジニアの方にはデザインの規約を作るみたいな作業、その発想自体がそもそもないっていうことでしょうかね。
    赤塚顔写真 赤塚
    プログラミングとデザイン、やっていることはわりと同じですよね。原則は同じだというところが実感として分かってくると、もっと楽しくなると思います。
    デザイナーの町田さんと赤塚さんが話している
    倉貫顔写真 倉貫
    デザインにもルールのような、基本原則があるんですか?
    赤塚顔写真 赤塚
    あります。ただ、状況によって結構変わりますし、一筋縄ではいかないんですけどね。例えば、その画面の中で一番目立たせたい部分はここに置くとか、一覧ページのような同じ要素が並んでいる場合だったら要素同士の余白は、この要素間の余白より小さいとかなんですけどね(笑)
    倉貫顔写真 倉貫
    もっと感覚的なものかなと思っていたので、実はそういう原理原則があるんだったら教えて欲しいです。全部センスではないかと思っている人もいるはずなので。
    赤塚顔写真 赤塚
    『ノンデザイナーズ・デザインブック』 とか読むとその辺りが少し分かるかもしれないです。解説も結構書いてあるので。
    遠藤顔写真 遠藤
    メンタリングの中で一番衝撃だったのは「デザインは感覚じゃない」と言われたことです。「ちゃんと理論があるよ」と赤塚さんに言われて「デザインに理論?」と思いながら聞いていました。
    赤塚顔写真 赤塚
    感覚のところも、もちろんありますけどね(笑)
    倉貫顔写真 倉貫
    エンジニアも実は感覚のところがあります。コードレビューして「きれいなソースコードに仕上げる」なんて言うけれど、「きれい」とはいったい何をもって言うのかと。その辺りはセンスだと感じますよね(笑)

    デザイナーとプログラマー、一緒に作る方が効率的だった

    倉貫顔写真 倉貫
    先ほどの役割分担ですが、町田さんと赤塚さんのお二人は、プログラムを書くところまでされますよね。プロジェクトを進めるにあたって、エンジニアと一緒になってプログラムを書いたり、お客様と話をされるということですが、デザイナーさんの中で、そこまでする人は多いですか、少ないですか?
    町田顔写真 町田
    それほど多いとは感じませんが、一昔前よりは、ブログなどで見るようになってきましたね。スタートアップが増えたので、スタートアップでは当たり前になっているのかもしれないですね。
    デザイナーの町田さんが笑っている
    倉貫顔写真 倉貫
    デザイナーさん自身がプログラムを書くってことですね。
    町田顔写真 町田
    そうですね。開発チームの中に入るという。
    倉貫顔写真 倉貫
    お二人は開発チームに入って、絵を描くだけではなくプログラムも書いてきれいにするということに対して、どういうモチベーションでされるようになったんですか?
    町田顔写真 町田
    コミュニケーションをとって誰かに直してもらうより、自分で直したほうが効率が良いからです。 よくエンジニアさんのデザインで気になってしまうのが、「XX円」という表示です。この場合「円」にspan(*1)がついていないと、「円」を小さく表示できないんですよね。
    (*1)span(タグ):<span>~</span>で囲んだ範囲をひとかたまりとしてデザインを適用する際に用いる。
    倉貫顔写真 倉貫
    なるほど。「円」をちょっと小さくしたいわけですね。
    町田顔写真 町田
    はい。そのために「円にspanを付けてください」と依頼するのは失礼かなって(笑)
    遠藤顔写真 遠藤
    「円」にspan付けないわ(笑)
    松村顔写真 松村
    最近、逆に数字には必ずつけるようになりましたね(笑)
    町田顔写真 町田
    そういうのがたくさんあって、いちいち言うのは面倒くさくなってしまったんです。あと、自分で責任を取りたいというのが大きいのもあって。
    赤塚顔写真 赤塚
    私も同じような感じです。デザイナーとディレクターの間ぐらいのところをやっていた時期が長かったんですけど、CSSさえ書いていなかったりして。 だけどやっぱりコードを書かないと最後にやりたいことができないんですよね。エンジニアとの距離もある感じがするし、上手く伝わらなくて出来上がりがイメージとすごく違っていたりして(笑)
    倉貫顔写真 倉貫
    ディレクターやデザイナーとしてエンジニアにバトンを渡してしまうと手が出せないんですね?
    町田顔写真 町田
    頑張ればできるんだと思うんですけど、ちょっと手間ですね。
    倉貫顔写真 倉貫
    不要なキャッチボールはしなくてもいいですよね。キャッチボールってもったいないじゃないですか。 同じものを、今みたいにこうやって一緒に作り上げる方が効率的ですね。
    前田顔写真 前田
    そうですね。 デザイナーさんから絵で渡されても、「ここからどうやるんだろう?」と悩むこともあるんで(笑)
    赤塚顔写真 赤塚
    なので、 逆にデザイナーとしても絵の中に手間でも色々注釈を入れないといけないんですよね。 ここは余白を左右に5mmみたいな(笑)

    デザインも作りつつでないと分からない部分がある

    倉貫顔写真 倉貫
    町田さん、赤塚さんのような、一緒に手を動かしてくれるデザイナーさん、それ以外の描いた絵をバトンとして渡してくれるデザイナーさん。それぞれ違いがありますが、プログラマーの立場として、やりやすさ、やりにくさはありますか?
    松村顔写真 松村
    それぞれ色々ありますが、絵でくれるデザイナーさんとやるときは苦しいです。死にそうですね(笑)
    プログラマの松村さんとデザイナーの町田さんが話している
    倉貫顔写真 倉貫
    それはなぜ?
    松村顔写真 松村
    絵の場合は、そのコンテンツが伸びたりしたケースに備えて考慮が必要です。 実際文字を入れてみたら「あれ、ここ長くなってバランス変だな」と感じる場合がありますね。それに、頂いたデザイン画から、切り抜く作業もあまり得意ではないんです。アイコンなどをうまく配置したり、絵を切り抜く技術があまりないので、狙った場所に配置するには「絵をどうやって切り抜こうかな」という部分から考え込んでしまう。
    倉貫顔写真 倉貫
    一般的に行われている、 デザイナーさんが絵を描いて、あとはエンジニアさんが作るという形は、実はデザイナーさんから見てもやりにくかったし、エンジニアから見てもあまり嬉しくなかった?
    遠藤顔写真 遠藤
    そう言えますね。
    町田顔写真 町田
    文字量が多くなったり、崩れるのが分からないというのは、デザイナーも同じです。やはり動いているものを触りながらデザインしないと分からない部分はあるんです。
    倉貫顔写真 倉貫
    では、こういう一緒にやるやり方が一番いいとして、なぜ世の中にこういうスタイルが増えないのでしょう?
    松村顔写真 松村
    役割分担すると自分の責任範囲が明確なので、楽は楽なんですよ。自分はここだけやっていればいいと分かるので。ただ、デザイナー、プログラマー両方が関わってくる部分は、プロジェクトの全体的な効率改善を考えると、自然と一緒に手を動かすことになると思います。

    Gitが使えるとデザイナーは楽しくなる

    前田顔写真 前田
    あとは、プログラミングを知ることで、デザイナーさんにとって嬉しいことはあまりないと思われているのではないでしょうか。「知ったところで何も変わらないし」という感じで。
    赤塚顔写真 赤塚
    実際にGitが使えると、自分のサービスを、自分の思ったように変えていくことがやりやすくなったりして、自立的に動ける人にはすごく楽しみが増えると思うんですけどね。 スライドにその辺りのノウハウをまとめたんですが、公開しても読む人がエンジニアしかいなくって(笑)
    前田顔写真 前田
    肝心のデザイナーの人に読んでもらえない(笑)
    プログラマの前田さんが話している
    倉貫顔写真 倉貫
    そういうノウハウが広がって、Gitが使えるデザイナーさんが増えると僕らプログラマーも助かりますね。
    町田顔写真 町田
    あとは、 僕はエンジニアと仕事をするまでは、ウェブサービスとかウェブアプリを作るというのはものすごく大掛かりなことだと思っていたんですよね。あれはもうシステム会社のもので、デザイナーとは別世界だと考えていました。それがRailsとか出てきて、ウェブアプリがもっと身近な存在になって、Gitなど使えればデザイナーが考えたことでもエンジニアがササッと作ってくれるっていうのが分かった事が大きかったですね。
    倉貫顔写真 倉貫
    もっとカジュアルに作れるようになりますよね。
    赤塚顔写真 赤塚
    デザイナーのほうでざっくり作ってしまって「こういうのどうかな」と見せると、面白いと思ってくれたエンジニアは作ってくれちゃったりするんですよね。もっといいものにしてくれたり。
    倉貫顔写真 倉貫
    そういう風にエンジニアとデザイナーが一緒に作るきっかけとなる場があるといいですよね。

    後編に続く

    メールマガジン登録

    ソニックガーデンのお客様の新規事業に関する開発秘話やノウハウ、業務効率化の成功事例、シークレットなイベント情報などをお伝えします。

    【お知らせ】ソニックガーデンの本が出ました!

    リモートチームでうまくいく~マネジメントの"常識"を変える新しいワークスタイル

    企業に所属することで得られる安定と、自分の好きな場所で働く自由を両立できる新しいワークスタイルとして注目を集めている「リモートワーク」。本書はそのリモートワークが抱える問題に対してソニックガーデンが実践してきた取り組みと、そのノウハウから生まれた「リモートチーム」というマネジメントの手法についてまとめています。あらゆる組織、チームのマネジメントと個々人の働き方を考えるヒントとなる一冊です。(著者:倉貫義人 出版:日本実業出版社)

    「納品」をなくせばうまくいく~ソフトウェア業界の"常識"を変えるビジネスモデル
    「納品」をなくせばうまくいく 表紙

    本書は、IT業界の、とりわけソフトウェア開発の業界で〝常識〟とされているビジネスモデルを変えてしまおうという試みです。ソフトウェア業界にはびこる多くの問題を解決するために取り組んだ新しいビジネスモデル「納品のない受託開発」について書いています。「受託開発」なのに「納品」をしない、なぜそんなことをやっているのか、そして、なぜそんなことが実現できるのか、その秘密について解説したのが本書です。(著者:倉貫義人 出版:日本実業出版社)