トップページへ戻る

注文住宅サイトのデザイン・コンテンツを解説!

この記事を書いた人 :

注文住宅サイトのデザイン・コンテンツを解説!

もし、あなたが注文住宅メーカーの広報担当で、新たにWEBサイトの立ち上げを任されたら、まず何から着手しますか?これまで自社カタログや、住宅情報誌の広告制作など、紙媒体がメインだったとしたら、WEBサイトの作り方は、全く勝手が異なりますので、きっと戸惑うことでしょう。WEBサイトはカタログのようにキレイにデザインすれば良いというものではありません。

WEBサイトの作り方に関するノウハウは、ネット上で無数に溢れていますが、何から手を着ければ良いのか分からないため、見れば見るほど迷ってしまうでしょう。WEBサイトを作る上で必要な項目を、「デザイン・UI」「コンテンツ」「スマホ対応」に絞って紹介します。また、WEBサイトは作ることがゴールではなく、WEBサイトを閲覧してくれる人を集める活動もしなくてはなりません。そこで、WEBサイトのプロモーション方法についても解説します。

以上の項目を紹介しつつ、では「先行事例」はどうなっているのか、その傾向もお伝えします。先行事例については、「注文住宅」のキーワードで検索した結果、上位表示されているハウスメーカー(ポータルサイト等を除く)の例を紹介します。

サイト公開まで長い道のりかもしれませんが、あなたにとってサイト作りの手助けとなれば幸いです。

関連タグ:
今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ

注文住宅サイトの主なデザインとUI

WEBサイトを作る時、制作担当者の多くが一番気にするのはTOPの作り方ではないでしょうか?TOPページはWEBサイトの顔であり、ひいては、企業の印象を決定づける最も重要なページです。紙媒体の出身者なら「キレイにデザインするのが一番!」とデザインだけを重視してしまいがちですが、WEBサイトではそうはいきません。

TOPページの役割

TOPページは、サイトに訪れたユーザーが知りたい情報がひと目で分かるよう、「見やすさ」「使いやすさ」が必要になります。確かに見た目のキレイさも大切ですが、デザインと切り離せないもう一つの重要な要素がUIです。ちなみにUIとは、User Interface(ユーザーインターフェイス)の頭文字を取ったもので、サイト訪問者が、見にくい、使いにくいなどのストレスを与えることなく、快適に使ってもらうためにサイトをデザインする考え方です。

このUIが優れているか否かで、サイトの利用、ひいてはサービスの利用に直結します。どんなにユーザーに有益な情報を発信しても、サイトのデザインが見にくく、使いづらいのであれば、問い合わせや購入につながることなく離脱されてします。従って、サイトを新しく立ち上げるなら、デザインだけでなく、UIにも注力しなければなりません。

ファーストビュー

ファーストビューとは、ユーザーがWEBサイトを訪問した際、最初に表示される部分のことです。「第一印象は3秒で決まる」とよく言われますが、ユーザーはこのファーストビューで、読み進めるメリットはあるかを判断すると言われています。従って、WEBサイトを作るなら、このファーストビューで何の情報を伝えたいのかが重要になります。上位サイトの「大和ハウス」「住友林業」「ミサワホーム」の3サイトを調査したところ、大和ハウス、住友林業では、ファーストビューが横にスライドして切り替わり、企業メッセージや住宅画像などが掲載されていたり、ミサワホームでは、住宅の様子を動画で紹介されたりしています。

サイトカラー

WEBサイトは、一番最初に見られるファーストビューにこだわるのは当然ですが、サイト全体を通じたカラーも重要です。訪問ユーザーは、自分たちが思っている以上に、カラーからの影響を受けています、パッと見た瞬間、「見ていて気持ちが良い色」とか、「何だかスッキリしなしなくてモヤモヤする色」など、無意識のうちに判断しています。

人の印象に残したいから、目立つようにカラーを複数使いたい、という方もいらっしゃるかもしれません。しかし、カラーの配色が多すぎると、見た目がゴチャゴチャしてしまい、読みにくい印象を与えてしまうため、サイトの配色は3色程度にとどめて、各色の比率を70%を「ベースカラー」、25%を「メインカラー」、5%を「サブカラー」とするのが望ましいでしょう。この比率にするとサイトの見た目が美しくなり、サイト訪問者に「きれい!」「見やすい!」など、好印象を与えることができます。

  • ベースカラー…最も大きな面積を占める基本となる色。余白や背景などで用いられることが多い色です。
  • メインカラー…サイトの印象を決定づける主役の色。
  • サブカラー…全体の5%と少ないながらも目立つ色。全体を引き締めて、見る人の目を引きます。

ちなみに、上位3社の傾向を見てみると、サイトの多くをしめる「ベースカラー」は、大和ハウス、ミサワホームは「白」を選んでいました。これは、住宅の「清潔感」や、新しい生活への「憧憬」を表しているのではないでしょうか、住友林業は白を使ってはいますが、ベースカラーは「緑」でサイト全体を通じて、「森の木々」の写真が配置されています。同社の創業の原点でもある林業、そして緑のイメージで統一したいサイト作りの意図が感じました。

メインとなるカラーは、注文住宅の場合、「住宅画像」がメインですので、外観、内観、リビング、キッチンなどの画像が中心となっていました。最後にサブカラーは、大和ハウスが、同社のロゴマークのカラーでもある「赤」、ミサワホームは、「青」でこれもロゴマークのカラーを意識しているものと思われます。住友林業は、やはり木をイメージしたのでしょうか、「薄緑」を使っていました。

フォントサイズ

フォントサイズ(文字の大きさ)は、全体的に小さくて控え目の印象があります。これは、やはりサイトの主役は「画像」で、その画像の引き立たせる役目が文字といった感じを受けました。各サイトのフォントを確認したところ、主に以下のフォントを使用しておりました。

  • 大和ハウス…メイリオ、MSPゴシック、Arialなど
  • ミサワホーム…ヒラギノ角ゴ、游ゴシック、メイリオなど
  • 住友林業…ヒラギノ角ゴ Pro W3、メイリオ、MSPゴシックなど

今回は、あくまでも特定のサイトから調査した傾向値でしかありません。
良質なWebサイトを作るためのヒントは、競合他社のサイトの中に、もっとたくさんあります。
そのためにも多くのサイトデータを集めて分析することが、自社サイトを成功に導くセオリーのひとつです。
とはいえ、集めなければならないデータ、そして同じ分量だけ分析しなければならないとなると、時間も労力もかかってしまいます。

競合他社サイトの情報収集を魔法のようにワンクリックでできたら良いですよね?…実は、data maisonなら、あなたのその願いを叶えられます!
data maisonは、気になる競合サイト、新勢力企業のサイト、業界全体のサイトなどのデータをワンクリックで手軽に手に入れられるツールです。あなたがベンチマークしているサイトについて、今回紹介しているような「TOPページの構成」「サイトカラー」や「フォントサイズ」などの情報も手に入りますし、業界全体のファーストビューの傾向、コンテンツの傾向なども確認できます。

本来はWeb担当者やデザイナーなどが、自分でサイトを抽出して苦労しながら調査していたことを、data maisonならたった165円~※という圧倒的な低価格で、最新の業界データを一瞬で手に入れることができます。
ぜひ、今までの煩わしい調査から解放される魔法のような調査体験を経験してみてください。
もっと注文住宅サイトの傾向を知ろう!

注文住宅サイトで謳っているコンテンツ

コンテンツとは、「情報の中身」のことを意味します。「情報」と一口でいっても、文章、画像、動画など、WEBサイトを構成する全ての情報が含まれます。これからWEBサイトを作る上で、「どんなコンテンツで構成すれば良いのか?」も頭を悩ますことでしょう。その場合は、まずは検索上位サイトの傾向を調べてから、自社サイトでどう活かすかを考えることが近道です。

TOPページに記載されている「サイトマップ」を見ると、コンテンツの全体像が一目で分かります。しかし、企業規模によってもコンテンツ量の差がありますので、あくまでも上位サイトのコンテンツを参考にしつつ、自社ではどんなコンテンツを載せるべきか検討しましょう。作るのは企業側ですが、あくまでも見るのはユーザーですので、注文住宅の建築を検討中のユーザーが欲しい情報を載せるのがポイントです。

自社の強み

自社の強みとは、サイト訪問者に対する「自己アピール」のようなものです。例えば、ローコストで家が建てられる、耐震性に優れた家づくりに自信がある、特定の地域での施工実績が多いなど、自社商品の特徴、他社との違い、お客さまから選ばれる理由を紹介します。しかし、自己アピールだけでは、サイト訪問者にとって、自分に何の得があるのかピンときません。そこで、次のような内容も加えると、自社の強みがより明確になり、説得力が増します。

  • 「自社の強み」からお客さまが得られるメリットは何か?
  • 「自社の強み」はなぜ提供することが可能なのか?
  • 「自社の強み」にこだわる理由は何か?
  • 「自社の強み」は競合他社と比べてどんな優位性があるのか?
  • 「自社の強み」の過去の実績は?(具体的な数字で表す)

商品ラインナップ

商品ラインナップとは、住宅商品のことで、注文住宅でいえば、デザイン住宅、地震に強い住宅、木の家、二世帯住宅など、お客さまのニーズに合わせた商品を紹介します。外観、内観、間取り、住宅設備(キッチン・お風呂など)を写真や図で紹介するとイメージもしやすくなります。

家づくりの流れ

注文住宅サイトの訪問者は、住宅購入がはじめての方がほとんどですので、何から準備をすれば良いのか分からないでしょう。そこで、お問い合わせから、業者決定、打合せ、施工、引き渡しまでのプロセスを紹介。プロセスごとの内容をテキスト、写真、かかる期間も紹介すれば、全体の流れが掴みやすくなります。

保証内容・アフターフォロー

住宅購入は、一生のうちに一度あるかないかの大きな買い物ですので、購入後にどんな保証があるのかも気になるところです。「瑕疵担保保証」「住宅完成保証」「地盤保証」など、完成後の保証内容に関するコンテンツがあると、安心感につながります。

施工事例

サイト訪問者は、「この会社に依頼すれば、どんな家ができるのか?」完成イメージにも関心があるはず。実際に施工した邸宅の外観、内観(リビング・ダイニング・キッチン)エクステリア、ガレージなど全体像が分かる写真も紹介しましょう。さらに、お客さまの体験談(住宅購入の経緯や住んでみての感想など)もあれば、「自分もここに依頼してみようかな…」と、興味をわかせることが可能です。

会社概要

住宅商品がどんなに気に入っても、やはり住宅は大きな買い物ですので、本当にこの会社に依頼しても良いのか、まだ戸惑いを感じているかもしれません。そこで、どんな会社なのか、そのプロフィールを確認した時に、会社情報は、会社の信用性をあらわるコンテンツといえます。注文住宅メーカーの企業規模によって、情報量の差はありますが、会社情報には、主に次のような記載があります。

  • 企業トップメッセージ(会社の運営方針など)
  • 事業概要(住宅事業・マンション事業・建築事業など)
  • 会社概要(社名・所在地・連絡先・創業・代表者・資本金・従業員数・決算期・売上高など)
  • 拠点情報(事業所・住宅展示場などの紹介)
  • 企業歴史(創業から現在に至るまでの流れを時系列で紹介)など

カタログ・資料請求

WEBサイトで発信する全ての情報は、おそらくこのコンテンツに辿り着かせるための、布石ともいえるのではないでしょうか。費用をかけてWEBサイトを作る以上は、お客さまをより多く獲得することが目的ですので、カタログ・資料請求のコンテンツは、内容の分かりやすさは去ることながら、資料請求フォームの「入力のしやすさ」「使いやすさ」などにも細心の注意を払う必要があります。

というものの、せっかく関心を持って、資料請求しようとしても、このコンテンツが、情報がゴチャゴチャして分かりにくく、入力もしにくいと操作にストレス感を与えることになり、すぐに離脱されてしまう可能性があります。それはせっかくのチャンスをみすみす逃すようなもの。どんな項目を入れて、どのようなレイアウトにすれば良いのか、事例を紹介しますので参考にしてみて下さい。

<資料請求フォーム項目>

  • お名前(姓・名)
  • フリガナ(セイ・メイ)
  • 住所(郵便番号・都道府県・市区町村・番地・マンション名など)
  • 電話番号
  • メールアドレス
  • 意見・要望記入欄 など
レイアウト事例

注文住宅サイトのスマホ対応

近年までは、WEBサイトはPC(パソコン)で見ることを前提に作られてきました。机の上に置かれたデスクトップPCの画面を見ながら、マウスを動かして、見たい情報、欲しい情報を探すスタイルが主流でした。

しかし、スマートフォン(スマホ)の急激な普及によって、情報の検索スタイルが変わり、現在では、スマホをタップして情報を探すスタイルが、もはや当たり前になっています。

ですので、PC用の「WEBサイトが完成した~!」と安堵しても、それがスマホ未対応のサイトの場合、スマホで表示した際に、文字や画像が小さくて見えづらかったり、バナーやボタンが小さくてタップしにくかったりなど、スマホユーザーにストレスを与えてしまい、サイトから離脱される可能性があります。

これでは、せっかく訪問してくれたユーザーを、わざわざ逃してしまうようなもの。さらに、スマホ未対応のサイトは、検索順位が下がるデメリットも生じます。これは、スマホを快適に利用してもらうためのGoogleが行った施策ですので、「スマホ対応が面倒…」と放置することは、もはやできず、サイトを新規で開設する以上、どの業界・業種であっても避けることはできません。もちろん、注文住宅業界もしかりです。

注文住宅サイトのプロモーション方法

WEBサイトは完成したら、それで終わりではありません。サイトに多くの人が訪問してもらい、見て欲しいページに流入させて、商品サービスの購入、あるいは問い合わせに繋げることが最終目的です。

まずは、サイトに人を集めるための施策を打たなければなりません。そこで、必要なのがWEBプロモーションです。WEBで公開している商品サービスの宣伝を行い、広範囲に渡ってユーザーに告知することが主な目的です。

企業や商品サービスによって、WEBプロモーションの取り組み方も様々ですが、主に次のような方法があります。

WEBプロモーションの主な内容

  • SEO
  • リスティング広告
  • SNS
  • ダイレクトメール
  • 動画(Youtube) など
プロモーション手段 メリット デメリット
SEO ・スモールキーワードで成果を出せる
・自身で投稿すれば外注する必要もなく費用がかからない
・効果が出るまで時間がかかる
・記事作成の手間がかかる
ダイレクトメール ・見込み客を囲え高額商品を販売しやすい ・メール作成の時間と手間がかかる
・定額商品の場合、費用対効果が悪い
SNS(Twitter等) ・バズればサイトへの流入が急増する ・フォロワーが少ないと効果がない
・拡散されやすいネタでないと効果がない
リスティング広告 ・即効性があり、集客を急ぐ場合に有効
・確実にアクセスを稼げる
・継続的に費用が発生する
・成約できるかどうかはサイトの品質次第
YouTube ・ジャンルによっては強豪が少ない
・サイトによりアクセスが多い場合もある
・効果が出るまでに時間がかかる
・動画撮影、編集などの手間がかかる

大和ハウスのプロモーションの取り組み

大和ハウスの公式サイトを調査したところ、「メールマガジン」「Facebook」「YouTube」の3つの媒体を活用していました。各媒体の主な特徴を紹介します。

  • メールマガジン…暮らしに役立つ情報から、住まい探しの参考になる情報を発信。
  • Facebook…大和ハウス住宅の施工事例を写真(外観・内装など)で紹介。
  • YouTube…大和ハウス住宅事業部のテレビCM・メイキング動画・スタッフ(営業・設計・工事)を紹介。

住友林業のプロモーションの取り組み

住友林業のサイトをチェックしたところ、WEBプロモーションとして、主に次のような取り組みを行っておりました。

LINE

「木」をモチーフとしたオリジナルキャラクター「きこりん」のLINE公式アカウント。「木を使った伝統工芸品」を紹介するコンテンツや、お子様向けの「夏休み宿題」「お弁当作り」などの動画コンテンツを配信。

インスタグラム

和風や洋風など、住宅様式別で「外観」「リビング」「ダイニング」「玄関」などの施工事例を豊富に掲載。画面にカーソルを合わせると「いいね(♥)」の数が表示されます。注文住宅のイメージ作りに役立つコンテンツ。

など

ミサワホームのプロモーションの取り組み

ミサワホームのサイトをチェックしたところ、WEBプロモーションとして、次のような取り組みを行っておりました。

Facebook

WEBサイト内にある「建築事例」の紹介ページをFacebookでシェアする形で掲載されています。建築事例の紹介ページでは、ページの上部に「注文住宅の外観」を配置。どんな住宅なのか、例えば「クラシックなデザインが美しい邸宅で愛犬とともに心穏やかに暮らす」といったようなキャッチコピーではじまり、住宅の内観の画像を紹介しながら、その画像の詳細をテキストで紹介する形式になっています。このように、Facebookから公式サイトに流入させるSNS戦略を取っています。

YouTube

「ミサワホーム公式チャンネル」として開設。ミサワホームが提供する住宅を「デザイン邸宅シリーズ」と題して動画で紹介しています。また、住宅の様子だけでなく、実際に住んでいる方の「住み心地」をインタビューした動画も紹介しています。

まとめ

今回は注文住宅系の業界サイトで上位表示されるハウスメーカーの、「UIデザイン」「コンテンツ」「WEBプロモーション」になどについて調査してみました。注文住宅の場合、暮らしのイメージをいかにユーザーに抱かせるのかが肝心です。

住んでみたいと直感的に魅せる画像を使うことはもちろん、PCサイト、またはスマホサイトで表示された時の、デザインの見やすさ、操作のしさすさも追求しましょう。サイトの使いやすさは、サービス利用にもつながる大切な導線になります。

また、WEBサイトは完成がゴールではありません。WEBサイトに人を集め、自社商品サービスの利用に結び付けることが最終的なゴールですので、完成後、どのように顧客を獲得したいのかWEBを通じた販促活動にも取り組みましょう。

data maisonは月額165円からご利用いただける個人向けサブスクリプション・モデルです。

ひとつ調べたい項目があった場合、100サイト分調査するのに、おおよそ1日かかります(1サイト5分としても)。
それが40項目において100サイト分調査するなら、おおよそ2ヶ月(40営業日)かかります。
そのために専用の派遣社員やアルバイトを雇ったとしましょう。
時給2,000円の社員に毎日8時間×2ヶ月(40営業日)、この調査業務を行ってもらった場合、以下の計算になります。

40項目の調査を100サイト行った場合、
 期間:2ヶ月の調査+統計整理 で 費用:640,000円(諸経費除く) 
これがdata maisonを利用した場合、
 期間:即時 で 費用:月々200円(税別)

時間も2ヶ月の無駄を省き、費用も約1万分の3(=0.03%)まで削減できます。
これは経営者にとっても、Webマーケティング担当者にとっても、デザイナーにとっても、営業マンにとっても、めちゃくちゃ効率的ですよね。時は金なり! 出る金は制すなり! です。

\ さぁ、今すぐ業界データを購入しよう! /

気になる業界プランを選ぶ!

今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ