小規模D2C向けEC業務自動化支援LP｜企画・Figma・HTML実装
制作内容
EC業務自動化支援
小規模D2Cブランド向けに、商品登録、画像加工、モール別データ変換の相談を受けるサービスLPを自主制作しました。架空企業の紹介ではなく、BENTEN Web Worksが実際に提供できる支援内容を整理した自社サービス企画です。
想定した相談者は、楽天市場、Amazon、Yahoo!ショッピング、自社ECなど、複数の販売先を少人数で運営している担当者です。同じ商品情報を何度も転記し、画像サイズやCSVの列を販売先ごとに直している状況を入口にしました。
「全部入りのECシステム」ではなく、いまの作業を一つずつ減らす
EC運用の効率化には、一括登録代行、受注管理システム、データ移行ツールなど複数の選択肢があります。一方、小規模な現場では、長く使ってきたExcelやCSV、社内だけの確認手順があり、システムを丸ごと入れ替えることが解決にならない場合もあります。
そこで、このLPでは次の方針を先に示しました。
- 現在使っているExcelやCSVから始める
- 数件の商品で試してから対象を広げる
- 商品公開前の確認は人が止められるようにする
- 手順書とエラー時の戻し方を残す
自動化できる機能を並べるだけでは、相談者は自分の業務に置き換えられません。「元データを開く」「モールごとに転記する」「画像を直す」「CSVエラーを修正する」という作業の流れを見せ、その一部をまとめられることを説明しています。
料金表の代わりに、30分の無料業務診断を置いた
同じ商品登録でも、元データ、登録先、商品点数、画像加工、確認方法によって必要な実装が変わります。そのため定額プランは作らず、料金は個別見積もりにしました。
主なCTAは「30分の無料業務診断」です。診断では、利用中のモール、月間登録数、元データ、画像作業、人が残したい確認工程を聞きます。契約を急がせる場ではなく、自動化に向く箇所と向かない箇所を整理する入口として設計しました。
実績は、2案件を混ぜずに表示した
LP内では、過去の個別案件で確認できた成果を案件ごとに分けて掲載しています。
- 商品登録自動化：15〜20分から2〜5分、日次20〜25商品から80〜100商品
- 商品画像処理自動化：30分から3分、日次10商品から50商品
当初は2案件の数値を1枚の事例カードにまとめていましたが、どの成果がどちらの案件か分かりにくいため、課題、実装内容、成果、納品物、お客様の声、詳細記事まで独立させました。数値だけが独り歩きしないよう、「各案件で計測した結果」「削減幅は業務内容により異なる」と明記しています。
D2Cらしさと、業務支援の信頼感を一つの画面にした
デザインは、温かいクリーム色と深い緑を基調にしています。商品写真や梱包材でD2Cブランドの現場を感じられるようにしつつ、装飾を増やしすぎず、業務支援として読める情報量に整えました。
写真はこの自主制作のために生成したもので、実在の商品や企業を示すものではありません。商品ラベルやPC画面には読めるブランド名を入れず、事例の誤認を避けています。
PC 1440px
スマートフォン 375px
PCでは、ヒーローをコピーと商品写真の2列にし、サービス内容を2列カードで見せています。スマートフォンでは単純に縮小せず、コピー、CTA、写真の順に変更しました。Before / Afterは縦方向へ組み替え、画面下に固定CTAを置いています。
Figmaでは、実装と同じ値を再利用できるようにした
Figmaファイルには、色、余白、角丸、文字、影を登録しました。
| 項目 | 数 |
|---|---|
| カラー変数 | 22 |
| 寸法変数 | 18 |
| 文字スタイル | 11 |
| 影スタイル | 1 |
| Buttonバリアント | 4 |
色は生の値を持つPrimitiveと、用途を示すSemanticに分けています。Primaryは、白文字とのコントラストを確認したうえで #23783C を採用しました。Figma上の変数にはCSS名も設定し、実装時にどの値へ対応するか追えるようにしています。
Figma StarterプランのMCP呼び出し上限に達したため、Foundationと主要コンポーネントを先に完成させ、残りの画面配置は引き継ぎ対象として記録しました。完成していない範囲を「Figmaカンプ完成」とは表記していません。
375px、768px、1440pxで機械監査した
HTML、CSS、JavaScriptで実装後、3つの画面幅で確認しました。
| 確認項目 | 結果 |
|---|---|
| 横スクロール | 0 |
| axe-coreの違反 | 0 |
| Lighthouse Performance | 94 |
| Lighthouse Accessibility | 100 |
| Lighthouse Best Practices | 100 |
| FCP | 1.7秒 |
| LCP | 2.9秒 |
| TBT | 0ms |
| CLS | 0 |
FAQはHTMLのdetailsとsummaryを使い、JavaScriptが動かない環境でも内容を読めます。スクロール演出はprefers-reduced-motionに対応し、キーボード操作用のスキップリンクも用意しました。
公開前後のレビューでは、スマートフォン版の全長も計測しました。実績を2案件へ分けた時点では375px幅で19,514pxありましたが、本文15pxを維持しつつ、重複コピー、カード余白、画像高、配置を見直して16,439pxまで短縮しています。
デモページはポートフォリオ兼サービス検証ページとして検索公開しています。LP本体はindexとcanonicalを設定し、入力フォームと送信APIはnoindexを維持しています。
制作物
- サービス企画と競合整理
- LP構成とコピー
- PC / スマートフォンのワイヤー
- Figmaの変数、スタイル、主要コンポーネント
- HTML / CSS / JavaScript実装
- 3画面幅のキャプチャ
- axe-core、Lighthouse監査
- 検索公開、申込みフォーム、GA4計測
商品登録や画像加工の手作業を減らしたい場合は、お問い合わせフォームからご相談ください。いま使っているExcelやCSVを前提に、最初に確認する項目を整理します。
Others
その他の制作実績
