「ここの会社さんのホームページっておしゃれ・カッコイイ」

不動産会社さんのホームページに限らず、様々なWEBサイトを見ていて
「おしゃれ・カッコイイ」と感じるサイトは必ずあると思います。

それらは、その企業様の業界・業種やどんなサービスを提供しているかによって
求められる「おしゃれやカッコイイ」がどういうものなのか変わってきます。

例えば業界で言うと、アパレル企業と金融系企業のサイトでは、どんなサイトがカッコイイか違いますよね。

さらに細かく分けると企業サイトなのか商品やサービスサイトなのか、
または通販サイトやリクルートサイトといったサイトの持つ役割によっても違ってくると思います。

それぞれ求められることや必要な機能などが違うので
「何がおしゃれ・カッコイイか」ユーザーにそう感じてもらうために必要となる要素も変わってきます。

そこで今回は不動産ホームページにおける「おしゃれやカッコイイ」サイトにするために注目していただきたいポイントをお伝えします。

不動産ホームページに必要な機能を考える

カッコイイサイトにするために、サイトに必要な機能を考える?
と思ってしまいますが
実は、何が必要か、どんな機能があるとユーザーはサイトを使いやすいかを考えてみると
全体のデザインを決めていく時にも考えやすくなります。

実際に不動産ホームページに必要な機能を考えてみます。
例えば以下の5つがまずは挙げられるのではないでしょうか。

  1. 物件検索機能
  2. 会社概要や店舗紹介、スタッフ紹介
  3. お問い合わせ機能
  4. お知らせやコラム、コンテンツ作成機能
  5. 物件のカテゴリー機能

他にも扱う物件種別や会社様によって欲しい機能・必要な機能はあると思います。
例えば売買物件を扱う会社様であれば「会員登録機能」も挙げられますよね!
このように自社にはどんな機能が必要か考えてみると良いと思います。

そして次に「お問い合わせボタン」や「物件の特集ページへのリンク先」など
それらの必要な機能がホームページ内のどこにあると使いやすくなるかということが重要になります。

おしゃれ・カッコイイサイトにするために見るべきポイントは?

さて、必要な機能が固まったら、それらをどのように表示するか
見た目のデザイン的な部分を考えてみましょう。

ホームページのデザインは重要ですよね。
使用する画像のデザインやフォントの色や大きさといった部分や
物件特集やコンテンツ等どの項目でバナーを作成したりどこに配置するかといったことを決める必要があります。

どんなデザインにすれば、おしゃれなサイトになるか。難しいところですよね。
私たちもお客様から「カッコイイサイトにしたい」という言葉をよくいただきます。

その時に、画像の綺麗さももちろんですが、
重要になることが、ただ綺麗に制作されたバナーを設置するのではなく
ユーザーが見やすく・使いやすいサイトにするにはどこに設置されていると良いかを考えることです。

画像や色合いなど、綺麗な画像を使用してバナーを作成したとしても
ユーザーにとってわかりにくい位置に設置されていたりしてはとても勿体ないです。

「どこに物件特集バナーはどこにあるとユーザーは情報を探しやすいか」「お問い合わせまでの導線がわかりやすい」
「一番最初に目に入る位置には何があると良いか」「店舗のキャンペーン情報などアピールしたい内容を目立たせることができるか」といったユーザー目線で見てみることです。

とはいえ、WEBのご担当者の方など自社のホームページに見慣れてしまうと、客観的にサイトを見ることが少し難しい…なんてこともあるかと思います。

そんな時には営業さんや新しく入ったスタッフさんなど、
社内で意見を聞いてみるとユーザー目線に近い客観的な意見がもらえたりします。
また、デザインなどは他社のサイトと比較して、他社サイトを参考にしてみることも良いと思います。

画像やフォントなどの見た目の部分にこだわることも大切ですが、サイト内での検索のしやすさなど使い勝手の部分をしっかりと考えることがポイントです。

余白の美学

さて、「お客様にとって見やすいサイトとはどんなものか」が整理できたところで、やっと画像やフォントなどの見た目の部分に入ります。
パッと見て分かりやすい、見やすいサイトのポイントの一つに「余白」があります。
文字の余白、画像の余白、ボタンや押す場所の余白・・・・
例えば、文字がぎゅっと詰まったサイトはどうでしょうか?

例1
例2

1番より2番の方が、必要な情報が整理され読みやすいと思いませんか?

文字であれば行間や、段落、文字間に適切な余白があると画面全体が締まって見えます。
また、画像であれば大きめの余白をとってあげると文字と合わせた時にひとかたまりとして認識しやすくて見やすくなります。

ただし、逆に余白を取りすぎてしまうと間延びした印象を与えてしまいますし、読みにくくもなってしまいます。

フォントの選び方

フォントも様々あり、選び方によってサイトのイメージやバナーやボタンの印象を左右することができます。

・・・まあまあ目に優しくないフォントが並んでいますね。
左上くらいはまだ大丈夫でしょうか。他のありがちなメイリオや丸文字系のフォントが本文で並ぶと読むのに苦労しそうです。
また、印刷物とはことなりWEB上で表現するフォントは、様々なデバイスで表示されることとなります。
環境に合わせてほんの少しフォントの出方も変わりますので、ある程度「どのデバイスで見ても見やすいフォント」を選ぶことが大切で、また
「フォントを使いすぎない」ことも重要です。

いろいろな文字フォントが踊ると、それだけで視認性は低下します。

バナーのポイントとしてフォント変更=OK
本文のテキスト内で文字フォントを沢山使用=NG

こんな感じで覚えていただければと思います。

画像の選び方と色

画像の選び方にもコツがあります。

  • コントラスト強めで色合い鮮やかに
  • たくさんの色が主張しない
  • ぶれた写真、見にくい写真はマスクをかける
  • 大きめの画像を用意

使いたい写真を選ぶときには「どこに使いたいか」を考えながら選ぶとうまくハマります。
戸建て住宅を取り扱う会社だとすればメインイメージには「町並み」や「ファミリー」の写真を選ぶと、サイトの方向性からズレませんし、
学生向けのサイトを考えるなら「若い人」や「本・服飾」などイメージの結びつきやすいものを選ぶと良いでしょう。

カッコイ加工サイトは数多くありますし、ブラウザから簡単に編集できるサイトもあります。
このあたりはまた次回にお話をしたいと思いますが、コツとしては「コントラストをはっきりとする」ことでしょうか。
もちろんモノクロでも良いのですが、濃淡や色のメリハリをつけることで見やすくデザイン性の高さを演出することができます。

また、画像には著作権があります。
素材サイトもたくさんありますが、きちんと利用規約を確認してから使用するようにしましょう。

PCサイトだけではなくスマホから見た状態もチェック!


ホームページのデザインを決める時、PCから見た状態だけをチェックして完了してしまってないでしょうか。

今やユーザーの大半は、スマートフォンからサイトを閲覧します。
そのためスマートフォンからサイトを見た時の文字等の表示サイズなども必ずチェックが必要です。

PCから見ていることが多いと、スマートフォンから見たサイトの状態はついつい見落としがちです。

デザインにはこだわり、PCからだと見やすいのにスマートフォンからだと使いにくい・見にくいなんてこともよくあります。
例えば、文字の大きさ。
パソコンで見ているときは気にならなかったのに「大きすぎる」文字で見出しが収まらなかったり、逆にスマホで見ると文字が小さすぎて読むのに苦労したりと、思わぬ表示になってしまうこともあります。
これではせっかく格好良く作ったデザインも台無しになってしまいますよね。

ホームページを見直す際には、スマートフォンからも忘れずにチェックしてください。

会社のホームページを新しく見直すことは大きなことだと思います。
おしゃれでカッコよく、そして使いやすいサイトになる様に、社内で意見を出し合うなど様々な視点から広くサイト全体を見ることが重要になります。