CSS Nite LP58フォローアップ（2）水越 佑介さん

2018年9月29日に都内で開催したCSS Nite LP58「Coder’s High 2018」のフォローアップとして、水越 佑介さん（リーグラフィ）の『コーダーとデザイナーの溝を埋める、業務改善のタネ』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

コーダーは、プロジェクトの中盤で活躍するポジションのため、上流からの要件変更やスケジュールの調整によって、苦労されている方も多いと思います。ですので、一つ上流にあたるデザイナーとの関係性は、特に重要です。

アンケートで頂いた貴重なご意見、ご質問に関して

ご紹介した事例に共感していただけた方が多かったのですが、一方で「デザイナーがやるべきことをコーダーが負担するのはちょっと…」と感じた方もいらっしゃったようです。実際の現場では、デザイナーやディレクターからの「歩み寄り」が必要不可欠です。例えば、Adobe XDのデモでお伝えした「レスポンシブの状態を確認する」については、デザイナーの方からアプローチしてもらった方が、より確実です。無理にデザイナーが担当する業務領域に踏み込む必要はありません。

（質問）各ロールの役割が曖昧になりそうですが？

役割分担については、プロジェクトによりますので、進行管理を統括するディレクターと相談してください。デザイナーからの歩み寄りが期待できる場合は、例えばふんわりした指示ではなく、具体案をデザイナーの担当領域として意識してもらってください。

（質問）気持ちコーダーに負担かけすぎでは？
（質問）コーダー側がかなり譲歩している印象でしたが、コーダー側から教育という部分では何かされていますでしょうか？

デザイナーとの協業の中で発生する「溝」を、全てコーダーが埋めることは、現実的に難しいでしょう。デザイナーが負うべき責任範囲も当然ありますので、遠慮なくデザイナーにコミュニケーションをとり、できるところはやってもらって構わないです。デザイナーが苦戦しそうなテクニカルな部分をコーダーがサポートできれば、良い関係が気づけて、お互いの負担が減るのではないかと思います。
教育という言葉が適切かわかりませんが、特にコンポーネント思考については、デザイナーにもコーダーにも共通して理解を深めるよう配慮しています。

（感想）数値でフィードバックをもらわないというやり方に、少しとまどいました。

フィードバック自体が明快で、完成後のイメージを改めて共有するまでもないシンプルな問題の場合は、数値でのフィードバックは効率的でベターですね。
でも、デザイナーにとって、その数値が想定外だった場合はどうでしょうか。改めてデザインを検討し、コーダーに返すことになります。この手間をデザイナーが負担するか、コーダーが負担するかの問題は「役割分担」の話になります。

（質問）コーダーから見るとミスに見えるが、デザイナーは意図していることが多いパターンの例はありますか？

• 視認性の低い極小の文字、コントラストの低い文字など
• マウスホバーで明るくなりすぎて見づらいボタン
• リピートしてもよさそうな背景画像（グランジテクスチャの紙っぽいイメージ）がリピートできない

このようなデザインに対しては、アクセシビリティや表示速度の観点で不都合になるケースが多いので、デザイナーに確認したいですね。

（質問）コミュニケーションがとれないデザイナー・コーダーとのやりとり、先回りする行動など知りたかった。

デザイナーとコーダーが全く接触できないということであれば、体制を見直してみてはいかがでしょうか。

（質問）デザイナーが気分屋の場合は？
（質問）Web制作にアジャイルはないか？

コーダーにデザインデータが渡った後でデザインがころころ変わるということであれば、その意図をまず確認してください。そもそもプロジェクトの進行の仕方に問題があるか、プロジェクトの根本部分がぶれている可能性が高いですが、アジャイル的な開発の進め方をしている場合は、そうとも言い切れません。ディレクターに協力してもらいましょう。

（質問）XDでは細かいことができなさそうと考えて、Photoshopばかり使っています。全てXDでデザインするのでしょうか？

同様の質問を多数いただきましたが、XDだけでデザインカンプの全てを完遂することは、あまりありません。写真加工やPhotoshop、ロゴなど文字間隔を調整する場合はIllustratorというように、適材適所でツールを使い分けます。

（質問）社内全てにAdobe XD導入って、お高いんでしょう？

Adobe XDは、一部機能が制限された無料版があります。（2018年9月現在）詳細は 「プランを比較する | Adobe XD」をご覧ください。

（質問）XDはSketchよりいいですか？

どちらが優れているかということについては、どちらも優れているとしか言えないです。個人的にはXD推しです。デザイナーやディレクターにとっても、とっつきやすいツールです。

（質問）デザインカンプをPhotoshop8割、Illustrator2割で作っている環境です。今後、制作において、InDesignを使用した方がいいと思いますか？その理由はありますか？

InDesignをウェブサイトのデザイン制作に利用した経験がなく、「使用した方がいいかどうか」の判断はできかねます。

（質問）デザインガイドはどのように作られていますか？

色々な手法があるかと思いますが、弊社では主にAdobe XDで、クライアントに向けて作成しています。ウェブサイトのUI策定の基準になると説明し、合意を得ておくケースが多いです。タイミングとしては、コーディングよりも上流の「UI要件」で作成します。

（質問）スライドで使用しているフォント気になる…

フォントは「筑紫A丸ゴシック」です。ちなみに、イラストは、Adobe Stockの「jesadaphornさんのポートフォリオ」から選ばせていただきました。

（質問）画面共有をするサービスを、もう一度教えてください。

appear.inです。非常にシンプルで、簡単に無料で利用できるのでおすすめです。
チャットや画像の共有のみでしたら、チャットワークやSlackといったアプリケーションもいいと思います。いずれも弊社では実案件で利用しています。