大和アセットマネジメント|ユーザビリティを向上させたサイト構築のコツ

DAIWA asset management

2025年春、大和アセットマネジメントのWebサイトが一新。ファンド情報やマーケットの動きなど投資にまつわるさまざまな情報が整理され、知りたい話題にすぐにアクセスできる、一目瞭然なデザインになっています。

このサイトリニューアルをアマナが担当しました。投資信託のリーディングカンパニーとして、日本でもトップクラスの運用資産を有する企業の顔にふさわしいサイトを構築するには、どのようなプロセスを経たのでしょうか。アマナのビジネスプロデューサー・飯塚翔、Webディレクター・児玉敦、アートディレクター・鳥居真雄に聞きました。

UI/UXデザインのプロとして要件定義を行う

大和アセットマネジメントのWebサイトリニューアルは、アマナがビッグローブ株式会社(以降、BIGLOBE)へ自社のケイパビリティを紹介していたことをきっかけにスタートしました。BIGLOBEは長年同社サイトのシステム運用を担っており、その知見を活かせることから、リニューアルのパートナーとして声がかかったのです。アマナがデザインと情報設計を担当し、BIGLOBEはシステム面での実装やプロジェクトマネジメントを支援するという役割分担が生まれました。

その段階でクライアントが抱えていた課題は、サイト評価のランキングをアップしたい、とのことでした。

「ブロードバンドセキュリティが運営している『Gomez(ゴメス)』というサイトでは、各企業のWebサイトを評価・ランキング付けしています。大和アセットマネジメントは資産運用会社部門にランキングされており、その順位を上げたいというご要望があったのです。
それまでの大和アセットマネジメントのサイトは、ターゲットユーザーの設定やサイト運営の指針がやや不明瞭な部分もあり、ユーザーごとに使い勝手に差が生じやすく、ユーザビリティやアクセシビリティに課題を抱えていました。各証券会社の営業パーソンや個人投資家、ファンドに興味を持ち始めた初心者など、さまざまな層の人が見てもわかりやすいサイトにするのは大前提ですが、まずはメインとなるターゲットに合わせたサイトにしたいということ、時代に合わせた更新性が必要だと考えている、とのことでした」(飯塚)

サイトリニューアルは2023年12月からスタートし、まずは要件の定義をまとめていきました。アマナはサイト構築やデザインを担当し、BIGLOBEはシステム面での実装や開発を支援しました。通信事業で培った技術基盤を活かし、CMSの運用やセキュリティ設計などを担当することで、ユーザーが安心して利用できるサイト環境を整えています。

最初に設定したのは、大和アセットマネジメント、BIGLOBEとの3社定例ディスカッション。隔週でミーティングを実施し、サイトのユーザビリティのどの部分が課題なのか、細分化&具体化を進めるコミュニケーションデザインを行いました。

「華美なデザインや動きのあるサイトを目指すというよりは、ユーザーの導線設定のところに重きを置いて作ってほしいという意図がありました。それを踏まえて作成したのが、要件定義書。エンドユーザーの誰にこのサイトを使ってもらうのか、クライアントの希望と課題を1つずつ整理して、要素や機能を追加するなど約2カ月をかけて合意形成をしっかり行っていきました」(児玉)

要件定義書より。4つの大きな柱でサイト構築を目指すよう合意。
要件定義書より。4つの大きな柱でサイト構築を目指すよう合意。

コンポーネントを量産して作業を効率化

今回、作るべきWebサイトは、エモーショナルなキービジュアルを中心にした構成ではなく、ユーザーが必要な情報に正しくアクセスできるわかりやすい設計という、ユーザビリティに軸足を置いたデザインがポイント。企業サイトが果たす役割と、見る人に与える印象のバランスを取りつつ、アートディレクターの鳥居がデザイン設計を行っていきました。

「派手な装飾要素は不要でしたが、いわゆる『大和アセットマネジメントらしさ』を伝える必要性はあると考えました。たとえば、サイト全体には、朱赤やゴールドといったコーポレートカラーを使用。サムネイル(トップ画像)の枠は、右側が丸みを帯びていて左側は切り落としという左右非対称の形ですが、これは『大和アセットマネジメント』の『D』をイメージしています。情報と情報の間の境界線にも朱赤とゴールドのラインを入れ、サイトの要素を邪魔しないところで『大和アセットマネジメントらしさ』を表現しました」(鳥居)

DAIWA asset management Webサイトトップぺージ。

DAIWA asset management Webサイトトップページ。
リニューアルした大和アセットマネジメントのサイト。バナー下のアニメーションにも朱赤とゴールドを使い、マイクロインタラクションの効果をアップ。

デザイン設計のプロセスにおいては、グランドデザインの原則を鳥居が基点となって作成し、デザインシステムをまとめました。そこから多くのパーツを作っていきます。

「サイト上で、同じ動きをするものは同じようなデザインを実装しなくてはなりません。機能によってデザインレイアウトをそろえるので、機能別のコンポーネントを作ります。それを共通して使い回すのがコーディングや実装において有効なので、大前提として、どんなパーツが必要なのかの整備と、コンポーネントを準備したのです」(鳥居)

「鳥居が中心になって作成したデザインガイドラインが重要なポイントです。サイトを体系立てて構築し、そこからアクセシビリティ(障害者や高齢者を含むさまざまな人が利用しやすい)、スタイル(タイポグラフィやカラーなど)、コンポーネント(ボタンやアイコン、タイトルなどサイトを構築するさまざまなパーツ)という階層になっています。今回はページ数の多いサイトなので、デザインシステムを作ったことと、コンポーネントを量産したことが効率化につながりました」(児玉)

要件定義書より、サイト全体の設計。※開発途中に仕様変更が発生し、最終的に実装された内容とは一部異なります。
要件定義書より、サイト全体の設計。※開発途中に仕様変更が発生し、最終的に実装された内容とは一部異なります。

デザインガイドラインより。さまざまなコンポーネントを作成。
デザインガイドラインより。さまざまなコンポーネントを作成。

誰もが使いやすいUI設計のポイント

リニューアルしたサイトは、見た目がすっきりしてポイントがわかりやすくなった、必要な情報にアクセスしやすいなど、ユーザビリティが向上した様子を実感できると好評です。ユーザーがストレスなく情報を取得できるサイトにするには、さまざまなポイントがありました。

「企業や業界の最新情報が詰まったサイトは、制作を進めていくうちにさまざまな要素を盛り込むことを優先しすぎて、作業が渋滞してしまうことがあります。最初の要件定義を策定する段階で、大和アセットマネジメントさんとBIGLOBEさんとで細部にわたって合意形成を行ったことにより、実制作では渋滞にも迷子にもならず、3社が同じゴールに向かって進めることができたのだと思います」(飯塚)

「抽象的なことを具象化する、目に見えない価値を可視化することにデザインは生きます。今回は情報設計という、使いやすさやわかりやすさを担うデザインに携わることができましたし、うまく整理して見せることができてよかったと感じています」(鳥居)

「デザインシステムによる構造化と統一されたルール作りを目指して、途中は試行錯誤もしながら、無事に完成させることができました。UIの設計はパートナー企業とコラボして、デザインツールのFigma(フィグマ)を活用。コンポーネントをFigma上で作り鳥居がディレクションをすることで共同作業が容易になったのが、さらなる効率化と作業の正確性を叶えました」(児玉)

知りたい情報に最短でアクセスできるようユーザーファーストでデザインを構築し、同じテイストで更新しやすいようデザインガイドラインも作り上げました。アマナはグランドデザインだけでなく、今後は各コンテンツ制作などにも取り組んでいきたいと考えています。

<スタッフクレジット>(スポンサー、クライアント以外はすべてアマナ)
スポンサー:大和アセットマネジメント株式会社
クライアント:ビッグローブ株式会社
ビジネスプロデューサー:飯塚翔
Webディレクター:児玉敦
アートディレクター:鳥居真雄

人気のダウンロードコンテンツ
オリエンにも活用できる!事業会社向け「Webサイト制作チェックリスト」[FREE DOWNLOAD]
企業のWebサイト成功のカギ– KGI/KPIの具体的な設定方法とサイト分析方法 [FREE DOWNLOAD]
Webサイトの課題を可視化!リニューアル時にも活用できる「Webサイト分析整理シート」を公開 [FREE DOWNLOAD]

この記事も読まれています
ビースタイルホールディングス|社内の共通言語を作るリブランディング
シスメックス|企業認知度をアップする戦略策定とクリエイティブ制作
クリエイティブの力でブランドを支える:ポーラのWebサイト「SEMCA」リニューアルの背景


取材、文:大橋智子

メルマガ登録.jpg

お問い合わせ先.jpg

PROFILE

飯塚翔

株式会社アマナ
飯塚 翔

株式会社アマナ
飯塚 翔

ビジネスプロデューサー。新卒でアマナに入社し、コンテンツマーケティング領域を中心にセールス活動に従事。「クリエイティブとデジタル」を武器に、幅広い業界業種の企業の支援を行う。

児玉 敦

株式会社アマナ
児玉 敦

株式会社アマナ
児玉 敦

プランニングディレクター/UI/UXディレクター。デジタルを中⼼としたコミュニケーション領域で、企業のブランド・サービスにおけるWebサイトやコンテンツ等の戦略立案から実施まで多数支援。クリエイティブ、UI/UXデザインに精通し、コミュニケーションデザインの多岐にわたるディレクション経験を有する。ブランディングとマーケティング、ビジュアルと機能を両⽴させるプロジェクトを得意として幅広い分野で活躍。また、新規ソリューションや事業立ち上げのビジネスデザインにも従事。

鳥居真雄

株式会社アマナ
鳥居 真雄

株式会社アマナ
鳥居 真雄

表現力と発想力に優れた「心を動かす」クリエイティブのエキスパート。企業や商品の目に見えない価値や本質を象 徴化(SYMBOLYZE)し、可視化(VISUALIZE)することを責務にデジタルとフィジカルを横断するクリエイショ ン全般に携わる。

SOLUTION

amana WEB PRODUCTION

amana WEB PRODUCTION

訴求力のある効果的なWebサイトをご提案

撮影、CG制作、映像プランニングなど、広告ビジュアル制作で培ったノウハウをフルに活用。写真やCG、動画などのビジュアル素材を効果的に用いたWebサイトを企画制作します。プランナーやWebデザイナーなどのプロフェッショナルが、お客様にとって効果的なプロモーションアイデアやキャンペーンプランをご提案します。

KEYWORDキーワード

本サイトではユーザーの利便性向上のためCookieを使用してサービスを提供しています。詳しくはCookieポリシーをご覧ください。

閉じる