kymmtです。
先日2月10日に、一休のフロントエンド技術にフォーカスしたイベント「一休 Frontend Meetup」を開催しました。
一休 Frontend Meetupとしては2年半ぶりの開催となりました。
このイベントでは一休開発チームのメンバーが登壇し、各サービスのフロントエンドについて工夫や知見を紹介しました。この記事ではイベントの様子を紹介します！
当日のハッシュタグは#ikyu_devでご覧になれます。
発表
『一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜』
1つ目の発表は、認証基盤などの開発に携わる渥美さんによる『一休.com のログイン体験を支える技術』でした。
一休の各サービスが利用している社内認証基盤では、ユーザーのログイン／SMS認証の際に表示するモーダルウインドウなどを提供するアセットを配布しています。この発表では、ユーザー体験も考慮してスムーズなログインできるモーダルウインドウをWeb ComponentsやVue.jsを用いて開発する方法について紹介しました。
『Webパフォーマンス改善 〜宿泊予約サービスでの取り組み〜』
2つ目の発表は、CTO室で全社的なフロントエンド改善に取り組む卯田さんによる『Webパフォーマンス改善 〜宿泊予約サービスでの取り組み〜』でした1。
宿泊予約サービスの一休.comのWebパフォーマンス改善では、指標として主にCore Web Vitalsの値をトラッキングしています。改善の方針としては、特定の箇所をカリカリにチューニングするより、ユーザー体験重視で全体的に遅くならないよう気をつけています。
発表では、実際に改善活動で指標を監視するために使っているLooker StudioやDatadogのダッシュボードをデモを交えつつ紹介しました。また、フロントエンドに関する知見を収集するための方法についても紹介しました。
『一休の世界観を形にする、ガイドラインとデザインシステム』
3つ目の発表は、一休.comレストランのデザイナー高橋さんによる『一休の世界観を形にする、ガイドラインとデザインシステム』でした。
一休では、デザイナーを中心に「一休らしさ」を実現するためのIKYU Design Guidelineを策定し、各サービスを横断してブランドイメージの一貫性を保つようにしています。
ガイドライン策定による成果として、デザインシステムの運用と各プロダクトへの適用や、デザイナーとエンジニアの協働がやりやすくなったので、一休らしい世界観の提供に役立っているという話がありました。
『飲食店予約台帳を支えるインタラクティブUI設計と実装』
最後の発表は、RESZAIKO台帳のエンジニア白井さんによる『飲食店予約台帳を支えるインタラクティブUI設計と実装』でした。
RESZAIKOは一休が飲食店向けに提供している予約管理のSaaSです。RESZAIKOが提供するサービスの1つとして、今回発表のテーマになった予約台帳サービスがあります。
発表では、iPadのようなタブレットで操作しやすい予約台帳サービスのインタラクティブUIを設計する方法について、
- UIをインタラクティブにするための基本的な方法
- Canvasの使いどころ
- コンポーネントとしてUIのレイヤーを実装することで責務を整理する手法
などを中心に解説しました。
おわりに
「一休 Frontend Meetup」での一休のフロントエンド技術領域に関する発表の様子を紹介しました。一休では、宿泊予約やレストラン予約の領域でユーザーファーストなサービスを作りたいというフロントエンドエンジニアを募集しています！
当日は40人ほどの方に来場いただきました。ご来場いただいたみなさま、ありがとうございました！
- 資料非公開です↩
