渋谷の設計事務所のサイトを見比べていくと、株式会社創建築アトリエの公式サイトは、要素を足すのではなく削ることで印象を作っている点で目を引きます。黒に近い濃いグレーの地色の上に白い面を一枚置き、そこへ社名とメニュー、写真、短いメッセージ、連絡先だけを並べた構成です。
Webサイトは情報を増やすほど親切になると考えられがちですが、このサイトは反対の方向で成り立っています。置かれている部品が少ないぶん、余白の取り方や要素の位置そのものが、設計の意図として読み取れます。
ここではキャプチャから確認できる範囲で、レイアウト、タイポグラフィ、情報設計、配色を順に見ていきます。あわせて、渋谷リノベーションや渋谷での注文住宅を考えている読者が、設計事務所のサイトを見るときに役立つ視点も整理します。
黒に近い地色へ白い面を一枚置いた画面設計
最初に目に入るのは、画面全体を覆う濃いグレーと、その中央に置かれた白い長方形の対比です。ブラウザの幅いっぱいに白を広げず、あえて幅を固定しているため、机の上に紙を一枚置いたような見え方になっています。
幅を固定した中央寄せのレイアウト
横幅1280pxで表示したキャプチャでは、白い面が占める幅は画面のおよそ3分の2にとどまり、左右には濃いグレーがそのまま残ります。境界には影もぼかしも使われておらず、白と濃いグレーが直線で接しています。
この扱いによって、白い面は単なる背景ではなく、作品を載せる台紙として働きます。写真に含まれる明るい部分が白い面へ自然につながり、外側の濃いグレーが額縁の役割を担う関係です。
上下に大きく取られた余白
社名の上には画面の高さの2割ほどにあたる空白があり、最下部の連絡先の下にも同じように空白が残されています。要素同士の間隔も広いため、上から社名、メニュー、写真、メッセージ、連絡先という五つのまとまりが、はっきりと分かれて見えます。
ページ全体はスクロールをほとんど必要としない高さに収まっています。読者に長い読み込みを求めず、最初の画面で全体像を見せてしまう考え方が徹底されています。
字間を大きく開いた社名と控えめなタイポグラフィ
このサイトの性格をもっとも強く決めているのは、文字の扱いです。太さや大きさで目立たせるのではなく、字間と色の濃さを調整することで、静かな印象を作り出しています。
一文字ずつ離して置かれた社名
画面上部の社名は、一文字ずつ大きく間隔を空けて中央に置かれています。書体は線の細いゴシック体で、色は完全な黒ではなく、わずかに茶みを含んだ濃いグレーが選ばれています。
ロゴマークもキャッチコピーも添えず、社名だけで見出しを成立させている点も特徴です。字間を開くと語としてのまとまりは弱まりますが、その代わりに余裕と落ち着きが生まれ、作品集の表紙に近い佇まいに寄っていきます。
グレーの階調で強弱をつける文字組み
メニューの文字は社名と同じ濃いグレーで、中ほどのメッセージだけが一段明るい中間のグレーに設定されています。同じ色相のまま濃さだけを変えているので、画面がにぎやかにならず、それでいて主従の関係が伝わります。
文字サイズは全体に小さめで、一行の長さも短く抑えられています。読ませる分量を絞ることで、写真と余白が主役の位置を保っています。
中央の一列に積み上げた情報設計
情報の並べ方も、左右に散らさず中央の一列へまとめる方針で統一されています。視線は上から下へまっすぐ流れ、次にどこを見ればよいかで迷う場所がありません。
横一列に並ぶ少数のメニュー
メニューには、new、作品集、gallery、建築家の・・・、会社概要、設計監理料と設計の進め方という項目が横一列に並びます。ドロップダウンのような階層は画面上に見当たらず、行き先が最初から出そろっている状態です。
作品へ向かう入口が作品集とgalleryの二つに分かれている点は、見る側にとって選択肢が増える部分でもあります。「建築家の・・・」のように言い切らない項目名は、続きを確かめたくなる気持ちを引き出します。
上下を挟む淡い罫線
メニューの帯は、上下に淡いグレーの罫線を置いて区切られています。輪郭がわずかにぼけた線が使われており、囲み枠のような強さはありません。
罫線の長さは白い面の幅よりも短く、内側に収められています。同じ処理がページ下部の連絡先にも使われているため、上下で対になり、中身がそっと挟まれているように見えます。
写真とメッセージの見せ方
トップページに置かれた画像は、中央の横長の写真帯だけです。数を並べずに一本にまとめるという判断が、そのまま全体のトーンを決めています。
小さく置かれた一本の写真帯
写真は二枚を横に並べて一本の帯にしたもので、幅は白い面のおよそ3分の1です。左側には木の梁と明るい壁で構成された屋外まわり、右側には木製の建具とガラス越しに見える円形の浴槽が写っています。
どちらも光を多く含んだ明るい写真で、輪郭が柔らかく白へ溶けていきます。全面に敷き詰めないぶん、写真の中の白と紙面の白が地続きになり、圧迫感のない見え方が保たれています。
キャプションや説明文は添えられていません。詳しく見たい読者はメニューから作品のページへ進む形になっており、トップページは入口の役割に徹しています。
改行で読ませる短いメッセージ
写真の下には、中央揃えの短いメッセージが置かれています。話し合いを重ねながら形を探していく姿勢と、住まい手自身の考えを大切にしてほしいという呼びかけが、三行に分けて書かれています。
句読点をほとんど使わず、意味の切れ目で改行する組み方です。接続の言葉だけが独立した一行になっており、散文というよりも詩に近いリズムで読ませます。文字が小さく色も淡いため、主張の強い宣伝文句のようには見えません。
差し色と連絡先の置き方
無彩色でまとめた画面の中で、彩度を持つ色は一色だけに絞られています。使う場所を限定することで、面積が小さくても十分に目立つ状態が作られています。
一色だけに絞った赤みのある差し色
濃いグレーと白、そして文字のグレーという構成の中に、赤みの強いオレンジが差し込まれています。この色が現れる箇所はごくわずかで、そのぶん視線が自然に集まります。
写真も明るく淡い色調のため、差し色が画面の中でぶつかる相手を持ちません。色数を絞る設計は、素材の色をそのまま見せたいサイトほど効果を発揮します。
一行にまとめた連絡先
ページ下部では、メールアドレスと所在地、電話番号が一行に収められ、電話番号には時間の表記が添えられています。所在地は東京都渋谷区渋谷1-3-18-C701と記されています。
大きなボタンや問い合わせフォームは置かれておらず、連絡手段はテキストで示されています。導線を増やさずに、電話とメールという確実な手段だけを残した構成です。
設計事務所のサイトとして参考になる点
ここまでの分析をふまえると、このサイトから学べるのは、情報量を増やさずに姿勢を伝える方法です。渋谷の設計事務所を探している読者の立場で見ても、判断に必要な材料が短い動線の中に並んでいます。
作品を主役にするための引き算
設計に関わるサイトでは、写真の点数よりも、写真が置かれる面の質が印象を左右します。背景が白く整理されていれば素材の色が正しく伝わりますが、装飾が多いと作品の輪郭がぼやけてしまいます。
渋谷リノベーションや渋谷での注文住宅を検討している読者は、まず作品の写真から設計者の傾向を読み取ろうとします。トップページの役割を入口に絞り、詳細を下層へ預ける整理は、その行動に沿った作りだと言えます。
進め方を独立したページに用意する
メニューには「設計監理料と設計の進め方」という項目が用意されており、相談から基本計画、基本設計、実施設計へと進み、工事中の監理、検査と引き渡し、その後の維持や改修までが段階を追って説明されています。
東京でのクリニック設計やマンション設計、あるいは住宅の設計は、完成までに何が起こるのかが外からは見えにくい分野です。段取りを先に読めるページがあると、問い合わせの前に流れを把握でき、相談の内容も具体的になります。
運営者の情報が確認できる会社概要
会社概要のページには、事務所の所在地や連絡先に加えて、代表者が一級建築士の今井 均様であること、1982年11月に設立されたことが記載されています。業務内容としては、建築と造付家具の設計や監理、サインや看板のデザイン、置き家具やカーテンのコーディネートが挙げられています。
主な用途には住宅やクリニック、医院や診療所、集合住宅などが並び、実績のある地域として東京や神奈川、千葉、埼玉のほか、山梨や長野、静岡、愛知、三重、石川、福岡といった地名が記されています。書籍名の記載もあり、経歴をたどりたい読者が根拠を確かめられる構成です。
まとめ：静けさで作品を見せる渋谷の設計事務所のサイト
株式会社創建築アトリエの公式サイトは、濃いグレーの地色に白い面を一枚置き、社名とメニュー、一本の写真帯、短いメッセージ、連絡先だけで組み立てられています。要素を減らしたうえで、字間と余白、そして一色だけの差し色によって画面の秩序を保っています。
デザインの見本として学べるのは、情報を足すことよりも、置く位置と間隔を決めることが印象を作るという点です。作品や実績を主役にしたいサイトほど、この引き算の考え方が参考になります。
画面の質感や写真の空気感は、実際に開いて確かめていただくのがいちばん分かりやすいと思います。東京でマンション設計にも取り組む創建築アトリエの公式サイトもあわせてご覧ください。
