ワイヤーDL石田屋ESHIKOTO店
余白の多い薄いグレーの画面に、ボトルの写真を1本ずつ置いて限定酒を見せる。
- TOP
- デザイン参考集
- 小売・ネットショップ
- 岐阜毛利質店
webcan analyze mouri78.co.jp
RETAIL & EC · 岐阜県 · PICKED 2026.11.01
岐阜毛利質店小売・ネットショップのホームページデザイン参考 — イエロー・手描きイラスト・価格表示
出典：mouri78.co.jp ↗確認日 2026.11.01
EDITOR'S NOTE編集部の視点
黄色と手描きの街並みで、質屋の入りにくさを「今日の買取価格」と利用の流れでほどく。
岐阜市の質・買取専門店のサイト。ヘッダーにフリーダイヤルと営業時間、メールの問い合わせを並べ、ファーストビューは黄色い空に岐阜城や店舗を手描きした街並みのイラスト。その直下に「本日の買取価格」を金・プラチナのタブで出し、続けて質屋の使い方をイラストの流れで説明している。
- 01ヘッダーにフリーダイヤル（0120-078-215）・営業時間（日曜定休 9:00〜19:00）・メールでのお問い合わせを常に並べている
- 02ファーストビュー直下に、日時つきの「本日の買取価格」を金とプラチナのタブで切り替えて出している
- 03「質とは？」を、お金に困ってから品物を取り戻すまでの流れとして手描きのイラストで見せている
3 VIEWPOINTS3つの視点で見る
デザインの視点
黄色（#FFD02E・#FFFAAA）とチャコールの2色にしぼり、見出しは Noto Serif JP、本文は Noto Sans JP でそろえている。ヘッダーの黄色い帯に大きなフリーダイヤルとメールのボタンを並べる配置が真似しやすい。
集客の視点
ファーストビュー直下に日時つきの「本日の買取価格」を置き、売りたい人が最初に知りたい答えを出している。画面下の固定バー（電話・LINE査定）、許可番号、駐車券の案内まで、来店前の不安に答える情報がそろっている。
Webディレクターの視点
トップの「本日の買取価格」と、買取品の写真つき新着情報は日々の更新で回せる部分。ナビは「初めての方へ・査定のご案内・買取について・買取品目」と、初めての人が順に読める入口を並べている。
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 2か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線メールでのお問い合わせ / お問い合わせ
✓LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
毎日変わる数字をトップに置く
金・プラチナの1gあたりの買取価格を、更新日時つきでファーストビューのすぐ下に表で出している。相場を確かめに来た人がトップで答えを得られ、何度も見に来る理由にもなる。
来店以外の窓口を並べる
「毛利質店ができること」で、借りる（質預り）・売る（買い取り）に加えて、宅配買取・出張質/買取・LINE査定をカードで並べている。遠方の人や来店しにくい人にも申し込みの入口を用意している。
電話とLINE査定を画面下に固定
スクロールすると画面下に、電話の問い合わせとLINE査定のボタンが並ぶ固定バーが出る（PC・スマホとも）。読んでいる途中のどこからでも連絡できる。
チェック項目は 2026.11.01 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#FFFAAAファーストビュー・セクション背景 · ペールイエロー
#FFD02Eヘッダー・見出しの強調 · イエロー
#333333告知帯・タブ・固定バー · チャコール
#323232本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し
- 使用フォント
- Noto Serif JP
- 無料で近いもの
- Noto Serif JP
- 用途
- 和文本文・ナビ
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 30px / 500 | 1.00 | 22px / 500 |
| h3 | 20px / 700 | 1.00 | 20px / 700 |
| 本文（p） | 16px / 600 | 1.50 | 16px / 600 |
| ボタン | 16px / 500 | 1.00 | 16px / 500 |
実測値（PC 1440px・SP 375px、2026.11.01 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.01 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01毎日更新する数字（価格・空き状況など）を、更新日時つきでファーストビューの直下に置く
- 02業種になじみのない人向けに、利用の流れをイラストで1本のストーリーにする
- 03来店・宅配・出張・LINEなど、申し込みの窓口をカードで並べる
- 04ブランド色を1色決め、ヘッダー・見出し・ボタンをその色でそろえる
FAQよくある質問
岐阜毛利質店のサイトで使われているフォントは？
見出しは Noto Serif JP、本文とナビは Noto Sans JP です。どちらも Google Fonts で無料で使えます。
買取価格のように毎日変わる情報は、どう載せればいいですか？
このサイトは、金・プラチナの1gあたりの価格を更新日時つきの表にして、ファーストビューのすぐ下に置いています。日時を出すことで、いつの情報かがひと目でわかります。
どんな業種の参考になりますか？
質屋・買取店のほか、リサイクルショップ・中古車販売・不動産など、相場や在庫が日々変わり、来店前に「いくらか」を知りたい人が多い業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は岐阜毛利質店および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの小売・ネットショップの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のショップのサイトを。
「岐阜毛利質店のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。