カスタムWebアプリ、ダッシュボード、API、クロスプラットフォームアプリ

カスタムWebアプリケーション、ダッシュボード、管理・レポートシステム、そしてそれらを企業がすでに使っているツールとつなぐAPIや連携を構築しています。ブラウザの外で動かす必要があるプロジェクトでは、ElectronとSwiftでデスクトップアプリやモバイルアプリも開発します。

含まれるもの

カスタムWebアプリケーション: 注文・投票プラットフォームから、レンタルツールや分析プロダクトまで、業務フローに合わせて構築するブラウザベースのシステム。
ダッシュボードとレポート: チームに必要な数値を表示する管理画面とレポート。役割に応じたアクセス権限で、各担当者が適切なデータを確認できます。
管理・バックオフィスシステム: 役割に応じた管理、在庫、記録、監査証跡を、スプレッドシートやメールのやり取りではなく1か所に集約します。
APIとシステム連携: REST APIと、Shopify、Salesforce、Zoho、Klaviyo、Brevo、Metaなどのサービスとの連携。手作業でコピーすることなく、システム間でデータが流れます。
AI機能とLLM連携: Claude、GPT、Geminiで構築し、貴社のコンテンツとデータに基づいて動くチャット、検索、自動化。
クロスプラットフォームのデスクトップ・モバイルアプリ: macOS、Windows、Linux向けのElectronアプリと、プラットフォームに応じたiPhone向けのネイティブSwift。
WordPressとShopifyのカスタム機能: 既製のプラグインやアプリが合わない場合の、計算ツール、コンフィギュレーター、カスタムプラグイン、Storefront APIのレイヤー。
デプロイとホスティング: AWS、Azure、Cloudflare、Docker、cPanelのホスティングにデプロイするアプリ。全工程でGitによるバージョン管理を行います。

カスタムWeb開発とは何ですか？

カスタムWeb開発とは、ビジネスをテンプレートやプラグインの組み合わせに合わせるのではなく、ビジネスの実際の進め方に合わせてソフトウェアを構築することです。Webアプリケーション、ダッシュボード、管理・レポートシステム、API、システム連携、そしてそれらを結びつけるロジックが含まれます。

ほとんどの企業では、メインのWebサイトに必要ありません。マーケティング用のページや標準的なECなら、WordPressやShopifyで十分です。どのプラグインも対応していない業務プロセスがある場合、本来連携すべきシステムにデータが分散している場合、チームが毎日使うツールが遅い、手作業が多い、スプレッドシートで何とか回している、という場合に、カスタム開発が適した選択になります。

ポートフォリオでは、33件のケーススタディがカスタム開発に分類されています。管理・レポートシステムを備えた3つのLaravelプラットフォームのような本格的なアプリケーションから、既存サイト内の独自機能まで幅広くあります。例：ADU費用計算ツールとステップ形式のモデルコンフィギュレーターを構築した Golden State ADUs、サイズで探せるタイヤファインダーを備えた Stuckey Tyres.

React、Next.js、TypeScript、Node.js、PHP、Laravel、Python、Flaskを扱い、データにはMySQLとPostgreSQLを使います。クライアント向けの開発歴は8年以上です。

これまでにどのようなカスタムアプリケーションを構築しましたか？

注文、投票、スポーツ分析、レンタル、AIチャットのプラットフォームを、それぞれ1社のクライアントの業務フローに合わせて構築してきました。ケーススタディと最近の構築からの例：

注文システム: LaravelとMySQLによる注文プラットフォーム。役割に応じた管理機能、在庫連携、クライアントの業務フローに合わせたレポートを備えています
電子投票システム: 安全な投票管理、有権者の資格管理、監査可能な結果の追跡のためのLaravelアプリケーション
SportsData: LaravelとReactで構築したスポーツ分析プラットフォーム。管理システム、レポート、データダッシュボードを備えています
KT Rents: REST API連携と、物件管理、賃貸業務のフロー、全国規模の物件掲載のためのツールを備えたカスタムWordPressのレンタルプラットフォーム
Real Mad Honey のAIチャットボット：ShopifyストアとWebサイト向けの、複数ストア対応のAI販売・サポートチャットプラットフォーム。Next.js、pgvector付きのPostgreSQL、Shopifyアプリ、そしてGeminiを予備に置いたClaudeで構築しています

どのシステムも、クライアントが必要とする具体的な業務から出発し、テンプレートではなくその業務をもとに機能の範囲を決めました。これがカスタム開発と既製品の導入との大きな違いです。システムが業務プロセスに合っているため、使う人が回避策を考え出す必要がありません。

ダッシュボードや管理・レポートシステムはどのように構築しますか？

データを使って人が下す判断を軸に構築します。ダッシュボードは、チームが毎日抱く疑問に答えてこそ役に立つため、計画は、誰がログインするのか、各役割が何を見る必要があり、何を変更できるのかを決めることから始めます。

アクセスと権限

この種のシステムでは、役割に応じたアクセス権限が標準です。私がLaravelで構築した注文システムは役割ごとに管理機能を分けており、電子投票システムは有権者の資格を管理し、適切な人だけが参加できるようにしています。

データとレポート

レポートは、アプリケーションが書き込むのと同じデータベースから読み込むため、数値は実際に起きたことを反映します。SportsDataでは、Laravelがデータと管理面を担い、Reactがよりわかりやすくインタラクティブなフロントエンドで分析結果を表示します。電子投票システムは監査可能な結果の追跡を備えているため、後から結果を検証できます。

AIツールの管理面

私がReal Mad Honeyのために構築したAIチャットボットプラットフォームには、専用のダッシュボードがあります。会話をすべての履歴とともに担当者に引き継ぎ、ボットが答えられなかった質問にフラグを立てるため、チームがそれを修正し、今後の回答を改善できます。

インターフェースはReact、またはLaravelのBladeテンプレートで構築し、適した場合はTailwind CSSでスタイルを整えます。

カスタムWebアプリにはどのような技術を使いますか？

技術スタックは、アプリケーションに必要な機能と、将来誰が保守するかに基づいて選びます。主なツール：

フロントエンド：React、Next.js、TypeScript、Vue.js、Tailwind CSS、SASS、アニメーションにはGSAP
バックエンド：Node.js、PHP（Laravel）、Python（Flask）
データ：MySQLとPostgreSQL（AI検索用のpgvectorを含む）
インフラ：Docker、CloudflareとCloudflare Workers、AWS、Azure、cPanelのホスティング、バージョン管理にはGit
デスクトップとモバイル：Electron、Swift（SwiftUI）、Kotlin（Jetpack Compose）

Laravelは、管理画面、権限、レポートを備えたデータ中心の業務システムに向いているため、注文、投票、スポーツ分析のプラットフォームはLaravelで動いています。Next.jsは、高速なサーバーレンダリングのページ、優れたSEO、最新のReactのフロントエンドが必要なアプリケーションに向いているため、Real Mad Honeyのチャットボットプラットフォームに採用しています。Flaskは、大きなアプリの裏側で動くPythonのサービス、データ処理、AIツールのための軽量な選択肢です。

すでにコードベースがある場合は、作り直すこと自体を目的にせず、その中で作業します。作り直す価値があるのは、既存のコードを維持する方が置き換えるよりも高くつく場合だけです。

APIでWebサイトを他のシステムと連携できますか？

はい。連携は私のカスタム開発の大きな部分を占めています。WebサイトやアプリをCRM、ECプラットフォーム、メールやSMSのツール、AIモデルとつなぎ、手作業でコピーすることなくデータが流れるようにします。

これまでに構築した連携：

WordPressとElementorで構築したSalesforce CRM連携： Sourcefit（Azureでホスティング）
Zoho CRMのWebフォームとZoho SalesIQを導入した Kitchen Search Webサイト
CloudflareとShopify Storefront APIのレイヤー： Car Audio Garage と Musway USA（KlaviyoとBrevoによる、アプリ不要のメール・SMS再入荷通知を実現）
Car Audio Garageの900点以上の商品カタログ向けに、メーカーのデータをメタフィールド対応のShopify商品登録データに変換するバックグラウンドAIエージェント
Metaの公式Instagram APIを使い、Node.jsとPostgreSQLで構築したReal Mad HoneyのInstagramコメントからDMへの自動化
REST API連携：KT Rents、 Inline Security Fence

優れた連携は、障害を前提に設計します。APIが停止したり、レート制限に達したり、想定外の形式でデータが届いたりすることがあるため、すべての境界で受け取るデータを検証し、処理を記録し、1つの接続が切れてもサイト全体が止まらないようにします。

デスクトップアプリやモバイルアプリも開発していますか？

はい。ブラウザの外で動かす必要があるツールには、macOS、Windows、Linux向けのElectron、iPhone向けのSwift、Android向けのKotlinでクロスプラットフォームアプリを開発し、できる限り多くのロジックを共有します。

最もわかりやすい例が、私が開発した、広告ブロッカー内蔵の無料オープンソースYouTube MusicプレーヤーMusixです。Ubuntu、Windows、macOS、Android（Android Auto対応）、iPhone（CarPlay対応）で動作します。共通のTypeScriptブリッジ1つで、Electron、Kotlin（Jetpack Compose）、Swift（SwiftUI）で構築したネイティブアプリを動かしています。

Musixから得た大きな教訓は、インターフェースではなく、エンジンとデータを共有することです。各プラットフォームにはそれぞれに自然になじむ外枠を用意し、コアロジックは一度だけ書いてテストします。プロジェクトの技術スタックには、esbuild、Vitest、Playwright、GitHub Actionsが含まれます。

業務用ソフトウェアでも同じ考え方で、オフィス用のデスクトップツールと現場スタッフ用のモバイルアプリで、1つのバックエンドと1組の業務ルールを共有できます。アプリの裏側で動くローカルサービスやデータ処理には、PythonとFlaskも適しています。

カスタム開発のプロジェクトはどのように進みますか？

カスタムプロジェクトは、計画、デザイン、開発、最適化の4つの段階で進みます。一般的なWebサイトとの違いは、計画にかける時間の長さです。カスタムシステムでは、すべての機能を構築し、テストし、保守する必要があるからです。

計画の段階では、作業範囲、ユーザーとその役割、データ、連携、完了の定義を決めます。開発開始前に、書面での作業範囲とマイルストーン付きのスケジュールをお渡しします。続くデザインの段階では、使いやすさを軸に画面と操作の流れを設計し、毎日使う人にとってわかりやすいシステムにします。

開発は、確認しやすい小さな単位で進めます。Claude Code、OpenAI Codex、CursorなどのAIコーディングツールで作業を速めつつ、厳格なワークフローの中で使っています。完了の定義を含む書面での概要、1ブランチにつき1つの小さなタスク、AIツールに本番環境の認証情報を渡さないこと、リント、型、ユニットテスト、E2Eテストの自動チェック、そしてすべての変更の人によるレビューです。決済、認証、価格ロジック、本番データの移行は、私が1行ずつ書くか確認します。

最終段階では、公開前にパフォーマンス、セキュリティ、使いやすさを調整し、チームが初めてログインする日から実運用できる状態にします。

カスタムWebアプリの開発期間はどれくらいで、費用は何によって変わりますか？

期間は作業範囲によって決まり、要件、ユーザー、連携が明確になった段階で設定します。対象を絞った社内ツールや単一の連携は、レポート、決済、複数の連携サービスを持つ多役割のプラットフォームに比べてはるかに小さな仕事です。いずれの場合も、作業開始前にマイルストーン付きのスケジュールを書面でお渡しし、構築中は定期的に進捗をご報告します。費用を左右する要素：

ユーザーの役割と画面の数
連携が必要なシステムの数と、それぞれのAPIのドキュメントの充実度
スプレッドシートや旧システムからのデータ移行
個人データや投票の取り扱いなど、セキュリティとコンプライアンスの要件
Webに加えて、デスクトップ版やモバイル版も必要かどうか
公開後のホスティング、監視、保守

カスタム開発の料金は、幅が広すぎて目安として意味をなさないため、掲載していません。短い打ち合わせまたは現在の環境の無料診断の後にお見積もりし、成果物の一覧を添えた確定見積もりをお渡しします。カスタム開発としては手頃な料金で、ご予算にかかわらず、コードの品質、セキュリティ、ドキュメントは確かなものをお届けします。

カスタムWebアプリは、高速で安全、検索にも対応していますか？

はい。こうした品質は後から追加するのではなく、最初から組み込んでいます。一般公開するアプリでは、Next.jsのサーバーレンダリングのページを使うため、検索エンジンやAIクローラーは実際のHTMLを受け取れます。各ページには固有のタイトルとディスクリプションを設定し、インデックス対象のページにはすべてcanonical URLを指定し、構造化データはJSON-LDで出力し、サイトマップはルートと同じソースから生成します。

Googleに役立つきれいなHTMLと構造化データは、ChatGPT、Perplexity、Geminiがアプリの公開ページを読み取る助けにもなります。適した場合は、llms.txtファイルでAIクローラー向けにプロダクトの概要をまとめます。

セキュリティには、すべての入力の検証、役割に応じたアクセス権限、慎重な認証、コードに機密情報を含めないこと、依存関係を最新に保つことが含まれます。パフォーマンスについては、公開ページのCore Web Vitalsを確認し、重い処理をメインスレッドから外して、クリックやタップにインターフェースがすばやく反応するようにします。Cloudflare Workersを使えば、WebhookやAPIの集約など、遅延に敏感な小さな処理をユーザーの近くで実行できます。

管理ダッシュボードのような社内ツールにSEOは不要ですが、とくに顧客、注文、投票のデータを扱う場合は、速度とセキュリティが欠かせません。

カスタムプロジェクトのコードの所有者は誰ですか？

一般的に、カスタム開発は貴社のために構築するものであり、所有権の条件は開発開始前に契約書に明記します。コードのリポジトリ、ホスティング、ドメイン、APIキーやクラウドサービスなどの外部アカウントは貴社の名義で設定し、私には開発者としてアクセス権を付与していただくことをおすすめします。

これは一般的なWebサイトよりも、カスタムソフトウェアにとって重要です。コードが開発者のパソコンや個人アカウントにしかなければ、変更のたびにその人に頼ることになります。リポジトリとインフラを貴社の名義にしておけば、必要なときに別の開発者が作業を引き継げます。

React、Laravel、Next.jsなどのオープンソースのフレームワークにはそれぞれのライセンスがあり、Shopify、Salesforce、AIモデルのプロバイダーなどのサービスにはそれぞれの利用規約が適用されます。プロジェクトが依存する外部サービスを一覧にするため、何に費用を払い、何を管理しているのかを把握できます。

Musixは、私がオープンソースとして公開することを選んだプロジェクトです。それは所有者が決めることであり、クライアントのコードは、お客様が別途決めない限り非公開のままです。

時差のある環境でも、リモートでカスタムプロジェクトを進められますか？

はい。フィリピンのサンバレス州ボトランからUTC+8で作業しており、クライアントはアメリカ、イギリス、ヨーロッパ、オーストラリアにいらっしゃいます。作業は共有リポジトリ、ステージング環境、書面の仕様書で進むため、カスタム開発はリモートワークに適しています。

アメリカやヨーロッパのお客様にとっては、時差のおかげで夜間に作業が進みます。一日の終わりに構築内容を確認したりご意見を残したりしていただくと、翌朝には変更内容と書面での報告が届いています。オーストラリアのお客様とは営業時間の大部分が重なるため、計画やテストの段階でリアルタイムの打ち合わせができます。

離れた場所でもプロジェクトをわかりやすく進めるために、書面での作業範囲、確認しやすい小さな変更、いつでもテストできるステージング環境を活用しています。進行を妨げる疑問は早めに書面でお伝えするため、時差が遅れにつながることはありません。

私は長年、フルスタック開発者としてこの進め方で仕事をしてきました。取引先には、 CJ Digital、Kova、RIARD Enterprise Solutions、Web Medic、 Unwired Web Solutionsなどの企業があり、カリフォルニア州テメキュラのCar Audio GarageやムリエタのMusway USAといったアメリカ企業のカスタム構築も手がけています。

仕事の進め方

計画: ユーザー、権限、データ、連携、作業範囲を定義し、マイルストーン付きのスケジュールを書面で合意します。
デザイン: チームの働き方に合わせて画面と操作の流れを設計し、最初から使いやすいシステムにします。
開発: レビュー済みの小さな単位で、自動テストを行いながら構築し、ステージング環境で進捗を共有します。
最適化: 必要に応じてパフォーマンス、セキュリティ、SEOを調整してから公開し、システムをサポートします。

カスタムWeb・アプリ開発のケーススタディ

Golden State ADUs - WordPress · ADU建築、2026年。Golden State ADUsは、サクラメントのデザインビルド会社で、北カリフォルニア全域でADU（付属住宅）の設計、許可申請、建築を手がけています。独自のADU費用計算ツール、91モデルのライブラリ、ステップ形式のモデルコンフィギュレーターを備えたサイトを、WordPressとElementor Proで構築しました。
Car Audio Garage - Shopify · カーオーディオ、2026年。Car Audio Garageは、カリフォルニア州テメキュラの販売店で、Nemesis Audio、PRV Audio、Muswayなどのブランドから、車・船舶・パワースポーツ向けのオーディオ製品を900点以上扱っています。カスタムメタフィールド、アプリを使わないメールとSMSの再入荷通知、CloudflareとStorefront APIのレイヤー、AI商品登録エージェントを備えたShopifyストアを構築しました。
Musway USA - Shopify · カーオーディオ、2026年。Musway USAは、カリフォルニア州ムリエタを拠点に、ドイツで設計されたDSPアンプ、スピーカー、サブウーファーを販売しています。詳細な技術仕様のためのカスタムメタフィールド、Klaviyo、Brevo、Cloudflareによるアプリ不要のメール・SMS再入荷通知、商品登録を自動化するバックグラウンドAIエージェントを備えたShopifyストアを構築しました。
Skedaddle Humane Wildlife Control - カスタム開発、2023年。Skedaddle Humane Wildlife Controlは、1989年にオンタリオ州で創業し、現在はカナダとアメリカの40以上の拠点でサービスを提供しており、私が開発したカスタムWordPressサイトで運営されています。動物にやさしい駆除の手順を説明し、サービスと拠点のコンテンツを整理して、住宅所有者を相談の依頼へと導きます。
America's Advantage Remodeling - WordPress · リフォーム、2021年。America's Advantage Remodelingは、ローズビルに事務所を構えるキッチン・浴室のリフォーム会社で、2001年からサクラメントと近隣の都市で施工しています。サービスページ、製品ページ、都市別ページ、無料見積もりへの導線を軸に、カスタムテーマとプラグインを使ってWordPressでサイトを構築しました。
KT Rents - WordPress、2024年。Elementor、REST API連携、高度なカスタムツールで構築したカスタムWordPressのレンタルプラットフォーム。物件管理、賃貸業務のフロー、全国規模の物件掲載に対応しています。
SportsData - Laravel、2022年。SportsDataは、私がフルスタック開発者としてLaravel、React、MySQLで構築したカスタムのスポーツ分析プラットフォームです。大量のパフォーマンスデータを、わかりやすく高速なダッシュボードに変換し、チーム向けの管理・レポートツールで支えています。
Organ Boost - Shopify、2024年。動的コンテンツ、ブランドに合わせたユーザー体験、拡張性のあるストアフロント機能に注力した、フルカスタムのShopify Liquidストア。カスタムコードのセクションと柔軟なサイト管理を備えています。
Inline Security Fence - WordPress · フェンス、2025年。Inline Security Fenceは、ワシントン州ケントにある家族経営のフェンス・ゲート会社で、2016年からシアトルとタコマ一帯の住宅と事業所にサービスを提供しています。住宅向けと商業向けのサービスページ、絞り込みできる施工実績、51の都市別ページを備えたサイトを、WordPressとElementorで構築しました。
注文システム - Laravel、2023年。業務の効率化のために構築したカスタムのLaravel注文システム。役割に応じた管理機能、在庫連携、クライアントの業務フローに合わせたレポートを備えています。
電子投票システム - Laravel、2023年。関係者の要件に基づき、安全な投票管理、有権者の資格管理、監査可能な結果の追跡のために構築したカスタムのLaravel電子投票アプリケーション。
Real Mad Honey - Shopify Plus、2026年。高級天然はちみつブランドのための、フルカスタムのShopify Plusストア。WordPressから移行し、コンバージョン、ストアフロントの柔軟性、より上質な購入体験のために最適化しました。
Sttoke - Shopify、2024年。サステナビリティを重視するコーヒーブランドのためのカスタムShopify Liquidストアフロント。商品のストーリーをより強く伝え、コンバージョンを伸ばし、すっきりとしたSEO対応の購入体験を実現することに注力しました。
Musix - クロスプラットフォームアプリ · オープンソース、2026年。Musixは、広告ブロッカーを内蔵した無料のオープンソースYouTube Musicプレーヤーで、Ubuntu、Windows、macOS、Android（Android Auto対応）、iPhone（CarPlay対応）で動作します。共通のTypeScriptブリッジ1つで、Electron、Kotlin、Swiftで構築したネイティブアプリを動かしているため、YouTube ReVancedと同じ発想で、サブスクリプションなしに広告なしで音楽を再生できます。

カスタムWeb・アプリ開発に関するご質問

カスタムアプリを作るべきですか？それとも既存のプラットフォームを使うべきですか？

必要な機能の大部分を既存のプラットフォームでまかなえるなら、運用と保守が安く済むため、そちらをおすすめします。業務プロセスそのものが強みである場合、既製品では分断されているツール間でデータを共有する必要がある場合、プラグインでの回避策がきちんと作るよりも高くつく場合は、カスタム開発が適しています。貴社のプロジェクトがどちらに当てはまるかをお伝えします。

コードの作成にAIを使っていますか？

はい。Claude Code、OpenAI Codex、CursorなどのAIコーディングツールを毎日使い、プロトタイプ作成と構築を高速化しています。アーキテクチャ、セキュリティ、コードレビューは私自身が管理し、決済、認証、データ移行などの重要な部分は1行ずつ自分で書くか確認します。

既存のLaravel、React、Next.jsのアプリに機能を追加できますか？

はい。まずコードベースを確認し、すでにある規約に従って、少しずつ変更を加えます。作り直しをご提案するのは、古いコードを修正し続ける方が高くつく場合だけです。

システムにAIチャットや自動化を追加できますか？

はい。Claude、GPT、GeminiでAI機能を構築しています。例えば、Real Mad Honeyのための複数ストア対応の販売・サポート用チャットボットでは、1つのストアの417ページをクロールし、1,658件のナレッジに分割しました。AIチャットボットと自動化については、このサイトに専用のサービスページもあります。

iPhoneやAndroid向けのモバイルアプリも開発していますか？

はい。デスクトップ向けにはElectron、iPhone向けにはSwift、Android向けにはKotlinでクロスプラットフォームアプリを開発し、コアロジックを共有しています。私のオープンソースの音楽プレーヤーMusixは、共通のTypeScriptブリッジ1つで、Ubuntu、Windows、macOS、Android、iPhoneで動作します。

カスタムWeb開発の費用はどれくらいですか？

作業範囲、ユーザー権限、連携、データによって異なるため、短い打ち合わせまたは現在の環境の無料診断の後にお見積もりします。作業開始前に、確定見積もり、スケジュール、成果物の一覧をお渡しします。手頃な料金で、テスト済みのコード、セキュリティ、明確な引き継ぎという確かな品質は、どのプロジェクトでも変わりません。