WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 小売・ネットショップ
  4. ごとうじゅうランドセル

webcan analyze www.gotoju.co.jp

RETAIL & EC · 愛知県 · PICKED 2026.10.17

ごとうじゅうランドセル小売・ネットショップのホームページデザイン参考 — ランドセル・工房・ベージュ

ごとうじゅうランドセルのトップページ（PC）
PC（1440px）
ごとうじゅうランドセルのトップページ（スマホ）
スマホ（375px）
出典：www.gotoju.co.jp ↗確認日 2026.10.17
ごとうじゅうランドセル小売・ネットショップ · 愛知県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

子どもたちの写真と丸いロゴでやさしく迎え、色や性別から自分に合うランドセルを探せるようにする。

愛知県清須市のランドセル工房のサイト。ファーストビューは、ランドセルを背負った子どもたちの写真を左右に並べて中央に丸いロゴを置き、「資料請求受付中」と「2027年度カタログ無料請求」のボタンを重ねている。受付中の告知、LINE・展示会・カタログ・ショールーム予約のバナー、工房の紹介、色や性別から探す検索、10のシリーズ、工房の特徴、6年間の修理保証、ランドセル選びのポイント、お知らせ、Instagramと続く。

  1. 01ランドセルを背負った子どもたちの写真2枚の中央に、丸いロゴを重ねたファーストビュー
  2. 02ベージュの背景とブラウンの文字に、ランドセルの色を差し色として使っている
  3. 03手書き風の「ひとつひとつ やさしく ていねいに」のコピーと、色とりどりのランドセルを並べた工房の紹介

CONVERSION集客の工夫

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

色や性別からランドセルを探せる

「ランドセルを探す」で、人気（女の子・男の子）、色（黒系・赤系・紫系など10色系）、素材（クラリーノ・牛革・コードバンなど）、サポートグッズから絞り込める。シリーズ名を知らない人でも、子どもの好みから商品にたどり着ける。

カタログ請求と見学予約を常に出す

画面の上に固定したヘッダーに「カタログ無料請求」のボタンと「ショールーム&工房見学予約」のアイコンを置き、さらに上に「ショールーム来店/工房見学 まだまだ受付中！」の帯を出している。比べている家族を、資料と来店の両方に誘う。

修理保証で6年間の不安に答える

「6年間あんしん修理保証」を写真の背景の帯で大きく見せている。小学校の6年間使う商品だからこそ、買ったあとの不安に先に答えておくと選ばれやすい。

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

COLOR配色

#F3EEE6背景 · ベージュ
#FFFFFFカード背景
#60451B本文テキスト・告知の帯 · ブラウン
#B8A78C罫線・補助 · グレージュ
#EA5514差し色（受付中の見出し・帯） · オレンジ
#E2616F色から探すボタン（赤系） · ピンクレッド

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

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Zen Kaku Gothic New
無料で近いもの
Zen Kaku Gothic New
用途
英字（シリーズの見出し）
使用フォント
Jost
無料で近いもの
Jost
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h233.2px / 7001.6020px / 700
本文（p）12.2px / 5001.3011px / 500
ボタン16.6px / 7001.1013px / 700

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

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

  1. 01

    ヘッダー

    上に告知の帯、ロゴ、アイコン付きのナビ、カート、「カタログ無料請求」ボタン、メニュー。

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

    ファーストビュー

    子どもたちの写真2枚の中央に丸いロゴ。「2027年度カタログ無料請求」のボタン。

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

    受付中の告知とバナー

    LINE友だち登録、展示会、カタログ、ショールーム予約、お急ぎの方向け、Instagramのバナー。

    イベント・キャンペーン／特集バナー並び型
  4. 04

    工房の紹介

    手書き風のコピーと子どもたちの写真、色とりどりのランドセル。

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

    ランドセルを探す

    人気・色・素材・サポートグッズから絞り込むボタン。

    記事・メディア／カテゴリナビ＋検索型
  6. 06

    RANDOSEL SERIES（シリーズ一覧）

    シリーズごとに写真・説明・色のサンプルを並べる。

    事例・実績／写真グリッド型
  7. 07

    工房の特徴

    職人のものづくり、基本機能・素材、カスタマイズオプションを写真のカードで。

    強み・選ばれる理由／番号つき3〜4項目型
  8. 08

    展示会・見学・機能・オプションの案内

    イベント・キャンペーン／特集バナー並び型
  9. 09

    6年間あんしん修理保証

    写真の背景に、保証の3つの特徴とボタン。

    強み・選ばれる理由／番号つき3〜4項目型
  10. 10

    ランドセル選びのポイント

    選び方・人気の色・購入時期・重さの記事へのリンク。

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

    Instagram

    投稿の写真を並べ、Instagramへのボタンを置く。

    事例・実績／写真グリッド型
  13. 13
ごとうじゅうランドセルの構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01商品を探す入口を、商品名ではなく「色」「誰が使うか」など買う人の言葉で用意する
  2. 02資料請求と来店予約のボタンを、固定したヘッダーに常に出しておく
  3. 03長く使う商品は、保証やアフターサービスを大きく見せて不安に答える
  4. 04選び方の記事をトップに並べ、比べている段階の人の役に立つ

FAQよくある質問

ごとうじゅうランドセルのサイトで使われているフォントは？

和文は Zen Kaku Gothic New、英字は Jost です。どちらも Google Fonts で無料で使えます。

商品数が多いネットショップで、トップページに検索は必要ですか？

商品名を知らない人が多い場合はとくに役立ちます。このサイトのように、色や使う人など、買う人が思い浮かべやすい切り口で探せるボタンを置くと、商品にたどり着きやすくなります。

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

ランドセルや革製品の工房のほか、家具・寝具・学習机など、家族で比べて選ぶ商品を扱うメーカー直販のお店に応用できます。

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

FROM REFERENCE TO YOUR SITE

このテイストで、
御社のショップのサイトを。

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

無料相談はこちら