フロントエンドエンジニアの業務とデザイナーの連携について - デジタルハリウッド大学 企業ゼミ

山内画像_1
こんにちは、フロントエンドエンジニアの山内です。 この度、デジタルハリウッド大学の企業ゼミという講義枠で「企業で働くフロントエンドエンジニアが意識している開発ポイントとキャリアを知る」というタイトルで、Webメディアの開発に興味があるデザイナー、エンジニア、ディレクター志望の学生の方々を対象に講義を行ってきました。

講義の流れ

1. フロントエンドエンジニアの業務 2. デザイナーとの連携 3. UIの構築で気を使っている部分 4. ワーク 5. キャリア この講義ではメディア企業で働くフロントエンドエンジニアの仕事を知っていただくことを目的とし、メディアの開発を行うフロントエンドエンジニアの業務、利用している各種ツール、デザイナーとの連携、ユーザーインタフェース(以下UI)を構築する上で気を使っている部分など、できる限り現場レベルの内容を幅広く紹介させていただきました。 また、キャリアについては私自身の就職活動や入社後のキャリアについてお話をさせていただきました。

1.フロントエンドエンジニアの業務

一般的なフロントエンドエンジニアの業務は、HTMLとCSS、JavaScriptなどを用いてユーザーとの接点となるUIを構築していくこと . . . というのはご存知の方も多いかと思います。しかし、開発フローの中をみていくとフロントエンドエンジニアの業務はコーディングだけに留まるものではありません。 UIを構築するという営みの中で、デザイナーと連携し一緒に話し合いながらUIデザインを考えたり提案したりすることもあります。または、フロントエンドエンジニア自らがデザインからコーディングまでトータルで行い提案することもあります。デザイナーと連携すること、デザインと接する場面が非常に多いのです。

山内講義_img1

ですから、フロントエンドエンジニアは、デザイナーからバックエンドエンジニアまで様々な職種が存在する開発チームの中で”中間的”もしくは”橋渡し的”な立ち位置での業務を行うことになります。(企業により体制は異なります。)

2.デザイナーとの連携

フロントエンドエンジニアの業務を紹介した後は、普段利用しているツールやデザイナーと連携について紹介させていただきました。 弊社のデザインチームではUIデザインツールにSketchを採用しています。フロントエンドエンジニアへのデザインデータの共有には、ZeplinというSketchのアートボードからレイアウト指示書を作成してデザインを確認できるツールを介して行っています。(今春中にSketch for Teamsへ移行する予定があります。) 近年デザイン周りの便利なツールがたくさん登場しており、デザインデータに関連するコミュニケーションのコストは一昔前と比べて非常に少なくなったと感じています。サイズの大きなPhotoshopファイルでのやり取りをすることはほぼ無くなりました。 また、デザイナーと連携する上でお互いが把握しておくまたは決めておくべき事柄について、以下の3つを挙げて紹介しました。

2-1.デザインルール

山内講義img2_1

基本横幅やマージン、ブレークポイント、数値や単位などの基本的な開発ルール。 弊社では”8の倍数”を基準とした8Point Grid Systemというルールを定めてデザインと開発に活かしています。

2-2.デザインシステム

山内画像_2.2 山内画像_2.3

アイコンやボタン、入力フォームなどデザインの最小パーツを定義し、そこからどのように大きなUIを組み立てていくのかという仕組みや取り決め。 デザインに関する原則・ガイド・コンポーネントの定義を定めることの重要性を、Atomic Designを活用した弊社の事例を元に説明しました。

2-3.社内スキルアップワークショップ

デザイナー向けに実施したマークアップスキルの習得を目的とした社内ワークショップの取り組みについて紹介しました。 この取り組みは、各エンジニアとデザイナー間におけるコミュニケーションロスを軽減させるという狙いも含まれています。

3.UIの構築で気を使っている部分

次にUIを構築する上で考慮しなければならないことを主に以下の4点を挙げて紹介しました。

3-1. 正しいHTMLを記述しているか

正しい仕様でHTMLを記述しているか、画像にはalt属性をきちんと設定しているかなどのごくごく基本的な事の大切さや、SEO対策として構造化マークアップなどのトピックスを紹介しました

3-2. UIの変化を考える

山内講義_3

構築したUIに実際の情報が入った際に、そのUIは正しく表示されるでしょうか。また、タブレットやスマートフォンなど表示端末が変わった場合はどうでしょうか? どのような場合でもユーザーに正しく表示されているでしょうか? デザインカンプ通りのUIを正しくコーディングするだけではなく、UIの状態のパターンを予測してコーディングすることの重要性を事例を交えて紹介しました。

3-3. CSS設計

「予測しやすい」「再利用しやすい」「保守しやすい」「拡張しやすい」 というCSS設計の目標を紹介し、CSSに対してきちんと設計を適用していくことの意義と重要性を説明しました。

3-4. 表示速度

ユーザー体験の中で最も重要な表示速度について弊社の取り組みを紹介しました。 ・できる限りシンプルなマークアップ ・ソースコードと画像の最適化 ・画像の遅延ロード ・リクエスト数の削減 ・インビューCSSとアウトビューCSS

4.ワーク

弊社コーポレートサイトを題材に、コーディング時に気を付けなければならない点をグループ毎に考えて発表していただきました。 コーディング未経験であったりデザイナーやディレクター志望の学生には難しかったかもしれませんが、「コンテンツの増加に対応させる」「画像などのコンテンツには高さを持たせる」など、ユーザーの視点を持って小さな改善を積み重ねていくことの大切さが伝わったのではないかと考えています。

ワーク風景

5.キャリア

最後のキャリアについては、私自身の就職活動の話と、企業選択の決め手、入社後のキャリアについてお話させていただきました。 私が就職活動をしていた時期は東日本大震災が発生したりと、例年とは極端に違う状況だったのですが、エンジニアリングとデザインの境界線が曖昧になっていくテック業界のなかでデザインやIT業界だけに偏ることなく、各種メーカーや制作会社、SIerなど幅広く企業研究と選考を受けていたことをお話させていただきました。 最後に「企業が求める人材」と「自分がなりたい人材」のギャップが無いように就職活動とその後のキャリアを歩むことが大切とお伝えしました。

最後に

今回の講義ではメディアを運営する企業で働くフロントエンドエンジニアの業務内容の一端を知っていただくとともに、デザイナーとの連携、それに関連するトピックスを幅広く紹介してきました。 Webフロントエンド界隈の技術動向は変化が大きくキャッチアップが大変ですが、それゆえにチャレンジしがいのある領域です。 Webフロントエンドの面白さが少しでも伝われば幸いと考えています。 この度はこのような機会をいただきどうもありがとうございました。

講義に関するお問い合わせはコチラ

採用・文化ブログ 新着記事一覧