案件チームの中の フロントエンドエンジニアとして 私が⼼がけていること MIO

⾃⼰紹介

MIO • フロントエンドエンジニア歴2年 前職はサーバーサイドやってた⼈ • 広告系コンテンツを作る制作会社勤め • アニメーション演出込みのサイトをよく作る • イラストレーターとして活動したりしてます • Twitterではその時々でみつけたWebサイト事例を 呟きまくっています。 ひたすら事例を呟きまくるのでたまにbotと⾔われます @mio_U_M

今⽇話すこと • 専⾨的な技術な話とか難しいことは話しません • どっちかというとコミュニケーション技術の話です • 以下の⼈向け ◦ Web制作に関わる⼈ ◦ コミュニケーション術を改善したい⼈ ◦ とりあえずフロントエンドの世界をなんとなく覗いてみたい⼈

制作会社の フロントエンドエンジニアになって 私が感じたこと

⼀番⾊々な職種のメンバーと 関わるポジション！ （だと思ってます）

フロントエンド ディレクター / プランナー サーバーサイド デザイナー

それぞれの職種は、それぞれの分野の専⾨職 相⼿に応じてどうコミュニケーションをとるか、 何を⼤事にして関わっていくかは、 ⼀緒に案件をやる上で結構⼤事 フロントエンド ディレクター / プランナー サーバーサイド デザイナー

各職種とのコミュニケーションにおける 私なりの⼼がけをご紹介します

対ディレクター / プランナー

仕様の重要性を ⼀番わかっているのはエンジニア！ という⾃覚で動く

フロントエンド ディレクター / プランナー • とにかく、WF周りは督促 WFで気になったところはすかさず指摘して確認しにいく • 仕様が降りてきたとき、どれくらい⼯数的にかかるかが パッと伝えられることがとても⼤事 • この話結局どうなったんだ？と思ったら、 すかさずアラートをあげる • 技術的な懸念点が上がってきた時は、 相⼿が理解できるレベルまで噛み砕く⾔語⼒または図解⼒がいる • 成果物のチェックは、必ず⾒てもらうようにする

対デザイナー

デザインを尊重しつつ ⾒せ⽅や演出を提案する

• 基本的にデザインをしっかり再現したい精神なので、 マークアップや画⾯がある程度仕上がった段階で デザイナーさんにズレがないかなどをチェック • デザイナーさんは「⽌め絵」でのインパクトを出すのが得意だが、 「画⾯が可変する」ということを踏まえて網羅できてない場合がある なので、「画⾯が可変する」観点から⾒せ⽅を提案する • デザインデータが原因で実装が難しい場合はすぐに相談 • 演出にこだわりたいサイトの場合、 アニメーションのイージングの雰囲気などを探れるサイトや、 デザイナーさんも扱えるようなGUIツールを⽤意して 塩梅を⼀緒に⾒ていく フロントエンド デザイナー

対サーバーサイド

何がどこまで対応可能か どういう⾵に繋いでいけばいいかを しっかり認識合わせ

• 同じエンジニアという⽴場でもあるので、 問題点や仕様の重要性は理解してもらえている分結託しやすい なので、まず最初に味⽅につける • サーバーサイド的には何がどこまでやれるか、を聞き出して、 フロント側でどうやって対処すれば 仕様を満たすために⼀番スムーズになるのかを 共に落とし所を⾒つける姿勢が⼤事 • こっちが何がどこまでできるかをも分かってもらうのも⼤事 • フロントエンドでも、ネットワーク周りだったり、 DBの知識を持っておくとよりお互いに協⼒しやすくなる フロントエンド サーバーサイド

どの職種にも共通して⾔えること

• 仕様、認識のすり合わせは できるだけFace To Face • 必要に応じて「伝えるためのツール」を使って コミュニケーションを補強 フロントエンド ディレクター / プランナー サーバーサイド デザイナー

私のおすすめの「伝えるためのツール」

・仕様整理にチャートテンプレートを使って  使⽤すると便利 ・⼤きめのサイトとかだと図式化して  仕様を整理するのは特に⼤事 ・PDF、画像書き出しもできる Miro https://miro.com/

・演出やデザインの間隔調整など  パラメーターを調整して⾒た⽬を確認できる ・動くモックを作成する際にはだいたい⼊れる ・完成形のイメージを共有しやすくなる ※活⽤例的な記事を書きました！ https://techblog.kayac.com/how-to-dat-gui dat.GUI https://github.com/dataarts/dat.gui

最後に

• 技術だけではなく、 各職種別のコミュニケーションのコツも押さえていれば、 他の⼈たちが安⼼して仕事ができるし、 ⾃分の存在価値も⾼まる（と感じている） • せっかくならいいチームで制作していきたい そのために、⾃分のコミュニケーションや動き⽅によって 状況を変えることはできる。

ご静聴ありがとうございました！ MIO Twitter : @mio_U_M