webcan analyze sasa.osaka

RESTAURANT & CAFE · 大阪府 · PICKED 2026.10.20

sasa飲食店・カフェのホームページデザイン参考 — 縦書き・明朝体・モノトーン

出典：sasa.osaka ↗確認日 2026.10.20

sasa飲食店・カフェ · 大阪府

サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

レストラン・ウエディング・パーティーの3つの使い方を、番号つきの写真と縦書きのコピーで並べる。

大阪府豊中市の服部緑地にある薪火イタリアンレストランのサイト。ファーストビューは料理などの写真のスライドに、ロゴを大きく重ねている。黒地のintroductionで薪火の写真と縦書きのコピーを見せたあと、お知らせ・バナーを挟み、ABOUT・RESTAURANT・WEDDING・PARTYの4つを番号つきの写真と縦書きの文章で順に紹介している。

01ファーストビューは「01 / 03」の番号つきのスライドで、ロゴと「invitation to the forest」を中央に重ねている
02本文のコピーを縦書きの明朝体で組み、英字の見出しは括弧でくくった小さな文字にしている
03ABOUT・RESTAURANT・WEDDING・PARTYを（01）〜（04）の番号つきの写真で区切っている

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー

－タップで電話できるSP・tel:リンク 0か所

－SPの追従ボタンSP・画面下に固定

✓予約・問い合わせ導線お問い合わせフォームはこちら / レストラン予約はこちら

－LINEで相談・予約LINE公式アカウント

－営業・診療時間の明記トップページ内

使い方ごとに入口を分ける

レストランの予約・ウエディングの相談・お問い合わせを、それぞれ「レストラン予約はこちら」「ウエディングご相談はこちら」「お問い合わせフォームはこちら」の別の入口にしている。食事・結婚式・宴会と目的の違う人が、迷わず自分の窓口に進める。

宴会の規模を数字で書く

PARTYの紹介で「着席〜80名、立食〜120名」と人数を書いている。企業の宴会や会議の会場を探す人が、規模が合うかをトップページで判断できる。

場所の魅力を最初に伝える

introductionで「大阪の中心部から車でおよそ15分」「服部緑地内」と立地を書き、緑の眺望と薪火をコンセプトにしている。わざわざ足を運ぶ理由を、メニューより先に伝えている。

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

COLOR配色

#FFFFFF背景

#000000introductionの背景・本文テキスト

#808080補足テキスト

#CCCCCC罫線・ボタンの枠

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

TYPOGRAPHYフォント

用途: 和文見出し・本文
使用フォント: 秀英明朝（Adobe Fonts）
無料で近いもの: Shippori Mincho

用途: 英字（ナビ・見出し）
使用フォント: Bodoni URW（Adobe Fonts）
無料で近いもの: Bodoni Moda

要素	PC サイズ / 太さ	PC 行間	SP サイズ / 太さ
h2	13px / 500	1.54	12px / 500
h3	120px / 300	1.00	52px / 300
本文（p）	14px / 500	2.43	13px / 500
ボタン	14px / 500	1.71	13px / 500

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

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

01
ヘッダー
左にロゴ、中央に英字のナビ（TOP・NEWS & TOPICS・ABOUT・RESTAURANT・WEDDING・PARTY・CONTACT）、右に丸いメニューボタン。
ヘッダー／ロゴ＋ナビ＋1ボタン型
02
ファーストビュー
料理などの写真のスライドに、ロゴと「invitation to the forest」を重ねる。左下に「01 / 03」と「scroll down」。
ファーストビュー／全面写真＋コピー型
03
introduction
薪火の写真に、縦書きの「緑の眺望 × 薪火イタリアン」の文章とMOREボタンを重ねる。
コンセプト／写真＋メッセージ型
04
NEWS & TOPICS
日付・タイトル・ハッシュタグ（#party・#wedding）の一覧とMOREボタン。
お知らせ／お知らせ一覧型
05
バナー
「NELU 高麗橋」のバナー。
イベント・キャンペーン／特集バナー並び型
06
contents（ABOUT・RESTAURANT・WEDDING・PARTY）
（01）〜（04）の番号つきの写真、縦書きの見出しと文章、ボタン。あいだに小さな写真を散らす。
強み・選ばれる理由／写真とテキストの交互型
07
ACCESS
住所・交通機関・車でのアクセス。
アクセス／地図＋時間表型

PARTSパーツ別に見る

sasaのNEWS & TOPICS（スマホ） — 04NEWS & TOPICSお知らせ／お知らせ一覧型

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.20 以降に撮影したもので、現在の表示とは異なる場合があります。

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

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

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

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

Figmaでの使い方

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

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

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

01食事・結婚式・宴会など目的の違う利用者には、予約や相談の入口を分ける
02宴会の人数や立地など、会場選びの条件を数字で書く
03縦書きの明朝体と番号つきの写真で、使い方ごとの紹介にリズムをつける
04色は白と黒に絞り、料理と緑の写真を主役にする

FAQよくある質問

sasa のサイトで使われているフォントは？

和文は Adobe Fonts の秀英明朝、英字のナビと見出しは Bodoni URW です。無料で近づけるなら、和文に Shippori Mincho、英字に Bodoni Moda が使えます。

レストランとウエディングの両方を、1つのサイトで案内してもよいですか？

このサイトのように、トップで使い方ごとに番号をつけて区切り、予約や相談の入口を分ければ1つのサイトでも混乱しにくくなります。目的ごとに問い合わせ先がはっきりしていることが大切です。

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

レストランのほか、貸切のできるカフェ・宴会場・ゲストハウス・旅館など、食事・婚礼・宴会など複数の使い方がある施設に応用できます。

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

MOREほかの飲食店・カフェの参考サイト

ワイヤーDL

RESTAURANT & CAFE · 奈良県 · 2026.10.28

つながる駄菓子屋ふくふく堂

手描きのイラストと「ふく札」の仕組みで、子どもが一人で来られる駄菓子屋の過ごし方を伝える。

#イラスト#パステルカラー#中央1カラム#子ども向け#料金表

飲食店・カフェのすべてを見る5件

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の飲食店サイトを。

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

無料相談はこちら

sasa飲食店・カフェのホームページデザイン参考 — 縦書き・明朝体・モノトーン

EDITOR'S NOTE編集部の視点