Recent ·Picked 2026.10.18

Podium

映像制作・クリエイティブスタジオ（スポーツ領域）のサイトデザイン参考 — モノクロ・ナビは3項目・スクロール演出・制作会社

出典：podium.global ↗ 確認日 2026.10.18

ワイヤーをダウンロード ↓ サイトを見る ↗

Editor's note

編集部の視点

メニューを WORK / ABOUT / CONTACT の3つだけに絞った、スポーツ専門の制作スタジオ。

スポーツブランドとアスリートの映像・クリエイティブを手がける Podium のサイト。白黒だけの画面に、形を変え続ける図形の中から映像がのぞくファーストビューと、「アスリートのためのクリエイティブディレクションと制作」の一文。メニューは WORK・ABOUT・CONTACT の3つだけで、その下は案件名の一覧、制作の裏側、取引先・サービス・一緒に仕事をしたアスリートの一覧と、実績で語る構成になっている。

01 メニューを3項目に絞り、「実績を見る → 会社を知る → 連絡する」の順路しか用意しない
02 「スポーツの」と守備範囲を狭く名乗り、合う相手からだけ選ばれるようにしている
03 取引先・サービス・アスリートを、ロゴではなく名前の一覧で淡々と並べる

Conversion

集客の工夫

メニューの絞り込み（あり） WORK・ABOUT・CONTACT の3項目（PCは常時表示）
ヘッダーに問い合わせ（あり） CONTACT がメニューに常設
実績の一覧（あり）案件名8件をトップに
制作の裏側（あり） BEHIND THE SCENES のブロック
取引先・実績者の一覧（あり）クライアント・アスリートを名前で
SNSへの導線（あり） Instagram・Vimeo
電話番号の掲載（なし）なし
メールアドレスの掲載（なし）トップにはなし（CONTACT ページへ）

守備範囲を、狭く名乗る

ファーストビューの一文は「アスリートのためのクリエイティブディレクションと制作」。映像制作なら何でも、ではなくスポーツに限っています。対象を絞ると、その領域の相手からは「自分たちのための会社だ」と選ばれやすくなり、相性の悪い問い合わせも減ります。

メニュー3つで、順路を1本にする

メニューは WORK・ABOUT・CONTACT の3つだけです。実績を見て、会社を知って、連絡する。選択肢が少ないほど、問い合わせまでの道のりは短くなります。ただしこれは、実績で判断される業種だから成り立つ型です。

実績を、名前の一覧で語る

案件名8件、制作の裏側、そして取引先・サービス・アスリートの一覧が続きます。ロゴを並べるのではなく、名前を淡々と並べる見せ方は、白黒の画面とも合っています。「誰と仕事をしてきたか」が、そのまま信用になる業種の典型です。

チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。

Colour

配色

#000000 文字・背景（反転）
#FFFFFF 背景
#C4C4C4 補足テキスト

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

Typography

フォント

用途	使用フォント	無料で近いもの
見出し・本文・メニュー	Futura	Jost
小さなラベル	Univers Condensed	Roboto Condensed

要素	PC サイズ / 太さ	PC 行間	SP サイズ / 太さ
h2	62px / 700	0.90	32px / 700
h3	24px / 700	1.00	24px / 700
本文（p）	12px / 400	1.10	12px / 400
ボタン	16px / 400	1.30	16px / 400

実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

Structure

ページ構成（上から順に）

01 ヘッダー左にロゴ、右に WORK・ABOUT・CONTACT の3つ。SP では MENU にまとまる。ヘッダー／ロゴ＋横並びナビ型
02 ファーストビュー形を変え続ける図形の中から映像がのぞく。左下に「アスリートのためのクリエイティブディレクションと制作」の一文。ファーストビュー／大きな文字型
03 実績案件名8件を写真つきで。一覧／カード並び型
04 制作の裏側撮影現場の写真で、制作の過程を見せる。コンセプト／写真＋メッセージ型
05 実績の範囲「世界中のスポーツブランドとアスリートと仕事をしてきた」の一文。メッセージ／大きな一文型
06 取引先・サービス・アスリート 3つの一覧を名前だけで並べる。進め方／番号つきステップ型
07 フッター SNS とページへのリンク。フッター／ナビ＋会社情報型

Download

ワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

Podiumの構成を DevNJ の部品で組んだワイヤーフレーム（PC） — PC（1440px）

↓ PC版（1440px）SVG ↓ スマホ版（375px）SVG

Figmaでの使い方

SVGをダウンロードする
Figmaのキャンバスにファイルをドラッグ＆ドロップする
セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

Reproduce

このサイトを参考にするときのポイント

01 守備範囲を狭く名乗れる業種なら、事業紹介の一文に「〇〇の」と対象を入れる
02 実績で判断される業種は、メニューを3項目程度に絞っても迷わない
03 取引先はロゴを並べるより、名前の一覧のほうが静かで読みやすいこともある
04 サービスの種類が多い会社は、メニューを絞る前に入口の数を見直す

FAQ

よくある質問

Podium のサイトで使われているフォントは？

見出しから本文まで Futura、小さなラベルに Univers Condensed を使っています。無料で近づけるなら Jost（Futura 系）と Roboto Condensed が候補です。

メニューが3つだけで、必要な情報は伝わりますか？

Podium は実績で選ばれる制作会社なので、「実績・会社・連絡」の3つで足ります。サービスの種類が多い会社や、料金・アクセスを確かめたい人が多い業種がそのまま真似すると迷子が出るので、何で選ばれているかを先に確認してください。

どんな業種の参考になりますか？

映像制作・デザイン会社・写真スタジオなど、実績が主役の業種に向きます。特定の領域に特化した専門家（スポーツ、医療、飲食など）の事務所サイトにも応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はPodiumおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。掲載ギャラリー: Recent