1. TOP
  2. デザイン参考集
  3. 士業・金融
  4. 柳生質舗

webcan analyze yagyu-shop.com

PROFESSIONAL SERVICES · 大阪府 · PICKED 2026.10.17

柳生質舗士業・金融のホームページデザイン参考 — 質屋・明朝体・モノトーン

柳生質舗のトップページ(PC)
PC(1440px)
柳生質舗のトップページ(スマホ)
スマホ(375px)
出典:yagyu-shop.com ↗確認日 2026.10.17
柳生質舗士業・金融 · 大阪府

EDITOR'S NOTE編集部の視点

店頭で笑顔で応対するスタッフの写真と、明朝体の「時代に、人に、よりそう質屋」で、入りにくさを和らげる。

大阪府貝塚市の質屋のサイト。ファーストビューは、店の窓口で品物を手に笑顔で応対するスタッフの写真に、明朝体の「時代に、人に、よりそう質屋」を重ね、右下に「本日の貴金属買取り価格」のカードと縦書きの「来店・査定予約」のボタンを置いている。お知らせ、質預かりと買取りの説明、取り扱い商品、お取引事例、お客様の声、店の紹介、コラム、貴金属の買取り情報、店舗案内、お問い合わせと続き、白とグレーと黒でまとめている。

  1. 01窓口で応対するスタッフの写真を全面に使い、明朝体のコピーを重ねたファーストビュー
  2. 02白・薄いグレー・黒だけの配色に明朝体を合わせ、落ち着いた信頼感を出している
  3. 03写真の角を切り欠いた額縁のような枠で、写真の見せ方をそろえている

CONVERSION集客の工夫

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

来店・査定予約を画面の右端に固定する

画面の右端に縦書きの「来店・査定予約」のボタンを固定し、ヘッダーにも「お問い合わせ」と電話番号のボタンを置いている。品物を持ち込む前に予約したい人が、どこからでも申し込める。

貴金属の買取り価格を毎日出す

ファーストビューに「本日の貴金属買取り価格」のカードを置き、ページの中ほどにK24・Pt900などの1gあたりの価格を表で載せている。価格が見えると、売るかどうかを決める前の判断材料になり、再訪のきっかけにもなる。

取引事例とお客様の声を並べる

「お取引事例」で品物の写真と品名・日付を、「お客様の声」で利用した人の感想を、それぞれカードで並べている。どんな品物を扱い、どんな人が利用しているかが分かると、初めての人も相談しやすい。

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

COLOR配色

#FFFFFF背景
#F8F8F8セクション背景 · ライトグレー
#FAFAFAカード背景 · オフホワイト
#1C1C1C本文テキスト・電話ボタン・予約ボタン · ブラック

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

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Shippori Mincho
無料で近いもの
Shippori Mincho
用途
英字(小見出し)
使用フォント
Marcellus
無料で近いもの
Marcellus
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h158px / 5001.5034px / 500
h226px / 6000.9224px / 600
h320px / 4001.5017px / 400
本文(p)16px / 4001.5014px / 400
ボタン20px / 4001.2016px / 400

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

STRUCTUREページ構成(上から順に)

  1. 01

    ヘッダー

    ロゴ、ナビ、「お問い合わせ」ボタンと黒い電話番号のボタン。

    ヘッダー/電話番号+予約ボタン常設型
  2. 02

    ファーストビュー

    窓口で応対するスタッフの写真に明朝体のコピー。右下に本日の貴金属買取り価格のカードと、縦書きの来店・査定予約ボタン。

    ファーストビュー/全面写真+コピー型
  3. 03

    News

    お知らせを1行で出す。

    お知らせ/お知らせ一覧型
  4. 04

    サービス内容

    質預かりと買取りを写真と説明で並べ、それぞれの説明と利用の流れへのリンク。

    メニュー・サービス/アイコン/写真グリッド型
  5. 05

    取り扱い商品

    革の財布を手に持つ写真を大きく使い、一覧へのリンク。

    事例・実績/大判1件+サムネ型
  6. 06

    お取引事例

    品物の写真・品名・日付をカルーセルで並べる。

    事例・実績/写真グリッド型
  7. 07
  8. 08

    柳生質舗について

    「価値に向きあう、人によりそう。」の見出し、店の紹介文、スタッフの写真。

    人・代表/代表・院長あいさつ型
  9. 09

    コラム

    質屋の使い方などの記事をカルーセルで並べる。

    記事・メディア/記事カードグリッド型
  10. 10

    貴金属買取り情報

    金・プラチナの種類ごとに1gあたりの価格を表で出す。

    料金/表組み型
  11. 11

    店舗案内

    店舗情報・会社概要・スタッフ紹介へのリンクと、住所・営業時間・定休日・駐車場。

    アクセス/地図+時間表型
  12. 12

    お問い合わせ

    写真の背景に電話番号と、来店予約・お問い合わせへのリンク。

    行動喚起/電話+Web予約の2ボタン帯型
  13. 13
柳生質舗の構成をWEBCANの部品で組んだワイヤーフレーム(PC)

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

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

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

Figmaでの使い方

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

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

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

  1. 01入りにくいと思われがちなお店は、スタッフが笑顔で応対する写真をファーストビューに使う
  2. 02配色を白・グレー・黒に絞り、明朝体で落ち着いた信頼感を出す
  3. 03相場や価格など毎日変わる情報をトップに出し、再訪のきっかけをつくる
  4. 04来店予約のボタンは画面の端に固定して、いつでも押せるようにする

FAQよくある質問

柳生質舗のサイトで使われているフォントは?

和文は Shippori Mincho、英字の小見出しは Marcellus です。どちらも Google Fonts で無料で使えます。

質屋や買取店のサイトで、価格は載せたほうがよいですか?

貴金属のように相場で決まるものは、このサイトのように1gあたりの価格を日付とともに載せておくと、来店前の判断材料になります。毎日更新することで、サイトを見に来る理由にもなります。

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

質屋・買取店のほか、時計や宝石の修理店、古美術店、リユースショップなど、査定や相談の来店予約を増やしたい業種に応用できます。

MOREほかの士業・金融の参考サイト

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の事務所サイトを。

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

無料相談はこちら