Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
案件チームの中の フロントエンドエンジニアとして 私が⼼がけていること
Search
Mio
January 18, 2020
Business
1
1.5k
案件チームの中の フロントエンドエンジニアとして 私が⼼がけていること
チームの中のフロントエンドエンジニアとしてどう動くか。私個人の考えをまとめてみました。
Mio
January 18, 2020
Tweet
Share
Other Decks in Business
See All in Business
アシスト 会社紹介資料
ashisuto_career
0
56k
株式会社イージーエックス会社紹介資料
geeeeorge
0
260
AnyMind Group Company Deck (JP)
anymind
1
94k
about
socialmatch
3
3.4k
より効果がある目標設定と評価の考え方
mkitahara01985
1
620
経理ポジション候補者様向け補足資料
jmty_recruit
1
690
生成AI時代の事業開発の教科書
kajikent
1
1.5k
2023年度ICT職専門研修(海外派遣研修)報告書 No.3
tokyo_metropolitan_gov_digital_hr
0
120
新規プロダクトの仮説検証ループをすばやく回し続けるためのプロダクトエンジニアリング/PdENight3
kakehashi
13
3.5k
「データ」の依頼のやり方
shinu
5
1.2k
顧客からのちょろちょろインプットを脱却 顧客からのめちゃ太いインプットを通して何を選んでもアウトカムを生み出すプロダクトバックログを実現する/Break free from narrow customer input 2024
moriyuya
25
11k
AnyMind Group Credential Deck(EN)
anymind
1
73k
Featured
See All Featured
It's Worth the Effort
3n
180
27k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Git: the NoSQL Database
bkeepers
PRO
421
63k
We Have a Design System, Now What?
morganepeng
42
6.7k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
Visualization
eitanlees
135
14k
Why Our Code Smells
bkeepers
PRO
330
56k
In The Pink: A Labor of Love
frogandcode
137
21k
Transcript
案件チームの中の フロントエンドエンジニアとして 私が⼼がけていること 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