店ごとに、見た目から作るホームページ

6つの店、 6つの顔。

大衆酒場 ともしび
陶器工房の制作例の最初の画面
陶器工房
珈琲焙煎所の制作例の最初の画面
珈琲焙煎所
和菓子店の制作例の最初の画面
和菓子店
ラーメン店の制作例の最初の画面
ラーメン店
アイスキャンディー店の制作例の最初の画面
氷菓店
制作例6本公開中
店ごとに5つの軸で設計
店の CM30秒見本あり

色・書体・質感・骨格・動きを店ごとに選び直し、複数ページのホームページをご自身で更新できる状態にしてお渡しします。

作り直す前に、よく伺います

こんなお悩み
ありませんか?

作務衣に前掛けの店主が腕を組んで考え込む

1枚のページに
足し続けて長くなった…

1行直すだけでも
頼むたびに費用がかかる

スマホを見て首をかしげる飲食店の店主

英語の問い合わせや
ネットでの販売も考えたい

ひな形のままで
どこかで見た作りになる

ひとつでも当てはまったら

店の顔が伝わる形に、
ホームページを作り直しましょう。

業種も骨格も違う6つの実物

同じ作り方の型を使い回さず、店ごとに色・書体・質感・ページの骨格・動きを選び直しています。押すと、実物のホームページがそのまま開きます。

居酒屋大衆酒場の制作例のパソコンとスマホの画面。雑誌のように写真と見出しを格子に組んだトップ

雑誌の格子に、ちょうちんの灯り

写真と見出しを雑誌の誌面のように格子で組み、路地の絵地図と店の CM(30秒)まで作りました。

実物を開く →骨格: 雑誌の格子/動き: ちょうちんの揺れ
和菓子店和菓子店の制作例の画面。左に掛け軸のような案内を固定し、縦書きの見出しを置いたトップ

掛け軸の案内と、巻物のように下りる写真

左に掛け軸のような案内を固定し、縦書きの見出しを一字ずつ出しています。

実物を開く →骨格: 左に固定の掛け軸/動き: 巻物
ラーメン店ラーメン店の制作例の画面。赤い地に極太のゴシックの見出しを左右に分けて置いたトップ

色の強い地に、極太のゴシック

画面を左右に分け、湯気の立つ一杯と太い見出しを並べました。暖簾や立体の一杯も作っています。

実物を開く →骨格: 左右の分割/動き: 動くロゴ
アイスキャンディー店アイスキャンディー店の制作例の画面。色とりどりの写真を格子に並べたトップ

写真の格子で、味の色を並べる

味ごとの色を写真の格子で見せ、丸ゴシックでやわらかく組みました。

実物を開く →骨格: 写真の格子/動き: 動くロゴ

陶器工房・珈琲焙煎所の2本も公開中です。ネットショップ・会員だけのページ・英語版まで入れた制作例で、下の「広げたいとき」で画面をご覧いただけます。

※制作例は、業種ごとの標準的な構成をひとつのサイトにまとめたものです。特定の事業者に合わせていないため、名称・商品・料金・写真・登場人物はすべて仮のものです。

\ 完成したホームページを、制作例に /

掲載にご協力いただけると5,000円引き

ご希望の方だけ

基本の目安
(5〜10ページ)なら

ご相談0円

目安150,000円〜

145,000円〜

税込・正確な金額は、伺ってからお出しします

  • 01事業者名を
    伏せて掲載OK
  • 02載せる前に
    必ずご確認
  • 03あとから
    取り下げOK

掲載を希望されなくても料金は通常どおりで、不利益は一切ありません。

見た目は、この5つで決めます

店の顔を作る
5つの軸

ひな形の色だけを替えると、どの店も似た顔になります。5つを店ごとに選び直すので、6本の制作例はどれも別の作りです。

  1. 1

    色

    店の地の色と、要所の差し色。ラーメン店は赤い地、和菓子店は生成りと墨のように、店の空気から決めます。

  2. 2

    書体

    見出し・本文・数字・手書きの役ごとに選びます。極太のゴシック、丸ゴシック、明朝の縦書きなど。

  3. 3

    質感

    紙・木・布・のれんのような手ざわり。写真と地の模様で、画面に店の手ざわりを出します。

  4. 4

    骨格

    ページの組み方そのもの。左右の分割、写真の格子、雑誌の格子、左に固定した掛け軸など。

  5. 5

    動き

    動くロゴ、揺れるちょうちん、巻物のように下りる写真。候補をいくつも作って比べ、店に合うものを選びます。

1本のHPに入るもの

定番のページと節

  • トップ
  • 下層のページ
  • 店について
  • アクセス(地図)
  • お知らせ
  • お問い合わせ
  • よくある質問
  • 求人
  • 共通のフッター
ラーメン店の制作例のために作った素材。写真・ロゴ・アイコン・絵地図・立体の一杯を並べたもの
ラーメン店の制作例で作った素材

あわせて作れる素材

  • 店の写真(撮影が難しいときは生成した素材も。使う前にお知らせします)
  • ロゴ 2案と、動くロゴ
  • 説明のアイコン・絵地図
  • 立体の絵(看板商品をデフォルメした1枚)

陶器工房・珈琲焙煎所の制作例の画面です

広げたいときも

広げる01

珈琲焙煎所の商品一覧の画面と、陶器工房の買い物かごのスマホの画面

ネットショップ

商品の一覧と個別のページ、買い物かご、購入の手続きまで。WordPress の WooCommerce および Welcart に対応しております。それ以外のカート・決済サービスをご希望の場合は、ご相談ください。

広げる02

珈琲焙煎所の会員だけが見られるページの画面

会員だけが見られるページ

先行のご案内など、登録した方だけに見せる内容。ログインとマイページまで付けます。

広げる03

珈琲焙煎所の英語版のトップの画面

英語版

本文だけでなく、案内やボタンの文言まで英語にします。最初から2つの言語を前提に組むほうが、あとから足すより安く済みます。

広げる04

珈琲焙煎所の購入手続きの入力欄の画面

予約・お申し込みのフォーム

日程や人数を選んで送れる入力欄。画面は制作例の購入手続きで、入力欄の作りは予約やお申し込みでも同じ考え方です。

お渡しの前に、全ページを確かめます

見た目は
測ってからお渡し

見づらい色0件3店とも
スマホの幅375pxで検査
全ページを撮って確かめる

※見づらい色=文字と地の色の差が、読みやすさの基準に足りているかを全ページで確かめるもの。ラーメン店・アイスキャンディー店・居酒屋の制作例は、足りない所 0 件でお出ししています。スマホでは、横にはみ出す所・小さすぎる字・押しにくいボタンが無いかを確かめます。

どこまで作るかで選べます

料金の目安

ページの数と、広げる範囲で変わります。記載の金額は税込です。正確な金額は、やりたいことを伺ってからお出しします。

基本

5〜10ページ

150,000円〜

  • 見た目の設計(色・書体・質感・骨格)
  • 日本語のページ
  • お問い合わせフォーム
  • 構成のご提案
  • 更新の手順書・レクチャー

素材込み

写真・ロゴまで

お見積り

  • 基本の内容
  • 店の写真
  • ロゴ 2案
  • アイコン・絵地図

動き込み

制作例と同じ作り

お見積り

  • 素材込みの内容
  • 動くロゴ
  • 動きの候補から選ぶ
  • 立体の絵

オプション(税込)

  • 店の CM30秒 70,000円〜

    店先や料理の場面をつないだ短い動画。せりふと効果音まで入れます(60秒は 130,000円〜)。

  • 立体の絵1枚 25,000円〜

    看板商品をデフォルメした立体の絵。

  • ネットショップ50,000円〜

    商品・買い物かご・購入の手続き。

  • 会員だけのページ40,000円〜

    ログイン・会員限定のページ・マイページ。

  • 英語版1ページ 8,000円〜

    案内やボタンの文言まで英語に。

  • ロゴ30,000円〜

    2案から選べます。

  • 写真素材1点 5,000円〜

    撮影が難しい場面の写真。生成AIの素材を使うときは、事前にお知らせします。

標準の範囲

含む構成のご提案・制作・公開までの作業・操作のレクチャーと更新の手順書
原稿お手元にあればお預かりします無い場合はヒアリングからお作りします(事前にお見積り)
撮影標準では含みませんご相談ください
公開後ご自身で更新できる形にしてお渡しします継続しての運用をご希望の場合は、別途ご相談ください

サーバー・ドメインは、お客さまのご名義・ご負担でご契約いただきます。

どこまで作るかも、ご相談の中で決められます

作る前に、並びを合わせます

ご相談からお渡しまで

  1. 1

    ご相談(無料)

    いまお困りのこと、広げたいことを伺います。いまのサイトがあれば拝見します。

  2. 2

    お見積り・構成のご提案

    ページの並びを文章でお出しします。作る前に、ここで合わせます。

  3. 3

    ご発注・制作

    原稿と写真をもとに組み上げます(原稿が無い場合は、ヒアリングからお作りします)。

  4. 4

    ご確認・修正

    実際の画面でご覧いただき、直してまいります。

  5. 5

    公開・レクチャー

    公開したうえで、ご自身で更新できるように操作をご説明し、手順書をお渡しします。

作り直す前に、いまのサイトを測る作り直すべきかどうかで迷っている場合は、先に診断で、どこに問題があり何から直すとよいかを整理してお渡しします。

作っているのは

売る側の都合が
分かる制作者です

Vibsurf(ビブサーフ)/福島県福島市

  • 約40年システムの保守
  • 約20年ネットショップの運営

代表は、システムの保守に約40年、ネットショップの運営に約20年たずさわってきました。ページの向こうで「買うかどうか」を決めるお客さまの動きを、売る側として見てきた経験を、ホームページの組み立てに生かしています。

代表のもとで、制作の工程をAIエージェントの体制で回しています。

神社の公式サイト(azumayanuma.com・収蔵資料900点超)を制作し、公開後も運用し続けています。

お渡しの後
更新の手順書と操作のレクチャー。文章や写真の差し替えのたびに、当方へご依頼いただく必要はありません
営業時間
9:00〜17:00(土日祝・年末年始を除く)
ご連絡
info@vibsurf.com

制作ノートより

動きの候補を7本作って選び、
13か所を直して仕上げています。

ラーメン店の制作例の、作っている途中の記録です。ラーメン店・アイスキャンディー店・居酒屋の制作例には、ページのいちばん下に制作ノートを付けています。

ラーメン店の制作例を開く →

よくあるご質問

Qいまのサイトを作り直すのではなく、直すだけでもできますか?
A

内容によります。まずは拝見して、直すだけで済むか、作り直したほうが早いかをお伝えします。

Q原稿がありません。
A

ヒアリングで伺いながら、何をどの順で書くかから一緒に決め、原稿をお作りします。どこから作るかで作業の量が変わるため、先に費用をお見積りします。

Q写真が手元にありません。
A

お持ちの写真の補正・切り抜きから、店の写真の制作まで承ります(オプション「写真素材」)。撮影が難しい場面は生成AIの素材を使うこともあり、使うときは事前にお知らせします。

Q公開したあと、自分で更新できますか?
A

できる状態にしてお渡しします。操作のレクチャーと更新の手順書を含みます。

Q英語版はあとから足せますか?
A

足せます。ただし、あとから足すより、最初から2つの言語を前提に組むほうが安く済みます。ご予定があれば、最初にお知らせください。

Qネットショップの決済はどうなりますか?
A

決済サービスとの契約はお客さまのお名前で行っていただきます。組み込みは当方で行います。

QAI で作るのですか?
A

制作の工程を AI エージェントの体制で回し、方向・案の選定・仕上がりの判断は代表が行います。写真やイラストの素材に生成AIを使うときは、着手の前にお知らせし、使ってよいかを案件ごとに伺います。

  • 生成AIを使った画像は、同じような画像がほかで使われる可能性を排除できないため、独占的なご利用はお約束できません。
  • ロゴなど独占して使いたいものは、生成AIを使わずにお作りします。
  • 実在の人物・店舗を模した画像は作りません。

あなたの店の顔が
伝わるホームページを、
一緒に。

まずは、いまお困りのことと、広げたいこと、公開したい時期を少しお聞かせください。原稿が無くても大丈夫です。お話を伺うところから始めます。

ご相談の段階では

お見積りまで0円
制作例への掲載で5,000円引き

info@vibsurf.com / 9:00〜17:00(土日祝・年末年始を除く)