出典：scullion.ie ↗ 確認日 2026.11.01
Editor's note
編集部の視点
施工写真と一文だけのトップに、3ステップの相談フォームと「相談後に何が起きるか」の説明を置くダブリンの建築・インテリア設計事務所。
ダブリンの建築・インテリア設計事務所 Scullion Architects のサイト。トップは大きな事務所名と、左右2枚の施工写真が切り替わる1画面だけで、左下に「ダブリンを拠点とする建築とインテリアのスタジオ」という一文、右下に「MENU」。メニューを開くとプロジェクト・ニュース・事務所についてと、住所・電話・メール、日付つきの最新のお知らせ3件が出る。「Discuss Your Project（プロジェクトの相談）」は3ステップのフォームで、1ステップ目は名前とメールだけ。相談のあとは電話・オンライン・対面のいずれかで費用・期間・次の手順を話す、と最初に書いている。事務所についてのページには RIAI（アイルランド王立建築家協会）の賞の一覧と、登録事務所・保存建築家の認定が並ぶ。
- 01 相談フォームを3ステップに分け、最初は名前とメールだけにして書き始めやすくする
- 02 フォームの冒頭に「相談のあと何が起きるか（費用・期間・次の手順を話す）」を書く
- 03 受賞歴と協会の登録・認定を事務所のページに年ごとに並べ、信用を示す
Conversion
集客の工夫
- 相談フォーム （あり） 3ステップ。1ステップ目は名前とメールだけ
- 相談後の流れ （あり） 電話・オンライン・対面で費用・期間・次の手順を話すと明記
- 相談の入口の常設 （あり） どのページにも「Discuss Your Project」
- 住所・電話・メール （あり） メニューの中に住所・電話（tel:）・メール（mailto:）
- 受賞歴 （あり） RIAI Awards など2016〜2026年の受賞を一覧に
- 資格・登録 （あり） RIAI 登録事務所、グレードIIIの保存建築家の認定
- 実績一覧 （あり） プロジェクトのページに15件
- メール登録 （なし） なし
トップは、写真と一文だけ
トップは大きな事務所名と、左右2枚の施工写真が切り替わる1画面だけです。左下に 「ダブリンを拠点とする建築とインテリアのスタジオ」 という一文があり、それ以上の説明はありません。建築の仕事は写真で選ばれるため、文字を減らして写真に場所を譲っています。
相談フォームに、相談後の流れを書く
「Discuss Your Project（プロジェクトの相談）」は3ステップのフォームで、1ステップ目は 名前とメールだけ です。冒頭には「内容を拝見し、合う場合は電話・オンライン・対面で、費用・期間・次の手順についてお話しします」と書かれています。送ったあとに何が起きるかが分かるので、初めての人でも書き始めやすくなります。
受賞歴と認定を、年ごとに並べる
事務所についてのページには、2016年から2026年までの RIAI（アイルランド王立建築家協会）の賞 などが年ごとに並び、RIAI の登録事務所であることと、歴史的建物を扱う保存建築家の認定も書かれています。メニューには住所・電話・メールと日付つきのお知らせ3件があり、事務所が今も動いていることが分かります。
チェック項目は 2026.11.01 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #000000 文字・ボタン
- #FFFFFF 写真の上の文字・背景
- #ACC7C9 相談フォームの面（淡い青灰色）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 事務所名・本文・ボタン（すべて） | Founders Grotesk | Hanken Grotesk |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| 本文（p） | 25px / 300 | 1.10 | 17px / 300 |
| ボタン | 25px / 400 | normal | 20px / 400 |
実測値（PC 1440px・SP 375px、2026.11.01 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 大きな事務所名と「MENU」だけ。メニューを開くとプロジェクト・ニュース・事務所について、住所・電話・メール、最新のお知らせ3件。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー 施工写真を左右に2枚。組み合わせが切り替わり、左下に事務所を説明する一文。 ファーストビュー／文字＋画像の左右分割型
- 03 相談フォーム 「Discuss Your Project」。3ステップで、1ステップ目は名前とメール。冒頭に相談後の流れを書く。 進め方／番号つきステップ型
- 04 相談の入口（常時表示） どのページにも「Discuss Your Project」が出る。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 相談フォームは数ステップに分け、最初の画面は名前と連絡先だけにする
- 02 フォームの冒頭に「送ったあと何が起きるか」（誰が見て、どう連絡し、何を話すか）を書く
- 03 協会の登録・資格・受賞歴は、年と名前をそのまま一覧にする
- 04 写真で見せる仕事は、トップの文字を事務所名と一文だけに減らす
FAQ
よくある質問
Scullion Architects のサイトで使われているフォントは？
事務所名から本文・ボタンまで Founders Grotesk 1書体で組んでいます。有料書体なので、無料で近づけるなら Hanken Grotesk などの細めのグロテスク体が候補です。
相談フォームはどんな作りにすると送ってもらいやすいですか？
Scullion Architects は3ステップに分け、最初は名前とメールだけにしています。さらに冒頭で「内容を見て、電話・オンライン・対面で費用・期間・次の手順を話す」と流れを示しています。送ったあとのことが分かると、相談のハードルが下がります。
どんな業種の参考になりますか？
建築設計事務所・工務店・リフォーム会社・造園など、作品の写真で選ばれ、問い合わせから仕事が始まる業種に向きます。士業やコンサルタントの相談フォームにも使える作りです。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はScullion Architectsおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
