プロジェクト概要
AI×有人のハイブリッド型Web接客・チャットボットツール「BOTCHAN CONCIERGE」の新規ランディングページ（LP）デザイン制作案件です。ディレクターから提供された白黒のワイヤーフレーム（WF）をもとに、サービスの顔となるファーストビュー（FV）のデザイン案を複数パターン考案し、全体のビジュアルデザインを作成しました。
ワイヤーフレームと３つのデザイン案
ワイヤーフレーム
デザイン案（FV部分のみ）
A案
B案
C案
基本情報
プロジェクト: チャットボットツール「BOTCHAN CONCIERGE」新規LP制作
サイト種別: ランディングページ（BtoB・サービス紹介用）
担当領域
Webデザイナー（提供WFを基にしたビジュアルデザイン / FVの複数パターン提案）
プロジェクトの目的と課題
- 骨組みからのビジュアルコンセプト策定: レイアウトとテキストのみが指定された簡素なワイヤーフレームから、サービスの強みやターゲット層を理解し、適切なトーン＆マナーをデザインとして定義すること。
- 重要度の高いファーストビュー（FV）の方向性出し: ユーザーの離脱を左右するFVにおいて、1つのテイストに決め打ちするのではなく、クライアントやチームが比較検討できるよう複数のアプローチを提案すること。
- 無形商材（ITツール）の直感的な表現: チャットボットという形のないソフトウェアサービスを、ひと目で「何ができるツールか」伝わるように視覚化すること。
施策とこだわったポイント
1. 意図を汲み取った複数パターンのデザイン提案
最も重要なファーストビュー（FV）において、テイストの異なる3つのデザイン案を作成しました。「多数のデバイスを配置した先進的でクリーンな案」「実際の利用シーンを連想させる人物背景の案」「スタイリッシュなグラデーションを用いた案」を用意することで、プロジェクトの目的に最適なビジュアルをチームで選択できる状態を作りました。
2. サービスの魅力を伝えるモックアップの活用
チャットボットツールの使い勝手を直感的に伝えるため、スマートフォンのモックアップ（枠）の中に実際のチャットUI画面をはめ込んだグラフィックを作成しました。ユーザーが自身のサイトに導入した際のイメージが湧きやすいよう、リアルで説得力のあるビジュアルを作り込んでいます。
3. ワイヤーフレームの的確な視覚化と情報整理
提供されたワイヤーフレームは要素の配置のみを示す簡素なものでしたが、デザインに落とし込む過程で余白（マージン）や文字のジャンプ率を調整し、情報の優先順位を明確にしました。BtoB向けのSaaSツールとして求められる「信頼感」と「先進性」を両立させたレイアウトを構築しています。
成果・評価
設計図を魅力的な選択肢へと広げる、高いデザイン提案力
骨組みであるワイヤーフレームの意図を正確に読み取り、そこからターゲットに響く複数のビジュアルコンセプトを自ら導き出して形にしました。単なる「作業者」として指示通りに絵を作るのではなく、多様な表現方法を提示してプロジェクトの質を底上げできる、デザイナーとしての提案力とビジュアル構築能力を示す実績です。
