出典：casagay.com ↗ 確認日 2026.10.22
Editor's note
編集部の視点
ロゴに創業年「1893」を大きく入れ、レンタルと販売の2つの入口、品番つきの注目商品、拠点ごとの連絡先を並べるバルセロナの業務用品店。
バルセロナで19世紀末に家具のレンタルから始まり、いまは飲食業向けの用品の販売とイベント備品のレンタルを行う Casa Gay のサイト。ページの上部は「CASA GAY 1893」のロゴが画面幅いっぱいに入り、その下にレンタル・販売・カタログ・会社・問い合わせのナビ。ファーストビューは「飲食業の用品とイベント備品のレンタル」と、春夏号のカタログ誌を紹介するスライド。続いて創業の歴史と歴史アーカイブ、レンタルと販売の2つの入口、カタログ、品番つきの注目商品、ニュース、店舗の紹介、3つの拠点それぞれの電話・営業時間・住所が並ぶ。
- 01 創業年をロゴに大きく入れ、100年を超える老舗であることを最初の画面で伝える
- 02 「レンタル」と「販売」を最初の入口として分け、目的の違う客を迷わせない
- 03 店舗・オフィス・レンタル倉庫の3拠点を分け、それぞれの電話・営業時間・住所を載せる
Conversion
集客の工夫
- 用途別の入口 （あり） レンタル（ALQUILER）と販売（VENTA）の2つ
- 注目商品の品番と用途 （あり） L073 などの品番と「ケータリング向け」などの説明
- カタログ （あり） 春夏号のカタログ誌と、カタログの一覧
- 拠点ごとの連絡先 （あり） 店舗・オフィス・レンタル倉庫の電話・時間・住所
- WhatsApp （あり） 店舗の番号を併記
- 歴史の見せ方 （あり） ロゴの「1893」と歴史アーカイブ
- 言語の切り替え （あり） スペイン語・カタルーニャ語・英語
- 電話のリンク （なし） 番号は載っているが tel: リンクではない
創業年を、ロゴの一部にする
ページの上部は、「CASA GAY」と「1893」の2行が画面幅いっぱいに入ったロゴです。創業年を飾りではなくロゴそのものにすることで、説明を読む前に老舗であることが伝わります。下の歴史のセクションでは、19世紀末に家具のレンタルから始まり、販売へと事業を広げた経緯、歴史アーカイブを紹介しています。
レンタルと販売、入口を最初に分ける
ナビの最初の2つは「ALQUILER（レンタル）」と「VENTA（販売）」で、トップにも同じ2つの入口が写真つきで並びます。イベントのために借りたい客と、店のために買いたい客は探すものが違うため、目的別に入口を分けて迷わせません。注目商品には「L073」などの品番と、「ケータリングや需要の多いイベント向け」のような使う場面の説明がついています。
拠点ごとに、連絡先を分けて載せる
連絡先の欄では、店舗・オフィス・レンタル倉庫の3つを分け、それぞれの電話・営業時間・住所を載せています。店舗には WhatsApp の番号も併記し、レンタル倉庫には「入口は別の通りから」という注意まで書いています。行き先や問い合わせ先を間違えさせない、拠点が複数ある会社ならではの気配りです。
チェック項目は 2026.10.22 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #472600 ロゴ・見出し・本文（こげ茶）
- #4D2900 濃い面の背景
- #F8F6F7 淡い面
- #858276 補足テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| ロゴ・見出し・本文（すべて） | romekSharp | Libre Caslon Text |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 20px / 400 | 1.10 | 17px / 400 |
| h2 | 20px / 400 | 1.10 | 17px / 400 |
| h3 | 48px / 400 | 1.10 | 21px / 400 |
| 本文（p） | 16px / 400 | 1.15 | 13px / 400 |
| ボタン | 13px / 400 | normal | 13px / 400 |
実測値（PC 1440px・SP 375px、2026.10.22 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 画面幅いっぱいの「CASA GAY 1893」と、レンタル・販売・カタログ・会社・問い合わせ、検索・カート・お気に入り。 ヘッダー／カテゴリ＋カート型
- 02 ファーストビュー 「飲食業の用品とイベント備品のレンタル」と、春夏号のカタログ誌を紹介するスライド。 ファーストビュー／全面写真＋コピー型
- 03 創業の歴史 19世紀末に家具のレンタルから始まった歴史と、いまはオルテガ家の3代目が率いていること。歴史アーカイブへ。 コンセプト／写真＋メッセージ型
- 04 レンタルと販売 2つの入口を写真つきで並べる。 一覧／カード並び型
- 05 カタログ 数千の商品から専門のチームが選んだカタログ。 行動喚起／ボタン帯型
- 06 注目商品 オーブン・椅子・パラソル・パエリア鍋などを、品番と用途の説明つきで。 商品／グリッド型
- 07 ニュース 取り扱いブランドや新しい器のコレクションの話題。 お知らせ／ニュース一覧型
- 08 店舗 アシャンプラ地区の200㎡の店で、卸と小売の両方を行う。 コンセプト／写真＋メッセージ型
- 09 連絡先 店舗・オフィス・レンタル倉庫それぞれの電話・営業時間・住所。 会社情報／スペック表型
- 10 メール登録 商品やブランドの新着を知らせるニュースレター。 行動喚起／メール登録型
- 11 フッター 2つの住所と電話・WhatsApp・メール、サイト内リンク、言語切替。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 創業年が古いなら、ロゴや見出しの一部として大きく見せる
- 02 レンタルと販売、個人と法人など、目的の違う客には最初の画面で入口を分ける
- 03 商品には品番と「どんな場面で使うか」を書き、業者が見積もりを頼みやすくする
- 04 拠点が複数あるときは、拠点ごとに電話・営業時間・住所を分けて載せる
FAQ
よくある質問
Casa Gay のサイトで使われているフォントは？
ロゴから見出し・本文まで、セリフ体1書体（サイト内の名前は romekSharp）で組んでいます。無料で近い雰囲気にするなら Libre Caslon Text などのセリフ体が候補です。
商品に品番と用途を書く意味は？
業者の客は、品番で問い合わせたり見積もりを頼んだりします。Casa Gay は注目商品に「L073」などの品番と、「ケータリングや需要の多いイベント向け」といった使う場面の説明をつけています。電話やメールでのやりとりが速くなり、どれを選べばいいか迷う客の助けにもなります。
どんな業種の参考になりますか？
業務用品店・レンタル会社・問屋・資材店など、法人と個人の両方を相手にする老舗の卸・小売に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はCasa Gayおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
