Cases

導入事例

AI研修を受けた現場の担当者が、自分たちの手でつくったサイトと、SAIMONが制作を引き受けた実績です。

導入事例

研修で実際にこんなものが作れます

Claude Codeを使えば、専門知識がなくても日本語の指示だけで本格的な成果物を現場で制作できます。

Case 01 Recruitment Website

採用サイトの制作

import { createApp } from 'vue'
const response = await fetch('/api/recruit')
const data = await response.json()

export default function RecruitPage() {
  const [jobs, setJobs] = useState([])
  useEffect(() => {
    fetchJobs().then(setJobs)
  }, [])
  return (
    <main className="container mx-auto">
      <Hero title="Join Our Team" />
      <JobList items={jobs} />
    </main>
  )
}

async function deploy(config) {
  const build = await exec('npm run build')
  await uploadToServer(build.output, {
    host: config.server,
    path: '/var/www/recruit',
  })
  console.log('Deployed successfully!')
}

const theme = {
  colors: { primary: '#0D0084', accent: '#00C9A7' },
  fonts: { heading: 'Inter', body: 'Noto Sans JP' },
}

router.get('/api/positions', async (req, res) => {
  const positions = await db.query('SELECT * FROM positions WHERE active = true')
  res.json({ data: positions })
})

import { createApp } from 'vue'
const response = await fetch('/api/recruit')
const data = await response.json()

export default function RecruitPage() {
  const [jobs, setJobs] = useState([])
  useEffect(() => {
    fetchJobs().then(setJobs)
  }, [])
  return (
    <main className="container mx-auto">
      <Hero title="Join Our Team" />
      <JobList items={jobs} />
    </main>
  )
}

AIがPC内のファイルを直接操作し、React/Next.jsの本格的な採用サイトを環境構築から公開まで一貫して制作。エンジニアがいなくても、プロ品質のWebサイトを現場主導で完成させられます。

Claude Code VS Code React / Next.js Git XServer サイトを見る

制作ステップ

環境構築

Claude Desktop + VS Code + Claude Codeをインストール、プロジェクトフォルダを作成

要件定義・構築

「採用サイトを作りたい」と要件を伝えるだけでAIがサイト全体を自動構築

デザイン修正

ブラウザでプレビューしながら「ここをもっとかっこよくして」等の指示で調整

機能追加

FAQチャットボット、CMS連携、問い合わせフォーム等を日本語の指示で追加

公開・デプロイ

サーバーへの接続からドメイン設定、本番公開までAIに指示して完了

エンジニアなしでプロ品質のサイトが完成

運用・保守・更新もAIで継続対応可能

CMS導入で非エンジニアでもコンテンツ更新が容易

受講者の声

上本様

株式会社NASH

採用サイトのリニューアルを任されたとき、最初は制作会社への外注を考えていました。でも見積もりは数百万円、修正のたびに追加費用がかかると聞いて悩んでいたところ、この研修を知りました。受講後はClaude Codeに日本語で指示するだけでサイトが形になっていくのが衝撃的で、デザイン修正も「ここをもう少し明るく」と伝えるだけ。外注と比べてトータルコストは大幅に抑えられましたし、自分たちで即座に更新できるのも大きいです。公開後は応募数が前年比137%に増え、今では他部署からも「うちのページも作って」と相談が来ています。

Case 02 Service Site Renewal

サービスサイトのリニューアル

import { createApp } from 'vue'
const response = await fetch('/api/recruit')
const data = await response.json()

export default function RecruitPage() {
  const [jobs, setJobs] = useState([])
  useEffect(() => {
    fetchJobs().then(setJobs)
  }, [])
  return (
    <main className="container mx-auto">
      <Hero title="Join Our Team" />
      <JobList items={jobs} />
    </main>
  )
}

async function deploy(config) {
  const build = await exec('npm run build')
  await uploadToServer(build.output, {
    host: config.server,
    path: '/var/www/recruit',
  })
  console.log('Deployed successfully!')
}

const theme = {
  colors: { primary: '#0D0084', accent: '#00C9A7' },
  fonts: { heading: 'Inter', body: 'Noto Sans JP' },
}

router.get('/api/positions', async (req, res) => {
  const positions = await db.query('SELECT * FROM positions WHERE active = true')
  res.json({ data: positions })
})

import { createApp } from 'vue'
const response = await fetch('/api/recruit')
const data = await response.json()

export default function RecruitPage() {
  const [jobs, setJobs] = useState([])
  useEffect(() => {
    fetchJobs().then(setJobs)
  }, [])
  return (
    <main className="container mx-auto">
      <Hero title="Join Our Team" />
      <JobList items={jobs} />
    </main>
  )
}

ノーコードツールBubbleとAIを組み合わせ、サービスサイト「worktalk」をリニューアル。AIによるUI/UX改善提案とBubbleでの高速実装で、外注に頼らず自社でプロ品質のサイト刷新を実現しました。

Claude Code VS Code Bubble Git サイトを見る

制作ステップ

現状分析

既存サイトの課題を洗い出し、改善方針をAIと策定

デザイン設計

AIにリニューアル案を相談し、UI/UXの方向性を決定

Bubbleで実装

ノーコードで新デザインを構築、AIがロジック設計をサポート

テスト・改善

動作確認しながらAIに改善点を指示して即修正

公開・運用開始

本番公開、運用マニュアルもAIで作成

外注なしで社内完結のサイトリニューアル

ノーコード×AIで開発期間を大幅短縮

社内で即座にコンテンツ更新・改善が可能に

受講者の声

小野様

マイキャリア株式会社

サービスサイトのリニューアルは以前から課題でしたが、制作会社に依頼すると費用も時間もかかるため後回しにしていました。この研修でBubbleとClaude Codeの組み合わせを学んだことで、自分たちで短期間にリニューアルを完了できました。AIに「この部分をもっと見やすくして」と伝えるだけで具体的な改善案が返ってくるので、デザインの知識がなくても迷わず進められます。リニューアル後はサイト経由の問い合わせが増え、採用活動にも好影響が出ています。何より、社長のイメージを社内でいち早く具現化できる体制が整ったことが、弊社の事業戦略上もっともインパクトが大きいと感じています。

Case 03 Website Renewal

HPのリニューアル

import { createApp } from 'vue'
const response = await fetch('/api/recruit')
const data = await response.json()

export default function RecruitPage() {
  const [jobs, setJobs] = useState([])
  useEffect(() => {
    fetchJobs().then(setJobs)
  }, [])
  return (
    <main className="container mx-auto">
      <Hero title="Join Our Team" />
      <JobList items={jobs} />
    </main>
  )
}

async function deploy(config) {
  const build = await exec('npm run build')
  await uploadToServer(build.output, {
    host: config.server,
    path: '/var/www/recruit',
  })
  console.log('Deployed successfully!')
}

const theme = {
  colors: { primary: '#0D0084', accent: '#00C9A7' },
  fonts: { heading: 'Inter', body: 'Noto Sans JP' },
}

router.get('/api/positions', async (req, res) => {
  const positions = await db.query('SELECT * FROM positions WHERE active = true')
  res.json({ data: positions })
})

import { createApp } from 'vue'
const response = await fetch('/api/recruit')
const data = await response.json()

export default function RecruitPage() {
  const [jobs, setJobs] = useState([])
  useEffect(() => {
    fetchJobs().then(setJobs)
  }, [])
  return (
    <main className="container mx-auto">
      <Hero title="Join Our Team" />
      <JobList items={jobs} />
    </main>
  )
}

AIを活用して、自社コーポレートサイトをゼロから刷新。専門知識がなくても、日本語の指示だけでデザインからページ構築までを進め、自分たちの手でHPをリニューアルできる体制を実現しました。

OpenAI Codex VS Code React / Next.js Git サイトを見る

制作ステップ

現状把握

既存HPの課題をCodexと一緒に洗い出し、リニューアルの方針を整理

構成・デザイン設計

サイト構成とデザインの方向性をCodexに相談しながら決定

Codexで実装

Codexに日本語で指示し、ページを一つずつ構築

修正・調整

ブラウザでプレビューしながら「ここをこう直して」と指示して微調整

公開・運用

本番公開後も、社内で自由に更新・改善できる体制を整備

AI初心者でも自社HPを自分の手でリニューアル

Codexに「伝えるだけ」で本格的なサイト制作

公開後も社内で自由に更新・改善できる

受講者の声

岡村様

株式会社IR estate

正直なところ、普段ChatGPTもそこまで使ったことがなく、自分にWebサイトの制作なんてできるとは思っていませんでした。専門的な知識もないので、最初は『本当に自分にできるのか』と半信半疑で受講しました。ところが、Codexに日本語で指示するだけでページがどんどん形になっていくのを目の当たりにして、『自分にもできるんだ』と一気に世界が広がった感覚でした。今では会社のHPを自分の手で更新でき、伝えたいことをすぐ形にできます。できないと思い込んでいたことが、こんなに身近になるとは思いませんでした。

制作実績

「任せる」の実績——プロがつくるとこうなる

サブスクデザインで制作したLP・クリエイティブの一部をご紹介します。

結婚式場LP

大手冠婚葬祭グループ様

葬儀保険LP

少額短期保険様

イベントチラシ

互助会代理店様

サブスクデザインの詳細を見る

導入企業

さまざまな業界で"つくる力"が動き出しています

NASH

大手アクティビティ事業

採用サイト改善・AI活用支援

ShamMake

観光ポータルサイト運営

AI実務研修

マイキャリア

採用支援

採用HP内製化プログラム

大手冠婚葬祭グループ

冠婚葬祭・互助会

AI研修・制作支援

不動産仲介会社

不動産

AI実務研修

コンサルティング会社

会計コンサルティング

AI実務研修・継続支援

NASH

大手アクティビティ事業

採用サイト改善・AI活用支援

ShamMake

観光ポータルサイト運営

AI実務研修

マイキャリア

採用支援

採用HP内製化プログラム

大手冠婚葬祭グループ

冠婚葬祭・互助会

AI研修・制作支援

不動産仲介会社

不動産

AI実務研修

コンサルティング会社

会計コンサルティング

AI実務研修・継続支援

※ 掲載企業は順次追加予定です。

自社でも同じことができるか、まずはご相談ください

無料で相談するサービス一覧を見る