こんにちは、フロントエンドエンジニアの小枝です。

今年の4月にビズリーチに新卒入社したデザイナーは、8月からの配属に向け、UIデザイン、バナー研修、事業理解など様々な新卒研修を受けています。

その一環で、HTMLやCSS、JavaScriptなどを学ぶ「フロントエンドエンジニアリング（以下フロントエンド）研修」を5日間実施しました。今回は、その研修内容をお伝えします。

ビズリーチの研修について知っていただくと同時に、少しでもフロントエンドに興味を持っていただくきっかけになればと思います。

なぜデザイナーがフロントエンドを学ぶのか

なぜ、ビズリーチのデザイナー研修でフロントエンドを学ぶのかというと、理由は2つあります。

1つは、ユーザーに伝えるべき情報を整理し、効果的なデザインをする上で重要な、情報の言語化のスキルや論理的な思考が、エンジニアリングによって養いやすいことです。
何をどこに配置すればユーザーに最も効果的に情報が伝わるのかという、情報設計のスキルを鍛える一環として、ビズリーチではフロントエンドを学びます。

2つめは、デザイナー自身がエンジニアリングに触れることで、エンジニアとの協業をスムーズに行えるようになって欲しいという意図があります。
どういったデザインが開発しやすいのかを理解し、エンジニアとのコミュニケーションを円滑にできることで、デザイナーとしてより多くの仕事に関わりやすくなります。

私自身もフロントエンドエンジニアとしてデザインとエンジニアリングの両方の観点を持ち、デザイナーとエンジニアの橋渡し役を担うことで、プロジェクトがスムーズに進められていると感じています。

配属後の貢献度最大化を目指して

配属後にすぐにでも活躍できるように、以下の状態になることを目指してカリキュラムを設計しました。

検索エンジンの特性を理解した上でHTMLが書けること
CSSでレスポンシブWebデザインが実現できること
リッチなUIを作るために、JavaScriptがどういったものか理解できていること
バージョン管理ツールを使用し、他者と協業できること

講義内容

フロントエンドとデザインの関連について、学ぶ理由とあわせて説明
バージョン管理ツール（GitHub）についてのデモンストレーションとハンズオン
HTMLの構文説明、各用語の解説
CSSの構文説明、各用語の解説
JavaScriptの構文説明、各用語の解説
技術的な成長の効率化のために、情報の調べ方や聞き方を解説

課題

HTML/CSSの構文に慣れてもらうため、既存のビズリーチ新卒採用ページのHTML/CSSの答えを見ずにコーディングする個人ワーク
他者との協業に慣れてもらうため、レスポンシブWebのデザインモックをチームメイトと分担してコーディングするグループワーク

これまでのフロントエンド研修の課題

今回のフロントエンド研修を行うにあたり、受講生全員の理解度や学びを最大化できるように、教材などの準備に時間をかけました。

これまでのフロントエンド研修の課題に、「経験者と未経験者の差」がありました。
例年新卒デザイナーには、学生時代にフロントエンドエンジニアリングを行ったことがある経験者と、研修時にはじめて触れる未経者が混在しています。
経験者は、研修内容がすでに理解している内容のため研修時間を持て余し、未経験者には講師やサポートメンバーがマンツーマンで教えるなど、全員の学びを最大化させることが難しい状況でした。

受講者全員の学びを最大化するための対策

上記の課題を改善するため、経験者には既知以上の学びを、未経験者には同等の知識を得てもらえるように工夫することを念頭に、研修内容を考えました。

サポートメンバー制度の撤廃

これまで行なっていた先輩社員のサポートをなくし、受講生同士で教え合うようにしました。
例年デザイナーが受講する研修では、困った時にすぐに質問できるように、講師の他に現場で活躍する先輩が複数人、サポートメンバーとして研修の場に常駐していましたが、今回の研修ではその制度をやめ、受講生の中の経験者にそのサポート役をお願いしました。フロントエンド経験者と未経験者の効果的な時間配分だけでなく、教えることで改めて学べることが多く、未経験者も慣れ親しんだ同期に教わることでコミュニケーションが気楽になり、学習しやすいと考えたためです。

さらに、ビズリーチの社員の評価基準に含まれる「知の発信と共有」を肌で感じ、各自の得意分野でチームメイトの手助けをする感覚を知り習慣としてほしい、という思いもありました。

読み返せる資料作成

メモをとることよりも研修に集中してもらうため、話す内容をすべてスライドの発表者ノートに記載して、資料を共有しました。
主に社内の研修や勉強会はプレゼンテーション資料作成ツールで作ったスライドを利用しますが、伝えたいことが多いと、文字だらけの資料になりがちで話に集中できないことがよくあります。

そこで今回は、口頭で話す前提で文字量を少なめにし、後から振り返ることができるように各ページの発表者ノートに口頭で話した内容を記載する形にしました。

心理的安全を重視した空気作り

研修を担当するにあたり、経験や性格の差によって生じる不安を可能な限り軽減できるように、下記のことを意識しました。

いつでも質問できる空気を作る
質問できるように可能な限り同じ空間に居る
質問者が納得できるまで説明する
研修を最大限楽しんでもらう

そのためにアイスブレイクや、受講生のプロフィールを読み込んだり、私自身を好きになってもらい心を開いてもらうために毎日違うキャラクターTシャツを着るなど、コミュニケーションのきっかけが作れるように工夫しました。

講義の初日は、受講生は緊張していたのか静かだったのですが、「話を遮ってでも、気になったら質問して良い」という前置きをした結果、積極的に質問が上がるようになりました。

他者の学びを自分の学びにできる研修作り

他者の学びを自分の学びにできるように、各自の成果物をを全員でレビューするレビュー会を設けました。
ビズリーチではレビューの文化が根強く、デザインレビューやコードレビューなど、毎日のようにレビューをし合っています。今回も、カリキュラムに含まれる個人ワークとグループワークの期間中は、3時間に1度レビュー会を実施しました。

自分のアウトプットに対してレビューをもらうことは、慣れないうちは自分を否定されたように感じてしまい、緊張したり、怖いと感じてしまうことも少なくないため、以下のことを事前に伝えました。

レビュー会実施にあたっての心構え

レビュアーは非難しない、あくまでコトに向かってレビューをする
思ったことはどのような事でも発言する、間違っていても良い
質問でも良い、積極的に会に参加することが大事
短く簡潔に話す
積極的に褒める

デザインで個別のアウトプットをしない課題作り

例年のフロントエンド研修の最終課題は、個々人のデザインしたWebサイトをコーディングするという課題を行なっていました。この課題だと、それぞれのデザインによって情報の要素が異なり、純粋なフロントエンドの習熟度が測れなかったので、フロントエンドのコードで各人にフィードバックできるよう今回は全員が同じデザインモックを利用したコーディング課題にしました。

個人ワークとグループワーク

カリキュラムの中に、個人ワークとグループワークを混在させました。
個人ワークでは自己解決の方法を学び、グループワークでは協業の良さや知の共有によって得られるメリットを感じて欲しいと思ったためです。

講義を終えてみて

様々な工夫をして準備と実施をしていく中で、ポジティブな変化がたくさんありました。

積極的に参加

研修当初は静かだった受講生たちが、積極的なコミュニケーションにより少しずつ質問をしてくれるようになったり、質問に対して納得と理解をするまで時間をかけて回答をしたことで「質問すること」を有効活用し、後半はすべての受講生が積極的に質問、発言をするようになりました。心理的安全性を重視したことが、積極的な参加に繋がったと感じています。

研修に対する前向きな姿勢

例年の課題だった「経験者と未経験者の理解の差」ですが、今回ももちろんありました。
未経験であることをネガティブに捉える受講生もいたのですが、「もともと持っているスキルは重要ではなく、研修での成長角度が大事」ということを伝え、研修内での成長を最大化しようと前向きに研修を受けてくれる様になったと感じています。

個人ワークとグループワークによる配属後の疑似体験

カリキュラムの中で、個人ワークとグループワークを混在させたことで、実際の仕事の疑似体験ができたのではと思っています。
個人ワークではWeb検索や適切な質問のタイミングや方法を知り、グループワークでは協業の良さや知を共有しあってアウトプットを出すプロセスを体験してもらえたと思います。

受講生の声

フロントエンド研修を受けてどのような学びがあったのかを、受講生の友清実優に聞きました。

ーーフロントエンド研修で印象に残ったことはありますか？

質問や発言がしやすかったことが特に印象に残っています。
これまでの研修も質問しやすかったのですが、フロントエンド研修は自分も含め未経験者が多く、専門的な質問をすることが多かったので、特にそう感じました。

さらに、質問した際にわかるまで丁寧に教えていただけたことで、「質問や発言をしてもいいんだ」という安心感がありました。丁寧に教えて頂けたので、未経験でもデザイン通りにコーディングすることができ、コーディングへの不安が減りました。

ーーコーディング以外で、フロントエンド研修での学びはありますか？

わからないことがあった時の、質問の仕方が変わりました。
これまでの研修では、わからないことがあるとすぐに質問をしていたのですが、講師の小枝さんから「15分間自分で考えてもわからない場合は、どこまで考えて何がわからないかを整理して先輩に聞くと、学びとして定着しやすい」と教わりました。これにより理解度も深まることを学び、以降の研修でも実践しています。

ーー受講生同士でレビューや教え合う研修のやり方についてどう感じましたか？

レビューをするという視点を持ってみることで、注意深くソースコードを読むことができたと思います。
他者が自分と違う情報のまとめ方をしていたり、知らない技術を使っていることに気づいたり、その理由を知ることができ、学びが深まりました。

また、初めてレビュー会というものを体験し、レビューの観点や、レビューはあくまで人の批判ではなく、アウトプットの質を高めるために行うことがわかって、配属後のレビュー会が楽しみになりました。

最後に

今回、安心して質問をし、学び、知の発信と共有を行える場を作ることで、常にアウトプットを人に見られることに臆さない、成長のチャンスをつかみ続けられる強いデザイナーになって欲しいという思いを込めて、研修を設計しました。

目に見えて積極性や心境の変化が見て取れて、私自身もとてもやりがいをもって臨むことができました。

ビズリーチでは他にも様々な工夫をこらしたデザイナー研修を作っています。その一端として、フロントエンド研修をご紹介させていただきました。

研修での成長を間近でみることができ、より一層、後輩に対するアドバイスに力をいれていこうと思えた5日間でした。フロントエンドも含めた様々な研修で成長した新卒デザイナーと、配属後に一緒に仕事をするのが楽しみです。