情報の「構造」そのものを美しく見せる
建築の世界には「Form follows function（形態は機能に従う）」という有名な言葉があります。美しいデザインとは、装飾を盛ることではなく、目的に沿った構造を突き詰めた先に自然と立ち現れるもの。無料HTMLテンプレート『STRUCTURE（ストラクチャー）』は、まさにその思想をWebデザインに持ち込んだようなテンプレートです。
左サイドバーのナビゲーション、右カラムで展開されるスティッキーカード。スクロールするとコンテンツがカードのように重なっていくレイアウトは、建築図面をめくっているかのような独特の体験を生み出します。
デザインの特徴とこだわり
左サイドバーが導く、迷わないナビゲーション
『STRUCTURE』の画面構成は、左側にブランド名と概要文、右側にメインコンテンツという2カラム構造です。左サイドバーはスクロールしても常に画面に固定されるため、どれだけページを下に進めてもブランド名と連絡先が視界に残り続けます。
このレイアウトの利点は「安心感」です。一般的な縦スクロール型サイトでは、ヘッダーを過ぎると「自分が今どこにいるのか」を見失いがちですが、サイドバーにブランド名が常駐していることで、訪問者は無意識のうちに「このサイトは信頼できる」という印象を持ちやすくなります。建築事務所や設計事務所のように、信頼性がそのまま受注力につながる業種にとって、これは小さいようで大きなアドバンテージです。
カードが重なっていく「スティッキー・カード」の仕掛け
右カラムのコンテンツには、Philosophy → Company Profile → Works → Contactの4つのセクションが並びます。それぞれ独立した白いカードとして設計され、スクロールすると上から順にカードが重なっていく構造になっています。
また、重なったカードの「端」がわずかに見えるように設計されており、続きのセクションがあることを直感的に伝えてくれます。まるでデスクに積み上げた書類を一枚ずつめくっていくような感覚。この「情報を物理的に扱っている」ような手触りが、訪問者の興味を途切れさせません。
書体とグリッドが醸す「幾何学的な清潔感」
使用フォントは「Manrope（英語）」と「Noto Sans JP（日本語）」。どちらも幾何学的な骨格を持つゴシック体で、理知的でクリーンな印象を与えます。
見出しには極太のウェイトを、本文には極細のウェイトを使う。この太さのメリハリが、レイアウト全体にリズムを与えています。余計な装飾はどこにもなく、文字の太さと余白と線だけで情報を整理する。その潔さこそが、建築的なデザインの真髄といえるかもしれません。
カードが「少しずつズレて」重なる、その数remの設計
スクロールでカードが重なっていくこの仕掛け、実は一枚一枚が固定される位置を少しずつ下にズラして作っています。最初のカードは画面の少し上で止まり、次のカードはそれより数rem下で止まる。こうして後ろのカードが手前のカードを完全に隠さず、前のカードの上端だけが少し覗く——あの「書類が積み重なった」感じは、この数remのズレから生まれています。全部を同じ位置で止めてしまうと、ただ画面が切り替わるだけの単調な動きになってしまいます。
もう一つの細かな判断が、終盤のセクション（コンタクトなど）では、あえてこの固定（スティッキー）をやめていること。最後までカードを貼り付け続けると、ページの締めくくりで動きがくどくなってしまう。なので終わりに近づくと固定を解除して、普通にスクロールで流れていくようにしています。「効果は中盤で効かせて、最後はスッと手放す」。この緩急が、全体を上品にまとめています。
こんな方・こんな用途におすすめ
建築設計事務所・インテリアデザイナー
このテンプレートは、まさに建築やデザインの事務所のために設計されたといってよいでしょう。Philosophy（理念）セクションで設計思想を語り、Works（実績）セクションで過去のプロジェクトをグリッド表示し、Company（会社概要）で信頼情報を整理する。この構成は、実際に建築事務所のサイトで求められる情報設計そのものです。
実績写真は2列に並び、クリックすると拡大表示される機能も搭載。前後の写真を矢印で送れるので、複数の施工事例を一気に見てもらう導線が整っています。
コンサルティングファーム・企業のコーポレートサイト
堅実さや知性を前面に打ち出したい企業サイトにも適しています。会社概要をテーブル形式で整理するセクションが標準で用意されているため、社名・設立年・所在地・事業内容などの基本情報をスムーズに掲載できます。
不動産デベロッパーの物件紹介
カード型のセクション構成は、複数の物件やプロジェクトを「一つの流れ」として見せるのに向いています。ヒーローエリアにメイン物件のイメージ写真を配し、下に個別プロジェクトを並べるという動線は、ブランディングと実績訴求を自然に両立させます。
カスタマイズのヒント
背景色とカードのコントラストで雰囲気を変える
デフォルトではページの背景がライトグレー、カードが白という組み合わせです。ここを逆転し、背景を白、カードを薄いグレーにすると、より軽やかな印象になります。カード背景をクリーム系にすれば温かみが出ますし、逆にカードをダークグレー・テキストを白にすればモダンなダークモード仕様に変身します。設定エリアのカラー指定を書き換えるだけで試せます。
ヒーロー画像の選び方
トップセクションには大きな背景写真が表示されます。建築写真のような「線」がはっきりした被写体は、幾何学的なフォントとの相性が抜群です。一方、自然風景のようにやわらかい被写体を使うと、テンプレート全体の印象がぐっと和らぎます。
「触っていい場所」と「触らない方がいい場所」が決まっています
このテンプレートは、コードの中に「ここは変えてOK」「ここは変更非推奨」という目印を残してあります。色の設定（背景・カード・文字色）は自由に変えてもらう前提で最初にまとめてあり、一方で、カードが重なるためのレイアウト設定（固定位置や重なり順）は”変更非推奨”としています。前者を変えても見た目が変わるだけですが、後者を崩すと、せっかくの積み重なる動きが成立しなくなるからです。
そのため、AIにカスタマイズを頼むときは、「色・文字・画像は自由に変えてOK。ただしカードが重なるレイアウトの仕組みはそのまま残して」と一言添えると安全です。「レイアウトを組み替えて」のような大きな指示は、この構造ごと壊してしまうことがあります。
ちなみにスマートフォンで見ると、この重なる動きは自動的にオフになり、カードが普通に縦に並ぶ素直なレイアウトに切り替わります。小さな画面で無理に重ねると窮屈になるための判断なので、「スマホで効果が出ない」のは不具合ではなく、意図した設計です。安心してご利用ください。
まとめ ― 構造の美しさが信頼になる
『STRUCTURE』は、装飾で目を引くのではなく、「情報の見せ方」そのものの洗練さで勝負するテンプレートです。サイドバー固定、スティッキーカード、幾何学的なタイポグラフィ。すべての要素が「訪問者にとっての分かりやすさ」という1つの目的に向かって設計されています。
建築事務所でなくとも、「論理的で信頼できるブランド」であることを伝えたいすべての方に、ぜひ試していただきたいテンプレートです。
