---------2018年:現在に至る2017年:フリーランスとして2社目の常駐案件で某IT企業の新領域開発部門のフロントエンド開発を担当。合計3つのプロジェクトに参加。2016年:フリーランスエンジニアとして独立。個人的な思いとしてはキャリアの再スタート。某旅行関連サイトのフロントエンド開発を担当。2009年:友人と起業。営業代理店やイベント事業等を取締役として経営。目次フロントエンドとデザイナーの仕事についてこんにちは!フロントエンドエンジニアのキヨシ太夫です!今日はウェブアプリのチーム開発について書こうと思います。ウェブアプリ開発がメインの記事になりますが、通常の開発にも当てはまるかとちなみに個人的な考えになりますんで悪しからず。前提としては、デザイナーがPhotoShopなりsketchなりでデザインを作ってフロントエンドがコーディングするという体制を想定しています。チームやプロジェクトによって兼務はあるでしょうけど、ここ最近のフロントエンド周りの技術の進化スピードを考えると、デザイナー兼フロントエンドは結構きついかと。あとは兼務となると、当然コードの汎用性や冗長さなど開発効率を追求しつつUI/UXなどのユーザビリティ考慮するとなると矛盾が生じる場合があるかと。レスポンシブサイトなんかで、ユーザビリティ的観点でのPC/SPのデザインと、コーディング上ではこうして欲しい的なのってよくあることかと思うんです。ユーザビリティを優先させるべきですが、業務を突き詰めた時にそのベクトルがひとつにならないことを一人で行うというのは好ましい状況ではないように思います。いう意味では、兼務の場合はデザイナー兼HTMLコーダー辺りがセーフな境界線かと思っています。以下デザイナーとフロントエンドがやるべきことを箇条書き。PhotoShop)画像の書き出しフロントエンド当然コーディングがメインで、デザインの段階で想定しきれなかった要件を摘むのが重要かとおもいます。表示の出し分けによる要件の確認(ログイン前ログイン後など)スライダーやアコーディオンなどのjs周りの動きのデザインテキストのスタイルやらの汎用化(フロント側のリファクタリングですかね。)どっちがやるべきかな。実際には話し合いながらの実装が現状だとは思いますが、デザイナー的にはできるできないがわからず、エンジニア的にはデザイン的な正解がわからないということが問題ですね。ajaxを使う頻度が増えている昨今ではスピナーなんかのデザインとか割と浮きますよね。余白やボタンスタイルなど、ページをまたいで共通化するものの精査。フロントエンドの業務でコードの汎用化は書きましたが、何を汎用化させるかはどちらかが一方的には決めずらいかと。個人的には、イケてるUIだなと思うアプリケーションってこのどっちがやるべきかなの業務の部分がしっかりしてるものだったりすることが多いと思ってます。フロントエンドとデザイナーの観点フロントとデザイナーどっちがやるの業務は、現場での各担当の能力次第となっているのが普通かとは思います。フロントとデザイナーでは観点が違うわけで、その両方の観点も整理したいと思います。フロントエンドの観点なるべくコードは簡単にコードの設計が使用しているフレームワークの思想にあっているかブラウザによる差異は最小かどうかデバイスサイズの違いによる表示に問題はないかレイアウトは崩れないかレンダリングの速度は問題ないかデザイナーの観点イラストなどの画像は正確に描かれているか(余白の対象性等)想定したカスタマージャーニーを提供できているかCVR等のKPIが向上しているか上記で抜けているものやっぱり細部の確認は各担当で対処できても、総合的なアプリケーションとしての完成度みたいな観点は抜けてしまう気がしますね。ディレクターマターとするしかない部分かもしれませんが、それならそれでディレクターの責任を明示しているチームはあまりないようにも思います。まあKPIに問題がなければよいとは思いますが、ウェブアプリのUI/UX的な価値って他にも指標はないものだろうか。上記を踏まえてフロントエンドが必要な知識ってなんでしょうねー。余白なりレイアウトの見せ方的な知見はあるに越したことはないかと。あとはデザイナーとのコミュケーションですねww特にデザインの意図はなるべく理解する必要はあるし、その結果のKPIまで把握しておきたいところですね。まあ大概フロントエンドはGAタグ等の計測タグも埋め込むとは思うので、KPIに関しては考えればわかることではありますが。個人的には、デザイナーにはユーザビリティを突き詰めてほしいなと思うので、あえてコーディング周りのことは知らないほうがいいと思ってます。知ってしまうと観点が増えちゃますからね。画像の最適化(イラストはpng、写真はjpegとか)アニメーション関連(cssというよりは「このサイトのこんな感じ」的なレベル感がよいかと)。これでデザインの幅は大分増えるかと最後にざっくりまとめてみました。個人開発では当然どちらもやるのですが、普段参加するプロジェクトを想定してまとめました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Reserved.-。