制作会社とシステム会社では全然違う！
フロントエンドコーダーの仕事をご紹介
こんにちは、Diezonのフロントチーム所属のSです。
昨年の5月にDiezonに入社してから約7ヶ月が経ちました。
短くも長くも感じるような充実した日々が過ごせていると感じます。
本記事では元々Web制作会社でデザイナー兼コーダーとして2年弱の経験を積んだ私が、
システム会社のデザイナー兼フロントエンドコーダーとしてDiezonに入社して感じたことをお伝えしていきます。
- フロントエンドコーダーの役割とは
- そもそもなぜ制作会社からシステム会社のDiezonに転職をしたいと思ったのか
- 入社して実際に関わったタスク
- システム会社のコーダーに必要なスキル
- どういった知識が必要なの？
- システム会社に転職して苦労した点
- コーディング方法の違い
- チーム作業に伴うコミュニケーション
- 私が思うDiezonとしてのフロントエンドコーダーに大切なこと
- 今後の展望/なりたい自分
- まとめ
フロントエンドコーダーの役割とは
フロントエンドコーダーはユーザーが画面越しに触れる部分であるフロントエンドの設計や構築を行う役割なのですが、会社によっては担当領域も異なるかと思いますので、まずはDiezonのフロントエンドコーダーの役割をお伝えします。
フロントエンドコーダーとしての業務内容は大きく分けると以下になります。
- ・デザイナーが設計したデザインを元にブラウザに表示できるようにコーディング
- ・UI/UX改善に伴うマークアップ修正
- ・フロントエンドに関わる不具合の調査/修正
※Reactのコンポーネント設計や、ゼロからJSを記述する「フロントエンドエンジニア職」とは業務内容は異なります。
そもそもなぜ制作会社からシステム会社のDiezonに転職をしたいと思ったのか
私が転職したいと思った理由は２つあります。
１つ目の理由はお客様やクライアントに対して、より質の高いデザインを提供したいと思っていたからです。
前職は制作会社で現在と同じデザイナー兼コーダーとして勤めており、ディレクターが作成したワイヤーを、とにかく早くデザイン/コーディングしていくことが求められていました。
自分の制作したサイトが次々に納品され、多くの方に利用されていることにはやりがいを感じていたのですが、スピーディーな進行のためクライアントの想いやサイト制作にいたる事業背景、課題点などを細かく把握するに至らず
にデザインをすることも多く、また納品後も自分の制作したサイトへのフィードバックを得にくかったこともあり、もっとお客様やクライアントの要望に沿ったU I/UXを創っていけたらと思うようになっておりました。
Diezonの面談を受けた際に、「ECサイトは保守契約として長期的にお客様をサポートするため、１つのサイトに対して、複数名でレビューし合ったり、サイトの分析結果やクライアントの声もいただきながら継続的に改善していくことが多い」ということを聞き、私もこうした環境で学びながら成長したいと思うようになりました。
２つ目の理由はコーディング面でスキルアップ出来そうと思ったからです。
私自身、前職ではチーム開発を経験したことが無かったため、コーディング量は多いもののコーディングに対してレビューを受けることはありませんでした。システム会社のチームでの開発に関わることで、技術者としも幅が広がると思いました。
実際チームでの開発に携わると、コーディングのルールに限らず、ソースコードの管理から、コードにおける可読性/再利用性の考慮
に至るまで、事前に想像していたよりギャップが大きく、慣れるまでに苦労しました。
詳しくはシステム会社に転職して苦労した点で後述させていただきます。
入社して実際に関わったタスク
Diezonにはデザイナー/コーダー職として入社しましたが、最初の1か月は一つのサイトを任されるというよりは、デザイン面であればバナー作成、コーディング面であれば軽微な修正などを通して、 Gitなどのコード管理の仕方や、チーム開発のタスクの進め方のイメージをつけていくことからスタートしました。
一通り流れを掴んだ段階で、今度は1サイトのリニューアルにコーダーとして関わりました。
案件の中でbem-flocss設計について学んだり、チームでの管理に適したディレクトリ構成を踏襲したり、システムとして再利用性の低いコードはレビューを受けながら徐々にチームで開発するうえで大切なことのイメージ感を掴んでいきました。
開発ルールのみならず、これまで携わってきたコーポレート系のサイトに比べて、要素の密度が高く、動きも多いECサイトにおいて、細部までデザインの再現性を高めるのに時間を要しましたが、 一番はコーディングの技術面に課題を感じたところもあり、その後は現在入社7カ月に至るまでJSの理解を深めたり、より早く可読性の高いコーディングを行うためのスキルを身に付けたりと、主にコーディング面のタスクに関わりながら、スキルアップに注力していきました。
システム会社のコーダーに必要なスキル
私自身、転職時には2年ほどのコーダー経験でしたので、Web制作会社においてもまだまだ勉強中という身であった前提ではありますが、制作会社では 「見た目を整える」ことである程度の評価は得られるものの、システム会社ではより深くスキルが求められます。
この部分、私が前職からのギャップを感じた部分も踏まえて、簡単にご紹介させていただきます。
どういった知識が必要なの？
▼ 言語
HTML、CSS、JavaScript
▼ フレームワーク/ライブラリ
jQuery、Node(npm)
▼ 設計方法
scssにおけるbem-flocss設計
▼ 開発・仮想環境
Git、Docker、Gulp
上記知識は、制作会社でもお持ちの方もいらっしゃるかと思います。
しかし私自身、前職ではHTML、CSS、JavaScript(jQuery)の３つの言語以外はほとんど触れたことがなく、慣れるのに苦労しました。上記を見て不安に感じた方もいらっしゃるかと思いますが、
新しく学ぶことが好きな方であれば、実際のコードを触りながらイメージを掴んでいけると思います。
その他にもSEOを意識したマークアップスキルやUI/UXの知見に基づいて提唱を行う力が必要になります。
また、Diezonでは今後SPAのシステムが多くなっていく流れのため、私自身現在はReactを想定したコンポーネント設計などの勉強に注力しています。
時代的にもSPAのサイトは増えてきているので、フロントエンドコーダーとフロントエンドエンジニアリングの垣根がなくなっていくと予想されております。そのため、自分としてもしっかり学んでバリューを発揮できる力をつけていけるよう日々奮闘しております！
システム会社に転職して苦労した点
私が最も苦労した点は、先にも少し触れましたが、チームでの作業に伴う業務の進め方に慣れることです。
チーム開発を経験したことが無かった私は、一人ですべての開発を担当するのと複数のメンバーで一つの開発を担当するのとでは、「仕事の進め方に関してどのような違いがあるのか」を想像することができていませんでした。
以下チーム開発に関して私が苦労した点になります。
コーディング方法の違い
これまでサイトを個人で完成させることが多かったので、自分に分かりやすいようにディレクトリ構成やファイル、ライブラリ、プラグインなどを管理していました。
しかし、当然ではありますが前職で一般的に利用されていた方法とは異なり、チームでの管理に適しているbemやflocssを用いた設計の概念のもとにディレクトリが構成され、ディレクトリの意味合いを認識して、スムーズに実装するまで苦労しました。
また、これまで自分一人で管理していたこともあり、あまり細かなコードレビューを受けたことはありませんでしたが、最初は指摘も多くレビューアーとのスムーズなコミュニケーションを行うことにも手間を取りました。
チーム作業に伴うコミュニケーション
次にチーム開発で苦労したのは、タスク管理やホウレンソウに関してです。
以前の制作会社では自分がデザインを行い、コーディングすれば、ほぼそのまま公開される状況でした。
一方、ECサイトの構築においては、1案件の規模も大きいため、前工程のデザインと後工程の組み込みは別のメンバーが担当します。
そのため、表示の出し分けや動きを再現するためにデザイナーとのコミュニケーションが必要になり、またシステムへの組み込みを考慮するために開発者とのコミュニケーションが必要です。
最初のプロジェクトにおいては、こうした部分の認識を欠いてコーディング作業を進めたことで、工数見積で大きく見誤りました。
さらに、初めて任された案件ということもあり「期待に応えられるよう頑張らなくては！」と一人で抱え込み、アラートを出すタイミングが遅くなってしまったことも、全体の進捗状況に影響を与えてしまったという点で大きな反省点でした。
私が思うDiezonのフロントエンドコーダーに必要な姿勢
私が経験した７ヶ月間からDiezonで業務に取り組むうえで大切だと思っていることを改めて記載します。
ユーザー目線で物事を考える姿勢を持つこと
Diezonは、システム会社ではありながら、UI/UXに関しても力を入れています。
UI/UXは主にはデザイナーの領域ですが、より良いUI/UXを目指していく中で、何よりも大切なことは「関わる全てのメンバーが利用者の視点を持つこと」だと思います。
ECサイトを使用していると「この機能は使いやすい」または「使いにくい」と感じたことがあると思います。細かな部分かもしれませんが、コーダー目線で「ここはスクロール範囲を限定させた方がUI的に使いやすいのではないか」
「リンクの範囲を広げることで流入率が上がるのではないか」といった観点を持つことは、プロダクトの品質に大きく影響すると思っています。
最新の技術やトレンドをキャッチアップし、学ぶことに抵抗がないこと
Diezonに限ったことではありませんが、ITに関わる以上どんどん新しい技術が生み出されている中で、常に情報収集をして
最新の技術やトレンドをキャッチアップしていかなければ取り残されてしまいます。
そして、新たなプロダクトに関わる場合には、経験していない技術でも学び、実践的に使えるようにしなければいけないときもあります。
新しいことを学ぶことに抵抗があったり、苦に感じてしまう方は、Diezonに限らずシステム会社のフロントエンドを担うのは難しいのではと感じています。
自分で考えて仕事を進めることができること
コーダーに限らずですが、デザインを忠実に再現するというコーダー職においても、指示通りに動くだけではなく、
自ら考えてより良いアウトプット/フローを創っていくということをDiezonでは求められます。
必ずしも一つの正解があるわけではありませんが、改善案に気付いたら提案/課題として起票し、対応していくことで、チームでの製作スピードや品質を高め、結果お客様にも還元できると考えています。
今後の展望/なりたい自分
まずこの7ヶ月は、コーディング面のタスクが多かったですが、デザイン面にも同じくらい興味があり、この先UI設計に関してももっと深く学んでいきたいと考えております。
開発の視点を持ちつつデザインに取り組むことで、目的を描き、効果的に提案/業務を遂行していくことができるようになると思うので、日々経験を積む中で勉強面も精進しております。
そして、将来的には両方の視点を持ち合わせたデザイナーとエンジニアの橋渡しになるようなポジションでお客様の理想を実現していくことを目指しております。
Diezonでは興味を持ったことに挑戦しやすい環境にあり、目標を持ってキャリアをイメージし、取り組むにはとても良い環境であると感じております。
ただし、チャレンジする以上はプロとしての質が求められます。しっかりと目的を持ち、力を付け、発揮していけば、いろいろなチャンスがあるので、領域を広げたい方にも面白い会社だと思います。
まとめ
最後までお読みいただきありがとうございました！
私自身の経験をもとに、Diezonでのフロントエンドコーダーの役割や働き方について、少しでもイメージいただけましたら幸いです。
Diezonで働くことに興味を持っていただいた方は、まずはカジュアル面談へのエントリーをお待ちしております！
