プロジェクト概要
Facebook広告と連携する対話型チャットボットツール「BOTCHAN for LP」の新規ランディングページ（LP）制作プロジェクトです。テキスト情報のみが記載された簡易的な要件資料をベースに、ユーザーの課題解決策を直感的に伝えるページ構成（ワイヤーフレーム）を自ら立案。さらに、サービスのアイデンティティとなるロゴデザインの制作から、BtoBツールにふさわしい信頼感のあるビジュアルデザイン、そして正確なフロントエンド実装（コーディング）まで、LP制作の全工程を一人で完遂しました。
基本情報
サイト名：BOTCHAN for LP
URL：ページ全体のスクリーンショット（※現在はリニューアルによりページが変更されています）
サイト種別： BtoB向けSaaS・マーケティングツールのランディングページ
担当領域
Webデザイナー / フロントエンドエンジニア
（サービスロゴ制作 / 簡易資料からの情報設計・ページ構成策定 / 全体UI・ビジュアルデザイン / HTML・CSSコーディング）
プロジェクトの目的と課題
-
抽象的なツールのメリット視覚化: 「対話型LP」という新しい概念のツールがいかにCVR（コンバージョン率）向上に貢献するかを、ターゲット層（マーケターなど）に分かりやすく図解・説明すること。
-
簡易資料からのストーリー構築: 提供されたテキストベースの断片的な情報から、ユーザーが納得して問い合わせアクションを起こすまでの論理的で説得力のあるページ構成を組み立てること。
-
BtoBサービスとしての信頼感醸成: 企業が導入を検討するマーケティングツールとして、先進性とビジネスとしての堅実さ・信頼感を両立させたデザイン設計を行うこと。
施策とこだわったポイント
1. 簡易資料のテキストを「売れるストーリー」へ昇華させる情報設計力
単に提供されたテキストを配置するのではなく、「いかにターゲットの課題に刺さるか」を重視してページ構成を設計しました。導入前の悩みと導入後の効果を対比させる「Before/After」のレイアウトや、集客から獲得までのフローを示す「ご利用イメージ（1.集客 2.接客 3.獲得）」の図解など、文字情報を視覚的なインフォグラフィックに変換し、流し読みでもツールのベネフィットが伝わる構成を作り上げています。
2. サービスの顔となるロゴ制作と、信頼感あるトーン＆マナーの確立
サービスの立ち上げに伴い、ロゴデザインから担当しました。「チャットボットによる対話」というサービスのコアバリューを、吹き出しをモチーフにしたシンプルで視認性の高いアイコンで表現。このロゴを起点として、LP全体を「先進性」と「BtoBの信頼感」を感じさせる知的でクリーンなブルーを基調としたトーン＆マナーで統一し、ブランドの説得力を高めました。
3. 利用イメージを具体化するUIデザインと、CVを後押しする確実な実装
ユーザーが実際の利用シーンを想像しやすいよう、ファーストビューや特徴の解説エリアにスマートフォンのモックアップ（チャット画面）を効果的に配置しました。また、コンバージョン（CV）の要となるCTA（お問い合わせ・資料請求）エリアは、スクロール中でもパッと目が留まるようメリハリを効かせた配色とレイアウトに設計。デザインの意図をブラウザ上で寸分違わず再現するコーディングまでを一貫して行い、機能するLPを完成させました。
成果・評価
簡易要件からの情報整理と、一貫したLP制作の完遂
「掲載内容のみ」が用意された初期段階から、ターゲットに伝わる論理的なページ構成への落とし込み、ロゴを含むビジュアルデザイン、フロントエンド実装までを横断的に担当しました。限られた情報からでもサービスの意図を汲み取り、ユーザーに届く形へと具現化することで、新規LPのスムーズな立ち上げに貢献しました。
