こんにちは。フロントエンドエンジニアのKeita(@KeitaBangkok)です。
2021年4月下旬にカンカクに入社してから、もうすぐ1年が経ちます。
カンカク1人目のフロントエンド専任者として、複数の自社プロダクトを横断しつつもコア開発を担当する裁量大きめな1年になりました。入社から22年4月現在まで、弊社のフロントエンドエンジニアは自分1人となっています。
この1年間で自分が各プロジェクトでやってきたこと、そして今後やっていきたいことを中心に振り返ってみます。
担当プロジェクト一覧
まず、自分が各プロジェクトに取り組む上での共通のマインドのようなものをまとめてみます。
弊社のバックエンドエンジニアは、一通りのフロント実装をこなせるフルスタックな方が多く、特に入社当時はフロントエンド専任の自分がどのように価値を出していくかを考えていました。言語化すると、特に以下3点を意識して開発しています。
内部コードの質にこだわる
divタグの踊り食いで見た目の実現はできても、意味合いに適した正しい文書構造をつくることが「マークアップ」と言える行為だと思っています。
例として、意味合いに適した定義リスト(dlタグ)を使うよりも、divタグを使用した方がCSSの記述量が少なく済む場合があったりします。ただ、ここは逃げずになるべく文書構造にこだわったマークアップをするべきだと考えています。各主要ブラウザで正常な表示/挙動を担保する
弊社ではInternet Explorer とOperaを除く主要ブラウザに対応するルールを設けています。こうなると一番の曲者はSafariですね。
簡単な例を出すと、CSSプロパティscroll-behaviorがSafariの大半のバージョンで対応していないためJavaScriptでの処理が必要になったりと、Google Chromeで確認しているだけでは気づけない点にも気を配る必要があります。全ブラウザで表示/挙動が統一された平和な世界が訪れるにはまだ時間がかかりそうな印象です。デザインデータからは読み取れない箇所のUI/UX実装をリード
マウスオン時のスタイルやアニメーションを用いた各要素の表示については、主体的にデザイナーと相談し実装するようにしています。例えば実装案A~Cをこちらで用意した際、デザイナーさんのロジックに基づいて選ばれたものが自分の中の第一候補でなかったりする場合も多く、気づきがあって面白いです。
続いて、各プロジェクトについて見ていきます。
GOOD EAT CLUB
食のマーケット＆ファンクラブ『GOOD EAT CLUB』のフロントエンド改修を担当しています。直近では、自分が特に工数を使っているサービスでもあります。
バックエンドエンジニアの方が裏側の機能開発と合わせてフロント実装を一任することもありますが、現状自分の担当となる範囲は主に以下2点です。
- UI/UX改善施策の実装
- キャンペーンサイトのリリースマネージャー
現状GOOD EAT CLUBの開発環境はフロントエンドとバックエンドが共通のリポジトリで管理されており、画面表示部分はRuby on Railsのerbおよびhamlファイル、そして一部のVue.jsコンポーネントで描画されています。
今後として、フロントエンドをバックエンドから分離するタスクが実施予定になっています。TypeScriptも導入するためVue.jsよりも相性の良いReact（Next.jsにする予定）でフロントの実装をし、バックエンドとはGraphQLで連携する想定です。
これは技術的にも工数的にもチャレンジングなタスクになることが目に見えており、完遂するためにはいよいよ自分以外のフロントエンドエンジニアの協力が必要だなという所感です。
TAILORED CAFE online store
スペシャルティコーヒーを販売するECサイト TAILORED CAFE online storeの開発も担当中です。 現在もリニューアルが進行中で、自分が携わっているプロジェクトの中でも特に新試作起案→実装までの回転率が高いです。
また、開発に着手する前の段階で、コンセプト決定などの根本的な部分のディスカッションに参加する機会が多い環境でもあります。
フロント実装としては、 TOPページや定期便購入ページのリニューアル、コーヒー診断機能の改修、クリエイターとのコラボ商品販売ページの作成などを行ってきました。自分は本ECサイトがShopify開発デビューとなったため、Liquidファイルを使用したサイト実装についてキャッチアップしつつの開発作業でした。
今後もCVR改善のための施策を行っていきますが、フロントの技術的な面としては、現在静的実装になっている部分をLiquidファイルの特性を生かし、コード改修なく管理画面上からのサイト更新ができる範囲を拡張していく予定です。
WAKE
冷凍スムージーのサブスクD2Cブランド『WAKE』の立ち上げと運用も担当していました（現在はサービスサイト移行のため休止中）。
定期便商品を販売する上でメリットが大きいと判断し、ecforceというECプラットフォームを利用していました。
ecforce自体が比較的新しいサービスのためサイト実装上の諸情報が世に出回りきっていないこともあり、サイト公開前数日はカスタマーサポートに電話しながらカタカタとコードを打っていたのを覚えています。
サイトはLiquidファイルメインで構築されており、Shopify開発で得た知見はある程度生かすことができたように思います。数字的な結果を受け、短いスパンで新規施策を形にしていくことが多く、実装にはスピード感が求められました。
当初は定期便商品のみを販売していましたが、ニーズを踏まえギフト商品の展開も行っていました。
HOLON
クラフトジンのブランド『HOLON』を販売するECサイトです。
自分の入社前からサイトの運用が始まっており、自分の担当は新商品販売時の調整や新規セクションの追加が主になっています。
HOLONはInstagramの運用が成功していることもあり、今後試したい施策として、サイトにもInstagramコンテンツを表示することで滞在時間ならびにCVR向上を実現できるか検証したいと思っています。
また、根本のサイト構造はリリースから大きく変わっていない状態での運用が続いているため、各数値やヒートマップ観測などをもとに、掲載コンテンツの最適化も実施したい気持ちです。
自社コーポレイトサイト
弊社のコーポレイトサイト改修もタスクの一つです。
入社前の時点でSEOやUX観点の改善案レポートを自主的に提出するという僭越なアクションをしており、入社後は列挙していた改修を第一タスクとした取り組んだのを覚えています。
コーポレイトサイト改修で一番大きかったタスクとしては、採用強化のためのコンテンツ拡充とNext.js+HeadlessCMS導入になります。詳細は以下記事をご覧ください。 developers.kankak.com
現在CMS化しているのはNewsおよびCareerセクションのみであるため、他セクションについてもCMS化を進めていく予定です。
TAILORED CAFE ブランドサイト
自社運営のカフェ、『TAILORED CAFE』のブランドサイト改修も担当しています。
入社以後、大きめなタスクとしてまずデザインのフルリニューアルがありました。リニューアル前の以下サイトキャプチャと現行サイトを比較してみてください。
フルリニューアルにあたりデザイナーさんが作成したデータが以下です。弊社ではデザインデータ作成にFigmaが採用されています。
自分が直近で意識的にも特に重きを置いてインプット/アウトプットを行っているのはReact関連のものになりますが、上記のようなデザインカンプからのコーディングタスクも定期的に発生するため、根底にあるWeb制作面のスキルも衰えることがないと思っています。
本サイトはリニューアル以前からwebpack構築の静的な運用が続いていましたが、ご時世的に各店舗の営業時間の変更や店舗メッセージの更新頻度が高く、こちらもコーポレイトサイト同様Next.jsおよびHeadlessCMSを導入し、サイト更新の簡易化を図りました。
後にONLINE STOREの商品掲載箇所もCMS化しており、引き続きCMS導入セクションを拡充していく予定です。
KITASANDO COFFEE ブランドサイト
同じく弊社が運営しているカフェ『KITASANDO COFFEE』のブランドサイトです。
自分の入社前まで、このサイトはノーコードサービス"STUDIO"で構築されていました。 エンジニア知識を必要とせず、簡易的にサイトを立ち上げることができるSTUDIOはメリットが多いですが、細かく見ていくと以下3点の改善ポイントがあるように思えました。
- SEO観点でベターなHTMLタグを配置
- HTML階層を効率化
- デザイン改修のハードルを下げる
見た目が全く同じサイトをスクラッチで構築し、上記3点を解消しました。
フロントエンドエンジニアが在籍していて、ある程度工数も取れると言うことであれば、スクラッチで構築しておいた方が良いと個人的には思っています。STUDIOの都合上、やや冗長的に思えたHTMLの階層構造も解消し、内部コード量もスッキリとさせることができました。
結果的に、後にデザイン込みのコンテンツ拡充を行う機会も出てきたため、一から構築し直して正解だったなと思います。
現在は同ブランドでラウンジ業態店舗を下北沢にオープンしているため、この新店舗を訴求する新コンテンツを追加していく予定です。また、このサイトにもHeadlessCMSを導入し、店舗運営者でもサイト更新が可能な形に改良していきます。
おわりに
これまでとこれからのフロントエンド開発について語ってみました。
開発の内容に加えて、過去1年で様々なプロジェクトに携わることができた点も、自分が弊社でモチベーション高く業務に取り組めている要因の一つだと感じています。
2年目の計画としては、フロントエンドのモダンスキル導入や、バックエンドと連携する環境を新規構築していくことで、開発の質向上も重点的に行っていく予定です。
事業や開発内容に興味をお持ちいただけた方は、ぜひ以下リンクからお気軽にご連絡ください！