クリエイター向け
お仕事・転職お役立ちガイド

不動産・建築系のWebサイト|優れたデザイン 23選 [BRIK GALLERY特集]

BRIK GALLERYについて

デザインやコンテンツの参考になる国内最大規模のWebサイトリンク集・デザインギャラリーの BRIK GALLERY では、日々クリエイターの方々の参考になる作品を更新しています。
クリエイティビティを刺激し、デザインの参考になり、仕事に役に立つ、Webサイトなどを中心に紹介しています。BRIK GALLERYでは、カテゴリーやタグから検索し、気になった作品はお気に入り機能で保存可能な機能があります。

作品は、INDUSTRY (業種)、TYPE (Webサイトなどの種類)、COLOR (キーカラー)、DESIGN (デザイン表現の方法) などのカテゴリーで分類されています。ここから目的としているデザインを絞り込んで探すことが可能です。

BRIK GALLERY

BRIK GALLERY

本特集では、BRIK GALLERYに掲載されている作品の中から、特定のテーマで作品をピックアップしていきます。

不動産・建築系のWebサイトに求められることとは?🤔

不動産、建築系の業界においても、約90%の会社が自社のホームページを所有する時代となりました。このような状況下で、Webデザイナーは他社との差別化をした唯一無二のWebサイトを提供する必要があります。そこで本記事では、不動産・建築系のWebサイトを作る際にデザインやコンテンツなどの面で参考になる、優れたウェブサイト10選を紹介します。

ご紹介する作品は、以下の3つの基準を元に選出しました。

  • ✅ターゲットに合わせたデザイン
  • ✅ユーザーから信頼を得られるデザイン
  • ✅物件や会社のコンセプト・魅力を表現できているデザイン

参考になる不動産・建築系のWebサイトのご紹介🎨

Life Catalog

Life Catalog

Life Catalogは内装のリノベーションに加え、家具や植物も選べるサービス。トップページのタイポグラフィが大胆ながらも、おしゃれな印象を残しています。また、背景の質感やカラー、曲線の枠線の使い方からも洗練されたイメージを与えるでしょう。

vakel

vakel

vakelは、空間インテリアデザインを手掛ける会社。トップビューの画面左側のアニメーションは、非常に滑らかな動きで様々なモチーフに変化させており、親近感を与えることに成功しています。また、全体的に曲線を多く用いているため、柔らかさを感じさせています。

+SHIFT

+SHIFT

+SHIFTは、大人起業家のためのオフィスビルをデザインするブランド。トップページのビル群を背景にしたイラストには、奥行きがあり、都会的なイメージを受けます。そして、5人の人物キャラクターは何かに挑戦しようとしているような「主人公感」があり、イラストによってコンセプトがしっかりと伝わるデザインです。

LIFE LABEL

LIFE LABEL

LIFE LABELは、 暮らしがもっと楽しくなるアイデアをお届けするWEBマガジン。 emojiやピクセルや手書きのイラストなどワクワクする要素がたくさん詰まっています。様々な図形で写真を切り抜きしたり、枠線を活用することで、遊び心を表現するだけでなく、見やすさの観点も抑えたデザインとなっています。

マツシタホーム

マツシタホーム

マツシタホームは、熊本県芦北町にある総合建設業者「松下組」の住宅部門。
生活の様々な場面を切り取った写真をランダムに並べていくレイアウトには、「あたたかく心地の良い家」の記憶の断片を見ているような気持ちになります。サイト全体を通して丁寧でやわらかさを感じるデザインです。

十木舎

十木舎

十木舎は京都を拠点として木と自然素材の家造りをしている工務店・設計事務所。至る所に森谷木々の写真が使われており、木材へのこだわりの強さが感じられます。縦の文字組や明朝体のフォントを使用することで、京都などから連想させる日本・和風テイストや、誠実な印象を上手に醸し出しています。

SAATHAUS

SAATHAUS

SAATHAUSは、長野県にある工務店。 トップページで、家族の暮らしのイラストが描かれた写真の切り取りが、丸みを帯びた様々な形へと変化していく様が素朴で可愛らしいです。スクロールによるモーション変化など、細部にもデザインの工夫がなされています。

TAVALO

TAVALO

コミュニティ作りに力を入れているアメリカの不動産会社。マイクロモーションがかかっている手書きのイラストは素朴で、人々のつながりをイメージさせるものが多く、会社の特徴がしっかりと表現されています。また事業内容の説明に、カードを模したデザインを採用しているところも興味深いです。

FINDERS

FINDERS

東京・大阪の賃貸物件を中心に扱う不動産会社。トップビューの2人の男女が街を見下ろしているイラストは、新たな人生を予感させて、サイト訪問者をエモーショナルな気分にさせるでしょう。そして、青というカラーによって誠実な印象を与えられています。スマホファーストのデザインでありながら、左右の余白を余すことなくうまく使えている点もポイントです。

NO TOWN

NO TOWN

新潟市で不動産・売買・賃貸などを行うNO TOWN。枠線を多用したのが特徴的なデザイン。グリーンのネオンカラーはアクセントとして機能しているだけでなく、「いまっぽさ」も演出しています。所々にあるマイクロモーションはサイト訪問者に親近感を抱かせるでしょう。

イロハ二世帯

イロハ二世帯

二世帯住宅に特化した住宅設計・施工の会社である株式会社 Lakkeが提供する、二世帯住宅のスタイルを診断できるサイト。診断結果を動物に例えて、家族のメンバーが着ぐるみを来ている様がとてもキュートです。緑とベージュのシックなカラーを採用することで独特な雰囲気を演出しています。

Gravity

Gravity

カリフォルニアに位置する、アパートメントやギャラリー、ジムなどが入った複合施設。様々なコミュニティが賑わっているのが特長です。カラフルなグラデーションはアクティブで自由な印象を与え、施設の個性をそのまま表したようなデザインとなっています。カラフルでありながらも、枠線や文字の大きさのバランスが絶妙であるため、乱雑な印象を与えません。

ReeL

ReeL

ReeLは住宅・店舗・商業施設の新築およびリフォームの設計施工を行う会社。白黒の2色づかいを採用することで文字の力強さが発揮され、迫力のある仕上がりになっています。所々に仕掛けられたモーションや、社員の方々を映した動画からは勢いも感じさせるでしょう。

ジュウニ

ジュウニ

リノベーションマンションなどを手がけるリビタが企画・運営する新宿にあるシェアオフィス。背景をオフィス内を映した動画にすることで、施設全体のイメージが簡単に湧き、コンセプトも伝わりやすくなっています。スタイリッシュなトランジションにも注目です。

Midsize Premium

Midsize Premium

野村不動産のブランドPROUDシリーズのマンション。深みのあるグレーやグリーンといった色を採用し、余白も多く活用することで、落ち着きのある上品なイメージを作り上げています。様々なモーションが仕掛けられている点もポイントです。

OIC Design

OIC Design

オーストラリアにある建築系のデザイン会社。黒からグレーへのグラデーションによって空間や奥行きが感じられます。また、控えめなモーションや余白の活用の仕方が秀逸で、落ち着きのあるシックなデザインです。

RICARDI ASTERN

RICARDI ASTERN

韓国の高級住宅街、清潭洞にあるマンション。赤と黒というカラーを使うことで、色気が放たれ、マンションの詳細をより知りたくさせます。また施設の特徴や魅力を、カードを使ったクイズ形式で紹介している点もユニークです。

アイコニックタワー 新潟ステーション

アイコニックタワー 新潟ステーション

新潟駅のすぐ近くにあるタワーマンション。トップページでは、光に反射したマンションが聳え立っており、加えて大胆なタイポグラフィの使い方がされているため、なんとも言えない迫力を演出しています。背景の黒も効いていて、ユーザーの記憶に残りやすいデザインと言えるでしょう。

牛久工務店

牛久工務店

東京墨田区にある一級建築事務所の牛久工務店。トップページにて、完成した家の前でクライアントと設計士が共に笑顔で写っている写真は、サイト訪問者に信頼感を抱かせるでしょう。また、紺色というカラーを用いることで真摯な印象も与えているはずです。

株式会社GROWTH RING

株式会社GROWTH RING

大分県にある地域密着型工務店。無駄な装飾は無く、職人さんを映した写真と言葉だけで会社の魅力を伝える態度に好感が持てます。シンプルなデザインだからこそ、「地域に根ざしたサービス」であることをわかりやすく伝えています。

無印良品の家

無印良品の家

無印良品が手がける住宅商品。ミニマムなデザインは、無印良品というブランドのアイデンティティを見事に表現しています。また住宅の写真を画面いっぱいに使うことで、サイト訪問者に住宅のイメージを湧きやすくさせています。

FREEDOM ARCHITECTS

FREEDOM ARCHITECTS

全国に展開する建築設計事務所のFREEDOM ARCHITECTS。情報量の多いサイトですが、アイコンを活用することで、サイト訪問者に対して簡単に知りたい情報へと誘導させることに成功しています。またグリーンとイエローの適切な配色によって、サイトにメリハリがつけてられています。

BESS

BESS

木材を使うことにこだわりを持つ住宅メーカー。自然をイメージさせる緑色がチョイスされていることで、コンセプトが理解しやすくなっています。また手書き風のイラストを用いることで、よりナチュラルで自然体な価値観を大切にしていることが表現されています。

まとめ

不動産・建築系のWebサイト制作時にデザインやコンテンツの面で参考になる、優れたWebサイト23選をピックアップし解説していきました。デザインの切り口や表現方法などが多種多様だったかと思います。ぜひ、これからのWebサイト制作の参考にしてみてください。