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

チームの中のフロントエンドエンジニアとしてどう動くか。私個人の考えをまとめてみました。

Transcript

1. 案件チームの中の フロントエンドエンジニアとして 私が⼼がけていること MIO
2. ⾃⼰紹介
3. MIO • フロントエンドエンジニア歴2年 前職はサーバーサイドやってた⼈ • 広告系コンテンツを作る制作会社勤め • アニメーション演出込みのサイトをよく作る • イラストレーターとして活動したりしてます • Twitterではその時々でみつけたWebサイト事例を 呟きまくっています。 ひたすら事例を呟きまくるのでたまにbotと⾔われます @mio_U_M
4. 今⽇話すこと • 専⾨的な技術な話とか難しいことは話しません • どっちかというとコミュニケーション技術の話です • 以下の⼈向け ◦ Web制作に関わる⼈ ◦ コミュニケーション術を改善したい⼈ ◦ とりあえずフロントエンドの世界をなんとなく覗いてみたい⼈
5. 制作会社の フロントエンドエンジニアになって 私が感じたこと
6. ⼀番⾊々な職種のメンバーと 関わるポジション！ （だと思ってます）
7. フロントエンド ディレクター / プランナー サーバーサイド デザイナー
8. それぞれの職種は、それぞれの分野の専⾨職 相⼿に応じてどうコミュニケーションをとるか、 何を⼤事にして関わっていくかは、 ⼀緒に案件をやる上で結構⼤事 フロントエンド ディレクター / プランナー サーバーサイド デザイナー
9. 各職種とのコミュニケーションにおける 私なりの⼼がけをご紹介します
10. 対ディレクター / プランナー
11. 仕様の重要性を ⼀番わかっているのはエンジニア！ という⾃覚で動く
12. フロントエンド ディレクター / プランナー • とにかく、WF周りは督促 WFで気になったところはすかさず指摘して確認しにいく • 仕様が降りてきたとき、どれくらい⼯数的にかかるかが パッと伝えられることがとても⼤事 • この話結局どうなったんだ？と思ったら、 すかさずアラートをあげる • 技術的な懸念点が上がってきた時は、 相⼿が理解できるレベルまで噛み砕く⾔語⼒または図解⼒がいる • 成果物のチェックは、必ず⾒てもらうようにする
13. 対デザイナー
14. デザインを尊重しつつ ⾒せ⽅や演出を提案する
15. • 基本的にデザインをしっかり再現したい精神なので、 マークアップや画⾯がある程度仕上がった段階で デザイナーさんにズレがないかなどをチェック • デザイナーさんは「⽌め絵」でのインパクトを出すのが得意だが、 「画⾯が可変する」ということを踏まえて網羅できてない場合がある なので、「画⾯が可変する」観点から⾒せ⽅を提案する • デザインデータが原因で実装が難しい場合はすぐに相談 • 演出にこだわりたいサイトの場合、 アニメーションのイージングの雰囲気などを探れるサイトや、 デザイナーさんも扱えるようなGUIツールを⽤意して 塩梅を⼀緒に⾒ていく フロントエンド デザイナー
16. 対サーバーサイド
17. 何がどこまで対応可能か どういう⾵に繋いでいけばいいかを しっかり認識合わせ
18. • 同じエンジニアという⽴場でもあるので、 問題点や仕様の重要性は理解してもらえている分結託しやすい なので、まず最初に味⽅につける • サーバーサイド的には何がどこまでやれるか、を聞き出して、 フロント側でどうやって対処すれば 仕様を満たすために⼀番スムーズになるのかを 共に落とし所を⾒つける姿勢が⼤事 • こっちが何がどこまでできるかをも分かってもらうのも⼤事 • フロントエンドでも、ネットワーク周りだったり、 DBの知識を持っておくとよりお互いに協⼒しやすくなる フロントエンド サーバーサイド
19. どの職種にも共通して⾔えること
20. • 仕様、認識のすり合わせは できるだけFace To Face • 必要に応じて「伝えるためのツール」を使って コミュニケーションを補強 フロントエンド ディレクター / プランナー サーバーサイド デザイナー
21. 私のおすすめの「伝えるためのツール」
22. ・仕様整理にチャートテンプレートを使って  使⽤すると便利 ・⼤きめのサイトとかだと図式化して  仕様を整理するのは特に⼤事 ・PDF、画像書き出しもできる Miro https://miro.com/
23. ・演出やデザインの間隔調整など  パラメーターを調整して⾒た⽬を確認できる ・動くモックを作成する際にはだいたい⼊れる ・完成形のイメージを共有しやすくなる ※活⽤例的な記事を書きました！ https://techblog.kayac.com/how-to-dat-gui dat.GUI https://github.com/dataarts/dat.gui
24. 最後に
25. • 技術だけではなく、 各職種別のコミュニケーションのコツも押さえていれば、 他の⼈たちが安⼼して仕事ができるし、 ⾃分の存在価値も⾼まる（と感じている） • せっかくならいいチームで制作していきたい そのために、⾃分のコミュニケーションや動き⽅によって 状況を変えることはできる。
26. ご静聴ありがとうございました！ MIO Twitter : @mio_U_M