プロジェクト概要
大手不動産情報サイトのキャラクターを活用した、マンション購入初心者向けの啓蒙ランディングページ（LP）制作プロジェクトです。クライアントから提供されたワイヤーフレームをもとに、「資金計画や購入の疑問」といった複雑でハードルが高くなりがちな情報を、ユーザーがストレスなく読み進められるようデザイン。既存のブランドガイドラインを遵守したビジュアル構築からHTML/CSSコーディングまでを一貫して担当しました。
基本情報
サイト名：SUUMOカウンター新築マンション
URL：ページ全体のスクリーンショット（※現在はリニューアルによりページが変更されています）
担当領域
Webデザイナー / フロントエンドエンジニア
（ワイヤーフレームからの情報設計・UIデザイン / 図解・インフォグラフィック作成 / HTML・CSSコーディング）
プロジェクトの目的と課題
-
心理的ハードルの払拭: 「不動産購入」や「お金」に関する堅苦しく複雑なテーマを、初心者でも直感的に理解でき、安心して相談できるような親しみやすいコンテンツへと変換すること。
-
ブランドの世界観の体現: 誰もが知る有名な公式キャラクターのトーン＆マナー（配色、世界観、あしらい）を厳格に守り、公式コンテンツとしての信頼感と品質を担保すること。
-
長尺LPにおける離脱防止: 情報量の多い縦長のページにおいて、ユーザーが途中で飽きたり迷ったりしないよう、視線誘導やメリハリを意識したレイアウトを構築すること。
施策とこだわったポイント
1. ワイヤーフレームを直感的な「インフォグラフィック」へ昇華
提供されたワイヤーフレームのテキストやデータ指示をそのまま配置するのではなく、「いかに分かりやすく見せるか」にこだわりました。エリアごとの価格相場マップ、購入タイミングのグラフ、比較表などの要素を、ブランドカラーであるグリーンとオレンジを基調としたインフォグラフィックとして美しく視覚化。対話形式（吹き出し）のUIパーツも効果的に配置し、専門知識がなくても絵本のようにスラスラと読み進められる情報設計を行いました。
2. ブランドガイドラインを遵守した、親しみと信頼感のあるUIデザイン
公式キャラクターの持つ「柔らかさ」「親しみやすさ」を最大限に引き出すため、角丸のUIパーツや、温かみのある手書き風のあしらい、背景のイラスト（街並みや芝生）を取り入れました。同時に、実際の相談風景（写真）や専門家のアドバイスエリアには清潔感のある配色を適用し、親しみやすさの中にも「不動産のプロフェッショナル」としての信頼感を損なわない絶妙なバランスを保っています。
3. デザインの意図を正確にブラウザへ反映させるコーディング
リッチな図解やイラスト、長尺のコンテンツが連続するページであるため、コーディングにおいては表示崩れのない正確な実装を徹底しました。CTA（相談予約などへのアクションボタン）へ自然に誘導するための余白設定や、各セクションの区切りが明確に伝わる見出しのマークアップなど、デザインの持つ「読みやすさ」をブラウザ上で完璧に再現しています。
成果・評価
ブランド価値を損なわず、ユーザーの行動を後押しする高品質なLPの完成
「複雑な情報を分かりやすく翻訳するデザイン力」と「ブランドルールを守り抜く実装力」を高く評価される成果物となりました。マンション購入という人生の大きな決断を控えたユーザーの不安に寄り添い、次のアクション（相談・問い合わせ）への心理的ハードルを大きく下げる、実用的かつ魅力的なランディングページとして機能しています。
