BIZREACH DESIGNER BLOG

CODING TRAINING

ビズリーチ新卒研修 ーコーディング編ー

こんにちは、デザイナーの梅林です。

前回、「次世代のデザイナーを輩出する育成の仕組みは日本でつくれるのか?」にて、ビズリーチの育成・教育への思い、新卒研修の取り組みをお伝えさせていただきました。

記事のなかでも少し触れていますが、ビズリーチの新卒研修は、外部機関の株式会社クスールさんにご協力頂き、研修を運営しています。

今回は新卒研修の中から「コーディング研修」にフォーカスし、サポート側が感じた育成のナレッジをお伝えしたいと思います。
ビズリーチの研修について知っていただくと同時に、研修の設計にお悩みの方に、一つでも役立つ情報をお届けできれば幸いです。

デザイナー新卒研修の体制とその背景

まずはじめに、ビズリーチのデザイナー新卒研修の体制と、どうしてその体制をとっているのかという背景についてお伝えいたします。

事業会社のインハウスデザイナーにはたくさんのスキルが求められ、デザイナーひとりの経験と学習のみで身につけることは困難です。
個人のやる気次第、就職した会社次第、配属される環境や先輩次第といったような、属人的な手法に委ね、未来に求められるデザイナーを輩出し続けることは難しいでしょう。

そこでビズリーチでは、教育のプロなどの専門機関と協力・連携することで”属人化から仕組み化”を意識した研修づくりを実践しています。

そして、先輩社員が研修中のサポートに入り、質問に答えたり、アドバイスやレビューをしたりすることで、より実践的なものに昇華するようにしています。

コーディング研修の内容

次に、具体的な研修内容についてです。
コーディング研修はHTML/CSS、JavaScriptを合わせて3週間、下記内容で行いました。

研修中は、講師の方が丁寧に教えてくださいます。

マンツーマン指導の様子(マンツーマン指導の様子)

研修中は、ビズリーチのカルチャーでもある「新卒は全員で育てる」という考えのもと、毎日日替わりで先輩デザイナーが見守り役として常駐し、質問に答えたり、フォローを行ったりします。時には、最適化のため講師とコミュニケーションをとり、研修内容の提案などもさせていただくこともあります。

研修以外のサポートとしては、毎日一人一人日報を書いてもらっているので、その日解決できなかった疑問や悩みなどを日報からキャッチアップし、日報を通してコミュニケーションをとっています。

後述しますが、軽視されがちな日報が、ビズリーチでは大切なコミュニケーションツールとなっています。

こなすだけではなく”使える”レベルでインプットしてもらうために

研修内容は、ありがちな座学や本に沿ってこなす形式ではなく、講義の後に課題を行うというワーク中心の参加型実践形式の研修となっています。

特徴的なのは、課題の最中に自分の書いたコードに対してプレゼンをするということです。
慣れないコーディングやプレゼンにも臆することなく、積極的に挙手をし発表をしてくれていました。

コーディングやプログラミングは、10人いたらみんなが同じコードを書くことはなく、それぞれ書き方も違えば、正解もありません。
けれども最適な書き方があるはずで、それを追求するということが大事なんだということを、肌で感じるいい場になっていたなと感じます。

さらに、講師の説明できないコードは書かないという教えのもと、新卒デザイナーたちも自分の書いたコードを自分の言葉で説明することで、なんとなくでなくきちんと理解することに繋がっていたと思います。

そんな風に理解を深めた後は、学んだことの総集編として最終課題が待っています。
HTML/CSSの最終課題では既存のwebサイトを再現するトレース課題を、JavaScriptの最終課題ではTODOアプリのデザインから機能設計・実装までを行いました。

どちらも研修で習ったことを使うとはいえ、理解や応用が求められます。
この最終課題があることで、こなすだけの受け身の研修ではなく”実践で使えるようにちゃんと理解しよう”と意欲的に取り組んでくれていましたし、アウトプットを通して”やった”という成功体験を積めたのではないかと思います。

最終課題の前日、サポートをしていた先輩フロントエンジニアの「こんなにしっかり作っているのだからちゃんとレビューしてあげたい!」という提案で、急遽プロである先輩フロントエンドエンジニアによるレビュー会を設けることになりました。

研修中では意識しづらい”チーム”という視点を

レビュー会は、とても有効だったと感じています。
レビューは普段から現場でやっているのと同じように、下記の観点で行いました。

  • セマンティックなマークアップになっているか
  • メンテナンス性を考慮したコードになっているか
  • 最適な記述になっているか

実践に勝る練習はなしとはよく言ったもので、本当によく理解し、使えていたことに驚きました!

「クリティカルなエラーもなく、完成度が高くて驚いた」
「始めて3週間でここまでできるのは本当にすごい」
「正直、もっと基礎的なフィードバックをすることを想定していた」

など、先輩側も驚きの完成度でした。

レビュー会の様子

レビュー会の様子(レビュー会の様子)

レビューの内容は、

「インデント揃えましょう」
「ここは要素と要素の間の余白だから、paddingではなくてmarginで設定すべきだよ」
「この要素自体に意味はないから、sectionではなくdivを使った方がいいですね」
「ここは順番に意味があるからulじゃなくてolを使うべきだよね」
「このclass名は見た目に依存してるから、意味でつけましょう」

といった基礎的なものから、

「この組み方だと矢印の色が変わったら修正するの面倒だから、擬似要素で再現した方がメンテナンス性いいですね」
「視認性もいいし修正しやすくなるので、現場ではここで改行してます」
「この書き方だとマークアップが変わったらjs動かなくなっちゃうから、こう書いた方がいいですね(カタカタその場で修正)」
「ここはなんの処理かわかりづらいからコメント欲しいな」
「マジックナンバーは使わず変数にしよう」

など、現場でも指摘されるようなものや、現場ではこういうルールでやっているといった具体的なものまで多岐に渡りました。

レビューを受ける側もより学びを深めようと、自発的に質問をしてくれました。
それに答えるように、レビューする側はただ指摘をするのではなく、きちんと納得して理解してもらうために、本質的なフィードバックをするように心がけました。

そして何より、研修のように一人でコードを書くときには意識しづらい、メンテナンス性が高くわかりやすいコードを書くことが、結果チームの工数削減に繋がるのだということも意識してもらえたら嬉しいなと思いながらレビューをしました。

なぜデザイナーがコーディングやプログラミングを学ばなければならいのか

Why?

冒頭でも触れましたが、ビズリーチでは日報が大切なコミュニケーションツールとなっています。
日報では、その日にやったこと、翌日にやること、その日の学びや疑問など、いろんなことを書いてくれます。日報読むことで、疑問を解決してあげることはもちろん、間違った解釈を正したり、メンタリングをしたり、感じていることをキャッチアップしています。いわば交換日記のような役割ですね。
さらに、日報はみんなが見れる状態にあり、他の人の日報や先輩の返信を通して新たな気づきや学びを得ることにも繋がっています。

その中で嬉しかったのが、
「苦手だと思ってたけど、コーディングって面白い!
「コーディングやプログラミングを勉強すればするほど、エンジニアの方がすごいなと思いました
といった声を聞けたことでした。

チャレンジすることなく、なんとなく漠然と苦手意識を持たれがちなコーディングやプログラミング。
キャリアを築く過程で苦手意識が強くなる前に研修で学ぶ機会があることで、自分のキャリアの可能性や選択肢が増えるのはとてもいいことだと思います。

もちろん、可能性を広げるだけでなく、他職種とチームを組み、アウトプットを最大化するための前提知識や共通言語を持つことにも繋がりますし、たとえ苦手だとしてもその方法やプロセスを知っていることでデザインの思考の深さが変わってきます。

実際に、最初にコーディングをやったことで、今やっているデザイン研修ではコーディングを意識したデザインをすることにも繋がっているなと感じます。

今回の研修を通して、後工程のことを考えられるデザイナーになって欲しい。
そして、他職種や仲間へのリスペクトが生まれることで良好な人間関係を築き、楽しく仕事をして欲しい。

研修を通して、そこが少しでも伝わっていたのがとても嬉しかったです。

初めてのコーディングをやってみて

研修を受けている新卒デザイナーに、コーディング研修の感想を聞いてみました。

ーーコーディング研修はどうでした?

Aさん:HTML/CSS研修とJavaScript研修の両方において講義は手短で、とにかく手を動かす課題に重きを置いていた設計のおかげで、トライアンドエラーを繰り返しながら着々とコードが書けるようになるのを実感できました

ーー先輩のフォローはどうでした?

Aさん:いつでも先輩に質問できる体制があったのはとても心強かったですし、日報で疑問点を書いたら先輩からフィードバックを頂けるのもとても有り難かったです

Bさん:ずっと寄り添ってくれて、いつでも先輩の方に聞きに行ける環境なのでとても良かったです。自分書いた途中に随時先輩にフィードバックをもらえて、間違ったところはすぐ認識できるので勉強の効率がとても高まりました

ーーレビュー会はどうでした?

Aさん:レビュー会は講師の方だけでなく先輩方にも参加して頂いたおかげで、自分が疑問に感じたことをその場で解消できるだけでなく、ビズリーチの現場で実際に行っているコードの書き方など教えてもらえたので配属に向けて良い学びの場となりました

Bさん:講師の方からもらったフィードバックとは違って、先輩は業務からの視点で指摘していただくことが良かったです。業務は一人でコードを書くわけではないので、人にわかりやすい、使いまわせるコードは何なのか、またその重要性が分かってきました

ーーコーディング、プログラミングについて感じていることあれば教えてください。

Aさん:苦手意識を持ったまま研修を受けましたが、3週間の研修をみっちり受けて感じたことは「こんな僕でもプログラミングができるんだ」ということ。研修は難しかったのですが、デザインだけでなくフロントエンド側もできるようになりたいと考えていたので、勉強すればできるんだという実感を得られたことが一番の収穫だったと思います。

Bさん:コーディング、プログラミングはデザインを形にする過程でとても役立っています。「マークアップの構造があっているか」という見方で自分のデザインを再検討できますし、プログラミングの勉強することで、エンジニアの仕事の大変さが理解できました

ーーありがとうございます!残りの研修も頑張ってくださいね!

さいごに

3週間の研修を終えてみて感じたのは、次の3つのポイントが研修の内容をより良いものにしているなということです。

1つ目は、属人的で断片的な教育ではなく、全員が一貫して基礎的な部分をしっかり教わることができる仕組みづくり。
その為のリソースを自社で補えない場合は、外部教育機関に部分的に依頼するなど、適切な専門性を持ったプロフェッショナルと企業の垣根を越えて連携を行うことも、有効な手段だと思います。

2つ目は、先輩社員がサポートするということ。
より実践的なアドバイスが早期の戦力化に繋がり、研修以外のコミュニケーションで課題のキャッチアップをし、運営側と連携することで研修の最適化に繋がります。

3つ目は、全員で研修を作っていくということ。
講師側は基礎的なことを、先輩側は現場よりの実践的なことを、研修を受ける側は学び成長することが業務であることをしっかり認識し、積極的に自発性をもって研修を受けることでコラボーレーションが生まれ、より精度の高い学びの場が生まれていたなと感じます。

研修スケジュールはとても過密で濃厚なのですが、新卒メンバーが非常に意欲的に参加してくれているため、成長速度もとても速く日々驚くばかりです。

引き続き残りの研修も、私たち先輩たちもしっかりフォローすることで、研修を盛り上げて行けたらと思います。