WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 美容室・サロン
  4. ラムネ

webcan analyze lamune-kyoto.com

BEAUTY SALON · 京都府 · PICKED 2026.10.17

ラムネ美容室・サロンのホームページデザイン参考 — 手描きイラスト・余白・動画

ラムネのトップページ（PC）
PC（1440px）
ラムネのトップページ（スマホ）
スマホ（375px）
出典：lamune-kyoto.com ↗確認日 2026.10.17
ラムネ美容室・サロン · 京都府
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

店の入口から店内へ進む映像と、手描きのイラストで「遊び心のある美容室」を伝える。

京都の美容室のサイト。ファーストビューは左に短い文章、右に店の入口から店内へ進む映像を大きく置き、ナビは右端に縦書きで並べている。ブログ・店のこと・スタッフ・メニュー・スタイル・求人の6つのセクションに番号を振り、店内の写真には手描きのイラストを重ねて、店の雰囲気を言葉より先に伝えている。

  1. 01ファーストビューは、左の白い余白に短い文章、右に入口から店内へ進む映像という2分割の構成。映像にも手描きのイラストが登場する
  2. 02「01 BLOG」「02 ABOUT」のように、各セクションに番号と英字の見出しを縦に添えている
  3. 03店内やスタッフの写真に手描きのイラストを重ねて、店の遊び心を見せている

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
－予約・問い合わせ導線—
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内

予約の入口をいつも見える場所に

PCでは右端の縦ナビの下に「RESERVE」とInstagramを置き、スマホでは画面上部に固定したヘッダーに同じ2つを並べている。どのセクションを見ていても予約へ進める。

メニューに料金の目安を出す

メニューのセクションで、主なメニューの料金を「〜」つきの目安で一覧にしている。初めての人が予約の前に費用の見当をつけられる。

スタッフを顔写真と名前で紹介する

スタッフを顔写真と名前（ローマ字と漢字）で並べている。美容室は「誰に切ってもらうか」で選ばれることが多く、指名や予約の後押しになる。

チェック項目は 2026.10.17 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FFFFFF背景
#3C3835本文テキスト・濃色の帯 · ダークブラウン

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

TYPOGRAPHYフォント

用途
和文
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
用途
英字（ナビ・見出し）
使用フォント
Lato
無料で近いもの
Lato
用途
英字・数字（セクション番号など）
使用フォント
Roboto Condensed
無料で近いもの
Roboto Condensed
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h215px / 5002.5014px / 500
h316px / 5002.5014px / 500
本文（p）26px / 700—26px / 700

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

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

  1. 01

    ヘッダー

    左上に手書き風のロゴ。ナビは右端に縦書きで並べ、その下に予約（RESERVE）とInstagram。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    左に短い文章、右に入口から店内へ進む映像（手描きのイラストつき）。

    ファーストビュー／左コピー・右写真の分割型
  3. 03

    01 BLOG

    ブログを写真つきのカードで横に並べる。

    記事・メディア／記事カードグリッド型
  4. 04

    02 ABOUT

    店内の写真に手描きのイラストを重ね、短い文章を添える。

    コンセプト／写真＋メッセージ型
  5. 05
  6. 06

    03 STAFF

    スタッフを顔写真と名前で並べる。

    人・代表／代表・院長あいさつ型
  7. 07

    04 MENU

    写真と、主なメニューの料金の目安。

    料金／表組み型
  8. 08

    05 STYLE

    ヘアスタイルの写真を格子状に並べる。

    事例・実績／写真グリッド型
  9. 09

    06 RECRUIT

    イラストと、求人の問い合わせ先（電話・メール）。

    行動喚起／電話＋Web予約の2ボタン帯型
  10. 10
ラムネの構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01ファーストビューは、店の入口や店内の映像1本と短い文章だけにする
  2. 02セクションに番号と英字の見出しを付けて、縦に長いページでも現在地が分かるようにする
  3. 03写真に手描きのイラストを重ねるなど、店の人柄が出る要素を1つ決めてくり返す
  4. 04予約の入口を、PCは常に見えるナビの近く、スマホは上部の固定ヘッダーに置く

FAQよくある質問

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

和文は Noto Sans JP、英字のナビや見出しは Lato、セクション番号などは Roboto Condensed です。どれも Google Fonts で無料で使えます。

美容室のサイトで料金は出したほうがいいですか？

出したほうが予約につながりやすくなります。正確な金額が髪の長さで変わる場合も、「〜」をつけた目安を出しておくと、初めての人が安心して予約できます。

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

美容室・ネイルサロン・まつげサロンのほか、カフェや雑貨店など、店の雰囲気そのものが選ばれる理由になる業種に応用できます。

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

FROM REFERENCE TO YOUR SITE

このテイストで、
御社のサロンサイトを。

「ラムネのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら