NEXT.JS / REACT
Next.js・Reactでの開発
Next.js・Reactを使ったWebサイトやWebアプリを開発します。必要な画面や機能、外部サービスとの連携を整理し、設計・実装から公開まで対応します。
公開後の保守も月額で 要件の整理から
動きのある画面、外部サービスとの連携、管理機能などを含む開発に対応します。
公開後の保守や継続的な改善も、月額の運用支援としてお引き受けします。
SIMPLE 88,000円から 簡易プラン（固定のページだけのサイト・5ページ以内）。内容と料金を見る DEVELOPMENT 262,500円から 小規模（1〜5画面・静的な構成が中心）。要件を整理して個別お見積もり
AFTER RELEASE 月28,400円から 公開後の保守・改善（運用支援）。作った会社がそのまま見続けます
VOICES
こんなご相談に
- 「動きのある画面を作りたいが、WordPressでは難しいと言われた」
- 「作ってくれる会社は見つかるが、そのあとを見てくれる人がいない」
- 「前に作ってもらったが、更新のたびに毎回見積もりが必要で止まっている」
- 「AIで書いたコードがあるが、そのまま本番で使ってよいか分からない」
どれも、まず現状をお聞きするところから始めます。
COMPARISON
WordPressでのカスタム制作との違い
どちらが良いかは、要件によって決まります。お話を聞いたうえでご提案します。
カスタム制作（WordPress）
Next.js・Reactでの開発
向いている要件
文章と画像が中心のサイト
動きのある画面、外部サービスとの連携
更新のしかた
管理画面からご自身で
ご依頼ベース（構成により管理画面も追加可）
料金の決まり方
ページ数（187,500円から）
要件を整理して個別お見積もり
公開後の月額
8,400円から
28,400円から
PROCESS
進め方
ステップ2で金額が分かります。着手はご了承いただいてからです。
01お客様・当社
お話を聞くやりたいこと、困っていること、公開の希望時期。整理途中の内容でもお聞かせください。
02お客様・当社
要件を整理して、お見積もりをお出しする何を作るか、どこまでを範囲にするかを一緒に決めてから、お見積もりをお伝えします。
この段階で金額が分かります。着手はご了承いただいてからです。
03当社
作る途中の状態を確認できるURLをご用意し、見ていただきながら進めます。
04
公開したあと保守・改善が必要な構成の場合は、運用支援（月28,400円から）をご案内します。制作のみのご依頼も承ります。
HOSTING
どこで公開するか
構成や更新の頻度によって、公開先を選びます。決まっていなくてもご相談いただけます。
公開先
向いている場面
費用
Vercel
Next.jsをそのまま動かせる。コードを更新すると自動で公開され、公開前の確認用URLも自動で作られる。
商用では有料プラン（月20ドル程度）が必要になる場合があります
Cloudflare Pages 等
静的な構成なら、無料枠でも十分に動きます。
小規模な構成では、無料枠の範囲で運用できる場合があります
レンタルサーバー
すでにお使いのサーバーがある場合は、そのまま使えることもあります。
既存のご契約のまま
専用のサーバー
負荷の大きい仕組みや、社内システムと繋ぐ場合に検討します。
構成に応じてお見積もり
※ホスティングの費用はお客様のご負担となります（設定と確認は当社で行います）。 ※どこを選んでも、公開後の保守はお引き受けできます。
PRICE
料金
記載価格は、要件整理から設計・実装・公開までを含む目安です。画面数だけでなく、必要な機能や外部サービスとの連携内容を確認したうえでお見積もりします。
- ※すべて税込です。要件によって変わるため、お話を聞いたうえでお見積もりをお出しします。
- ※中規模を超える規模・システム連携を含む場合は、一括の制作費ではなく月額サブスクをご利用ください。
- ※ホスティングの費用はお客様のご負担となります。
- ※制作のみのご依頼も承ります（保守は別サービスです）。
固定のページだけの簡易なサイトは、88,000円から
会社やお店を紹介する、固定のページだけのサイトは、別のプランでお受けしています。更新用の管理画面とお問い合わせフォームを持たないぶん、費用を抑えてお作りします。公開後に、ご自身で AI エージェントと直していくための設定も、オプションでご案内できます。
INCLUDED
含まれるもの／
含まれないもの
「公開後1か月間の不具合対応」を含めています。それ以降は運用支援でお引き受けします。
INCLUDED含まれるもの
- 要件の整理と構成の設計
- 画面の実装（レスポンシブ対応を含む）
- 公開までの動作確認と、公開作業
- 公開後1か月間の不具合対応
範囲の境界
NOT INCLUDED含まれないもの（別途）
- 原稿の執筆・記事の代筆
- 写真撮影・イラスト制作
- 公開後の継続的な保守・改善（運用支援をご利用ください）
- ホスティング・外部サービスの利用料
- 検索順位や売上の保証
- 広告運用・SEO施策（集客担当のサービスへ）
AFTER
作ったあとのことも、
決めておきませんか
公開後の保守・改善を、月額で Next.jsやReactで作ったサイトは、そのままにしておくと、使っているライブラリが古くなり、ある日ビルドが通らなくなることがあります。
当社は、公開後の保守・改善を月額でお引き受けしています（保守のみなら月12,600円から、作業枠つきの運用支援は月28,400円から）。作った会社がそのまま見続けるので、引き継ぎの説明が要りません。
制作のみのご依頼も承ります。その場合も、コード一式をお渡しします。
運用支援（React/Next.js等）を見る → 当社が行うこと
- 要件整理・画面設計・実装
- 外部サービスとの接続と検証
- ビルド・公開・公開後の確認
お客様にお願いすること
- 業務要件・画面要件・既存仕様
- 各工程での仕様と画面の確認
- 外部サービス側の契約・審査・権限付与
- 実装したWEBサイト・機能
- ソースコードと構成・設定の記録
- 公開環境・操作方法・保守範囲のご案内
共有・納品する内容と形式は、ご依頼内容に合わせてお見積もり時に明記します。
CASE
実際の事例
当社が実際に担当した案件です。守秘義務のため、お客様のお名前は伏せ、業種や規模は大まかに記しています。
数字で見ると
- 40本動いていた WordPress のプラグイン
- 約920URL対応表を作って、全件を検査
- 133本自動の検証
- 65項目作り込んだ項目（一覧は下記）
更新情報を1本出すまで
FLOWSlack から
- Slack に本文と画像を投稿
- 投稿元を確かめて受付
- 原稿と変更の申請が、自動で作られる
- 確認用の URL が、会話に返る
- 直すときは「修正依頼」と書く
- 「公開」と返信
- 確認のうえ反映され、結果が会話に返る
こまかな作り込み
画面8項目
- 前のサイトの URL を、そのまま1つの受け口で表示
- 記事の目次を、見出しから自動で作る
- 記事の中の共通の部品9種。登録のない指定は、公開の前に失敗させる
- 記事・更新情報・事例・機能・活用例の、一覧と詳細
- 取り下げた記事は、サイトの枠を保ったまま「なくなりました」を返す
- ページの移動中の進み具合の表示と、リンクに触れた時点での先読み
- 画面の操作（開閉、横スクロールの表、画像の拡大など）を、古いライブラリなしで作り直し
- 前のサイトの画像や PDF の URL を、そのまま配信
フォーム10項目
- フォーム5種（問い合わせ、利用中の方、無料体験、相談、アンケート）
- エラーは、先頭に項目名つきの要約、各欄の下に個別の文。最初の欄へ移動
- 添付は、ドラッグ＆ドロップ・分けて送信・進み具合の表示
- 添付は公開される場所の外に保存し、公開の URL を出さない
- アンケートは自動で下書き保存。再開用の URL をメールで送る
- 完了の画面は、送信の直後だけ表示
- 受け付けた内容は、メールより先にデータベースへ保存。通知と自動返信の成否を別々に記録
- フォームの種類ごとに、通知先を分ける
- 週に1回、未送付の受付をまとめて、Slack の非公開のチャンネルへ送る
- 切り替えのあとも、前のフォームを開いたままの人の送信を受け続ける経路を残す
検索と多言語6項目
- サイト内の検索。公開の作業のときに索引を作る（約570件）
- 並び順の決まり（機能→料金→記事→よくある質問→事例）
- 確認中や非表示の記事を、検索やサイトマップに載せない
- 日本語と英語を、URL で分ける
- 言語の切り替えは、実際に対訳があるときだけ出す
- 英語は、日本語を正として作り直す
検索エンジンと AI 向け6項目
- ページごとのタイトル・説明・共有用の情報を、前のサイトから引き継ぎ
- 構造化データ9種
- サイトマップを、種類ごとに分割
- 転送205本
- AI 向けの文書（約570本）を、公開の作業のときに作る
- 見出しの階層の検査（見える大見出しは1つ、段を飛ばさない）
計測と速さ7項目
- 計測のタグは、本番のホスト名と一致するときだけ読み込む
- 画面の移動ごとの、ページの閲覧の送信
- 新しい作りで漏れるイベントを補う（電話、問い合わせ、検索結果の表示など）
- CSS を9つに分け、ページの種類ごとに必要な分だけ読む
- 日本語のフォントを、使う文字だけに絞る
- 画像に幅と高さを付ける
- 配備のあとも、古い画面が必要とするスクリプトを消さない
入稿9項目
- 入稿の経路5つ（Slack への投稿、API、文書作成サービス、管理画面のエディタ、HTML の貼り付け）
- Slack の決まったチャンネルに書くだけで受付。投稿元を確かめる
- 添付した画像を、順番どおりに取り込む
- 既定は原文のまま。「AI で校正」と書いた投稿だけ整える
- 同じ会話に「修正依頼」と書くと、同じ申請に修正を足して、確認用の画面を返し直す
- 「公開」と返信すると反映。権限と、最新の確認用の画面かどうかを確かめる
- 受付ごとに、専用の変更の申請と、固定の確認用の URL を作る
- 予約して公開。直前に、内容が最新か・権限・反映先を確かめ直す
- 非公開・削除・復元も、1件ずつの変更の申請として扱う
管理画面8項目
- ログインは、許可した人だけ。権限は3種
- 問い合わせの一覧・詳細・添付のダウンロード・対応の状態・担当者・内部のメモ
- 受付データを CSV や JSON で書き出し
- 記事のエディタ。途中の保存、古いタブからの上書きの拒否
- 下書きを、実際のページの見た目で、本人だけが確かめられる
- 変更の申請の一覧。確認用の画面、作り直し、取消、公開、予約
- API のキーの発行・再発行・停止
- 利用者と権限、分類、通知の管理
検証と配備6項目
- 自動の検証133本（見た目の同等性、配備、多言語、画像や PDF、入稿、権限、フォームなど16の分類）
- 更新のたびに、サイト一式を別の場所に用意してから切り替える。それまで動いていたものは、手を付けずに残す
- 切り替えの前に、別の場所で起動して応答を確かめる
- 切り替えのあとに問題があれば、自動で切り替える前の状態へ戻す
- 過去10回分と、安定して動いていた回のものを残す
- 本番・検証・管理の環境を分け、設定の取り違えを検査
移行の道具5項目
- WordPress を読むだけで調べる道具7本（プラグイン、構造、本文など）
- URL の対応表（約920件）を作り、全件に届くかを検査
- 本文の変換と整え（未解決の埋め込み0）
- 前のサイトとの見た目の比較（同じ画面の幅で開き、領域ごとに比べる）
- 切り替えの前に、データベースのバックアップと、別の場所へ戻せるかの試験
DEMO
デモサイト
当社のデザインの雰囲気をご確認いただくためのデモサイトです。事務所名・店名は架空のもので、実在のお客様の案件ではありません。
Next.js と Vercel で制作した、実際に動くデモサイトです。記事は、別のサーバーにある WordPress から読み込んでいることを、ご自身の目でご確認いただけます。デモサイトを使ってみたい、などのご希望があれば、お問い合わせください。
実際の画面
画像を押すと、公開中のデモが別の画面で開きます。スマホでもそのままご覧いただけます。
数字で見ると
- 82本WordPress から読み込む記事
- 35ページ固定のページ。各業種5ページ
- 147ページ記事を含めて、PC とスマホの幅で検査
- 0件横のはみ出し、読み込めない画像、スクリプトのエラー
進め方
FLOWデザインから公開まで
- 国内の参考サイトを業種ごとに集める
- 業種別のデザインの指針を1枚にまとめる
- 色・書体・組み方の決まりを決める
- Next.js で実装する
- PC とスマホの幅で全ページを検査する
- Vercel で公開する
こまかな作り込み
デザイン4項目
- 業種ごとに、色（5色）・書体・角の丸め方・写真の置き方の決まりを分ける
- 同じ5ページの構成でも、最初の画面の組み方は業種ごとに作り分ける
- 縦書き、等幅の番号、太い罫など、業種の印象に合う組み方を使う
- 文章は、WordPress で作った以前のデモと同じものを使う
作りと更新4項目
- 複数の業種を1つのプロジェクトにまとめ、業種ごとの URL で分ける
- 固定のページはコード、お知らせ・コラム・イベントなどの記事だけ WordPress で更新する構成
- WordPress で記事を公開すると、数秒でサイトに出る（遅くても1分以内）
- デモなので、検索結果には載らない設定。フォームは送信されない
Q. 費用はどれくらいかかりますか。
＋ A. 要件によって変わります。目安として、小規模（1〜5画面）で262,500円から、中規模（6〜10画面）で420,000円からです。お話を聞いて要件を整理した段階で、お見積もりをお出しします。
Q. WordPressとどちらがよいですか。
＋ A. 文章と画像が中心で、管理画面から自分で更新したい場合はWordPressが向きます。動きのある画面や外部サービスとの連携が必要な場合は、Next.js・Reactが向きます。お話を聞いてご提案します。
Q. 公開後、自分で更新できますか。
＋ A. 構成によります。管理画面を持たない構成では、更新はご依頼ベースになります。ご自身で更新したい部分がある場合は、その部分だけ管理できる仕組みを追加することも可能です（要件に含めてお見積もりします）。
Q. どこで公開することになりますか。
＋ A. 構成に応じて選びます。Next.jsならVercel、静的な構成ならCloudflare Pages等、すでにお使いのサーバーがあればそのままも可能です。負荷の大きい仕組みは専用のサーバーを検討します。ホスティングの費用はお客様のご負担です。
Q. 公開後の保守は必ず必要ですか。
＋ A. 必須ではありません。制作のみのご依頼も承ります。ただしライブラリが古くなるとビルドが通らなくなることがあるため、継続的な保守をお勧めしています（保守のみなら月12,600円から、作業枠つきの運用支援は月28,400円から）。
Q. AIで書いたコードを引き継いでもらえますか。
＋ A. はい。まず現状を拝見し、そのまま進められるか、直したほうがよい箇所があるかをお伝えします。構成が大きく崩れている場合は、作り直しをご提案することもあります。
Q. 途中の状態を見ながら進められますか。
＋ A. はい。確認用のURLをご用意し、見ていただきながら進めます。公開前に必ず確認いただきます。
BEFORE YOU ORDER
お送りいただきたいこと
ご用意できる情報からお送りください。不足している内容は確認しながら進めます。
1. やりたいこと・困っていること 例）こういう画面を作りたい、既存サイトを作り替えたい など
2. 参考にしたいサイト（あれば）
3. 想定している画面数・機能 内容が決まっていない段階でもご相談いただけます。お聞きしながら整理します。
4. 既存のサイト・コードがある場合はURL 例）本番のURL、リポジトリのURLなど
5. 公開の希望時期とご予算の目安
6. 公開後の運用のご希望 例）自分で更新したい、任せたい、まだ分からない
内容を確認したうえで、進め方とお見積もりの目安をご返信します。
機密情報の扱いについて ログイン情報、パスワード、APIキーなどの機密情報は、最初のご相談時には送らないでください。必要になった段階で、安全な共有方法をご案内します。
※原稿の執筆、写真撮影、検索順位や売上の保証、ホスティング費用は基本料金に含まれません。 まずは、やりたいことをお聞かせください
要件を整理する段階からご相談いただけます。
ご要望と更新方法をお聞きし、WordPressとNext.js・Reactのどちらが適しているかを一緒に検討いたします。
