デザイナー＆コーダーのスムーズな連携とは？他職種をとことん理解するための座談会をレトロ古民家で開催しました！

ニジボックスにはリクルートグループの事業会社を拠点として働いているメンバーが多数在籍しています。その中の一つ、リクルートキャリアに常駐しているコーダーとデザイナーで先日座談会を行いました。

普段はそれぞれのオフィスで働いているメンバーが

・(デザイナーもしくはコーダーに)もっとこうしてほしい！
・逆にどうすればもっとやりやすくなる？
・自分の拠点はこんな感じでやってるよー

などを共有することで、他職種への理解と交流を深めるのが目的です。
今回はその様子をお伝えいたします！

会場は落ち着いた雰囲気の和室…!

場所は日本橋にあるレンタルスペース。参加者はコーダー4人、デザイナー４人の計８人です。 畳に座布団と漂う昭和感にみなさん大興奮！落ち着いた雰囲気で座談会にぴったりな場所でした。

撮影会をする人も。（似合ってますね笑）

異業種間で連携をスムーズにするために気をつけることって？

いざ、スタート！一つ目のテーマはこちらです。

コーダーとデザイナーが業務をする上でお互いに知っておいてほしいこと

デザインを元にコーディングする際に気にしてほしい点や、コーディングしやすいデザインについての議論が交わされました。

まず、コーダーがデザイナーに知っていてほしいこととしては、以下が挙げられました。

・余白、マージン、級数、LH(行の高さ)などがハッキリわかるデータが嬉しい！
・イラレは嫌だ！>< マージンが測れないです。。。
・アニメーションを入れる場合早めに教えてほしいな 　などなど

コーディングしやすいデザインとは、
見た目のレイアウトだけでなく、具体的な数字で細部まで作られているデザインであることが分かりました。また、コーダーにとってはアニメーションの内容次第で工数が左右されるので、どのようなアニメーションを実装するかが早めに分かれば嬉しいですね。
(この辺りはディレクターも含めて話し合いたいところです。)

逆にデザイナーがコーダーに知っておいてほしいことは、

・marginはただの空白じゃなくて意味があります。情報のまとまりをmarginで表現しています。
・どんな小さな修正でも工数がかかります！(全体のバランスを見て調整するため)
・文言変更などがあったときは先にデザイナーにも共有してほしい！
・他のページ(自分が担当している以外のページ)も興味を持って見てほしいな

といったことが挙げられました。

コーダーである私としては、どのように考えてデザインが作られているかを、改めて聞くことができました。また、他のページも目を通しておくことで、そのサイトの全体のテイストやデザインのルールが理解しやすくなるそうです。

ディレクター、コーダー、デザイナー間での共通認識をしっかり確立しておくためにもチーム全員がデザイナーの考えを理解しておきたいですね。

お菓子とジュースを囲んで和気藹々とした雰囲気で座談会は進んで行きました。

続いて、二つ目のテーマです。

思い違いをふせぐ、申し送りの内容について

デザイナーがデザイン制作時に意識していること、コーダーがデザイナーから申し送りで伝えてほしいことなどについて話し合いました。

例えば、デザイナーは、「ここはガイドラインのどの箇所をもとにデザインした」という意図がある一方で、コーダーにデザインを渡すと想定したものとズレが生じることもあるそうです。

逆に、申し送りの内容を書きすぎても、過剰なだけで邪魔になることもあり、どこまでを伝えるべきか難しいそうです。

大半のデザイナーがコーダーとのデザインの認識を合わせるためにもできるだけ対面でのコミュニケーションを取りたいと話してくれました。

一方で、コーダー側からは

・デザインの意図がわかると作業がしやすい！
・デザインのパターンが多いときは変更箇所が分かりやすいと助かる。。。

などの声が上がりました。

デザイナーが意識していることを教えてもらえると、コーディング時の細かいズレとかもすぐに気付けそうですね。

また、拠点によっては業務フロー上、申し送りが共有される前にコーディングに入ることもあるそうです。そうすると修正の工数が増える可能性が高くなるので、できるだけデザイナーとのコミュニケーションはもっと取っていきたいとコーダーも思っていることが分かりました。

座談会を終えて

座談会に参加した人は皆さん学ぶところがあったようです。
アンケートの結果も全員が高い満足度でした。
いくつか、今後のチーム連携で参考になりそうなコメントを抜粋します。

・クライアント先では、フランクにフロントエンドの方に意見を聞くことができないので、ゆるい感じで「これって実際どうなの？」みたいなことをぶつけることができてよかったです。意見を聞いたことにより、デザイン作成時などにもフロントエンドの方にもっと相談してみてもいいのかもと思えました

・アイスブレイクから始まり、お菓子を食べながらリラックスした状態で話すことができてとても楽しかったです。コミュニケーションをしっかり摂ることで信頼関係を築けると感じたので、拠点のFEさんたちとも信頼関係を築けるよう頑張ろうと思いました

・やっぱりコミュニケーションはお互いしっかり取って行かないとって言うのが1番でした。あと、マージン余白がずれがちなのは気をつけます…！フロントももうすこしデザインへの理解が必要だなーと感じました。（ジャンプ率とか初めて聞いたし、だからガイドラインにh1が2種類あるのかって分かったし。。。型覚えちゃえばある程度楽できるかなって思うので）

今回がキャリアグループ初めての座談会でしたが、普段聞けないようなことも気軽に話せたようでかなり好評でした。次回は、ディレクター職のメンバーを交えたり、改善例の発表などをしてもいいねとの意見もありました。ぜひ継続して開催していきたいですね。

ニジボックスは拠点、グループを超えての交流が活発に行われています。未経験からでも社員一丸となって成長していく会社ですので、気になった方はぜひ一度気軽に遊びに来てください！

＜レポート＞　ニジボックス　フロントエンジニア おち