DDS匠blog Vol.7 卒業生の声#1 前後のスキル変化と3カ月間の常駐先業務体験レポ

今回は、DDS OJT卒業生の声をお届けします！
異業界・異業種からWeb制作をスタートした研修生の体験記。Web業界を目指している方はぜひ参考にしてみてください。

卒業生プロフィール

OJTスタート時とOJT終了時のスキルの違い

OJTとしてスタートする前、スクールに半年ほど通いHTMLやCSSについて学びました。
スクールでは、サイト１ページ分を3つ作った程度で、OJTスタート時のスキルは、１ページのコーディングに数日かかっており、ページをとりあえず形にするのがやっとでした。

また、オフィスワークの経験がなかったため、メールでのやり取りをした経験が少なく、仕事でslackなどのコミュニケーションツールを利用したこともありませんでした。

BEMなどの現場で通用するコードの書き方を理解

OJTがスタートすると、技術周りに関する講義が1ヶ月あります。その中で何度もコーディングを行います。何度も繰り返しページを作成し、コードレビューしてもらうことで、8時間程度で1ページのコーディングができるようになりました。
また、BEM*¹などのCSS設計を学び、誰が見ても分かりやすく修正しやすいコードが書けるようになりました。

タスクランナーを使用した環境でのコーディング

スクールで勉強していた時は、タスクランナー*²使った経験がなく、HTMLにCSSを読み込んで、直接CSSを書いてコーディングしていました。しかし、そのようにコーディングすることは実務ではほとんどありません。

講義では、gulp*³を用いた環境でSass*⁴を使ってコーディングすることができました。環境構築も講師の方と一緒に行うので、どのような作業が必要なのかを知ることができました。

実際にメールで指示を受けて作業するという流れを経験

ある程度コーディングができるようになると、ディレクターからメールで指示を受けて、WordやExcelで指示内容を確認しながら作業するという経験をさせてもらいます。
このステップは現場での仕事の流れを理解でき、さらにオフィスワークの経験がない私にとっては、ディレクターとのメールのやりとりなど、とても勉強になりました。

複数人で作業する経験

同時期に在籍していたOJT生と一緒に１つの作品を作りました。この時は「パララックスを効果的に利用したサイトを作ってみる」というテーマだったのですが、このステップではGit*⁵を使ったバージョン管理を学ぶことができました。
また、誰が見ても分かりやすく修正しやすいコードを書くことの重要性を改めて感じました。

*¹…classの命名ルールを決めたCSS設計方法のひとつ。BEM（ベム）は「Block、Element、Modifier」の略称。
*²…様々な作業（タスク）をプログラム処理により自動化したもの。
*³…ファイル圧縮など制作過程で生じる様々な処理（タスク）を自動化できるタスクランナーのひとつ。gulpは「ガルプ」と読みます
*⁴…cssを効率的に設計できるようにした記法。ブラウザではsassを認識しないので、cssの形に変換（コンパイル）が必要。
*⁵…ファイルの更新履歴を記録できる分散型バージョン管理システム。複数人で開発したソースを一元管理することに適している。

DDSで学んだことを実務に活かす

ここからは、約2ヶ月間のOJTを終えた後、常駐先でどのような業務を行ったのかをお話します。
主な業務内容は、AEM*⁵というCMS*⁷を用いたページ制作でした。Wordの原稿とXD*⁸のデザインを確認しながら、AEM上でコンポーネントを選択し、テキストを流し込んでいきます。
ページ制作の他にも、自分以外のメンバーが作成したページのダブルチェックも行います。チェックは目視または、チェック用のツールやブックマークレットを使用して行います。

勉強してきたHTMLやCSSを初めて現場で使う喜び

実務ではAEMを使用していたので、直接HTMLやCSSのコードを書くことはありませんでした。
しかし、直接書くことがなくとも、AEMが生成するコードのチェックを行います。例えば、無駄なHTMLタグが入っていないか、正しいタグが生成されているか、期待通りのスタイルが付いているかなどを検証ツールでチェックします。
正直、もっと勉強してきたことを使いたいという気持ちもありましたが、それでも、今までスクールやDDSで勉強してきたことを初めて実務で使う経験をして、勉強してきたことが、こんな風に仕事に活かせることを実感できました。

Web制作の現場環境に対応したコミュニケーションスキル

常駐先にもよると思いますが、私が常駐した先では、質問や依頼は全てslackで行われていました。仕事の割り振りもスプレッドシートを用いており、仕事関係のことを口頭で話すことはほとんどありません。
私はオフィスワークが初めてだったので、DDSでの経験がなければ、少し戸惑ったかもしれません。文章や画像のみで相手に分かりやすく質問することは意外と難しいと実感しました。

コードが書けるようになる、デザインができるようになるといった技術的なスキルだけではなく、このようにWeb制作の現場の環境に対応したコミュニケーションスキルや仕事の進め方に慣れるということも、仕事をスムーズに進める上で重要なスキルであると感じました。

*⁶…アドビシステムズで開発されたCMS。AEMは「Adobe Experience Manager」の略称。
*⁷…WEBコンテンツを簡単に構築・追加・更新できるシステム。CMSは「Contents Management System」の略称。
*⁸…アドビシステムズが開発した「Adobe XD」。WEBサイトやモバイルアプリなどのデザインに適しており、UI/UXを確認するためのプロトタイプを作成することができるツール。

これからの目標

DDSに入った頃、長時間イスに座っていることに慣れなくて、初めのうちはお尻が痛くなったこともありました(笑) 。実際に働くうちにWeb制作の仕事がどういうものなのか、DDSに入る前よりもリアルに感じられるようになりました。その分可能性の選択肢が多く見えてきて、今後自分がどの道に進むのか迷うこともあります。

しかし、今はオフィスワークにも慣れ、勉強してきたことを実務で活かせる喜びを感じています。DDSで過ごす日々の中で相談する相手ができたことや、視野が広がったことにより、学習を進めることも以前よりもスムーズにできるようになりました。
このまま地道に学習を重ね、現場経験を積み、Web制作を仕事にしていると自信を持って話せるようになりたいと思います。