55634|中小企業のブランディング

Blog, 実績, 静岡県のブランディング事例

Living Labリビングラボ(乗松建設)「ホームページ(WordPress)」デザイン|静岡|磐田

磐田市で注文住宅を手がけるリビングラボさんのホームページをデザインさせていただきました。

リビングラボさんは土木工事や公共建築などもされている乗松建設さんの住宅事業部です。他の部門が専門分野の事業者さんや行政がクライアントとなるのに対し、住宅事業部のお客さまは一般の方になります。また、代表が女性ということもあり、女性目線で考えた家づくりをされているとのことです。

そのため、今回のホームページでは、機能面では、一般の方が気軽に閲覧できるよう、スマートフォンでの閲覧を最優先、そしてデザイン面では、女性らしい優しさや柔らかさ、上質な雰囲気を表現しました。

トップページは、スマホ表示ではスライド画像が画面いっぱいに表示され、スマホの縦長画面を生かすデザインです。メッセージも大きく表示されるので、ビジュアルと文字情報の両方から、リビングラボさんの家づくりのコンセプトが伝わります。

トップページのほか、「家づくり(Concept)」や「Living Labについて(About)」など、主なページの上部には、大きな画像とともに、タイトル文字が表示されていますが、こちらも、実際にページを見ていただくと、文字部分だけが少し遅れてふわっと表示されるのが、お分かりになると思います。

このほんの少しのタイムラグと、ふわっとした動きで、一気に雰囲気のある画面になり、冒頭に述べた上質感や女性らしい柔らかさを感じられます。

また画面の下にはお問い合わせのバナーが常に表示され、思い立ったときにすぐに問い合わせフォームを開いたり、電話を発信したりできるようになっています。これはどのページを開いても共通のデザインなので、サイトを見ている方が迷子にならないためには効果的な仕組みです。

リビングラボさんでは、定期的にモデルハウス見学会やセミナー、相談会などを開催されるとのことで、そうした期間限定のイベント用に開催前や開催中の期間だけトップページにバナーを表示できる仕組みを採用しました。

こちらは、スマホでトップページを開いたときにスライド画像の上に表示されるポップアップバナー。クリックすると、イベントの詳細ページに移動します。

そして、スマホとPCの両方に表示される固定バナーも併せて表示されます。問い合わせバナー同様、ユーザーを効果的にサイト内で誘導して、そのときに伝えたい情報をきちんと伝えることが大切ですね。

トップページはその他、モデルハウスの来場予約や資料請求のリンク、最新の施工事例へのリンクなどが表示され、その下に主要なページへのリンクと続きます。どれも画像を大きく使い、トップページを見ただけでも、リビングラボさんの家の雰囲気が画面を通して伝わってくるようにデザインしています。

イベントの一覧ページや詳細ページの表示にも、ひと工夫加えています。

ひと目見て、開催中なのか、これから開催されるのかがわかるよう、色の異なるアイコンを表示しています。そして、終了済みのイベントは、一覧ページではサムネイル画像の上に「終了しました」というメッセージを表示しています。

これならば、開催中や開催予定のイベントに自然と目がいきますし、間違って過去のイベントに申し込んでしまう、といった事態も未然に防ぐことができます。

そして、イベント情報の個別ページからリンクしている予約フォームは、最初の状態ですでにイベント名がフォームに入力されていて、お客さまがいちいちプルダウンメニューから選ぶ手間をはぶいています。

たくさんのページがある中では、こうしたちょっとしたサインや工夫があるだけで、使い勝手がぐっと良くなり、「あのサイトを、また見てみようかな」という動機にもつながります。

スマホ表示で、もう一つ採り入れたのが画像の左右余白をなくすということです。

左右いっぱいに画像が表示されることで、小さなスマホ画面でもめいっぱいに写真を見せることができ、デザイン的にもすっきりとした印象です。特に住宅の竣工写真などは、大きく表示されたほうが、空間の広がりや雰囲気が伝わりやすいですね。

タテ画像も、より効果的に見せることができます。

反対にパソコン画面では余白がないと広がりすぎて、かえって見づらいため、テキストと同じ幅に収めています。スマホとパソコンで表示方法を調整することで、それぞれの環境でより見やすいホームページになります。

このように、デザイン性と機能性、両方をしっかりと調整することで、見やすく、伝わりやすいホームページをつくることができます。

リビングラボさんでは、今後も定期的に見学会やセミナーを開催されていくとのこと。ホームページを見て気になった方はぜひ参加してみてください。

■Living Lab(リビングラボ)/ https://living-lab.jp/

この記事を読まれた方には下記のページもおすすめです。合わせてお読みください。
雰囲気のある写真がお店のイメージを伝えるホームページ|エルムコート「ホームページ(wordpress)」デザイン|静岡|浜松

2018-11-27 | Posted in Blog, 実績, 静岡県のブランディング事例Comments Closed