出典：huxleyparlour.com ↗ 確認日 2026.10.26
Editor's note
編集部の視点
トップを「いま開いている展示」だけにして会期と会場を大きく出し、フッターに3つの会場の営業時間と地図を並べるロンドンの現代美術ギャラリー。
2010年に始まった、戦後・現代の絵画と写真を扱うギャラリー Huxley-Parlour のサイト。ロンドンのマドックス・ストリートとスワロー・ストリートの2か所と、ウィルトシャーの1か所に会場がある。トップページはいま開いている展示の写真だけを全面に切り替えて見せ、展示名・会期（例「13.10 – 27.10 2026」）・会場名を大きな文字で重ねている。ヘッダーは MENU・ロゴ・SEARCH だけ。フッターには3つの会場それぞれの住所・営業日と時間・地図のリンク、メールと電話、メール登録が並ぶ。作品の問い合わせは、メールを入れると販売の担当から連絡が来る「ENQUIRE」の欄で受けている。
- 01 トップを「いま開いている展示」に絞り、展示名・会期・会場を写真の上に大きく重ねる
- 02 会場が複数あるので、フッターに会場ごとの住所・営業日と時間・地図のリンクを並べ、どこにいつ行けばよいかを一目で分かるようにする
- 03 作品の問い合わせは、メールアドレスだけで送れる「ENQUIRE」の欄にして、販売の担当から連絡する形にする
Conversion
集客の工夫
- 開催中の展示 （あり） トップ全面に展示名・会期・会場
- 会場ごとの営業時間 （あり） フッターに3会場の曜日と時間
- 地図への導線 （あり） 会場ごとに「Map」のリンク
- 作品の問い合わせ （あり） メールだけで送れる「ENQUIRE」
- 電話・メールの掲載 （あり） メニューとフッターに電話とメール
- サイト内検索 （あり） ヘッダーに SEARCH
- メール登録 （あり） フッターに EMAIL UPDATES
- 入場料の案内 （なし） トップにはなし
トップを「いま開いている展示」に絞る
トップページは、いま開いている展示の写真が全面に切り替わるだけです。写真の上には 展示名・会期（例「13.10 – 27.10 2026」）・会場名が大きな文字で重ねられ、ギャラリーに行く人が知りたい「何を・いつまで・どこで」が最初の画面で分かります。ヘッダーも MENU・ロゴ・SEARCH の3つだけに絞っています。
会場ごとに、営業日と時間と地図を並べる
会場はロンドンのマドックス・ストリートとスワロー・ストリート、ウィルトシャーのミルデンホールの3か所です。フッターには 会場ごとの住所・営業日と時間・「Map」のリンクが並びます。曜日や時間が会場で違うため、それぞれを分けて書き、どこにいつ行けばよいかを迷わせません。
作品の問い合わせは、メールだけで
作品の問い合わせは「ENQUIRE」の欄で受けています。メールアドレスを入れると、販売の担当から連絡が来る形です。問い合わせの入力を最小限にして、最初の連絡をしやすくしています。
チェック項目は 2026.10.26 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景・写真の上の文字
- #000000 見出し・本文
- #716F6F 補足テキスト
- #FBFBFB パネルの背景
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文（すべて） | Lausanne | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 85px / 300 | 1.00 | 25px / 300 |
| h3 | 17px / 350 | 1.61 | 16px / 350 |
| 本文（p） | 19px / 350 | 1.60 | 16px / 300 |
実測値（PC 1440px・SP 375px、2026.10.26 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左に MENU、中央にロゴ、右に SEARCH。メニューには作家・展示・アートフェア・作品・映像・ギャラリー紹介と、メールと電話。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー（開催中の展示） 展示室の写真を全面に切り替え、上に会場の区分と会期、下に作家名と展示名、会場名を大きく。右下に「1 2」の番号。 ファーストビュー／全面写真＋コピー型
- 03 フッター ウィルトシャーとロンドン2か所の住所・営業日と時間・「Map」、メールと電話、SNS、メール登録。 フッター／ナビ＋会社情報型
- 04 作品の問い合わせ（ENQUIRE） メールアドレスを入れると販売の担当から連絡が来る欄。 行動喚起／メール登録型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 催しや季節の企画があるときは、トップを「いまやっていること」に絞り、期間と場所を大きく書く
- 02 拠点が複数あれば、拠点ごとに住所・営業日と時間・地図のリンクをまとめて並べる
- 03 高額な商品の問い合わせは、入力をメールだけにして、担当から連絡する形にする
- 04 ヘッダーはメニューと検索だけにして、写真と情報の邪魔をしない
FAQ
よくある質問
Huxley-Parlour のサイトで使われているフォントは？
見出しから本文まで Lausanne の細いウェイトで組んでいます。有料書体なので、無料で近づけるなら Inter の細いウェイトが候補です。
トップページに「いま開いている展示」しか載せないのはなぜ？
ギャラリーに来る人がまず知りたいのは「いま何をやっていて、いつまでか、どこでか」だからです。Huxley-Parlour は展示名・会期・会場を写真の上に大きく出し、それ以外の情報はメニューとフッターに回しています。
どんな業種の参考になりますか？
ギャラリー・美術館・ショールーム・イベント会場など、期間限定の企画を見に来てもらう業種に向きます。拠点ごとの営業時間と地図をまとめる方法は、複数の店舗を持つ小売店や飲食店にも使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はHuxley-Parlourおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
