プロジェクト概要
Web接客ツール「BOTCHAN」の導入実績を紹介するメディアサイト（LP型）のデザイン制作案件です。B2B向けのSaaS商材において、見込み顧客が自社の課題や業種に近い事例をスムーズに探せるよう、検索性や情報の見やすさに重点を置いたUIデザイン（視覚設計・レイアウト構築）を担当しました。
基本情報
プロジェクト: 「BOTCHAN」導入事例メディアサイトのデザイン制作
サイト種別: 導入事例メディア・リード獲得用ページ
担当領域
Webデザイナー（情報設計 / UIデザイン / ビジュアルデザイン作成）
プロジェクトの目的と課題
-
目的の事例への到達しやすさ: 多数の事例コンテンツの中から、ユーザーが「業種」「課題」「プロダクト」などの条件で迷わず検索できる直感的なUIを構築すること。
-
情報のスキャン（拾い読み）のしやすさ: 一覧に並ぶ記事に対して、どのような企業のどんな実績かがひと目でわかる整然としたレイアウトを作成すること。
-
B2B商材としての信頼感と親しみやすさ: ブランドカラーであるブルーを基調とし、SaaSツールらしい先進性と親しみやすいトーン＆マナーで全体をまとめること。
施策とこだわったポイント
1. 検索性と回遊性を高める絞り込みUI（タグ検索）
テキスト検索バーに加え、「業種から探す」「課題から探す」「プロダクトから探す」という3つの軸でカテゴリタグ（チップUI）を配置しました。ユーザーが直感的にクリックして事例を絞り込めるようにし、目的の情報へストレスなく誘導する情報設計を行っています。
2. 情報の優先順位を整理したカードデザイン
事例一覧の各記事はカード型UIを採用し、「アイキャッチ画像」「企業名」「記事タイトル」「関連タグ」を整理して配置しました。余白を十分に取ることで視覚的なノイズを減らし、ユーザーがページをスクロールしながらでも情報を拾い読みしやすいよう可読性を高めています。
3. ブランドの世界観を体現するビジュアル表現
ファーストビューや背景には、ブランドを象徴するブルーのグラデーションと幾何学模様を配置し、B2Bツールとしての信頼感を表現しました。また、アクセントとしてフラットな人物イラストを添えることで、無機質になりすぎない親しみやすさもプラスしています。
成果・評価
ユーザー視点での情報整理と、ブランドを体現するUIデザイン力
豊富な事例コンテンツをただ並べるのではなく、ターゲット（見込み顧客）が「自社に似た事例」を探しやすいように情報を整理し、使い勝手の良いインターフェースへと落とし込みました。B2Bマーケティングにおいて重要な役割を果たす「導入事例」を効果的に見せ、リード獲得（資料ダウンロード等）を後押しするメディアデザインの実務能力を示す実績です。
