会社のウェブサイトを再設計する

ウェブサイトの明確さを測定可能なビジネス効果に変える。

私はVirtusize.comのUXを完全に再設計するプロジェクトを主導しました。調査、情報設計、ユーザーインターフェース、スタイルガイド、そしてフロントエンドの実装までを担当しました。CEO、成長戦略チーム、マーケティングチームと直接協力して、複雑だった商品ページをリード獲得のための優れたページに作り変えました。

Timeline

2025年2月 - 2025年11月

Team

CEO、成長、マーケティング

Role

UX/UIデザイナー & プロジェクトマネージャー

Skills

UXリサーチ · 情報アーキテクチャ · UIデザイン · ブランディング · フロントエンド開発

ダッシュボードサイドバーを閉じる

問題点


Virtusizeは本当に良い製品を持っていました。しかし、そのウェブサイトは役割を果たしていませんでした。見込み顧客はサイトにアクセスしても、何を見ているのか理解できず、離れていってしまうのです。営業チームはアウトバウンドモードに閉じ込められ、インバウンドは何も価値のあるものを生み出していませんでした。

私は常に出発点とするところから始めました。それは、痛みを最も近くで感じている人々と共にです。成長およびマーケティングチームとのインタビューが予想外のものを浮き彫りにしました:クライアントのメールはフィードバックの宝庫だったのです。人々はただ黙って去っていくわけではありませんでした。彼らは、サイトが既に回答すべき基本的な質問を混乱しながら尋ねてきていました。

問題なのは製品ではありませんでした。それについて我々が語っていたストーリーでした。


3つの問題点がありました:価値提案が埋もれていること、情報アーキテクチャに明確なコンバージョンへの道筋がないこと、そしてサイトが重要な検索に表示されていないこと。私たちは単にリードを失っただけではなく、存在そのものが見えなくなっていました。

私が一緒に働いていた人


これは一人でのリデザインではありませんでした。私はCEOと直接デザインの方向性とビジネスの優先順位について協力し、成長チームに組み込み、販売ファネルのギャップを理解し、マーケティングとSEO戦略やコンテンツの再構築について協力しました。すべての重要な決定はステークホルダーによるレビューを通過し、それはつまり、説明できてなおかつ見せることができるデザインをする必要がありました。

それは異なる種類のデザインの挑戦です。ユーザーのためだけでなく、部屋のためにも解決しなければならないのです。

プロセス


フレームに触れる前に、データと競争環境をじっくりと分析しました。トップのSaaSおよびeコマース企業がどのようにランディングページを構成しているか、信頼を築き、訪問者をデモに誘導する情報の順序を調査しました。SEOについても掘り下げました: どのキーワードを取り入れるべきか、どこで地位を失っているか、なぜ競合が私たちの勝つべき検索で上位にランクインしているのか。


調査の結果、ウェブサイトが製品に対する私たちの考え方に基づいて構成されており、潜在的なクライアントがそれを理解しようとする方法に沿っていないという核心的な問題が指摘されました。修正は見た目だけのものではなく、構造的なものでした。


情報アーキテクチャをゼロから再構築しました:トップレベルのナビゲーションを再定義し、機能カテゴリではなくユーザーのニーズに基づいて製品ページをグループ化し、実際に収益をあげる2つの行動、つまりデモの予約とお問い合わせの送信への明確な経路を作成しました。

サイトマップの再設計は地味な作業です。しかし、それが最も影響をもたらした部分でもあります。

私が制作したもの


再設計されたランディングページは、明確なミッションステートメントと人間味のあるヒーロー画像を中心に構成されていました。これは抽象的な製品ビジュアルから、最初の3秒内に信頼感を伝えるものへと移行するものでした。B2Bのバイヤーは美的感覚ではコンバートしないため、データに裏付けられた信頼性のあるセクションを、ファーストビューに追加しました。彼らは信頼に基づいてコンバートします。


製品ページにはデモ動画を導入し、シンプルなモーダルフローを取り入れ、成長チームがよく耳にしていた質問『接続するのはどれくらい大変なのか?』に答える統合ガイドビジュアルを作成しました。彼らが質問をする前に、私たちはその答えを用意しました。

また、更新されたタイポグラフィ階層、アクセシブルなカラーパレット、再利用可能なコンポーネントライブラリを含む完全なスタイルガイドの刷新も行いました。これにより、将来の更新が不整合に戻ることはありません。


そして、私は開発者と一緒にそれを実装するのを手伝いました。長時間、Visual QAの修正と調整を行いながらも、乗り越えました。HTML、CSS、JavaScript、Webflowです。

抽出された通貨モジュール
ダッシュボード全体

このケーススタディの本当の目的


これは、デザインが仕上げのステップではなく、ビジネス機能として扱われたときに何が起きるかについてです。成長チームは、もっと見た目の良いウェブサイトを求めていたのではありません。彼らが求めていたのは、売れるウェブサイトです。それらは異なる依頼事項であり、その違いを理解することが仕事全体です。


ステークホルダーの調整はソフトスキルではなく、デザインの制約であることを学びました。すべての決定は、成功の定義が異なる人々の集まりで生き残らなければなりませんでした。そのためにデザインし、プレゼンする方法を学んだことで、プロジェクトが始まった時よりも明らかに優れたデザイナーになれました。


私が構築した中で最も役立ったものは、コンポーネントやページではなく、そのウェブサイトの実際の目的に対する共有の明確さでした。

インターネットの数多くの場所の中から、あなたはここにたどり着きました。UBからLA、そして東京を経て、あなたの画面にたどり着いたこの冒険、私たちにとっても刺激的な旅でした。何かを感じてもらえたら嬉しいです。

インターネットの数多くの場所の中から、あなたはここにたどり着きました。UBからLA、そして東京を経て、あなたの画面にたどり着いたこの冒険、私たちにとっても刺激的な旅でした。何かを感じてもらえたら嬉しいです。

インターネットの数多くの場所の中から、あなたはここにたどり着きました。UBからLA、そして東京を経て、あなたの画面にたどり着いたこの冒険、私たちにとっても刺激的な旅でした。何かを感じてもらえたら嬉しいです。

Create a free website with Framer, the website builder loved by startups, designers and agencies.