ワイヤーDL石田屋ESHIKOTO店
余白の多い薄いグレーの画面に、ボトルの写真を1本ずつ置いて限定酒を見せる。
webcan analyze daigakumegane.com
RETAIL & EC · 東京都 · PICKED 2026.10.26
大学眼鏡小売・ネットショップのホームページデザイン参考 — 眼鏡店・ゴールド・クリーム色
出典：daigakumegane.com ↗確認日 2026.10.26
EDITOR'S NOTE編集部の視点
「ミエルと、つづく。」のコピーと、眼鏡をかけた人物の写真・手描き風のイラストで、老眼鏡の専門店をやわらかく伝える。
千代田区麹町（半蔵門駅すぐ）の、老眼鏡と遠近両用レンズの専門店のサイト。ファーストビューは、クリーム色の背景に大きな「ミエルと、つづく。」のコピーと店の紹介文、右に記事への3つのリンク（FEATURE）を置き、その下に商品3種のカードと、眼鏡をかけた男性や店内の写真が切り替わる大きな枠を並べている。私たちについて、4つの約束、商品紹介、目と老眼鏡コラム、お知らせ、採用情報・店舗情報と続く。
- 01クリーム色の背景にくすんだゴールドを合わせ、落ち着いた色でまとめている
- 02約束や商品の説明に、線画のイラストを添えている
- 03ファーストビューの上部に、ゴールドの帯で期間限定のクーポン情報を出している
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 3か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問合せ03-3234-0011 / ご来店予約
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
電話と来店予約をヘッダーに並べる
PCのヘッダーに「お問合せ 03-3234-0011」と「ご来店予約」を並べ、アクセス・クーポン・採用情報のボタンも置いている。お店に行く前に確かめたいことに、ヘッダーから進める。
スマホは画面下に予約と電話を固定する
スマホでは、画面の下に「来店予約はこちら」と「お問合せはこちら 03-3234-0011」のバナーを固定している。読み進めている途中でも、予約か電話をすぐ選べる。
「なぜ安い？」に記事で答える
ファーストビューの右に「大学眼鏡はなぜ安い？安売り店との違いは??」などの記事を3つ並べている。来店前に気になる値段や見え方の疑問に、最初の画面から答えている。
チェック項目は 2026.10.26 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFAF1背景 · クリーム
#B49646ブランドカラー（帯・商品紹介の背景） · くすんだゴールド
#080808濃色セクション・ボタン・本文テキスト
#ECE5D8セクション背景 · ベージュ
#464543補助テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文（見出し・本文・ナビ）
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字（FEATURE・OUR ITEM などのラベル）
- 使用フォント
- Inter
- 無料で近いもの
- Inter
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 14px / 400 | 1.00 | 14px / 400 |
| h2 | 14px / 400 | 1.00 | 14px / 400 |
| h3 | 17px / 400 | 1.30 | 14px / 400 |
| 本文（p） | 11px / 400 | 1.00 | 10px / 400 |
| ボタン | 14px / 400 | 0.00 | 14px / 400 |
実測値（PC 1440px・SP 375px、2026.10.26 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
NEWS（お知らせ）
お知らせ／お知らせ一覧型 - 09
- 10
- 11
PARTSパーツ別に見る
PC
SP
PC
SP
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.26 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01店の名前より先に、お客様の暮らしがどう変わるかを短いコピーにする
- 02落ち着いた背景色に1色だけ差し色を決め、帯・背景・ボタンに使い回す
- 03値段や品質など来店前の疑問には、ファーストビューから記事で答える
- 04スマホでは予約と電話を画面の下に固定する
FAQよくある質問
大学眼鏡のサイトで使われているフォントは？
和文は Noto Sans JP、英字のラベルは Inter です。どちらも Google Fonts で無料で使えます。ファーストビューの「ミエルと、つづく。」は、文字をSVGの図形として配置しています。
眼鏡店のサイトでは、何を最初に見せるとよいですか？
このサイトは、店の紹介文と記事への入口、商品の種類、来店する世代の人物写真を最初の画面にまとめています。どんな人のための店で、何を扱っているかが一目で分かる作りです。
どんな業種の参考になりますか？
眼鏡店のほか、補聴器・時計・呉服など、相談しながら選ぶ商品を扱い、来店予約につなげたい専門店に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は大学眼鏡および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの小売・ネットショップの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のショップのサイトを。
「大学眼鏡のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。