PC
SP
PC
SP
PC
SP
ワイヤーDL石田屋ESHIKOTO店
余白の多い薄いグレーの画面に、ボトルの写真を1本ずつ置いて限定酒を見せる。
- TOP
- デザイン参考集
- 小売・ネットショップ
- 株式会社イシダ
webcan analyze 0848ishida.jp
RETAIL & EC · 福井県 · PICKED 2026.11.03
株式会社イシダ小売・ネットショップのホームページデザイン参考 — コーラル・暮らしの写真・英字見出し
出典：0848ishida.jp ↗確認日 2026.11.03
EDITOR'S NOTE編集部の視点
伝統の若狭塗箸を「LOVE MY CHOPsticks!!」と言い換え、暮らしの写真で見せる。
福井県小浜市の若狭塗箸メーカーのサイト。ファーストビューはお弁当を前に箸を持つ手の写真に「LOVE MY CHOPsticks!!」の英字コピーを重ね、コーラルのロゴを上中央に置いている。PCでは左上にビジネス向けのデジタルカタログ、右下にオンラインショップを固定し、個人客と取引先の入口を分けている。
- 01伝統工芸の箸を、お弁当や食卓など日常の場面の写真で見せている
- 02コーラル（#FC726E）のロゴの札と砂色のSNSボタンを、写真の上の差し色にしている
- 03細い線を重ねた枠のボタンを、MOREやPlay SHOWREELに統一して使っている
3 VIEWPOINTS3つの視点で見る
デザインの視点
食卓で箸を持つ手の写真を全面に敷き、白い太字の「LOVE MY CHOPsticks!!」を中央に載せたファーストビューが参考になる。ロゴはコーラル（#FC726E）の縦長の札にして上中央に置き、写真の上の差し色にしている。
集客の視点
PCは右下のオンラインショップと左上のビジネス向けデジタルカタログを固定し、スマホはヘッダーにカートとカタログのアイコンを置いて、一般客と取引先の行き先を分けている形を真似したい。コラムの更新も続けている。
Webディレクターの視点
最新記事、食事をもっと楽しく、SCENE、News、Digital catalogue、SNSと続く、見て選んでもらうメーカーサイトの構成が参考になる。紙のカタログに代わるデジタルカタログのセクションと、ショップへの固定ボタンを真似したい。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
個人客と取引先の入口を分ける
PCでは右下にオンラインショップ、左上に「※ビジネス向けのカタログ」と書いたデジタルカタログを固定している。スマホではヘッダーにカートとカタログのアイコンを並べている。
悩みに答えるコラムで読者を集める
Newsに「なぜか料理がすべる…」「矯正箸は使わない方がいい？」といったコラムを載せ、ファーストビューの左下にも最新記事を出している。箸の悩みで調べる人に届く題材になっている。
暮らしの場面をひとつのページにまとめる
SCENEの「LOVE MY イシダの箸」で、箸を持ち歩く人や暮らしの中の写真を並べ、MOREから詳しいページへ送っている。
チェック項目は 2026.11.03 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FC726Eロゴの札 · コーラル
#F6E4BFSNSボタン · サンド
#F5F5F5セクション背景
#FFFFFF背景
#000000文字・ボタンの線
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 英字見出し
- 使用フォント
- heading_book / heading_bold
- 無料で近いもの
- Oswald
- 用途
- 和文（本文・ナビ）
- 使用フォント
- YakuHanJP
- 無料で近いもの
- Noto Sans JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 140px / 400 | 1.00 | 80px / 400 |
| 本文（p） | 14.1px / 500 | 1.60 | 14.1px / 500 |
| ボタン | 18px / 400 | 1.00 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.11.03 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
食事をもっと楽しく
コンセプト／写真＋メッセージ型 - 05
- 06
- 07
- 08
- 09
フッター
フッター／店舗情報＋ナビ型
PARTSパーツ別に見る
番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.03 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01伝統的な商品を、日常の場面の写真で撮って見せる
- 02個人向けと取引先向けの入口を別々に固定する
- 03商品の悩みに答えるコラムをお知らせに混ぜて更新する
- 04差し色は1色に絞り、ロゴの札で印象づける
FAQよくある質問
株式会社イシダのサイトで使われているフォントは？
実測では、英字の見出しが heading_book と heading_bold（サイト独自の名前）、本文が YakuHanJP です。読み込まれたフォントには Oswald も含まれています。無料で近づけるなら Oswald と Noto Sans JP が代わりになります。
BtoBとBtoCの両方がある場合、入口はどう分けますか？
このサイトでは、オンラインショップとビジネス向けカタログを別々に固定表示しています。カタログには「ビジネス向け」と注記があるので、どちらの人も自分の入口を選べます。
どんな業種の参考になりますか？
工芸品や日用品のメーカー、食品の製造販売など、個人向けの通販と取引先向けの営業の両方を持つ事業者に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は株式会社イシダおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの小売・ネットショップの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のショップのサイトを。
「株式会社イシダのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。