出典：hackney.church ↗ 確認日 2026.10.23
Editor's note
編集部の視点
1792年からの教区教会が、公演を日付と料金つきで並べ、貸し会場と来場者向けのFAQをヘッダーから案内するロンドンの教会兼ライブ会場。
ロンドン東部ハックニーの教区教会 St John at Hackney（1792年）のサイト。改修を経て、ライブやイベントの会場としても使われている。黒い背景に「HACKNEY CHURCH」と「LIVE MUSIC AND EVENTS」、その下に教会の窓の形に切り抜いた公演写真が横に流れる。続く「WHAT’S ON」は公演名・日付・会場・料金（例：£24 + FEES）を3列で並べ、「LOAD MORE EVENTS」で追加。メール登録とフッターで締める。ヘッダーには礼拝への案内（TRY CHURCH）、会場の貸し出し（VENUE HIRE）、来場者向けの FAQ が並ぶ。
- 01 公演写真を教会の窓と同じアーチ形に切り抜き、写真だけで場所の個性を伝える
- 02 公演一覧に日付と料金（＋手数料）を並べ、クリック前に行くかどうかを決められる
- 03 礼拝・会場の貸し出し・来場FAQという、目的の違う3種類の訪問者の入口をヘッダーに置く
Conversion
集客の工夫
- 公演の一覧 （あり） 公演名・日付・会場・料金を3列で
- 料金の表示 （あり） 「£15 + FEES」など手数料別と明記
- 貸し会場の案内 （あり） ヘッダーに「VENUE HIRE」、資料のダウンロード
- 来場者向けFAQ （あり） 交通・駐車・自転車置き場・持ち込み禁止品
- バリアフリーの案内 （あり） 車いす席、介助者の無料チケット、補助犬
- 建物の由来 （あり） 1792年の教区教会と改修の経緯（About Us）
- メール登録 （あり） 「最初に知らせを受け取る」登録ボタン
- 言語の切り替え （なし） 英語のみ
建物の形を、写真の切り抜きに使う
ファーストビューは黒い背景に「HACKNEY CHURCH」と「LIVE MUSIC AND EVENTS」の2行だけ。その下を流れる公演写真は、上が丸いアーチ形に切り抜かれています。ヘッダーのアイコンも教会の窓の形です。教会でライブを聴く場所だということが、形だけで伝わります。
日付と料金を、一覧の段階で出す
「WHAT’S ON」は公演名・日付・会場名・料金を3列で並べ、料金は「£38.50 + FEES」のように手数料別であることまで書いています。数が多い分は「LOAD MORE EVENTS」で読み込みます。行くかどうかを一覧だけで決められるので、迷う人を減らせます。
目的の違う訪問者ごとに、入口を分ける
ヘッダーには礼拝に来る人向けの「TRY CHURCH」、会場を借りたい人向けの「VENUE HIRE」、公演に来る人向けの「FAQS」が並びます。貸し会場のページはコンサート・撮影・パーティー・会議などの用途と設備を挙げ、資料をダウンロードできます。FAQ には車いす席、介助者の無料チケット、最寄りのバス停と駅、駐輪場、持ち込み禁止品までまとめられています。
チェック項目は 2026.10.23 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #000000 背景
- #FFFFFF 見出し・メニュー・枠線のボタン
- #D6D7F0 公演一覧の会場名（淡い青紫）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| ロゴ文字・公演名・メニュー | Ginto Normal | Manrope |
| 副題・メール登録の一文 | GT Alpina | Newsreader |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 72px / 300 | 1.20 | 36px / 300 |
| 本文（p） | 18px / 500 | 1.98 | 18px / 500 |
| ボタン | 16px / 400 | 1.50 | — |
実測値（PC 1440px・SP 375px、2026.10.23 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 礼拝への案内・会社紹介と、会場の貸し出し・FAQ・Instagram。中央に教会の窓のアイコン。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 「HACKNEY CHURCH」と「LIVE MUSIC AND EVENTS」の2行。 ファーストビュー／大きな文字型
- 03 近日の公演 窓の形に切り抜いた公演写真が横に流れ、下に公演名と日付。 入口／カテゴリ別スライド型
- 04 WHAT’S ON 写真・公演名・日付・会場・料金を3列で。下に「さらに読み込む」ボタン。 一覧／カード並び型
- 05 メール登録 「次の公演を最初に知る」の一文と登録ボタン。 行動喚起／メール登録型
- 06 フッター 連絡先・所在地・規約・FAQ と、献金や教会の紹介へのリンク。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 建物や店に特徴的な形（窓・看板・器など）があれば、写真の切り抜きに使う
- 02 イベントは日付と料金を一覧に出し、詳しい説明は個別ページに回す
- 03 来場前に聞かれること（交通・駐車・車いす・持ち込み）は FAQ にまとめる
- 04 会場を貸し出すなら、ヘッダーに入口を置き、資料をダウンロードできるようにする
FAQ
よくある質問
Hackney Church のサイトで使われているフォントは？
ロゴ文字・公演名・メニューに Ginto Normal、副題とメール登録の一文に GT Alpina を使っています。どちらも有料書体なので、無料で近づけるなら Manrope と Newsreader の組み合わせが候補です。
イベント会場のサイトに料金まで載せるべきですか？
Hackney Church は一覧の段階で「£24 + FEES」のように料金と手数料の有無を出しています。行くかどうかを一覧で決められるので、詳細ページを開く前に離れる人を減らせます。
どんな業種の参考になりますか？
ライブハウス、ホール、寺社や公民館の貸し会場、イベントを開くカフェやギャラリーなど、催しの告知と場所の貸し出しを両方行う施設に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はHackney Churchおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
