MATSUSHIMA AI LABマツシマAIラボ

HP制作の実績

ひとつずつの点が、お店の顔になる。

マツシマAIラボがつくったホームページです。パソコンとスマホの画面が、上から下まで自動でスクロールします。右上のボタンで、設計図と完成を見くらべられます。

作品を見る ↓ 相談する

WEB WORKS

つくったサイト

1件目は公開中のこのHPです。2件目からの6件は、業種ごとの雰囲気を見てもらうためのデモ作品で、お店は架空です。デモの写真は Google の Gemini で生成したイメージです。画面にマウスを乗せると、スクロールが止まります。画面の下のメニューで、デモのお店 6 軒の雰囲気を 11 通りにまとめて切り替えられます。

REAL公開中の実績 DEMO架空のお店のデモ
https://boromarl.xyz/
マツシマAIラボのトップページ(パソコン)。黒い背景にドットで描いたロゴと、サービス・料金・実績・お問い合わせの欄が続く
同じページのスマホ表示。各欄が縦1列に並ぶ
REAL · 公開中2026年9月 公開

MATSUSHIMA AI LABマツシマAIラボ 公式サイト

DX・AX導入支援の個人事業のHP。ロゴをドットで組み、ページを開くと点が集まってロゴになる演出を入れました。

業種
IT支援・コンサルティング
しくみ
WordPress(自作テーマ)・お問い合わせフォーム・アクセス解析
色
#080C1A#D4FF00#FF6A1F
文字
M PLUS 1p Black / Zen Kaku Gothic New
サイトを開く ↗
demo / kissa-mitsubachi
DEMO · 架空のお店喫茶店

KISSA MITSUBACHI喫茶 ミツバチ舎

古本も置いている、深煎りの喫茶店という想定。店の前の黒板を、光るドット文字の掲示板にしてWebに持ち込みました。

ねらい
通りがかりの人に「今日は何がある?」を伝える
見どころ
お品書きをLEDの掲示板に。本日の豆が電光表示で流れ、本棚がイコライザーのように揺れる
色
#0E0C08#FFB300#F3EAD7
文字
DotGothic16 / しっぽり明朝 B1
demo / kibako-koumuten
DEMO · 架空のお店工務店

KIBAKO BUILD木箱工務店

注文住宅の工務店という想定。サイト全体を1枚の設計図にして、寸法や図面番号まで見せることで「きっちり建てる会社」を伝えます。

ねらい
モデルハウスの見学予約を増やす
見どころ
図面の表題欄をメニューに。断面図の上をオレンジの線が走り、施工事例は間取り図で見せる
色
#0C2340#DCE8F5#FF7A1A
文字
Dela Gothic One / Sora
demo / hair-lull
DEMO · 架空のお店美容室

HAIR LULLヘアサロン lull.

完全予約制の美容室という想定。雑誌の表紙のような大きな英字を流し、黒とショッキングピンクで「ここで切りたい」と思わせる店にしました。

ねらい
ネット予約へまっすぐ案内する
見どころ
背景を流れる巨大な LULL、回り続ける予約バッジ、料金は大きな数字で
色
#0B0B0F#FF2E88#9D8CFF
文字
Syne / Zen Kaku Gothic New
demo / menya-gokubuto
DEMO · 架空のお店ラーメン店

MENYA GOKUBUTO麺屋 極太

極太麺が売りのラーメン店という想定。毛筆の文字と、真上から撮った丼の写真、斜めに流れる黄色いテープで、店の前の行列の熱気をそのまま出しました。

ねらい
空いている時間を知ってもらい、行列を分散させる
見どころ
ゆっくり回る丼、券売機のボタンのメニュー、いまの待ち時間と時間帯ごとのグラフ
色
#0A0A0A#FF3B1F#FFD400
文字
Yuji Syuku / Anton
写真
Google の Gemini で生成したイメージ
demo / yomikaki-juku
DEMO · 架空のお店学習塾

YOMIKAKI JUKUヨミカキ塾

中学生・高校生向けの小さな塾という想定。方眼ノートと赤ペン、教室と自習室の写真で、「勉強する場所」をそのまま見せます。

ねらい
保護者に安心してもらい、無料体験の申し込みにつなげる
見どころ
受験までの日数と回る秒の数字、自習室の空席、1週間の時間割、点数が上がった生徒の声
色
#F4F4EF#2438FF#E8322B
文字
Zen Kaku Gothic New Black / Unbounded / Klee One
写真
Google の Gemini で生成したイメージ
demo / yuyado-shizuku
DEMO · 架空のお店旅館

YUYADO SHIZUKU湯宿 しずく

川沿いの静かな旅館という想定。灯りのともった宿と川の写真、露天風呂に広がる波紋で、着いた夜の静けさを見せます。

ねらい
予約サイトを通さない直接予約を増やす
見どころ
ヒーローのすぐ下に空室検索、源泉の成分表と広がる波紋、ひと目でわかる空室カレンダー
色
#06181A#C9A45C#E6EFE9
文字
Zen Old Mincho / Cormorant Garamond
写真
Google の Gemini で生成したイメージ

雰囲気デモ 6 軒をまとめて

HOW WE BUILD

公開まで、この順番でつくります

¥200,000 〜
HP制作の目安(税別)

  1. STEP 1ヒアリングお店のこと、来てほしいお客さんを聞きます
  2. STEP 2試作お話をもとに、1時間ほどで試作をつくります
  3. STEP 3雰囲気えらび好みの雰囲気で何パターンか作り、見比べて選びます
  4. STEP 4細かな修正文字・写真・色を、細かく整えます
  5. STEP 5公開スマホの表示と速さを確かめて公開
  6. STEP 6改善公開後も、見られ方を確かめながら直していきます
  • 企画・デザイン・構築・公開
  • スマホ対応
  • お問い合わせフォーム
  • 公開後1か月の修正対応

OPTION公開後も長く育てる(別途お見積り)

  • SEOGoogle などの検索で、見つけてもらいやすくする対策
  • GEOChatGPT などの AI 検索に、お店を紹介してもらいやすくする対策
  • 定期メンテナンスWordPress の更新やバックアップを、定期的に行います

NEXT SITE

次の作品は、
あなたのお店で。

何を載せればいいか決まっていなくても大丈夫です。まずは無料相談で、今の困りごとを聞かせてください。

無料相談を申し込む → ← トップページへ戻る