こんにちは、フロントエンドエンジニアの山内です。
この度、デジタルハリウッド大学の企業ゼミという講義枠で「企業で働くフロントエンドエンジニアが意識している開発ポイントとキャリアを知る」というタイトルで、Webメディアの開発に興味があるデザイナー、エンジニア、ディレクター志望の学生の方々を対象に講義を行ってきました。
1. フロントエンドエンジニアの業務
2. デザイナーとの連携
3. ユーザーインタフェース（以下UI）の構築で気を使っている部分
4. ワーク
5. キャリア
この講義ではメディア企業で働くフロントエンドエンジニアの仕事を知っていただくことを目的とし、メディアの開発を行うフロントエンドエンジニアの業務、利用している各種ツール、デザイナーとの連携、UIを構築する上で気を使っている部分など、できる限り現場レベルの内容を幅広く紹介させていただきました。
また、キャリアについては私自身の就職活動や入社後のキャリアについてお話をさせていただきました。
一般的なフロントエンドエンジニアの業務は、HTMLとCSS、JavaScriptなどを用いてユーザーとの接点となるUIを構築していくこと…というのはご存知の方も多いかと思います。しかし、開発フローの中を見ていくと、フロントエンドエンジニアの業務はコーディングだけに留まるものではありません。
UIを構築するという営みの中で、デザイナーと連携し一緒に話し合いながらUIデザインを考えたり提案したりすることもあります。または、フロントエンドエンジニア自らがデザインからコーディングまでトータルで行い、提案することもあります。デザイナーと連携すること、デザインと接する場面が非常に多いのです。
ですから、フロントエンドエンジニアは、デザイナーからバックエンドエンジニアまで様々な職種が存在する開発チームの中で”中間的”もしくは”橋渡し的”な立ち位置での業務を行うことになります。(企業により体制は異なります)
フロントエンドエンジニアの業務を紹介した後は、普段利用しているツールやデザイナーと連携について紹介させていただきました。
弊社のデザインチームでは、UIデザインツールにSketchを採用しています。フロントエンドエンジニアへのデザインデータの共有には、ZeplinというSketchのアートボードからレイアウト指示書を作成してデザインを確認できるツールを介して行っています。(今春中にSketch for Teamsへ移行する予定があります)
近年、デザイン周りの便利なツールがたくさん登場しており、デザインデータに関連するコミュニケーションのコストは一昔前と比べて非常に少なくなったと感じています。サイズの大きなPhotoshopファイルでのやり取りをすることはほぼ無くなりました。
また、デザイナーと連携する上でお互いが把握しておく、または決めておくべき事柄について、以下の3つを挙げて紹介しました。
基本横幅やマージン、ブレークポイント、数値や単位などの基本的な開発ルール。
弊社では”8の倍数”を基準とした8Point Grid Systemというルールを定めてデザインと開発に活かしています。
アイコンやボタン、入力フォームなど、デザインの最小パーツを定義し、そこからどのように大きなUIを組み立てていくのかという仕組みや取り決め。デザインに関する原則・ガイド・コンポーネントの定義を定めることの重要性を、Atomic Designを活用した弊社の事例を元に説明しました。
デザイナー向けに実施したマークアップスキルの習得を目的とした社内ワークショップの取り組みについて紹介しました。この取り組みは、各エンジニアとデザイナー間におけるコミュニケーションロスを軽減させるという狙いも含まれています。
次にUIを構築する上で考慮しなければならないことを主に以下の4点を挙げて紹介しました。
正しい仕様でHTMLを記述しているか、画像にはalt属性をきちんと設定しているかなどのごくごく基本的な事の大切さや、SEO対策として構造化マークアップなどのトピックスを紹介しました
構築したUIに実際の情報が入った際に、そのUIは正しく表示されるでしょうか？ また、タブレットやスマートフォンなど表示端末が変わった場合はどうでしょうか？
どのような場合でもユーザーに正しく表示されているでしょうか？
デザインカンプ通りのUIを正しくコーディングするだけではなく、UIの状態のパターンを予測してコーディングすることの重要性を事例を交えて紹介しました。
「予測しやすい」「再利用しやすい」「保守しやすい」「拡張しやすい」 というCSS設計の目標を紹介し、CSSに対してきちんと設計を適用していくことの意義と重要性を説明しました。
ユーザー体験の中で最も重要な表示速度について弊社の取り組みを紹介しました。
・できる限りシンプルなマークアップソースコードと画像の最適化
・画像の遅延ロード
・リクエスト数の削減
・インビューCSSとアウトビューCSS
当社のコーポレートサイトを題材に、コーディング時に気を付けなければならない点をグループ毎に考えて発表していただきました。
コーディング未経験であったりデザイナーやディレクター志望の学生には難しかったかもしれませんが、「コンテンツの増加に対応させる」「画像などのコンテンツには高さを持たせる」など、ユーザーの視点を持って小さな改善を積み重ねていくことの大切さが伝わったのではないかと考えています。
最後のキャリアについては、私自身の就職活動の話と、企業選択の決め手、入社後のキャリアについてお話させていただきました。
私が就職活動をしていた時期は東日本大震災が発生したりと、例年とは極端に違う状況だったのですが、エンジニアリングとデザインの境界線が曖昧になっていくテック業界のなかで、デザインやIT業界だけに偏ることなく、各種メーカーや制作会社、SIerなど幅広く企業研究と選考を受けていたことをお話させていただきました。
最後に「企業が求める人材」と「自分がなりたい人材」のギャップがないように、就職活動とその後のキャリアを歩むことが大切とお伝えしました。
今回の講義では、メディアを運営する企業で働くフロントエンドエンジニアの業務内容の一端を知っていただくとともに、デザイナーとの連携、それに関連するトピックスを幅広く紹介してきました。
Webフロントエンド界隈の技術動向は変化が大きくキャッチアップが大変ですが、それゆえにチャレンジしがいのある領域です。
Webフロントエンドの面白さが少しでも伝われば幸いと考えています。
この度はこのような機会をいただきどうもありがとうございました。
※2020年2月6日時点
