サービスの成長に応えるデザイン・情報設計とCMS基盤を実現 - sustenキャピタル・マネジメントの事例

事業が成長する反面、生じたWebサイトとの乖離

2021年の創業以来、サービスを段階的に拡張してきたsusten様ですが、Webサイトは初期構成のまま情報を継ぎ足し続けた状態となり、サービスの全体像が伝わりにくい構成になっていました。社内でのリニューアル対応も検討されましたが、他業務との兼ね合いから対応しきれず、投資シミュレーターの設置など新機能の追加も含めた抜本的な見直しを外部パートナーに委ねることをご決断されました。

複数社に相談を持ちかけたところ金融という専門的なドメインへの理解が難しくフェードアウトする会社もある中、以前の「ポケットNISA」制作を通じて培った信頼関係や、専門的なやり取りがスムーズに進められる安心感が決め手となり、再びちょっと社へ依頼されました。

私たちはアクセスを伸ばすことよりも、世の中にない情報を分かりやすく提供することを意識していたんです。そこに寄り添っていただいたのがちょっとさんでした。（総務本部 戸谷さん）

前回ご依頼いただいた際の事例

表面的な要望の奥にある、本質的なCMSの運用課題を掴む

プロジェクト開始後まず取り組んだのは、表面的な要望の奥にある本質的な課題の整理です。最初の「新規サービスの紹介ページがない」「シミュレーターが欲しい」という要望に対して、ページやシステムを追加するだけでは足りないと判断しました。変化した事業内容に合わせて情報設計そのものを組み直す必要があること、そして、その場限りのリニューアルではなく、今後サービスが増えても運用できる基盤が求められていることを、ヒアリングを通じて明らかにしていきました。

そのために社内で取り組んだのが、金融サービス特有のドメイン知識のキャッチアップと、社内で「どの情報を・誰が更新するのか」という運用の実態の把握です。情報の種類ごとに更新責任や公開単位を切り分けられるよう整理を行うことで、今後の運用まで見据えたCMSの設計を固めていきました。

ヒアリングから導いた、sustenらしさの再定義

デザイン面においては、ブランドを毀損するような致命的な課題があるわけではありませんでした。そのため、「直したい箇所はどこか」をヒアリングするのではなく、アプローチの視点そのものを変えることにしました。

ヒアリングを重ねる中で見えてきたのは、susten様で働く方々の想いや企業としてのユニークさ、金融やテクノロジーに対する姿勢が、以前のサイトでは十分に表現されていないという点です。ここをデザインリニューアルの起点として、どのようなトーンでsusten様らしさを表現するかを探っていきました。

具体的には、海外の金融エスタブリッシュメントやフィンテック企業のブランディングをリサーチしながら、susten様から事業の考え方を直接聞き取りました。さらに参考となるサイトを持ち寄っていただき、ちょっと社はその方向性を手がかりにデザインのトーンを絞り込んでいきました。

プロジェクト初期の資料。事例の比較を通じて、ルックやカラー、タイポグラフィを検討。

CMS標準機能を活かしつつ、組織に合わせた基盤づくり

今回の開発で一貫して意識したのは、Orizmの標準機能で対応できる部分は最大限活用し、案件固有の価値だけを独自開発として加えるという判断です。そのためにページ単位ではなくコンテンツ種別単位で設計することを徹底しました。ニュース、会社情報、商品説明、約款など性質の異なる情報をそれぞれ分けて管理できる前提を先に整え、Orizmの標準機能が最大限に活きる構成を実現しています。

お知らせページについては、Orizmのデザインエディター機能を通常の固定ページ向けの用途から拡張し、増えていくコンテンツに対しても直感的に見出しやテーブルを追加しながら作成できるように改造しました。また下書き機能・ページコピー機能を活用することで、公開後も安全に運用できる状態を整えています。金融系サイトでは数字ひとつのミスも許されないからこそ、更新・公開まわりの安全性を品質の一部として捉えて開発を進めました。

Orizmのデザインエディタ

「投資は、科学だ。」をビジュアルで体現したデザイン設計

ブランド基盤として、十分に整理されていなかったカラーパレットを改めて定義し直しました。既存サイトのカラーを活かしながら再設計し、「投資は、科学だ。」というメインコピーに合わせてサイエンスを感じさせる欧文フォントを選定。トップのメインビジュアルや全体レイアウト、ボタン・リンクなどUIの細部にいたるまで丁寧に作り込み、ミニマルで堅実なルック＆フィールを実現しました。

細部へのこだわりとして、特に意識したのが「透明性」の視覚的な表現です。例えば、ニュートラルグレーの線は不透明感を生んでしまうため、ブルーグレーのパレットを設定して透明感を出すなどの工夫を取り入れました。お客様に対して透明性を持って提供する企業としての魅力をルックスに落とし込んでいます。

早い段階でトップページのデザイン案をビジュアルに落とし込み、直感的に判断いただく進め方を採用しました。susten様の世界観を一貫性をもって表現できたことで、最初のデザイン案がそのまま承認されました

「デザインはもうチーム全員一致で、最初に出していただいたもので特にこれといった修正もなかったです」（総務本部 戸谷さん）

susuten様のサイトTOP

正確さと速度を両立させた、独自シミュレーターの開発

今回のプロジェクトで最も工数をかけたのが投資シミュレーターの開発です。金融系の計算はコストが重いため、リクエスト数を最小化する設計とAPIとの連携やキャッシュとの組み合わせを工夫するなどしています。

また、キャッシュの設計も大きな難所でした。金融系サイトでは数字ひとつのミスも許されないため、更新したのに古い情報が残るという事態は絶対に避けなければなりません。そのため、キャッシュを効かせて表示速度を確保しながら、更新時だけ必要な範囲を正しく再反映する仕組みの構築に力を注ぎました。シミュレーターをコンポーネント化して独立した機能として設計することで、将来的なファンドの追加にも柔軟に対応できる拡張性も確保しています。

独自で開発した投資シミュレーター

運用基盤の刷新が生んだ良い変化

開発では、フルスクラッチで全部を重く作ったり既製CMSの制約に合わせるのでもなく、Orizmをベースに自由度と運用性をちょうどよく両立できたことが大きな手応えとなりました。デザインでは、未経験の事業領域だったからこそ表面的なデザインではなく事業理解や情報整理を大切にしながら進めた結果、susten様の理念に合ったミニマルで堅実なデザインを実現できました。

リニューアル後、susten様ではサイトの更新や新しいページの追加を社内で完結できるようになりました。その結果、キャンペーンの企画から公開までのスピードが大きく上がり、アクセスも前より着実に増えていると感じているといいます。

また、運用会社としての投資哲学や各サービスの強みを明確に打ち出せるようになったことで、対外的な発信にも自信を持てるようになったと話します。

「今回のリニューアルで、販売会社さんや販売担当者さんに対しても自信を持って伝えられるようになりました」（総務本部 戸谷さん）