読者です 読者をやめる 読者になる 読者になる

Out of Bounds。

WEB制作会社でウェブデザインしてます。

デザイナーがコードに触れれば改善サイクルは早くなる?

 

www.webprofessional.jp

デザイナーがコードに触れれば改善サイクルは早くなる?

アニメーションの秒数の設定などは、実務でエンジニアと立会いながら、一緒に見ながら行うことが多いです。「もう少し秒数短くして!」などコミュニケーションしながら、アニメーションを見ます。しかし、エンジニアにとっては気付かない(もしくは気付かせない)負担なのかもしれない。その健在化してない負担を解消するのも、ディレクターやデザイナーの仕事のうちなのかもしれませんね。

デザイナーがコードに触るワークフローを取り入れたことで得られるメリットは、「改善サイクルが早くなること」だ。たとえば実装したあとになって、アニメーションの秒数をもうちょっと短くしたい、となったときに、以前ならエンジニアにその都度依頼する必要があった。コードを直接触ることで依頼する手間が減るだけでなく、「クリティカルなバグが発生したときなど、エンジニアからするとデザインの修正どころじゃないときにも、サクッと直せる」(内田さん)。 一方で、課題もある。内田さんが感じているのは、タスク管理の難しさだという。「コードを書く時間もタスクとして設定し、時間を確保すべき。普段のデザイン業務とは別に時間を確保しないと、なかなか手をつけられず、後回しになることもある」。 「なんでも屋さんにならないようにする」のも気をつけているポイントだ。デザイナーがある程度コードを書けるようになると、『じゃあやっておいて』となってしまう可能性もある。「本来のデザイン業務がおろそかにならないように、タスク管理の重要性を感じている」。 現在は、Apple TV向けアプリの開発に取り組んでいる内田さん。スマホ発のAbemaTVが今度はテレビの大画面でどんなUIや体験を生み出していくのか、楽しみだ。

デザイナーがコードを触ることのメリットを感じられます。しかし、エンジニアからしたら綺麗なコードを書いているところに、不慣れなデザイナーがコードを記述することのデメリットはあります。その解消方としてデザイナーもGitHubを書くことで解消をしている。

「デザイナーがコードに触る」といっても、モックアップから実装へ落とし込むのは当然ながらエンジニアの仕事だが、実装後の細かいチューニングはデザイナーが担当するのがAbema流だ。アニメーションの長さやイージングを変更したり、レイアウトを微調整したり、といった作業は、XcodeAndroid Studio上でデザイナーがコードを直接編集する。 「エンジニアは他人にコードを触らせたくないんじゃないかと不安だったが、お願いしてみたら『自由にやっていいよ』と言ってもらえて」(内田さん)。開発環境の構築などはエンジニアの協力を得て、一緒に作業を進めていったという。 そんなAbema流のワークフローのポイントは、デザイナーもGitHubを使うこと。デザイナーが調整したコードはプルリクエストし、エンジニアがコードをレビューしてからマージする。「『自由にやっていいよ』の裏側には、しっかりレビューしてもらえる安心感があった」と内田さんは振り返る。