フロントエンドエンジニアの!Adobe MAX Japan 2019 れぽーと!【#AdobeMAXJapan 2019レポート】

2019.12.16

なち
この記事はAdobe MAX Japan初参戦のフロントエンドエンジニア、「なち」と「みたけ」のAdobe MAXレポートです!

この記事はAdobe MAX Japan初参戦の「なち」と「みたけ」のAdobe MAXレポートです! Blue Puddle Inc.の橋本 大和さんによる「インタラクションデザインはエンジニアもリードする!完成度を高めるチーム内コミュニケーションと実装テクニック」セッションに関する2人の考察と感想を「なち」がまとめてご紹介いたします。

いざ!初めてのAdobeMaxへ!

Adobe MAX Japanに初めての参加ということで、気分をウキウキさせながら会場に入ったのですが、人の多さと会場の熱気にびっくりしてしまいました。まだゆっくり見れる時間だなと思っていたのですが、そんなことはなく。 せっかくだからお土産も買いたいなと思ってAdobeストアに近寄るも、整理券はすでに終わっており、早速Adobe MAX Japanの洗礼を受ける「なち」...。 次回来るならもっと早く来ようと心に決めたのでした。

さてさて。 「みたけ」や会社のデザイナーさんたちと合流した後、お昼のセッションに備えるために会場から一旦離脱して腹ごしらえ。 それぞれどんなセッションを見る予定かを話しながら、これから始まる濃密な時間に期待を膨らませて過ごしました。 そしてあっという間に時間は過ぎ去り、午後のセッション開始です。

午後からは自分で選んだ4つのセッションを続けて公聴したのですが、その中でも「インタラクションデザインはエンジニアもリードする!完成度を高めるチーム内コミュニケーションと実装テクニック」が、「なち」と「みたけ」には興味深く、色々と考える発表でした。 というわけで、このセッションに関する考察や感想を2人で出し合って記事にしようということになった次第です!

セッション概要

このセッションは公式の概要で以下のように記載されていました。

モーションやインタラクションはデザインの主役になれる要素です。そして、その可能性を十分広く探るには、何が実現可能かを理解しているエンジニアが、積極的にディレクターやデザイナーと連携することが重要です。 本セッションでは、事例で実際に使われたフローやコミュニケーション術、そして気持ちの良い動きを実現するためのテクニックを紹介します。

発表を聞く前から、「このセッションは聞いておくべき!」な気がしてきますよね。

現在の業務では、ディレクターさんやデザイナーさんからの指示のもとエンジニアが実装し、ディレクターさんやクライアントに確認してもらい、微調整し...というフローで制作をすることがほとんどです。 この制作のコミュニケーションをより良いものにできればいいなという気持ちで、講演を聞くことにしました。

セッションを聞いて...

依頼時はざっくりコンセプトと指示が来る

なち・みたけ:あるある〜〜〜!!!

まずは最初で心を掴まれてしまいました。 確かに、オブジェクトの動きって言語にしにくく、擬音を使っても受け手によってそれは意味が変わってしまう場合があるんですよね。 「ここをふわっとさせて...」という指示が来ても、右から?下から?何秒くらいで?透過度でいうと?などなど、言葉をプログラムに落とし込むときに必要な数学的な部分がなかなか見えてこない時があります。 そんな時はとりあえず組んでみて、というようなフローになってしまいがちです。

双方のイメージを具体的にするツール:Animate CC・After Effects

なち・みたけ:確かに...

とりあえず一旦イメージを合わせるためにコーディングはいらないというのが目からウロコでした。 Animate CCやAfter Effectsを使うことでコーディングに時間を使わずとも方向性だけを合わせることは可能と言われると、確かに!と納得できました。 さっきの「ふわっと」でいうところの「右から?下から?」部分はこれで解決できるかもしれません。

ここに関してはコーディングしてしまった方が早い場合と、Animate CCやAfter Effectsを使った方が早い場合があると思うので、どちらもできるようにしておくと良い気がしました。

方向性が決まったらデザイナーが操作できるツールを作成

なち・みたけ:なるほど〜〜〜!!!

方向性が決まったら、何秒で?とか透過度とか細かい部分を詰めていく必要があります。 そのときに、エンジニアが設定してアップして、確認してもらって、調整して、アップして、確認してもらって、調整(ry... とするのではなく、デザイナーが思い描いた動きになるように操作できるツールを作ってしまいましょうという話でした。 スライダーやキーボード操作(みたけはここが特に関心)で動かせるようなツールを作ることで、エンジニアの手数を少なくすることができ、デザイナーも操作にストレスを感じることなくイメージを形にしていけるようになります。

さらに、イメージを形にすることができるだけではなく「予期せぬ動きが出来上がる」ことがあるとか。 例えば、エンジニアが用意した値のなかで極端な数値をデザイナーさんが選んだ場合、エンジニアからすれば「絶対選ばないであろう」と思っていたところが、採用となるかもしれないのです。 きっとそれはエンジニアだけでは思いつかなかった動きになるはずです。 これができるようになればクライアントにとっても、素敵なことなのでぜひ試してみたい!と感じました。

けれどもツールを作る場合、実際の案件では時間やお金の制約が出てくるかと思います。 やたらにツールを作るのではなく、そのツールを作成することが案件にとって本当に必要かどうか、その時間はあるのかなども考える必要があるとも感じました。

「無理」ではなく代案を提案していく。

なち・みたけ:うぅっ(ダメージ)

時間やお金の関係から「無理」と答えることはありつつも、2人とも代案は出すようにしています。 しかし、本当にそれが同等の代案なのか、または別の方法で同等以上の提案を考えているかと言われると少し自信がありません。

「コードは汚くなってもいいから、泥臭いブラッシュアップを!!」という話もありました。 ブラッシュアップの必要性はわかるものの、「ある程度整ったものを書いて使いまわしたい」とか思ってしまうのが本音です。 この「汚くなっても」の度合いがそれぞれ違うのかもしれないので、自分の中でコーディングの譲れない部分を明確にしつつ、より良いものを作っていきたいと思いました。

そういうやりとりを続けていくことで、信頼関係ができていく。

なち・みたけ:すごく大切!

コミュニケーションを取りながら案件を進めていく中で最終的に「信頼関係」を築くことは本当に大切です。「次のコーディングもこの人に頼みたい!」とディレクターやデザイナーさらにはクライアントにも思ってもらいたい。 そんな自分になるための努力は必要だなと思いました。

これからやりたいこと。ならびに感想。

最後に、勉強方法についてのスライドを表示していただいたので、取り組めそうなことは取り組んでいきたいと思います。

  • 気になった動きをストックする。(Pinterestに保存)
  • 観察する。
  • 真似る、アレンジ。
  • 師匠を見つける。

みたけ

ツールを自作することでデザイナーも細かな数値設定を試し、そこから予想していなかった動きが生まれることがある、というのは今までに体験したことがないことだったのでとても魅力的に感じました。 エンジニアとデザイナーが共同でブラッシュアップを続け、双方のこだわりを積み重ねていくことでより見やすい・使いやすい・気持ちいいサイトが出来上がるのだと思うので、機会をみて業務で取り入れていきたいと思います!

また、今回のセッションで一番印象的だったのは「無理・時間がないは思考停止!」という言葉です。 なちの感想にもありますが、私が「思考停止」に陥る大きな要因は引き出しの少なさだと常日頃感じています。 ただ見て作ってみるだけでなく、どこがどう気持ちいいのかを観察→真似してみることを習慣づけて、センスを磨き引き出しを増やしていきたいと思いました。

私は、普段は福岡オフィスで勤務していて、Adobe MAXのような大きなイベントへの参加や同僚と直接顔を合わせて技術について議論・共有する機会が少ないので、とても実りのある1日になったと思います。 ここで得た刺激や知識を忘れず、さまざまなことに挑戦してレベルアップしていきたいと思います!

なち

代案を提案するにも、その引き出しがないというのが現実だなと思いました。そのために上がっていた勉強方法で一番すぐに取りかかれそうなのは「気になった動きをストック」することでした。自分で作成したモックはアーカイブしているのですが、ブラウザでパッとみたものはどこかにストックしているわけではなく記憶頼りになっています。引き出しを増やすためにも、ストックする癖をつけようと思います。

初参戦のAdobe MAXで熱気に負けそうにもなりましたが、すごく良い刺激を受けることができました。これからの業務で実践できることを少しずつ取り入れて、来年のAdobe MAXまでにはこんなことができるようになったと言える自分になりたいと思います。

そして次回こそは!お土産を手に入れたいという強い意志を持って早朝参戦を目指します!

Neuromagic Labsの新着記事