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

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

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

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

ご紹介した事例に共感していただけた方が多かったのですが、一方で「デザイナーがやるべきことをコーダーが負担するのはちょっと…」と感じた方もいらっしゃったようです。実際の現場では、デザイナーやディレクターからの「歩み寄り」が必要不可欠です。例えば、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といったアプリケーションもいいと思います。いずれも弊社では実案件で利用しています。

2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション+αを選びました。

2010年から2019年のベスト・セッション