フロントとデザイナー

フロントエンドとデザイナーの仕事について

こんにちは！ウェブエンジニアのジワタネホです！

今日はウェブアプリのチーム開発について書こうと思います。

ウェブアプリ開発がメインの記事になりますが、通常の開発にも当てはまるかと

ちなみに個人的な考えになりますんで悪しからず。

開発フローについての前提

前提としては、デザイナーがPhotoShopなりsketchなりでデザインを作ってフロントエンドがコーディングするという体制を想定しています。

当然チームやプロジェクトによって兼務はあるでしょうけど、ここ最近のフロントエンド周りの技術の進化スピードを考えると、デザイナー兼フロントエンドは結構きついかと。

あとは兼務となると、当然コードの汎用性や冗長さなど開発効率を追求しつつUI/UXなどのユーザビリティ考慮するとなると矛盾が生じる場合があるかと。

例えばレスポンシブサイトなんかで、ユーザビリティ的観点でのPC/SPのデザインと、コーディング上ではこうして欲しい的なのってよくあることかと思うんです。

当然ユーザビリティを優先させるべきですが、業務を突き詰めた時にそのベクトルがひとつにならないことを一人で行うというのは好ましい状況ではないように思います。

そういう意味では、兼務の場合はデザイナー兼HTMLコーダー辺りがセーフな境界線かと思っています。

以下デザイナーとフロントエンドがやるべきことを箇条書き。

デザイナー

• UI検討
• 絵を描く(ラフ画、sketch or PhotoShop)
• 画像の書き出し

フロントエンド

当然コーディングがメインで、デザインの段階で想定しきれなかった要件を摘むのが重要かとおもいます。

• 表示の出し分けによる要件の確認（ログイン前ログイン後など）
• スライダーやアコーディオンなどのjs周りの動きのデザイン
• テキストのスタイルやらの汎用化（フロント側のリファクタリングですかね。）

どっちがやるべきかな。

• アニメーション関連。実際には話し合いながらの実装が現状だとは思いますが、デザイナー的にはできるできないがわからず、エンジニア的にはデザイン的な正解がわからないということが問題ですね。ajaxを使う頻度が増えている昨今ではスピナーなんかのデザインとか割と浮きますよね。
• 余白やボタンスタイルなど、ページをまたいで共通化するものの精査。フロントエンドの業務でコードの汎用化は書きましたが、何を汎用化させるかはどちらかが一方的には決めずらいかと。

個人的には、イケてるUIだなと思うアプリケーションってこのどっちがやるべきかなの業務の部分がしっかりしてるものだったりすることが多いと思ってます。

フロントエンドとデザイナーの観点

フロントとデザイナーどっちがやるの業務は、現場での各担当の能力次第となっているのが普通かとは思います。

ただ当然フロントとデザイナーでは観点が違うわけで、その両方の観点も整理したいと思います。

フロントエンドの観点

• なるべくコードは簡単に
• コードの設計が使用しているフレームワークの思想にあっているか
• ブラウザによる差異は最小かどうか
• デバイスサイズの違いによる表示に問題はないか
• レイアウトは崩れないか
• レンダリングの速度は問題ないか

デザイナーの観点

• イラストなどの画像は正確に描かれているか（余白の対象性等）
• 想定したカスタマージャーニーを提供できているか
• CVR等のKPIが向上しているか

上記で抜けているもの

やっぱり細部の確認は各担当で対処できても、総合的なアプリケーションとしての完成度みたいな観点は抜けてしまう気がしますね。

まあディレクターマターとするしかない部分かもしれませんが、それならそれでディレクターの責任を明示しているチームはあまりないようにも思います。

まあKPIに問題がなければよいとは思いますが、ウェブアプリのUI/UX的な価値って他にも指標はないものだろうか。

フロントエンドに必要なデザイン知識

上記を踏まえてフロントエンドが必要な知識ってなんでしょうねー。。

まあまずは余白なりレイアウトの見せ方的な知見はあるに越したことはないかと。

あとはデザイナーとのコミュケーションですねww

特にデザインの意図はなるべく理解する必要はあるし、その結果のKPIまで把握しておきたいところですね。

まあ大概フロントエンドはGAタグ等の計測タグも埋め込むとは思うので、KPIに関しては考えればわかることではありますが。。

デザイナーに必要なフロントエンド知識

個人的には、デザイナーにはユーザビリティを突き詰めてほしいなと思うので、あえてコーディング周りのことは知らないほうがいいと思ってます。知ってしまうと観点が増えちゃますからね。その上で、

• アイコンフォントの存在
• 画像の最適化（イラストはpng、写真はjpegとか）
• アニメーション関連（cssというよりは「このサイトのこんな感じ」的なレベル感がよいかと）。これでデザインの幅は大分増えるかと

最後に

ざっくりまとめてみました。

個人開発では当然どちらもやるのですが、普段参加するプロジェクトを想定してまとめました。

開発チームを自分で作る時なんかの参考になれば！！