お手本にしたい! 海外のかっこいい建築系ホームページ 見つけ方と成功例

建築家や設計事務所、工務店など建築系のホームページには、カッコいいものが多いという噂は本当? その真相を探るべく、国内外の建築関連サイトを検索してみました。
そこで発見した業界のトレンドや目を惹くデザインのサイトに加えて、特定の業種に絞ったホームページの見つけ方、英語での検索キーワードも合わせて紹介します。

優れたデザインのホームページの見つけ方

ホームページを探す方法と言えばインターネット検索。例えば、近所で通える歯医者さんを探すときは、「中目黒 歯科医院」と言ったキーワードで検索しますよね。
一方、特定の業種のWebデザインを比較したい場合は、どうでしょう? 「建築 設計事務所」で検索した場合、確かに建築事務所や工務店などのWebサイトがヒットしますが、そのリンクを1件1件表示してWebデザインを見るのでは、効率がいいとは言えません。

そこで、優れたサイトを探すのに利用したいのがWebデザインのコンテストやギャラリーサイトです。また、海外の建築サイトやギャラリーサイトを検索する際に使える英語のキーワードも押さえておくと便利です。

Webデザインコンテストやギャラリーサイトを利用する

ホームページのデザインを見たいときに、最も的確にその目的を果たせるのが、ホームページのコンテストサイトやギャラリーサイトを利用することです。そうしたギャラリーサイトの多くは、業種やサイトのタイプ別に分類されているので、「建築・設計事務所」や「Architecture」など、カテゴリーを絞って見ることができます。さらに、ホームページのデザインをまとめてチェックすることで、最新のトレンドが見えてくるメリットもあります。

Webデザインアワード:awwwards

awwwardsのサイト
https://www.awwwards.com/
2009年の第1回アワードから今年で11年目を迎える「awwwards」は、世界的なWebデザインアワードの1つ。世界のさまざまな国や地域から集められたWebサイトは、カテゴリやタグ、国などで絞り込みが可能です。建築関連のWebサイトを探す場合は、「CATEGORIES」で「Architecture」を選択します。

このほか、アワードサイトやギャラリーサイトの詳細記事はこちらを参照してください。
・Webデザインのネタ探しに! 2019年のトレンドがわかる海外ギャラリー10選

Webデザインのネタ探しに!2019年のトレンドがわかる海外ギャラリー10選


・サイト作りに役立つ国内・海外の源泉デザインギャラリー

サイト作りに役立つ国内・海外の厳選デザインギャラリー

建築家・建築専門家のネットワークサイト:world-architects

お手本にしたい! 海外のかっこいい建築系ホームページ 見つけ方と成功例
https://www.world-architects.com/
Webデザインギャラリーではありませんが、世界中の建築家や建築に関わる専門家(e.g. 建築フォトグラファー、ランドスケープデザイナー、インテリアデザイナーなど)のネットワークサイトの位置付けです。サイト内の建築家のプロフィールページから、直接それぞれのホームページに飛ぶことができます。なお、日本の建築家をまとめた日本語版もあります。

英語で建築関連のホームページを検索する

Webデザインコンテストやギャラリーサイトを利用するにしても、やはり検索は必要になります。日本語での検索は、普段から活用していると思いますが、いざ英語でとなると、カタカナ英語では通用しないことも。
例えば、建築業界のWebデザインギャラリーを検索するには「web design gallery architecture firms」で検索すると、建築系のホームページを集めたデザインギャラリーやまとめサイトがヒットします。

また、注目の建築家を探す場合は、
「emerging architects」をメインキーワードに、「emerging architects 2019」「emerging architects sweden」など時制や場所で絞り込むこともできます。これを応用して、「emerging trends in web design 2019」と入力すれば、Webデザインのトレンドがダイレクトにヒットするはず!

英語で検索する際に、気をつけたいのが検索サイトの言語設定です。通常Google検索は、ユーザーの位置情報や言語環境を自動的に判断し、日本語サイトや国内サイトが優先的に検索結果に反映されます。初めから英語のサイトを検索したいときは、ちょっと面倒ですが「検索設定」で言語を「英語」に設定しておきます。

イケてるホームページ7つの事例

建築、設計事務所のホームページのトレンドは、ランディングページで写真やイメージ画像、動画をを大きく見せるタイプのデザイン。という印象を受けました。そして、洋の東西を問わず共通しているのは、絶妙な「間」を取り入れたデザインが多いこと。それこそが建築デザインの真骨頂ではないでしょうか。そんな間の妙を感じるイケてるホームページをいくつか紹介します。

写真で魅せるページデザイン

建築系ホームページがカッコよく見える理由の1つには、写真のクオリティの高さがあるように思います。建築をメインに撮影しているフォトグラファーによる歪みを自然に排除した写真は、素人が撮った建築写真とは一味も二味も違うからです。まずは、ランディングページで写真を大きく見せるサイトと、これまでの成果をポートフォリオ風にレイアウトしたサイトを見てみましょう。

Olson Kundig (シアトル, USA)

お手本にしたい! 海外のかっこいい建築系ホームページ 見つけ方と成功例
https://olsonkundig.com

Nick Leith-Smith (ロンドン, UK)

お手本にしたい! 海外のかっこいい建築系ホームページ 見つけ方と成功例
http://nickleithsmith.com/works/

ビジュアルストーリーを効果的に使ったサイト

イラストのスライドショーやアニメーションで、作品のコンセプトや自分たちのヒストリーを見せるビジュアルストーリー型ホームページもいくつか見かけました。お手本にするには難易度が高いかもしれませんが、同業他社との差別化を図るという意味では、ユニークな効果が得られるアイディアと言えます。

Europejski (ワルシャワ, ポーランド)

お手本にしたい! 海外のかっこいい建築系ホームページ 見つけ方と成功例
https://www.europejski.pl

阿部建設株式会社 (名古屋, 日本)

お手本にしたい! 海外のかっこいい建築系ホームページ 見つけ方と成功例
https://www.abe-kk.co.jp/

タイポグラフィーメインのデザイン

建築と関係あるかは微妙ですが、空間デザインという共通点はあるかもしれません。画像メインのサイトが多い中で、クリエイティビティを刺激するインパクトあるホームページです。グラフィックデザイン的なアプローチをWebデザインに取り込む手法は、建築関連サイトだけでなく、Webデザイナーさんの引き出しの1つに入れておいてもいいでしょう。

Glamuzina Architects (オークランド, NZ)

お手本にしたい! 海外のかっこいい建築系ホームページ 見つけ方と成功例
文字にカーソルを合わせると建築写真と色が変化する仕組み
http://www.g-a.co.nz/

Ed Design (香港, 中国)

お手本にしたい! 海外のかっこいい建築系ホームページ 見つけ方と成功例
同じく文字にカーソルを合わせると建築写真が表示される
https://www.ed-design.co/

Milano Contract District (ミラノ, イタリア)

Milano Contract District
https://contract-district.com/

トレンドを意識したホームページを作るには

いろいろなデザインを見て来ましたが、建築系に限らず、どんなホームページを作る場合でも、コンテンツが重要という話はよく聞きます。テンプレートを使うと言っても、盛り込む要素と構成は自分で(あるいはクライアントと一緒に)考える必要があります。伝えたい内容と、訪れた人が知りたい情報を見やすく、わかりやすい導線で構成するのがデザインの役割です。
内容は固まっているものの、いざ自分のホームページを作るとなると重い腰が上がらない…というときは、建築系サイトをイメージしたテンプレートを利用するのも1つの方法です。

テンプレートを利用する

インターネット上には、無料のテンプレートから有料、サブスクリプション型まで多くのホームページ用テンプレートが公開されています。最新のトレンドを取り入れたテンプレートを使えば、今風のホームページが手軽に作れるのが魅力です。

WordPress用のテンプレートを提供しているColorlib.

お手本にしたい! 海外のかっこいい建築系ホームページ 見つけ方と成功例
Colorlib.は、WordPress用のテンプレートを公開しているWebサイト。多くのテンプレートが無料であることから、高い人気を誇るテンプレートサイトとなっています。

国産CMSでデザインに定評のあるBiNDup

英語のサイトはやはり不安・・という方は、国産のCMSで、デザイン性とカスタマイズ性が好評の「BiNDup」にも建築事務所や工務店を想定したホームページのテンプレートが用意されています。
お手本にしたい! 海外のかっこいい建築系ホームページ 見つけ方と成功例
もちろん、イメージにあったほかの業種用のテンプレートを選ぶこともできます。チェックしてみてくださいね。
無料でBiNDupを使って見る

[デザイナー厳選] 覚えておきたい おすすめWebフォント30選

見た目や可読性に大きく影響するホントに使える30のWebフォントを、本文から見出し、日本語から欧文まで用途ごとにデザイナーが厳選しました。

今すぐ資料をダウンロード
  • POINT

  • 業種別でサイトの良い事例を探したい場合はギャラリーサイトから探すのがお勧め
  • 海外サイトを探すときには多少コツが要るが最新のトレンドがわかる
  • テンプレートのあるCMSを使うと、楽にトレンドを取り入れられる

あわせて読みたい