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

案件チームの中のフロントエンドエンジニアとして私が⼼がけていること 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

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

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

Mio

Other Decks in Business

Featured

Transcript