Awwwards ·ポーランド／ドイツ ·Picked 2026.10.18
Signal-A Studio
クリエイティブスタジオのサイトデザイン参考 — モノクロ・大きな英字・ケーススタディ・受賞歴の明示
出典：signal-a.studio ↗ 確認日 2026.10.18
Editor's note
編集部の視点
黒と白の2色だけで、受賞歴と案件の範囲を淡々と並べるスタジオサイト。
ワルシャワとベルリンを拠点にするデザインスタジオ Signal-A のサイト。配色は黒と白の2色だけ。ヘッダーには現在時刻（CET）と2つの都市名が出る。ファーストビューは細い書体と太い書体を混ぜた大きな自己紹介文で、その下にショーリール、案件ごとに「受賞歴」と「担当範囲」を添えた実績リスト、受賞一覧、そして「ディスカバリーコールを予約する」で終わる。
- 01 ヘッダーに現在時刻と拠点の都市名を出し、どの時間帯で動くチームかを最初に伝える
- 02 実績は1件ごとに「受賞歴（NOTABLE RECOGNITIONS）」と「担当範囲（PROJECT SCOPE）」をセットで添える
- 03 配色は黒と白だけ。細い書体と太い書体の対比で、大きな文字に強弱をつけている
Conversion
集客の工夫
- ヘッダーの追従 （あり） PC は全項目を上部に固定、SP は MENU
- 拠点と時刻の表示 （あり） CET の現在時刻と WARSAW / BERLIN
- 案件ごとの担当範囲 （あり） アートディレクション・ブランディング・開発など
- 受賞歴の明示 （あり） 案件ごと＋受賞一覧
- 相談予約の導線 （あり） 「SCHEDULE A DISCOVERY CALL」
- SNSへの導線 （あり） Instagram・Behance
- メールアドレスの掲載 （なし） トップにはなし（CONTACT ページへ）
- 電話番号の掲載 （なし） なし
どの時間帯のチームかを、最初に伝える
ヘッダーには現在時刻（CET）と「WARSAW / BERLIN」が出ています。海外の相手と仕事をするスタジオにとって、連絡したときに何時なのかは意外に大きな判断材料です。会社概要に書くより、ヘッダーで常に見せるほうが確実に伝わります。
実績1件ごとに、担当範囲を書く
ケーススタディは1件ずつ、PROJECT SCOPE（担当範囲）と NOTABLE RECOGNITIONS（受賞歴）がセットで並びます。作品の見た目だけを並べるより、「何を任され、どう評価されたか」が先に読めるので、問い合わせる側が「自分の案件を頼めるか」を自分で判断できます。
最後の行動を、軽くする
ページの最後は「お問い合わせ」ではなく「SCHEDULE A DISCOVERY CALL（ディスカバリーコールを予約する）」です。見積もり依頼より気軽な**「まず話す」という入口**を用意すると、検討の早い段階の相手とも接点が持てます。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #000000 文字・罫線・反転面
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| ナビ・ラベル・本文 | GT America Mono | IBM Plex Mono |
| 大きな文の細い部分 | PP Editorial New | Instrument Serif |
| 大きな文の太い部分 | Neue Haas Grotesk | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| ボタン | 12px / 300 | 1.00 | 10px / 300 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー ホーム・実績・アーカイブ・会社・連絡・フォローと、現在時刻・都市名。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 細い書体と太い書体を混ぜた、大きな自己紹介文。下に短い4つの言葉。 ファーストビュー／大きな文字型
- 03 ショーリール 製品画面の映像。「SHOWREEL 2026 COMING SOON」。 動画／動画カード型
- 04 ケーススタディ 案件ごとに、担当範囲と受賞歴を並べたリスト。 事例・実績／リスト＋ラベル型
- 05 考え方 「細部まで作り込んだデジタル体験で、ブランドを際立たせる」という大きな一文。 メッセージ／大きな一文型
- 06 受賞一覧 Awwwards・CSS Design Awards などの受賞を一覧で。 お知らせ／ニュース一覧型
- 07 相談の予約 「スタジオについて」と「ディスカバリーコールを予約する」。 行動喚起／ボタン帯型
- 08 フッター 拠点の都市名・SNS・プライバシーポリシーと、大きなロゴの帯。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 海外や遠方の相手がいるなら、拠点の都市名と現地時刻をヘッダーに出す
- 02 実績は1件ごとに「何を担当したか」を書き、相手が自分の案件を頼めるか判断できるようにする
- 03 写真と文字の質が保てるなら、配色は2色でも成り立つ
- 04 最後の行動は「問い合わせ」より軽い「相談の予約」にする
FAQ
よくある質問
Signal-A のサイトで使われているフォントは？
ナビや本文に GT America Mono（等幅）、大きな自己紹介文に PP Editorial New（細いセリフ体）と Neue Haas Grotesk（太いサンセリフ）を組み合わせています。無料で近づけるなら IBM Plex Mono・Instrument Serif・Inter が候補です。
黒と白だけで、地味になりませんか？
Signal-A は文字の太さの差と、実績の写真・映像で強弱をつけています。色を減らすほど、写真と文字組みの質がそのまま見えるので、素材に自信がある業種ほど向いています。
どんな業種の参考になりますか？
デザイン事務所・制作会社・建築事務所など、実績と受賞歴で選ばれる業種に向きます。複数の都市や国で仕事をする会社の「拠点の見せ方」の参考にもなります。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はSignal-A Studioおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Site of the Day
