出典：rudysbarbershop.com ↗ 確認日 2026.10.30
Editor's note
編集部の視点
動画のすぐ下に、州を選んで店を探す予約の入口を重ね、メニュー・物販・採用まで1ページで回すアメリカの理容室チェーン。
1993年にシアトルで1号店を開いた理容室 Rudy's Barbershop のサイト。ファーストビューは店内でカットする様子の動画に「ENCOURAGING FREEDOM OF EXPRESSION FOR 30 YEARS」の一文。その下端に紙のような質感のカードが重なり、「BOOK AN APPOINTMENT」とオレゴン・ワシントン・ジョージアの州のタブ、「Click here to find a location」の店舗選択が並ぶ。続いて自社のポマードの再入荷の告知、カット・カラー・その他のメニュー、「WALK-INS ARE WELCOME, BUT BOOKING IS BEST!（飛び込みも歓迎、でも予約がいちばん）」、ヘアケア製品の商品グリッド、ストーリーと採用への入口。ヘッダーは BOOK NOW・PRODUCTS・CAREERS の3つだけ。
- 01 ファーストビューの動画の下端に予約カードを重ね、州を選ぶだけで近くの店の予約に進めるようにする
- 02 ヘッダーを「予約・商品・採用」の3つに絞り、来店客・買い物客・働きたい人の入口を最初から分ける
- 03 メニューの説明に「シャンプー・頭皮マッサージ・ホットタオルつき」と中身を書き、カラーは無料の相談から始める
Conversion
集客の工夫
- 予約の導線 （あり） ヘッダーの BOOK NOW とファーストビュー下の予約カード
- 店舗の探し方 （あり） オレゴン・ワシントン・ジョージアの州タブと店舗選択
- メニューの中身 （あり） カットにシャンプー・頭皮マッサージ・ホットタオルが含まれると明記
- 初回の相談 （あり） カラーは無料のカウンセリングを予約してから
- 飛び込みの案内 （あり） 「飛び込みも歓迎、でも予約がいちばん」
- 物販（EC） （あり） ヘアケア・ボディケア製品をトップで販売
- 採用の導線 （あり） ヘッダーの CAREERS と「JOIN OUR TEAM」
- 電話番号の掲載 （なし） トップにはなし（店舗選択から）
予約の入口を、動画のすぐ下に重ねる
ファーストビューは店内でカットする様子の動画と一文だけです。その下端に紙のような質感のカードが重なり、「BOOK AN APPOINTMENT」とオレゴン・ワシントン・ジョージアの州のタブ、店舗の選択が並びます。店舗一覧のページを探さなくても、トップで地域を選ぶだけで予約に進めます。
入口を「予約・商品・採用」の3つに絞る
ヘッダーは BOOK NOW・PRODUCTS・CAREERS の3つとカートだけです。髪を切りに来る人、ヘアケア製品を買いたい人、ここで働きたい人の入口を最初から分けています。ページの終わりにも「OUR STORY」と「JOIN OUR TEAM」が並び、採用の入口が2か所にあります。
メニューは中身を書き、予約のほうが確実と伝える
カットの説明には「シャンプー・頭皮のミニマッサージ・ホットタオルつき」と、料金の前に施術の中身が書かれています。カラーは無料のカウンセリングを予約してから施術日を決める流れです。写真の上には「飛び込みも歓迎、でも予約がいちばん」の一文があり、飛び込みを断らずに予約へ寄せています。
チェック項目は 2026.10.30 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #F5F5F5 背景
- #111111 見出し・本文・ヘッダー
- #FCEBCA 見出しの差し色・購入ボタン
- #2E2E30 予約カードの文字
- #FFFFFF 動画の上の文字・ボタン
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン（すべて） | Source Sans Pro | Source Sans 3 |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 25px / 500 | 1.20 | 25px / 500 |
| h2 | 56px / 900 | 1.00 | 40px / 900 |
| h3 | 20px / 900 | 1.20 | 20px / 900 |
| 本文（p） | 16px / 400 | 1.30 | 16px / 400 |
| ボタン | 16px / 900 | 1.00 | 16px / 900 |
実測値（PC 1440px・SP 375px、2026.10.30 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー ロゴと、BOOK NOW・PRODUCTS・CAREERS の3つ、カート。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 店内でカットする様子の動画に、「30年間、自由な表現を後押ししてきた」の一文。 ファーストビュー／全面動画＋コピー型
- 03 予約カード 動画の下端に重なるカード。「BOOK AN APPOINTMENT」と州のタブ、店舗の選択。 一覧／種類で絞るタブ型
- 04 新商品の告知 自社のマットポマードの再入荷を写真と一文で。 ファーストビュー／全面写真＋コピー型
- 05 メニュー カット・カラー・その他の3つ。カットに含まれるもの、カラーは無料相談から、など中身を書く。 一覧／カード並び型
- 06 予約のすすめ 写真の上に「飛び込みも歓迎、でも予約がいちばん」。 メッセージ／大きな一文型
- 07 商品 ヘア・ボディ・トラベルサイズ・キットのタブと、価格つきの商品6点。 商品／グリッド型
- 08 ストーリーと採用 「髪だけの話じゃない」と、ストーリー・採用の2ボタン。 コンセプト／写真＋メッセージ型
- 09 フッター ストーリー・採用・ヘルプ・卸・スタッフの学習ページ・予約・ショップのログイン。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 店舗が複数あるサロンは、ファーストビューのすぐ下に「地域を選んで予約」の入口を置く
- 02 ヘッダーは予約・商品・採用など、目的の違う人ごとの入口だけに絞る
- 03 メニューには料金だけでなく、施術に含まれるもの（シャンプー・マッサージなど）を書く
- 04 飛び込みと予約の両方を受けるなら、「予約のほうが確実」とはっきり書く
FAQ
よくある質問
Rudy's Barbershop のサイトで使われているフォントは？
見出しから本文、ボタンまで Source Sans Pro で組んでいます。無料で使える書体で、Google Fonts では後継の Source Sans 3 が公開されています。
店舗が多いサロンの予約の入口は、どう作ればいいですか？
Rudy's はファーストビューの動画の下端に予約カードを重ね、州のタブと店舗の選択だけで予約に進めるようにしています。店舗一覧のページを探させるより、トップで地域を選んでもらうほうが迷いません。
どんな業種の参考になりますか？
理容室・美容室・ネイルサロン・整体院など、予約制で店舗が複数あり、物販や採用も同じサイトで行いたい業種に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はRudy's Barbershopおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
