基本料金 0円/1ページ 18,000円〜
Reactコーディング代行
デザインデータから、Reactのコンポーネントとして実装します。 既存アプリへの画面追加・UI改修だけでも承ります。
Reactとは
React は、Web サイトやアプリの画面をつくるための JavaScript ライブラリです。 Meta（旧 Facebook）が公開し、いまは世界中の業務システムやサービスで使われています。
いちばんの特徴は、画面をコンポーネントという部品の集まりとして組み立てることです。 一度つくったボタンや表は他の画面でもそのまま使え、直すときもその部品の中だけで完結します。 画面数が多いサービスほど、この作り方が効いてきます。
当社は自社プロダクト「grip space」の管理画面を React + TypeScript で開発・運用しており、 日々自分たちで触っている技術としてお引き受けしています。
Reactを採用するメリット
同じ部品を使い回せる
ボタン・カード・フォームといった見た目の単位を「コンポーネント」として1つ作れば、他の画面でもそのまま使えます。同じものを何度も書かずに済むので、画面が増えても崩れません。
直したい所だけ直せる
画面が部品の集まりになっているため、修正の影響範囲がその部品の中に閉じます。「1か所直したら別のページが壊れた」が起きにくく、公開後の改修がしやすくなります。
操作しても画面が固まらない
入力や絞り込みのたびにページ全体を読み込み直さず、変わった部分だけを描き替えます。検索条件を変えながら見るような画面で、待ち時間が目に見えて減ります。
まわりの道具が揃っている
表・グラフ・日付選択・ドラッグ操作といった部品が既に公開されており、ゼロから作らずに済みます。作る量が減るぶん、費用と納期を抑えられます。
Reactで実現できること
グラフや動きのある画面
データを読み込んで描くグラフ、スクロールに合わせた表示、要素の並べ替えやドラッグ操作など、静的なHTMLでは扱いにくい画面を実装します。
ページを移動しない画面遷移
タブの切り替えや一覧→詳細の移動を、ページを読み込み直さずに行えます（SPA）。管理画面や、条件を変えながら探す一覧ページに向いています。
既存アプリへの画面追加・UI改修
すでに動いているReactアプリに、画面やコンポーネントを足す形でも承ります。バックエンドには手を入れず、見た目と操作の部分だけを担当することもできます。
React で進めるときに気をつけるポイント
- 検索エンジンへの見え方
- React だけで作ると、最初に返るHTMLがほぼ空になり、中身はブラウザ側で組み立てられます。検索からの集客が主目的のページでは、サーバー側で書き出せる Next.js での構築をおすすめしています。
- 最初の表示にかかる時間
- 画面を組み立てる JavaScript を読み込むぶん、素のHTMLより初回表示が遅くなりがちです。使う部品を絞る、画像を最適化する、といった手当てを実装時に行います。
- 公開後の更新のしかた
- 文章や画像をお客様側で直したい場合は、更新する箇所だけを WordPress などのCMSで持ち、Reactから読み込む形にできます。ご要望をお聞きして設計します。
こんな案件に向いています
操作が多い管理画面・業務アプリ
入力、絞り込み、並べ替えが多い画面。都度の再読み込みが無くなるだけで、使い勝手がはっきり変わります。
同じ部品を何度も使うサイト
カードや表を大量に並べるサービス。部品を1つ作って使い回すため、ページが増えても作業量が比例して増えません。
表示内容が頻繁に変わるページ
在庫・料金・順位など、読み込んだデータで中身が変わるページ。必要な所だけ描き替えられます。
長く手を入れ続けるプロジェクト
部品ごとに分かれているため、担当が変わっても読み解きやすく、あとから直しやすい状態を保てます。
料金
基本料金 0円。ページ単価 × ページ数だけをいただきます。
| ページ数 | Reactコーディング |
|---|---|
| 〜10ページ | 18,000円（＋10,000円） |
| 11〜30ページ | 12,000円 |
| 31〜50ページ | 8,000円 |
| 51ページ〜 | 5,000円 |
- 料金表は1ページあたりの費用です（税抜）。
- 10ページ以下の場合、ページの長さによって括弧内の追加料金が発生します。11ページ以上は追加料金はかかりません。
- 最低利用料金は 50,000円 とさせていただいています。
- API の組み込み、バックエンドAPIの開発、サーバーの立ち上げ・公開は別途お見積りで対応します。
対応範囲
- デザインからのコンポーネント実装
- Figma・XD・PSDのデザインデータから、画面を部品に分けて実装します。レスポンシブ対応込みです。
- TypeScript での実装
- 型を付けた状態で書き起こします。あとから触る人が読める状態でお渡しするためです。
- 既存プロジェクトへの参加
- 動いているリポジトリに、こちらの実装を足す形でも対応します。既存の書き方・命名に合わせます。
- API の組み込み
- お客様側で用意されたAPIをつなぎ込みます。API自体の開発が必要な場合も、別途お見積りで対応可能です。
- Next.js での構築
- 検索流入を狙うサイトは Next.js での構築をおすすめしています。詳しくは Next.js のページをご覧ください。
デザインデータと画面数をお知らせいただければ、通常1〜2営業日でお見積りをご回答します。
よくある質問
Figma・Adobe XD・PSD に対応しています。画面数と、動きの指定（アニメーション、ホバー時の挙動など）が分かる資料があれば、あわせてお送りください。
承ります。リポジトリを共有いただければ、既存の構成・書き方に合わせて実装します。画面の追加、UIの作り直し、レスポンシブ対応のみ、といったご依頼も可能です。
別途お見積りで対応可能です。フロントエンドのみのご依頼、既存APIへのつなぎ込みのみのご依頼も承ります。
検索エンジンからの集客が目的のサイトは Next.js、ログインした人が使う管理画面や業務アプリは React、というのが基本の考え方です。ご相談いただければ、用途をお聞きして提案します。
基本料金は0円で、ページ単価 × ページ数のみです。Reactコーディングは1ページ18,000円〜（11ページ以上は12,000円〜、31ページ以上は8,000円〜）。最低利用料金は50,000円です。APIの組み込みやバックエンドの開発が必要な場合は、別途お見積りいたします。
WordPressとECサイトの制作、
まとめてご相談いただけます
WordPress制作・構築代行
デザインデータやコーディング済みHTMLを、オリジナルテーマとして構築します。プラグイン開発も対応。
構築基本費用 50,000円
詳しく見るコーディングコーディング代行
デザインデータをHTML/CSSに起こします。WordPress化まで通しでも、コーディングだけでも承ります。
1ページ 15,000円〜
詳しく見るReactコーディング代行
デザインデータをReactのコンポーネントとして実装します。既存アプリへの画面追加・UI改修だけでも承ります。
1ページ 18,000円〜
いま見ているページNext.js制作・コーディング代行
検索エンジンに読まれるHTMLを返せるNext.jsで構築します。静的書き出しでレンタルサーバーでも公開できます。
1ページ 18,000円〜
詳しく見るEC / WordPressWelcartでのECサイト構築
WordPress専用のネットショップ構築プラグイン。機能面まで踏み込んだカスタマイズができます。
デザイン制作＋構築 一式 120万円〜
詳しく見るEC / EC-CUBEEC-CUBEでのECサイト構築
国産オープンソースのECパッケージ。決済・受注・在庫まわりを業務に合わせて作り込めます。
デザイン制作＋構築 一式 120万円〜
詳しく見るEC / ASPカートECサイト制作代行
Shopify・MakeShop・カラーミーなどのカートに、オリジナルデザインを組み込みます。
構築基本費用 100,000円
詳しく見る