コーディングで貢献するブランドエクスペリエンス

はじめまして。
ChatworkのBX部でWeb制作全般の仕事をしているシノザキと申します。
2021年7月にジョインしてから早くも半年がたち、おぼろげながら自分の役割が見えてきました。

受託のWebサイト制作をやってきた自分がBXという領域に飛び込んで得た気づきを、半年を終えたこのタイミングで振り返ってみたいと思います。

ジョインした頃のBX部

BX部には数名のデザイナーが所属していますが、Webサイトの実装を専任でおこなうエンジニアはいませんでした。

当時サービスのリブランティング発表の準備を進めており、ブランドを深く理解した上で一貫した品質の実装を確立する必要があったのでした。

何はともあれサイト制作

「マークアップエンジニア」という肩書きでジョインしたので、役割のメインはやはりサイト制作です。

リブランディング発表LPを初め、新たにできた子会社のコーポレートサイトやChatwork STOREのリニューアルまでさまざまな実装を担当しました。基本に忠実にマークアップしつつ、余白感や操作時のインタラクションなどの細かい部分を少しずつ揃えていくことで、ブランドの基礎の部分をしっかりと作っていきます。

その上で各サイトに合わせた演出やアニメーションでニュアンスをつけ、新ブランディングのもつフィーリングを具現化するよう努めました。
リブランディングの「紹介」のために要素が出現する演出にこだわったリブランディングサイトや、ストレージデータを四角形に見立ててランダムに配置したChatworkストレージテクノロジーズ株式会社のサイトなどがありますが、ここでは書ききれなさそうなのでまたの機会にご紹介したいと思います。

New Chatwork Brand | Chatwork

Chatworkストレージテクノロジーズ株式会社

Chatwork STOREのリニューアルでは方向性がなかなか固まらず苦労したのですが、リブランディングで設定したコンセプトやスタイルに立ち戻ることで、ブランドの雰囲気を一貫して伝えつつ地に足のついたリニューアルを実現できました。ここではモダンなコーディングの観点からレイアウト提案するなど、踏み込んだ貢献ができたように思います。

Chatwork STORE

後から振り返ればコンセプトを軸に据えるというのは分かりきったことでしたが、実際に自分たちが行動している時に全体像を掴むのは難しいものでした。特にコーディングという具体的な作業ではコンセプチュアルな視点というのは無くしがちですので、気をつけないといけませんね。

サイト制作以外にも

強いブランドづくりのためには既存サイトのクオリティアップも重要です。ジョインしたのはちょうどCore Web Vitalsの指標が認知され始めていた頃で、モダンな実装を取り入れユーザーエクスペリエンスを強化するその方針はChatworkの既存サイトにも取り入れていく必要がありました。

コーポレートサイトなど主要なサイトを中心に現状確認をおこない、洗い出した改善点に対して継続的な改善をおこなっています。Googleの開発ツールであるLighthouseのスコアを見ていると、以前と比べ画像の次世代フォーマット対応への比重が強まってきているようです。こういった実装方法の更新や浸透などもブランディングにつながる大切な要素だと感じています。

他にも部署をまたいだ品質管理の仕組みづくりやガイドラインの策定など、ブランド強化のためにコーディングの知識が貢献できそうなことはまだまだあります。

おわりに

こうして振り返ってみると、どんなWeb制作でも普通に重要視されているようなことばかりをやってきていました。ブランドエクスペリエンスといえども普通のこと、当たり前のことが大切なのかもしれません。これからも変化にキャッチアップしつつ、基本に忠実に活動していきたいと思います。

Chatworkにジョインするまでは受託制作のマークアップエンジニアとしての将来を模索していましたが、持っている知識を存分に活かすことのできる場所に出会えて感謝しています。

今後もChatworkではさまざまな形でブランディングをおこなっていきますので、お楽しみにお待ちください。

なおBX部では現在採用に力を入れています。一緒に新しい領域にチャレンジしてみたいという方はぜひ募集要項をチェックしてみてください。