プロジェクト概要
自社開発のRPAツール「マクロマン」における、「導入支援パック」の新規ランディングページ（LP）制作プロジェクトです。事業部内のミーティングに参加し、担当者から口頭でヒアリングした「LPで伝えたい内容・訴求したいポイント」をもとに、自らページ構成を考案してワイヤーフレーム（WF）を作成。その後のビジュアルデザイン、およびHTML/CSSによるコーディングまで、全工程を一気通貫で担当しました。
基本情報
プロジェクト: 「マクロマン導入支援パック」新規LP制作
サイト種別: ランディングページ（BtoB・リード獲得および販売用）
※現在はLPが閉鎖となっております
担当領域
Webディレクター / Webデザイナー / フロントエンドエンジニア
（口頭ヒアリングからの情報設計・WF作成 / ビジュアルデザイン / HTML・CSSコーディング）
プロジェクトの目的と課題
- ゼロベースからの情報設計（IA）: 用意された原稿や設計図がない状態から、事業部の意図を正確に汲み取り、ユーザーに魅力が伝わる論理的なページ構成（ストーリー）を組み立てること。
- 価格メリットの最大化: 「初期費用4万円」という強力なオファーをフックにし、ファーストビューでの離脱を防いでコンバージョン（問い合わせ・申し込み）へと繋げること。
- BtoB商材における「わかりやすさ」の提供: RPAという専門性の高いITツールに対し、イラストや図解を用いて心理的ハードルを下げ、親しみやすさと信頼感を両立させたデザインを作成すること。
施策とこだわったポイント
1. ヒアリングを基にしたワイヤーフレームの構築
事業部からの口頭での要望を整理し、「ターゲットの課題提起」→「マクロマンの特徴」→「導入の流れ」→「料金プラン」という、LPの王道かつ納得感のあるストーリーラインを構築しました。情報をただ羅列するのではなく、自らワイヤーフレームを引き、プロジェクトメンバーと認識を合わせた上でデザイン工程へと進めています。
2. メリハリの効いた訴求力の高いデザイン
ファーストビューでは、「月額4万円!?」という最大のメリットが瞬時に目に飛び込んでくるよう、数字を大きく扱い、オレンジのアクセントカラーを用いて視認性を高めました。ページ全体を通してネイビーとオレンジのコントラストを効かせ、ユーザーの視線をスムーズに誘導するメリハリのあるレイアウトを採用しています。
3. イラストと図解を用いた視覚的な理解促進
BtoB商材特有の堅苦しさを払拭するため、オリジナルキャラクターやフラットなイラストを随所に配置しました。テキストだけでなく図解（比較表やステップ図）を効果的に用いることで、サービスの仕組みやサポート体制を直感的に理解しやすいページへと仕上げています。
成果・評価
要件定義から実装までを一人で完結させる総合的な対応力
「デザインを作る」だけでなく、事業部のビジネス的な要望をヒアリングから引き出し、ワイヤーフレームという形にして合意形成を図るディレクション業務から完遂しました。情報設計、ビジュアルデザイン、コーディングの全領域を単独でカバーし、企業の販促活動をスピーディーに形にする総合的なWeb制作能力を示す実績です。
