三菱ＵＦＪ信託銀行サイトリニューアルプロジェクト
#07
「託せる未来」を具現化した
300人規模の壮大なプロジェクト。
約2,500ページを超えるWebサイトを、金融業界での実績とチームの力を融合させてどう生まれ変わらせたのか。
その裏側に迫ります。
●見えてきた改善の必要性
三菱ＵＦＪ信託銀行様のWebサイトは、長期にわたる更新を経るうちにナビゲーション構造が複雑になり、操作性にも課題が生じていました。特に部分ごとの更新による全体的な統一感の欠如には改善の余地が見られました。
●金融業界での実績と運用視点が決め手に
事前調査により確立された「託せる未来を体感できるサイト」というコンセプトを軸に、複数社によるコンペが行われました。トランスコスモスは、金融業界での実績を活かしたサイト制作と制作後のPDCA運用支援に重点を置いた提案を行い、採用いただきました。
PM 塚本さん
トランスコスモスに入社して9年目になりますが、ここまでの規模感の案件は初めてだったため発注いただいた際は、喜びよりも緊張感が勝りました。コンペの際も、前段の事前調査は他社が担当されていたため発注いただけるか心配でしたが、選んでいただいたからには覚悟をもって取り組もうという気持ちでした。
PM 新井さん
このプロジェクトは、なによりも規模感が大きかったため、体制構築の際はベテランだけでなく多くの若手にも参画してもらいました。
彼らがこのプロジェクトを通じて実践的なスキルや経験を積み、大きく成長できる案件になるといいなと思っていました。
●ユーザーの未来を託してもらえるように。
一人ひとりのニーズに寄り添うサイト構築への挑戦
要件定義フェーズでは、⾦融業界のサイト制作実績が豊富なメンバーを筆頭に約2,500ページに及ぶサイト構造の最適化に取り組みました。
ユーザーが未来を託したくなるようなサイト構造にするためにも、特に個⼈のお客様向けページではトップを、法⼈のお客様向けページでは商品詳細の設計で検討を重ねました。
- あなたの⼈⽣に寄り添う⾦融体験を。コンシェルジュ機能が実現する「託せる未来」
個⼈のお客様向けのトップページでは、ファーストビューに表⽰されるグローバルナビゲーションで商品の種類ごとの明確な⼊り⼝を配置。中央には「⾃分らしい⽣き⽅に、⾃分に合った商品を」というコンセプトコピーとともにコンシェルジュ機能を設置し、ユーザーニーズに寄り添う設計になっています。
このニーズベースの商品提案アプローチは、サイトコンセプトである「託せる未来を体感できるサイト」を体現し、三菱ＵＦＪ信託銀⾏ならではの選択肢を提供。『資産を増やしたい』などの抽象的な選択肢から、『コツコツ積み⽴てたい』といった詳細な選択肢へと絞り込む設計により、どのようなユーザーも最適な商品に簡単にたどり着ける導線を確保しています。
個人トップでは自分に必要なサービスが明確にイメージできないお客様向けに、
直感的に最適な選択肢を見つけられるコンシェルジュ機能を設置。
グローバルナビゲーションでは、信託銀行ならではの幅広い商品ラインナップを網羅しながらも、
ユーザーを混乱させない整理された構造を実現。
- 選びやすく、分かりやすく。法人向け商品情報を強化
企業のご担当者様が商品やサービスを検討する際に必要となりうる情報を洗い出し、三菱ＵＦＪ信託銀行ならではのメリットを明確化したうえで、事例の掲載も充実させました。さらに導入検討時の不安を軽減するため、お問合せから連絡・ヒアリングまでの各ステップを視覚的に示した「ご利用の流れ」セクションを新設し、迷いなく次のアクションを理解できる構成へと刷新しました。
- ユーザーテストで顧客体験の検証
リニューアルデザインのプロトタイプを複数パターン用意し、ユーザー調査を実施。一般の被験者にリアルなシナリオで操作を体験してもらうことで、商品検索の直感性・操作フロー、三菱ＵＦＪ信託銀行らしさや信頼感などについて生の声を収集。こうしたユーザー中心のプロセスで改善を重ね、サイト内の回遊率向上に繋げました。
- どんな時も常にあるべき姿を追究
設計・デザインが完了した後に参画したメンバーから、フラットな視点で「本当にユーザーにとって使いやすいか？三菱ＵＦＪ信託銀行らしさを体現できているか？」と意見が出たとき、プロジェクトメンバーは近視眼的になっていたことに気がつきハッとさせられました。
限られたスケジュールの中でも妥協せず、「理想のユーザー体験」を追求すべくお客様を交えたディスカッションを再開。三菱ＵＦＪ信託銀行らしさを視覚的に表現するカラースキーム、洗練されたアイコン、統一感のある動線設計など、ブランドアイデンティティを強化する新たなデザイン基準を確立しました。
●総勢300人の声を紡ぐ大規模プロジェクトへ
三菱ＵＦＪ信託銀行様のサイトは商材ごとに管理部署が分かれていたため関係者も多く、全員の認識と改修の方針を統一することが不可欠でした。そこで全ページの改修範囲を『構成から一新するページ』『デザインを刷新するページ』『軽微な修正のみのページ』と明確に分け、各担当部署ごとに改修方針の説明とヒアリングを段階的に実施しました。初回のキックオフミーティングだけでも半年間で50回以上を重ね、それぞれの部署ならではのサービスの特徴やエンドユーザーとの接点、今後の展望までしっかりと把握していきました。
プロジェクト推進体制
ディレクター 稲垣さん
このフェーズでは、トランスコスモス側も複数チームで対応しました。どのチームでも、一貫した説明ができるよう資料をテンプレート化し、効率的な進行と情報の統一を心がけました。
幅広い金融商品の理解も必要だったのですが、私の前職が金融業界だったためスムーズに行うことができました。まさかWeb業界で前職の経験が活かせると思っていなかったので、運命かなとも思いました（笑）
ディレクター 築出さん
私は、法人カテゴリの中でも『構成から一新するページ』に分類される領域に取り組み、約80ページに及ぶ情報設計を行いました。
部署ごとの説明会・ヒアリングでは、オーナー様それぞれのサイト改修への温度差がありましたが、改修による効果や要件定義で決定した方針を改めて説明するなど、丁寧な対話を心がけることでスムーズに進行することができました。
●制作フェーズでは、国内外のリソースを結集。
トランスコスモスは、この大規模サイト制作を期間内に効率的に進めるため、本部・ニアショア・オフショアを活用した体制を構築。「個人のお客様向けページ担当チーム」と「法人のお客様向けページ担当チーム」（以降、「個人チーム」「法人チーム」）に分け、明確な分業制により効率化を図りました。
この分業制を成功させた秘訣は、個人チーム・法人チームそれぞれで日次ミーティングを行いながらも、週1回の全体ミーティングで情報共有を徹底したことです。個人と法人ではページのテンプレートや構成が異なるため、三菱ＵＦＪ信託銀行として統一すべき部分は綿密に連携しました。
国内外８拠点で制作活動
- デザインシステム構築によりブランドが引き立つサイトへ
リニューアル前のサイトは、度重なる更新によりパーツが混在する状態でした。デザインチームはまずパーツを精査・整理することから着手。見出しやボタン、アコーディオンなどの基本コンポーネントを明確なルールと共に再定義し、パーツとテンプレートを同時進行で制作。このデザインシステムにより約2,500ページの巨大サイトに秩序をもたらしました。
東京・福岡・札幌・沖縄と全国各地の国内メンバーと、オフショアである韓国のデザイナーが一致団結しデザインを担当。
特に韓国拠点のブリッジディレクターとは密に連携をとりました。毎日の進捗共有と徹底したリスト管理で認識齟齬を抑制。デザインチームのリーダーが、グランドデザインから品質チェック、メンバー管理まで様々な役割を柔軟に担い、国境を越えた少数精鋭チームをプロジェクト成功へと導きました。
デザイナー 江島さん
大型案件におけるリーダーは初めてだったので、スケジュール遅延を防ぐためにもまずは各メンバーからの「進捗報告の徹底」を何より心がけました。このプロジェクトは私にとってチャレンジングな部分も多かったのですが、今の自分に足りていないものにも気づくことができました。現在、マネジャーというポジションでもあるので、この経験をもとにチームメンバーが快適に仕事できる環境づくりと、自身が無理せず計画的に仕事を回せる方法の模索に活かしていきたいと思います。
- 運用を見据えた開発プロセス
技術面では、モダンな実装にこだわり、ピュアJavaScriptでのモジュールシステムやダイナミックインポートを採用し、クリーンかつ表示速度の向上を実現しました。他にも、CSS変数を活用してSassに頼らない設計とするなどコードの可読性を高め、納品後の既存運用チームへの引継ぎも考慮しました。
オフショア開発チームとの連携など課題もありましたが、新技術への挑戦と実用性のバランスを重視した開発アプローチで成功させました。
コーダー 金坂さん
今回のプロジェクトでは、ASTROフレームワークの使用やFigma導入を見越したCSS変数の活用など、新しいことにたくさん挑戦できたため楽しく開発することができました。量産を依頼していたオフショアとはスケジュールが詰まっていたこともあり、一部コミュニケーションミスもあったため、今後は新技術への挑戦を続けながら、コミュニケーション強化とメンバーにとって快適な開発環境の構築を目指していきたいです。
コーダー 山下さん
私は今回、JavaScriptによる動的実装をメインで担当しました。モジュールシステムやダイナミックインポートなどモダンな技術を導入し、表示速度の向上を実現しました。また、将来の運用も考慮しクラスベースでの自動読み込み機能などの工夫も取り入れています。
大規模サイトでのフロントエンド開発経験を今後も活かして、技術的な挑戦と実用性のバランスを常に意識しながら、さらなる成長を続けていきたいです。
これまでの取り組みが実を結び、長期間のプロジェクトにもかかわらず当初の予定通りのローンチを実現できました。
サイト公開後の運用にも携わらせていただいており、リニューアル前後2週間の比較では、滞在時間・平均ページビュー数・離脱数・トップページ直帰率など顧客体験に関わる主要指標が向上しています。
顧客体験のさらなる向上に向け、サイトPDCAの支援を継続しています。
本プロジェクトに関して、三菱ＵＦＪ信託銀行様から次のような温かいお言葉をいただきました。
このたび、弊社ホームページデザインリニューアルプロジェクトにおいて、貴社のご支援をいただき、無事に遅延なくリリースを迎えることができました。
本プロジェクトは約1年半にわたる長期的な取り組みであり、関係者も300人程の大所帯のプロジェクトでしたが、各ユーザー部との個別対応を通じて、課題を一つ一つ丁寧に解決していただきました。
特に、PMを中心とした定例会や分科会の運営、事務局主要メンバーとの対面ミーティングなど、柔軟かつ迅速に対応いただいたことがプロジェクトの成功につながったと思います。
貴社のプロフェッショナルな姿勢と確かな実行力により、複雑なプロジェクトを円滑に進行できたことに深く感謝しております。
今後とも、貴社のご協力を得ながら、さらなるサイト改善・向上を目指していきたいと考えております。
このプロジェクトで得られた経験と更なる金融業界の知見を基盤に、今後もクライアントの業務理解を深め、より価値のあるウェブサイト構築のサポートを継続していきます。要件定義からローンチ、そして運用まで一貫した支援体制こそが、トランスコスモスの強みであると再確認できたプロジェクトでした。
PM 塚本さん
私のキャリアの中でも最大規模のプロジェクトでしたが、若手ディレクターたちが積極的に参画してくれたことをとても心強く感じました。彼らにとって未経験の領域も多かったはずですが、実践的なスキルを経験できる貴重な機会になったと感じています。このプロジェクトでの経験が彼らのキャリアに厚みを加え、次世代のリーダーとして活躍することを期待しています！
PM 新井さん
リニューアルしたサイトが本格稼働し、現在も継続的に携わらせていただいています。全体の数値分析や改善提案を通じて、サイトのさらなる価値向上のご支援をしています。三菱ＵＦＪ信託銀行様から「デジタルチャネルの一層の活性化」をご期待いただいていることを受け、行内での事例共有や分析ツール勉強会など、技術と知見の両面から引き続き積極的にご提案・ご支援を続けることで、長期的なパートナーシップを深めていきたいと考えています。
案件の期間
案件の人数
約30名
