SMALLSHIFT
← サイト事例に戻る

WEBSITE STUDY / 国内

CABO

建物の立面図と部屋番号を案内図にし、入居者の物語へつなぐ代々木上原の複合施設。

公式サイトを見る ↗
公式サイト / 掲載確認用
CABOの公式サイト画面

DESIGN NOTES

このサイトの設計を読み解く。

01

建物の立面図を入居者への目次にする

本文で確認した建物の立面図は、黒い細線と階段の輪郭で描かれ、各階の大きな部屋番号が目を引く。部屋番号から物語を読める案内により、実際の建物の位置関係が情報の目次になる。施設の構造そのものをウェブの案内へ転用している点が特徴的だ。

02

四つの文字で住所の余白をつくる

冒頭のCABOの四文字は左側に二段で大きく離して配置され、中央には住所とThe Neighborhood Place、右にはRentが置かれる。白い余白を広く保ち、文字数を抑えながら場所と用途を示す。館内の案内を始める前に、施設の名前と街との関係を印象づけている。

03

外観を小さく置いて街の距離感を出す

外観写真は画面全体へ引き延ばさず、中央に縦長で比較的小さく置かれている。建物を見上げるような比率が、街で一軒の建物に出会う感覚を残す。写真の大きさを競わず、周囲の余白を使って住所や施設名とのまとまりを作る方法が参考になる。

04

部屋番号と活動する人を結び付ける

公開テキストには401や403などの部屋番号と、そこで活動する会社や店舗の名前が並ぶ。飲食や書店、制作活動を単に業種別に並べるのではなく、同じ建物で過ごす人として紹介する。複合施設を紹介する時に、テナント一覧を読み物へ変える仕掛けになっている。

05

借りる人と訪れる人の入口を分ける

上部にRentを置き、本文には入居者やイベント、Instagramへの案内を含めることで、借りたい人と訪ねたい人に異なる入口を用意する。施設の空気感を共通の土台としながら、目的の違いを短い案内で受け止める。問い合わせだけに全てを集約しない構成だ。

APPLY TO YOUR PROJECT

自分の制作に取り入れるなら

複合施設や商店街では、現地の配置図をそのまま人や店舗の紹介への目次にできる。場所を覚えることと、そこで活動する人への関心を同時に育てられる。

そのまま真似する前に

立面図の見た目が魅力でも、小さい画面やキーボード操作で部屋番号を選べるかは別に確認したい。空室条件や店舗営業時間を探す人向けの文字一覧も必要になる。

次に見ておきたい参考

一覧へ →
CABOの公式サイト画面