出典：joycetower.ie ↗ 確認日 2026.10.21
Editor's note
編集部の視点
「いま開いているか・次はいつ開くか」を画面の隅に出し続け、行き方をバスと電車の路線ごとに書くダブリンの小さな文学博物館。
作家ジェイムズ・ジョイスと『ユリシーズ』の舞台になった、ダブリン湾の塔を使った博物館のサイト。ファーストビューは夕焼けの塔の写真に「Ours is the Omphalos」「It all begins with us」という2つの大きな見出し。画面の左下には「いまは閉館中。次の開館は木曜10:00〜16:00」というカードが出て、スクロールしても残り続ける。トップは収蔵品のスライド、ジョイスと塔の歴史、イベント、団体見学の予約、来館案内と続く。来館のページでは、入館無料・予約なしで入れること、曜日ごとの開館時間、バスの路線と電車の駅からの歩き方、車いすでは入れないことまで書いている。
- 01 開館中か閉館中か、次はいつ開くかを画面の隅に出し続け、来館前の「今行けるか」に答える
- 02 行き方をバスの路線番号と電車の駅ごとに書き、降りる停留所と歩く時間まで示す
- 03 年25ユーロの会員と1回ごとの寄付を同じページで案内し、ボランティア運営の支え方を選べるようにする
Conversion
集客の工夫
- 開館状況の表示 （あり） 画面左下に「閉館中・次の開館日時」のカード
- 開館時間 （あり） 月曜休館、火〜日 10:00〜16:00
- 入館料 （あり） 無料・予約なしで入館可
- 交通案内 （あり） バス59番・111番と、DART の2駅からの歩き方
- バリアフリーの情報 （あり） 車いすでは入れないことを明記
- 団体見学の予約 （あり） トップに「Book Now」
- 会員・寄付 （あり） 年25ユーロの会員と1回ごとの寄付
- 来られない人への案内 （あり） 来館ページにバーチャルツアー
「今行けるか」に、開いた瞬間に答える
ファーストビューは夕焼けの塔の写真に「Ours is the Omphalos」「It all begins with us」という大きな見出し。その左下に 「いまは閉館中。次の開館は木曜10:00〜16:00」というカードが出ていて、スクロールしても画面に残り続けます。カードからは来館案内へ進めます。開館日が限られる小さな施設では、サイトを開いた人がまず知りたいのは「今日行けるか」です。
行き方は、路線番号と停留所まで
来館のページでは、入館は無料で予約なしでも入れること、月曜休館で火〜日の10時〜16時に開くことを書いたうえで、バスの59番・111番と、DART の2つの駅からの行き方を一つずつ説明しています。降りる停留所の名前や、駅から海沿いを歩いて約10分といった道順まであり、初めての人でも迷いません。塔が車いすでは入れないことも先に書いています。
支え方を、選べるようにする
この博物館は、2012年に閉館の危機から地域の人々が救い、いまもボランティアが運営を担っています。支援のページでは 年25ユーロの会員「Friends of the Tower」と、1回ごとの寄付を並べ、会員には特別なツアーやイベントの先行予約があることを書いています。来られない人にはバーチャルツアーも用意し、遠くの読者もファンとしてつなぎとめています。
チェック項目は 2026.10.21 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #000000 背景
- #171717 セクション背景
- #FFFFFF 見出し・本文
- #999999 補足テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し | Apris | Cormorant |
| 本文・ボタン | Poppins | Poppins（無料） |
| 小さなラベル | 等幅（システム） | IBM Plex Mono |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 42px / 300 | 1.00 | 28px / 300 |
| h3 | 28px / 400 | 1.00 | 22px / 400 |
| 本文（p） | 125px / 300 | 0.80 | 50px / 300 |
| ボタン | 21px / 400 | 2.14 | 21px / 400 |
実測値（PC 1440px・SP 375px、2026.10.21 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左にロゴ、右にイベント・収蔵品・来館・支援と、検索とメニュー。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 夕焼けの塔の写真に2つの大きな見出しと、場所を示す小さなラベル。 ファーストビュー／全面写真＋コピー型
- 03 収蔵品 財布・杖・初版本・ギターなど、ジョイスの遺品を写真のスライドで。 入口／カテゴリ別スライド型
- 04 ジョイスと塔の歴史 短い滞在が文学史に残る場所になった経緯と、人物・塔それぞれの読みものへの入口。 コンセプト／写真＋メッセージ型
- 05 イベント 最新のイベント。 お知らせ／ニュース一覧型
- 06 団体見学 団体の予約を受け付ける案内。 コンセプト／写真＋メッセージ型
- 07 来館案内 入館無料、ダブリン中心部から14km、電車とバスでの行き方、車いすでは入れないこと。 コンセプト／写真＋メッセージ型
- 08 写真 塔と海辺の写真をスライドで。 入口／カテゴリ別スライド型
- 09 フッター 所在地・慈善団体の登録番号・メール・電話、SNS、規約。 フッター／ナビ＋会社情報型
- 10 開館状況（常時表示） 「いまは閉館中。次の開館は木曜10:00〜16:00」と来館案内へのリンクが、画面の左下に残り続ける。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 営業時間が限られる施設は、「いま開いているか・次はいつ開くか」を自動で出し、画面の隅に置き続ける
- 02 アクセスは「駅から徒歩○分」だけでなく、路線番号・降りる停留所・歩く道まで書く
- 03 車いすで入れない、予約がいらないなど、行ってから困ることを先に書く
- 04 会費と寄付の金額や特典を1ページにまとめ、支え方を選べるようにする
FAQ
よくある質問
James Joyce Tower のサイトで使われているフォントは？
見出しに Apris、本文とボタンに Poppins、小さなラベルに等幅の書体を使っています。Apris は有料なので、無料で近づけるなら Cormorant が候補です。Poppins は無料で使えます。
開館状況を画面に出し続けるのは、どんな施設に向いていますか？
開館日や時間が限られている施設ほど効果があります。James Joyce Tower はボランティアで運営され、月曜は休館です。「今日行けるか」をサイトを開いた瞬間に答えることで、行ってみたら閉まっていた、という残念な体験を減らせます。
どんな業種の参考になりますか？
地域の資料館・記念館・小さな美術館・ギャラリーなど、開館日が限られる文化施設に向きます。会員や寄付で運営を支えてもらう団体なら、支援のページの組み立ても参考になります。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はJames Joyce Towerおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
