WebLebenの技術と事例
AI開発・Webシステム開発で
使う技術と開発事例
WebLeben（島根県松江市）は、ホームページ制作にとどまらず、AIを活用した新規Webサービス開発、業務効率化ツール開発、社内活用支援まで一貫して対応しています。島根県・鳥取県を中心に、全国にオンラインで対応しています。企画・設計・開発・公開・改善までを見据え、課題に合わせて最適な技術を選びます。
AI導入支援やWeb制作、業務効率化をまとめてご相談されたい場合は、「AI・Web・業務効率化の相談」もご利用いただけます。
Technology Stack
AI開発・Webシステム開発で使う技術
目的や課題に合わせ、最新のAI技術やモダンなWeb開発言語を最適に組み合わせます。
01
Generative AI
AI・生成AI開発
AIモデル
- ChatGPT
- Claude
- Gemini
技術・設計
- LangChain
- RAG構成
- プロンプト設計
- 構造化出力設計
主な開発領域
- 画像・音声・動画を活用したAI解析システム
- 社内データ・マニュアルを活用した自社専用AIの構築
- AIチャットボット・問い合わせ自動化・業務支援AI
02
Automation
業務自動化・システム連携
自動化ツール
- ChatGPT
- Claude
- Gemini
API連携
- LINE Messaging API
- Slack API
- Notion API
主な自動化
- Gmail・Google Workspace 連携
- メール通知の自動化・LINE通知
- データ転記・定型業務の自動化
03
Web Application
Web・アプリケーション開発
フロントエンド
- React
- Next.js
- TypeScript
- JavaScript
- HTML
- CSS
- Tailwind CSS
- Vite
バックエンド
- Python（FastAPI / Flask）
- Node.js
- Express
アプリケーション
- PWA対応Webアプリ開発
- Chrome拡張機能の開発
04
Data / Cloud
データベース・クラウド・運用基盤
DB・クラウド
- Supabase
- PostgreSQL
- Firebase
- Google Cloud
- Render
機能構築
- 認証機能・会員機能・管理画面構築
- Webhook連携・API開発・外部サービス連携
運用・設計
- ログ管理・データ保存
- 運用改善を見据えた構成設計
05
Payment
決済・会員制サービス構築
決済・連携
- Stripe連携
- Checkout・Portal・Webhook実装
課金・プラン設計
- サブスクリプション課金
- 無料プラン・有料プラン設計
会員管理
- 会員管理
- 利用回数制御
- 権限制御
06
Marketing
SEO・Webマーケティング対応
SEO・コンテンツ設計
- SEO設計・内部リンク設計・キーワード設計
- 記事テンプレート設計・AIライティング支援
マーケティング設計
- 集客を見据えたWeb導線・コンテンツ設計
- CTA設計（お問い合わせ・LINE・予約導線）
解析・構築
- WordPress構築
- Google Analytics・Search Console を活用した改善支援
実績
- 携わってきたSEO集客Webメディアサイト：40以上
Case Study
AI開発・Web開発の事例と使った技術
これまでに開発したシステム・ツールは、試作を含めて100以上あります。ここでは、開発・支援でどの技術を何に使ったかの例を紹介します。
過去の見積もりから、似た案件を探す仕組み
使った技術
- HTML
- JavaScript
- pdf.js
- localStorage
- Python
- Node.js
何に使ったか
- JavaScript：書き方の違い（表記ゆれ）をそろえ、2段階で似た案件を探す。ブラウザの中だけで動き、データを外に送らない
- pdf.js：見積もり依頼書のPDFを読み取る
- localStorage：直した内容と履歴を、パソコンの中に保存する
- Python・Node.js：基幹システムから書き出したCSVを変換し、デモを組み立てる
レジのデータを保存し、AIに聞ける形にする
使った技術
- Airレジ
- Googleドライブ
- ChatGPT
- Excel
何に使ったか
- Airレジ：売上のデータをCSVで書き出す
- Googleドライブ：書き出したデータを保存し、お店と共有する
- ChatGPT（プロジェクト機能）：Googleドライブとつなぎ、保存したデータについて質問できるようにする
- Excel：人件費を原価に入れるための、商品ごとの製造工程のシート
動画と音声から、ペットの気持ちを読み解く
使った技術
- React
- TypeScript
- Vite
- Node.js
- Express
- Supabase
- Gemini API
- Stripe
- Resend
何に使ったか
- React・TypeScript・Vite：スマホのホーム画面にも置ける画面（PWA）
- Node.js・Express：サーバーの処理（Render で公開）
- Supabase：ログインとデータの保存
- Gemini API：撮った動画・音声から、ペットの気持ちを読み解く
- Stripe：月額の課金（Supabase Edge Functions で処理）
- Resend：メールの送信
情報メディアの記事の運用と改善
使った技術
- WordPress
- SWELL
- SEO SIMPLE PACK
- WordPress REST API
- Node.js
- Google Search Console
何に使ったか
- WordPress・SWELL・SEO SIMPLE PACK：記事の公開と、タイトル・説明文・正規URLの設定
- WordPress REST API・Node.js：記事の書き直しやアイキャッチ画像の設定を、まとめて行う
- Google Search Console：検索からの表示やクリックを確かめる
- Google広告のキーワードプランナー：どの言葉がどれだけ検索されているかを調べる
「プロンプトメモ」と「簡単文字数カウント」
使った技術
- JavaScript
- Manifest V3
- chrome.storage
- contextMenus
- chrome.i18n
何に使ったか
- Manifest V3：いまのChromeの拡張機能の仕組みで作成
- chrome.storage：AIへの指示文（プロンプト）を保存し、同じアカウントのChromeで同期する
- JSON：保存したメモの書き出し・読み込み
- contextMenus：右クリックのメニューから、選んだ文字の全角・半角・合計を数える
- chrome.i18n：日本語と英語の表示に対応
AIのニュースを、記事にして自動で公開する
使った技術
- Python
- Claude API
- WordPress
- cron
何に使ったか
- Python：AI各社の公式ブログや更新情報など約30の情報源を毎時確かめ、すでに扱ったものを除く
- Claude API：重要度に応じてモデルを使い分け、記事を書く
- WordPress：アイキャッチを付けて、下書き・公開・時間をずらした公開を行う
- cron（サーバーの定期実行）：人の手を介さず、毎時動かす
Strength
AI開発・Web開発におけるWebLebenの強み
技術をただ導入するだけでなく、実務や集客に直結するソリューションを提供します。
01
AIを“試す”ではなく、“使える形”まで落とし込む
生成AIの導入提案だけで終わらず、貴社の実際の業務フローや顧客向けサービスとして、現場で確実に使える形までシステムの設計・開発を行います。
02
フルスタックで一貫対応
フロントエンドのUI構築から、バックエンドのシステム処理、データベース設計、外部API連携、そして公開後の保守・改善まで、全体を俯瞰しながら一貫して構築できます。
03
新規サービス開発にも、業務改善にも対応
ゼロから立ち上げるAI搭載の新規Webサービス開発はもちろん、社内の煩雑な作業を効率化するツール、チャットボット、各種通知の自動化まで、幅広いご要望に対応可能です。
04
“作る”だけでなく、“集客・運用”まで見据える
システムを単体で作って終わりではなく、検索エンジンからの集客（SEO）、問い合わせや申し込みの獲得（CTA設計）、そして担当者が継続して運用しやすい設計までを考慮して構築します。
FAQ
AI開発・
Webシステム開発で
よくある質問
どの言語や技術で開発しますか？
目的に合わせて選びます。これまでの例では、画面はReactとTypeScript、サーバーはNode.js、データの変換や自動化はPythonで作りました。会員の管理やデータの保存にはSupabase、ホームページや情報メディアにはWordPressを使っています。
ChatGPT・Claude・Geminiは、どう使い分けますか？
何に使うかで選びます。これまでに、動画や音声からペットの様子を読み解く機能にはGemini、ニュースを記事にする自動化にはClaude、お店の売上データについて質問できるようにする仕組みにはChatGPTを使いました。
いま使っているシステムとつなげられますか？
いまのシステムから、データを書き出せるか（CSVなど）、外とつなぐ窓口（API）があるかで方法が決まります。これまでに、基幹システムから書き出したCSVを変換して使ったり、レジのデータをクラウドに保存してAIとつないだりしました。まず、何が取り出せるかを一緒に確かめます。
社内のデータを外に出さずに使えますか？
作り方によってはできます。たとえば、過去の見積もりから似た案件を探すデモ版は、ブラウザの中だけで動き、データを外に送らない形で作りました。外部のAIを使う場合は、どのデータを送るかを事前に一緒に決めます。
公開したあとも、直したり運用したりしてもらえますか？
はい。公開したあとの改善や運用も続けてお手伝いしています。情報メディアの記事の運用と改善を、月1回の定例で続けている例もあります。
Contact
島根・松江のAI開発・システム開発のご相談
AIシステムの開発、Web集客、業務効率化など、お気軽にご相談ください。
構想段階からのご相談も承っております。
お急ぎの方はお電話で：090-1187-6640（受付専用・平日9:00〜18:00）