---
title: "成型炭メーカーの海外向けサイト | 星源 Web Studio"
description: "成型炭メーカーの海外向けサイトを、製品カタログ、OEM紹介、問い合わせ導線、多言語対応、設計から公開まで含めて制作しました。"
url: "https://studio.i17i.com/ja/work/yaofeng-new-energy"
---

成型炭製造・新エネルギー燃料

# Yaofeng New Energy 成型炭メーカー海外向けサイト

成型炭メーカーの海外向けコーポレート・製品カタログサイトです。英語・中国語・アラビア語（RTL）・ロシア語の4言語に対応し、製品カタログ、OEM紹介ページ、問い合わせ導線までを設計から実装・公開まで一貫して担当しました。

[サイトを見る](https://yaofengxny.com/)

- Next.js

- TypeScript

- Prisma

- PostgreSQL

- Tailwind CSS

- Docker

## スクリーンショット

yaofengxny.com

yaofengxny.com

yaofengxny.com

## 背景と課題

主要な販売先が中東・ロシア語圏のため、英語だけでなくアラビア語・ロシア語の買い手にも対応できるサイトが必要でした。アラビア語は右から左に読むRTLレイアウトへの完全対応が求められ、製品仕様の数値はお客様の製品カタログを唯一の情報源として正確に反映する必要がありました。

## ソリューション

Next.js・Prisma・PostgreSQLによる開発で、4言語構成（アラビア語・ロシア語の文言はデータベース管理で更新しやすく）、タイプ別に絞り込める製品カタログと仕様詳細ページ、OEM紹介ページ、問い合わせフォームとWhatsApp連携を実装。管理画面を備え、Dockerで本番環境を構築して公開しました。

## 成果物

- 4言語で公開、アラビア語は完全なRTLレイアウトに対応

- 製品カタログ（絞り込み・仕様詳細）から問い合わせまでの導線を一本化

- 管理画面で製品・問い合わせを自社管理できる体制に

- Dockerによる再現性のある本番構築とヘルスチェックで安定運用

## 主な機能

- 英・中・アラビア語（RTL）・ロシア語の4言語切替

- 製品カタログ：タイプ別絞り込み・仕様表・詳細ページ

- OEMカスタム紹介ページと見積り依頼導線

- 問い合わせフォーム＋WhatsApp連携

- 管理画面：製品・問い合わせ・多言語コンテンツ管理

- レスポンシブ対応（幅390pxでも横スクロールなし）

## 技術スタック

- Next.js

- TypeScript

- Prisma

- PostgreSQL

- Tailwind CSS

- Docker

[お見積り依頼](https://studio.i17i.com/ja/contact)

## 関連サービス

[多言語B2Bサイト開発 多言語＋製品カタログ＋問い合わせ＋管理画面のフラッグシップ 400,000円〜。製品数・言語数・機能範囲によりお見積りします 詳しく見る](https://studio.i17i.com/ja/services/b2b-trade-site)

## 関連する制作実績

[juns.i17i.com 家具・建築金物製造 Junsheng Hardware 金物メーカーB2Bカタログサイト 家具・建築金物メーカーのB2B向け製品カタログサイトです。製品カタログ、カテゴリ別ページ、製品詳細、カタログ請求フォーム、問い合わせフォームを備え、MOQ（最小ロット）表示など、B2Bの商習慣に合わせて設計しました。 - Next.js - TypeScript - Prisma - PostgreSQL 詳しく見る](https://studio.i17i.com/ja/work/junsheng-hardware)
[tn.i17i.com 越境ビジネス向けサービス・サブスクリプション サブスクリプション販売サイト（Stripe決済） 越境ビジネス事業者向けのサブスクリプション販売サイトを、企画・設計から実装・本番運用まで一人で担当しました。Stripe Checkoutによるオンライン決済、Webhookでの注文状態同期、管理画面、顧客向けセルフサービスページ、メール通知を実装しています。 - Next.js - TypeScript - Prisma - PostgreSQL 詳しく見る](https://studio.i17i.com/ja/work/subscription-commerce)
[chromewebstore.google.com ブラウザ拡張 / 自社プロダクト Ladybird ノーコードWeb自動化Chrome拡張 自社開発しChrome Web Storeで公開中のブラウザ拡張機能。ノーコードで任意のWebページにボタン・リンク・ツールチップを追加でき、ビジュアルフローエディタで自動化操作を構築。認証情報はローカル暗号化保管庫に保存、UIは日/英/中の3言語対応で継続的にアップデート中。 - Chrome Extension - Manifest V3 - WXT - React 詳しく見る](https://studio.i17i.com/ja/work/ladybird-extension)

## 関連記事

- [多言語サイト制作のポイント｜失敗しないための設計・翻訳・SEOの基本多言語サイト制作で失敗しないためのポイントを、URL設計、hreflang、RTL対応、翻訳品質、更新体制の5つの観点から解説します。英語・中国語だけでなくアラビア語などRTL言語に対応する際の注意点も、実際の制作経験をもとにご紹介します。詳しく見る](https://studio.i17i.com/ja/blog/tagengo-site-seisaku)

- [ホームページを閉鎖する順番：サーバー・ドメインを解約する前にやること6ステップ閉店や活動終了でホームページ（WordPressサイト）を閉じるときに、サーバーやドメインを先に解約して困らないための順番をまとめました。ログイン情報の確認、保存版、写真の元ファイルの見分け方、解約で何が消えるかの一覧、よくある質問まで解説します。詳しく見る](https://studio.i17i.com/ja/blog/homepage-heisa-junban)

- [WordPressサイトを閉鎖前に保存する方法：HTTrackで崩れる理由とオフラインで見られる静的化閉鎖するWordPressサイトを、サーバーを止めたあとも見返せる形で残したい方へ。HTTrackなどの保存ソフト、ブラウザの保存機能、静的化プラグイン、バックアッププラグインの違いを比べ、画像が出ない・崩れる5つの原因と見分け方・対処、保存できたかを確かめる方法を解説します。詳しく見る](https://studio.i17i.com/ja/blog/wordpress-heisa-hozon)

## ホームページ制作のご相談はお気軽に

無料相談・お見積りは1営業日以内にご返信します。要件が固まっていない段階でも歓迎です

[無料相談](https://studio.i17i.com/ja/contact)
[実績を見る](https://studio.i17i.com/ja/work)