メニュー
不動産webサイトの作り方と流れを紹介!
  • 中野貴登:Webクリエイター

不動産webサイトの作り方と流れを紹介!

こんにちは、イデアックスの「中野」です。

弊社は不動産に特化したデザイン制作を行っており、これまでに多くの戸館住宅、賃貸、商業施設、オフィスビルのパンフレットやwebサイトを作成してきました。

少し前までは紙のパンフレットがメインでしたが、最近はwebサイトのご要望が多くなってきております。

弊社が普段どのように不動産のwebサイトを作成しているのか、制作の流れを皆さんに紹介したいと思います。

サイトのコンセプトを明確にする

初めにwebサイトのコンセプトを明確にしていきます。

コンセプトというとざっくりしておりますが、明確にする内容は「ターゲット」「伝えたい内容」「サイト訪問者にどのような気持ちになってもらいたいか」です。

クライアントと話し合いこれらの内容を深めていきます。ここはディレクターの役割となっているのでデザイナーはこの時点では話し合いに参加することはありません。(※会社によります)

コンセプトを考える上で役に立つのが参考サイトです。クライアント自身が既に参考サイトを見つけているケースもありますが、そうでない場合もあります。

優秀なディレクターはクライアントの打ち合わせ時にいくつか参考サイトを提示します。会話の中から参考になりそうなサイトを瞬時に出すことができるのです。

これは普段から色んなサイトに目を通し、イメージごとに自分でまとめているからです。

webサイトをまとめているサイトもあるので、こちらから参考サイトを見つけると良いと思います。

https://muuuuu.org/

参考サイトを元に、これから作るサイトにどのような情報を載せるのかを決めていきます。

不動産サイトでよく記載する内容は、下記の通りです。


不動産サイトによく載せる情報

・物件付近の地図
・物件付近の路線図
・物件の特徴
・物件の図面
・建物や設備の概要


他にも追加する何用があると思うので、洗い出して整理してください。

サイトマップの作成

コンセプトやサイトに載せる情報が整ったところでサイトマップを作成します。サイトマップとはwebサイトの階層ごとに記載する情報を整理した地図のことです。

洗い出した情報を元に、どのページになんの情報を載せるのか、必要なグローバルメニュー数はいくつか、などを決めます。

グローバルメニューも参考サイトを元に考えるとスムーズに作成することができます。下記は実際に作成したある商業施設のサイトマップです。

洗い出した情報をそれぞれのメニューに当てはめていきます。サイトマップを作成する際、ブランドカラーに合わせて作るとお客様に良い印象を与えることができるかもしれませんね。

物件の撮影・CGパースの作成

案件によりますが、既に建物ができている場合は撮影に行きます。撮影のタイミングは案件によってバラバラですので、撮影ができるまではアタリ画像を用いてデザイン・コーディングを行うこともあります。

撮影はプロのカメラマンに撮影して頂きます。弊社もカメラマンに依頼して撮影を行います。

撮影は静止画と映像、360°の撮影を行います。最近はwebサイトに動画を埋め込む要望が増えたため、映像の撮影と編集も行います。

また、案件によっては空撮を取ることもあります。オフィスビルや商業施設は建物がどの位置に立つのかをわかりやすく表現するため、空撮を依頼することもあります。


まだ物件ができていない場合はCGで完成イメージを作成します。CGパースの作成は専門で行っている会社があるので、そこに依頼します。

サイトデザインの作成

サイトマップを元にサイトデザインを作成してきます。webのデザインはIllustratorかPhotoshopで行います。

この際にレスポンシブデザインも作成します。サイトの言語表記が日本語だけであれば問題ないのですが、英語や中国語の表示も必要であればそれぞれの言語のデザインも作成します。

言語によっては同じ意味でも文章が長くなりスペースを取ることがあるので、他の言語もデザインするときは気をつけてください。


自社で英語や中国語のわかる方がいない場合は、翻訳してくれる方に外注します。その際は日本語のデザインが完成しお客様に確認が終わってから外注しましょう。

サイトのコーディング

サイトのデザインが終わったらコーディング作業に取り掛かります。一からコードファイルで作成することもあればWordPressのようにCMSを用いて作成する場合もあります。

商業施設の場合、公開後にサイト上で情報を発信することがあります。(ニュース欄など)

CMSであればHTML・CSSのわからないweb担当者であっても情報発信を行うことができます。

webサイトを公開後どのように扱うのかによってCMSを使用するか変わってきます。

CMSを使うべきか判断に迷われている方は、下記の記事の内容を元に判断してみてください。

英語、中国語などの言語を作成する際は、グローバルメニュー付近に言語スイッチを配置することを忘れずに行ってください。

最後に

以上が不動産サイトの作成工程の紹介でした。

不動産サイトの場合、路線図や地図情報の内容確認を行う必要があったり、物件の撮影(静止画や映像)やCGパースの作成が必要だったりします。

これらの内容が不動産特有なものになります。不動産関係のweb制作を行う場合は、打ち合わせの際に上記の内容を確認してください!