UI/UX改善案の提案
検証日時
検証済みAIサービス
# 役割 あなたはプロダクトデザイナーです。 ## 指示 現状の画面キャプチャや説明をもとに、ユーザーの離脱を防ぎ、操作性を向上させるための具体的なデザイン・配置の変更案を提案してください。
アウトプットのイメージ
アウトプットのイメージをサービスごとに切り替えて確認しよう!
プロダクトデザイナーの視点から、提供いただいた「USEN GATE 02」のファーストビュー(画面最上部)における、ユーザーの離脱を防ぎ、次のアクションへ迷わず誘導(操作性向上)するための具体的なデザイン・配置の変更案を提案いたします。
現在のデザインは、信頼感のあるブルーを基調に情報が整然と並んでいますが、B2Bサイト特有の「要素の多さ」が原因で、ユーザーがどこを見ていいか迷う(選択のパラドックス)状態が起きている可能性があります。
1. CTA(行動喚起ボタン)の最適化と優先順位の明確化
現在のファーストビューには、メインビジュアル内に3つ、ヘッダーに2つ、右下に1つと、多くのコンバージョン導線が混在しています。
- 課題: 「資料ダウンロード」と「お問い合わせ」の視覚的重み(インプレッション)が近く、ユーザーが迷って離脱する原因になります。
- 改善案:
- プライマリCTA(最優先)の固定: まだ検討段階が浅いユーザーでもハードルが低い「サービス資料を一括ダウンロード」を最優先(プライマリ)とし、最も目立つ「オレンジのベタ塗りボタン」に変更します。
- セカンダリCTAの控えめ化: 「お問い合わせ」は「白背景+オレンジ枠線(アウトラインボタン)」、または「USEN GATE 02とは」と並べてスマートなデザインにし、視覚的な強弱(ジャンプ率)をつけます。
- ボタン数の削減: メインビジュアル内のボタンは3つから2つ(「資料ダウンロード」と「お問い合わせ」)に絞り、「〜とは」はスクロールを促すか、テキストリンクとしてファーストビュー下部に逃がすことで、視覚的ノイズを減らします。
2. ヘッダー情報の整理(情報設計の引き算)
ターゲット(新規の検討顧客、既存のサポート顧客、パートナー企業など)の異なるリンクがヘッダーに密集しています。
- 課題: 電話番号、営業時間、サポート、コーポレートサイト等のテキスト情報が多く、視線がグローバルナビゲーションに到達する前に疲れてしまいます。
- 改善案:
- ユーティリティエリアの明確な分離: 最上部の「コーポレートサイト」がある細いエリアに、「よくあるご質問」「パートナー募集」「ユーザーサポート」などの既存顧客・身内向けリンクを完全に集約します。
- メインヘッダーの簡素化: 新規顧客向けの「お知らせ」「電話番号(フォントサイズをやや下げてスマートに)」「お問い合わせボタン」のみをヘッダー右側に残し、余白(ホワイトスペース)を確保して操作性を向上させます。
3. 「何ができるか」のファーストビューでの可視化
キャッチコピー「情シスが企業の成長を加速させる」はメッセージ性がありますが、具体的にどんなソリューション(回線、セキュリティ、クラウドなど)を提供しているのかが、スクロールしないと分かりません。
- 課題: 下部に他社ロゴが並んでいますが、これだけでは「USENが何をしてくれるのか」の具体的なイメージが湧きにくく、自分に関係のないサイトと判断されて離脱されるリスクがあります。
- 改善案:
- カテゴリーキーワードの追加: キャッチコピーの下、またはロゴエリアの直上に、「ネットワーク」「クラウド」「セキュリティ」「データセンター」といった主要サービス領域を、シンプルなピクトグラム(アイコン)と共に4〜5個横並びで配置します。これにより、ユーザーは一瞬で「自分の課題を解決できるサイトか」を判断できます。
4. フローティングチャット(右下バナー)の挙動とデザイン調整
- 課題: 右下の「チャットで質問する」のキャラクターバナーは目立ちますが、現在のサイズだと下部のパートナーロゴやコンテンツに重なっており、UIとして少し窮屈な印象を与えます。
- 改善案:
- 初期状態のコンパクト化: ページ読み込み時は、円形のシンプルなチャットアイコン(または小さな吹き出し)のみを表示させておきます。
- インタラクションの導入: ユーザーがページを10%ほどスクロールした際、または5秒以上滞在した際に、ふわっと現在のキャラクターとメッセージがポップアップする仕様にすることで、ファーストビューの視覚的邪魔にならず、かつ効果的に注意を引くことができます。
まとめ:改善配置イメージ
- ヘッダー上部: 既存顧客向けリンク(サポート、FAQ、パートナー)を格納しスッキリさせる。
- メインビジュアル中央:
- [キャッチコピー]
- [主要機能のアイコン4つ(回線 / セキュリティ / クラウド...)]
- [ 資料を一括ダウンロード(オレンジベタ) ] [ お問い合わせ(白背景・枠線) ]
- メインビジュアル下部: パートナーロゴ(現状維持、ただしチャットボットとの重なりを解消)。
この情報階層の整理(コントラストの強化)を行うことで、ユーザーは迷うことなく「資料ダウンロード」や「次のスクロール」へと誘導され、直帰率の改善が期待できます。
