フロントエンドエンジニアとデザイン

はじめに

この記事は、seyaさんが立ち上げられたエンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar 2021の19日目の記事です。

参加させていただき、ありがとうございます🎄✨

私について

まずはじめに、簡単に自己紹介します😊
私は現在、フロントエンドエンジニアとしてWebアプリケーションの開発に携わっています。
エンジニアとしては今年1月からキャリアをスタートしたばかりの、新米エンジニアです🔰

今回は、デザインに興味があるエンジニアとして、実務開始して1年弱で感じたことをまとめてみます。
ベンチャー企業での開発の様子や、フロントエンドエンジニアとしてデザインとどのように関わったかお伝えできればと思います。

開発体制

いま働いている会社は、まだ立ち上がって間もないベンチャー企業です。

開発チームは、

• エンジニア（バックエンド、フロントエンド）
• デザイナー

で構成されており、計5名程度の極めて小規模のチームです。

対して開発案件は受託案件と自社開発案件含め複数件あります。

つまり・・
大規模のチームのように、それぞれの職域がはっきり分かれているわけではなく、一人ひとりが担当する範囲は広くなります。
個人的には、それがスタートアップや小規模チームで働く醍醐味だと感じています😃

私のように経験が浅いエンジニアでも、バックエンドエンジニアの方と一緒に要件定義やDB設計を行ったり、デザインからフロントエンド開発、さらには学生インターンの教育など幅広い業務を担当しています。

入社する前から、立ち上がったばかりのチームなので自分の成長が事業の成長に直結すると聞いていましたが、たしかにそのとおりで、毎日ハードですがチームの一員としてやりがいを感じながら開発しています！

実務でデザインを担当

現在主に携わっている開発は、フロントエンド（私）とバックエンドの2名体制で開発しています。
デザイナーやインフラエンジニアが別にいるわけではないので、2名で要件定義からデプロイまで担当しています。
今回の開発で、初めて実務でワイヤー設計とデザインを担当しました。

デザインは情報設計が大事

今回はじめてデザインを担当してみて実感したのは、Webアプリケーションにおけるデザインは情報設計が大切ということです。

具体的には、
開発するアプリは

• 誰がどんなときに使うのか
• どこに価値があるのか

を整理し、

• 使ってもらうためにはどのような情報をどんな形で配置すべきか
• あしらいやトンマナはどうするか

を論理的に組み立て、形にする作業でした。

システム開発における要件定義は開発側と依頼側の共通認識を得るためのものであるということを、デザインから担当したことで、より実感しました。

レビューをもらい改善していくサイクルを多く繰り返す

私の圧倒的なデザインスキル＆経験不足をカバーするため、ワイヤーからデザインカンプまで一貫して、
早く作る➔レビューもらう➔改善する
のサイクルをできるだけ多く繰り返すことを意識しました。
弊社デザイナーの方たちは、自分の好みではなくデザインの引き出しを増やすことを課題としてスキルアップに努めてますが、情報整理して提案する中でデザインパターンは多く持つべきであると思いました。

デザイナーに代わることはできない

フロントエンドエンジニアはUIを実装するという点でデザイナーと共通しているため線引が曖昧な部分もありますが、今回デザインを担当してみて、（当然ですが）デザイナーに代わることはできないと感じました。

情報設計はできても、デザインパターンの引き出しの少なさと、どうしてもその先の実装を考えてしまい、実装しやすいようにデザインしてしまいました😓

エンジニアがデザインすると良いこと（=デザインで考慮されていたら嬉しいこと）

他方でエンジニアがデザインを行うことのメリットもいくつか感じました。

実装を意識したデザイン

画面サイズやGridはもちろんのこと、使用するUIライブラリ（今回はTailwindCSSとdaisyUI）をふまえたSpacingまで考慮してデザインしたので、実装がスムーズでした。

具体的には、TailwindCSSのレスポンシブやデフォルトフォントサイズ（１６ｐｘを1remとしてrem指定）を変更せず実装できるようにしたり、1人での開発なので工数削減のため小さな積み上げを行いました。

余談ですが、今回のデザインでChromeデベロッパーツールのColorZillaやPxtoRemにお世話になりました🙏

コンポーネント設計も一緒にできる

デザインする際にコンポーネント設計も一緒に行うことができるので、工数削減になります。
あるUIデザイナーの方から、デザインと併せてコンポーネント案も一緒にお渡ししますと言われたときには、ありがたや・・😭✨となりました。

おわりに

長いポエムにお付き合いいただき、ありがとうございます。

個人的には、今回のデザイン担当を通してデザイナーの方へのリスペクトが高まりました！

デザイナーとエンジニアは仲が悪くなりがち・・・なんて話も聞きますが、結局はお互いに思いやりをもってコミュニケーションとることが大切だと思っています。
より良いプロダクトのため、協働して開発していけたら良いですね😊