はてなブックマーク

三菱UFJフィナンシャル・グループ（MUFG）の戦略子会社であるJapan Digital Design株式会社でフロントエンドエンジニアをしている小笠原と申します。 今回は、Reactを用いてSPAを作成しGA4とGTMを導入した結果、様々な気付きがあったので、トラブルシューティングなども含め記事にまとめました。 はじめに本記事では、GA4＋GTMの構成に関する事前知識となるような内容を記載しています。そのため、体系的な話や、GAからGA4の移行、GTMタグと広告の連携など高度なことについては記述しておりません。 使用ライブラリについてReact: v18系 React Router 6系 GA4: react-ga4 GTM: @elgorditosalsero/react-gtm-hook SPAの注意点通常のReactでSPAを実装した場合、正しくページロードが起こらない可能性があ

はじめまして。デザインディレクターの竹内です。体験設計パートにおけるプロダクトマネジメント、品質管理を担当しています。今回はわたしたちJapan Digital Designのデザインチームの重要な役割のひとつ、「CXLab」のデザインプロセスをご紹介します。 そもそもCXLabって？CXLabは三菱 UFJフィナンシャル・グループの体験設計を担うインハウスのデザインチームです。リソースの観点から、ごく一部のサービスにしか関われていないのが実情ですが、快適な顧客体験を目指して日々業務に取り組んでいます。ちなみに絶賛採用中です。大事なことなので、最後にもう一回ちゃんとお話します。 わたしたちのデザインプロセス基本的にはCIIDやZendesk等が提唱している「トリプルダイヤモンドモデル」をベースにしたプロセスをしっかり踏む、ということを重視しています。「トリプルダイヤモンドモデルの解説だった

この記事では、三菱UFJフィナンシャル・グループの戦略子会社であるJapan Digital Design（JDD）において、体験デザインを担うExperience Design Team（デザインチーム）のUXリサーチ活動の一部を紹介します。 デザインチームにはUXリサーチを専任とするリサーチャーがおり、UXデザイナーと共同でプロジェクトを進めています。今回は、UXリサーチ活動におけるUXリサーチャーとUXデザイナーの協業を切り口に事例を紹介していきたいと思います。 協業のメリットUXリサーチャーとUXデザイナーが協業することの大きなメリットの一つは、業務の分担により案件を効率的に進めることが可能になることです。また、早い段階でリサーチ結果の活用方法を確認できるため精度の高いリサーチ計画をたてられたり、リサーチを進めながら体験設計の検討を開始できるなど、短期間で質の高いリサーチとそれに基

なぜ日本語UIキットを公開するのか？ デザインチームの研究活動のひとつとして、体験設計やUIデザインの品質を高めたり、デザインチーム内の協働を円滑に行うために、汎用的なデザインテンプレートやデザインアセットを作成し、体験デザインプロセスの仕組み化と共有を行っています。 UIデザインにおいても、Figma Communityをはじめとした様々な媒体でUIキットが共有・配布されており、UIキットを参考にデザインワークを行うというケースが増えてきているかと思います。 一方でUIキットの多くが欧文フォントで構成されているため、日本語フォントに変換する必要があり、場合によってはサイズやレイアウトを微調整しなくてはなりませんでした。 このUIキットも、単にAppleやGoogleのUIコンポーネントを日本語化しているだけと言えばそうかもしれませんが、これを活用することでデザイナーやプロダクト開発に携わ