架空の会社、暮らしをデザインするリノベーション会社「HOUSE is」のLPサイトです。SNS広告からLPサイトへ飛んだ後にブランド認知と住宅購入セミナーへ参加していただく事を目的とし、インハウスデザイナーとして企画会議から画像集め・画像修正・デザイン・コーディングまでを担当。1ヶ月半後が納期とすることを想定して制作しました。

制作時間

  • 制作日程：2/6〜3/25
  • 企画：0.5時間
  • リサーチ：2時間
  • ターゲット設定：0.5時間
  • コンセプト：0.5時間
  • ワイヤーフレーム：12時間
  • デザインカンプ：24時間
  • コーディング：27.5時間

制作ツール

figma / Photoshop / Illustrator / HTML / CSS Sass / jQuery

URL

https://gron-design.com/site02/

担当

企画 /画像収集 / 画像編集 / ターゲット設定 / コンセプト / デザイン / コーディング

サイトの目的

住宅購入検討またはリノベーション検討中の方に向けて4点の目標数値を設定

  1. 1.リノベーション無料セミナーへの申し込み件数
  2. 2.問い合わせ件数
  3. 3.資料請求件数
  4. 4.LPサイトからWEBページへの誘導

ターゲット

住宅購入・リノベーションを検討中の方向け

ユーザー感情

家が買いたくなる / 見やすいサイト / 利用したお客様の声が見れる / 中古マンションに安心感を持てる / リノベのイメージが膨らむ / リノベの流れがわかる / セミナーを聴きたくなる / ローンに対する不安が解消される / コラムのファンになる(noteへのリンク)

ページ構成

  1. LPページ
  2. 1stビューロゴ・ナビ・問い合わせとセミナーのボタン
  3. ├カルーセル メインビジュアル
  4. ├コンセプト・理念
  5. ├サービスの流れ
  6. ├事例
  7. ├お客様のお声
  8. ├セミナー、問い合わせのクロージングボタン
  9. └フッター　会社概要とナビ

デザインコンセプト

落ち着いたカラーリング、家をイメージできるアクセントカラーにSOFAやカーテンのような布をイメージしたカラーリング、メインカラーはセメント土間、ベースカラーはきなり壁紙をイメージ。メインビジュアルは事例になるリノベーション後の部屋画像（人なし）、セミナーへの誘導、noteでコラム、スライダーで表示。

コーディングについて

SEOの観点からHTMLのマークアップは基本に忠実に行いました。レスポンシブ対応にし、ブレイクポイントをモバイルとタブレットPCで設定しました。Sassを独学で学び、引数・変数・&を利用した親セレクタの参照・パーシャル・ミックスインを使用したコーディングを行いました。1作目では使用しなかったjQueryを利用し、vegas2・bxslider・ハンバーガーナビを実装しました。

ペルソナ設定A

名前
山田 花
性別
女性
年齢
30歳
家族構成
独身
所在
埼玉県川越市
業種
家電量販店
会社名
株式会社DEF　川越本社勤務
会社資本金
3,000万円
所属部署
経理部
役職
一般事務
年収
400万円
勤続年数
8年
価値観
大きな変化は期待せず日々堅実に生活すること
趣味
ランニング、カフェ巡り、貯蓄
ライフスタイル
貯蓄が溜まり結婚願望はないが一人で生きていくためのマンションが欲しい女性一人でローンが組めるか不安、中古でリノベーションし広いキッチンとおしゃれなリビングのある家が欲しい。情報収集方法はインスタ、リノベーション会社のホームページ、携帯よりパソコンで見ることが多い

ペルソナ設定B

名前
田中太郎
性別
男性
年齢
32歳
家族構成
妻（32歳）、娘（2歳）
所在
東京都練馬区光が丘
業種
TOYOTA池袋支店　車販売の営業職　役職なし
年収
800万（世帯年収1100万
勤続年数
6年
価値観
無謀なことはしない、堅実に正直に
趣味
キャンプ、スノーボード、サッカー
ライフスタイル
千葉の団地で育ったので一軒家よりもマンションを買って住むのが夢新築マンションを購入することはできないので近隣で中古マンションを購入しリノベーションを考えている。リフォームとリノベーションの違いや家を買うことに対する知識はないのでまずは数社相談に行きたい。情報源は主にインスタ、携帯で見ることが多い