WORKS：DESIGN STOCK Web素材ECサイト制作

DESIGN STOCKは、Web広告やSNSで使用できるデザイン素材を販売するために制作した 本格的なECサイトです。 WordPressとWooCommerceをベースに、商品登録・カート・購入手続き・ Stripe決済まで実装し、実際に商品を購入できる構成としています。

また、販売商品としてCanvaで編集できるバナーを6点制作。 購入者がテンプレートをCanva上で編集し、自社の商品やサービスに合わせて オリジナルの広告素材として活用できるサービス設計としています。

ターゲット：小規模事業者、店舗運営者、個人事業主、SNSやWeb広告を自分で運用している方など、 デザイン制作の時間を抑えながら、見栄えのよい広告素材を使いたいユーザー。

DESIGN STOCKは、Web広告バナーやSNS画像など、すぐに使えるデザイン素材を扱うオンラインショップです。 素材を選び、文字や写真を変更することで、ユーザー自身のサービスや商品に合わせたデザインへ カスタマイズできる構成としています。

［担当・技術］

• 担当範囲： サイト構成 / UI設計 / Webデザイン / WordPress構築 / ECサイト構築 / 商品登録 / 購入導線設計
• ECシステム： WooCommerce / カート / 購入手続き / Stripe決済 / 会員・アカウント機能
• 決済： Stripe WooCommerce
• 販売商品： Canvaで編集可能なWeb広告・SNS用バナーテンプレート 6点
• 使用技術： WordPress / WooCommerce / PHP / JavaScript / HTML / CSS

「デザインを買う」のではなく、「すぐ使えるデザインを手に入れる」。

DESIGN STOCKでは、専門的なデザイン知識がなくても、 自分の商品やサービスに合わせて素材を編集できることを価値として設定しています。

そのため、サイト全体を過度に装飾するのではなく、 商品そのものが分かりやすく見える余白と情報整理を重視。 ECサイトとしての「探しやすさ」と、デザイン素材サイトとしての「見た目の楽しさ」を 両立させる方向で設計しました。

サービスのキーワードは「すぐ使える」「自分だけのデザイン」「もっと自由に」。 購入後の編集まで含めて、ユーザーがデザイン制作を始めやすい体験を目指しています。

■ ファーストビュー

• サービス内容を短いコピーで明確に提示
• Web広告バナー素材を視覚的に見せ、商品ジャンルを直感的に伝達
• Canvaで編集できるという利用メリットを明示

■ ショップ導線

• 商品画像を中心にした視覚的な商品選択
• 用途をイメージしやすいバナー素材を掲載
• 商品選択からカート、購入までの流れをシンプルに設計

■ Aboutページ

• DesignStockのサービス内容を説明
• どんなユーザーに向いているかを明確化
• 素材を選んでCanvaで編集する利用イメージを説明

■ EC運用

• WordPress管理画面から商品を追加・更新できる構成
• 商品情報を蓄積しながらショップを拡張できる設計
• 購入者側のカート・アカウントなどECに必要な導線を整備

■ 商品販売

• Canvaで編集できるバナーテンプレート6点を商品として制作
• 商品画像・商品説明・価格などを設定
• 商品ページからカート、購入手続きまでつながる導線を設計

■ 購入フロー

• 商品ページ
• カート
• 購入情報入力
• Stripeによる決済
• 購入完了

■ Canva編集

• 購入したユーザーがCanva上で編集できるテンプレートを制作
• テキスト・画像などを変更して用途に合わせてカスタマイズ可能
• デザイン制作から購入後の利用までを想定した商品設計

• WordPress（CMS）
• WooCommerce（EC機能）
• CartFlows（カート機能）など
• Payment Plugins for Stripe WooCommerce（Stripe決済）
• PHP（WordPressテンプレート・機能制御）
• JavaScript（UI・インタラクション制御）
• HTML / CSS（フロントエンド実装）
• レスポンシブ対応
• 商品登録・商品管理
• カート・購入手続き
• Stripeによるオンライン決済
• 購入者向けアカウント機能

• 商品画像を主役にしたシンプルな情報設計
• ファーストビューでサービス内容を瞬時に理解できるコピー設計
• 余白を活かして商品を見やすくするレイアウト
• Web広告素材の視認性を損なわないUI設計
• PC・スマートフォンの両方で利用しやすいレスポンシブ構成

今回は、一般的なコーポレートサイトとは異なり、 「サイトそのものを見せる」のではなく「サイト内の商品を選んでもらう」ことが重要な制作でした。

そのため、デザインの見栄えだけでなく、商品を発見する・内容を確認する・購入するという EC特有の行動を意識して画面を構成しています。

また、購入後にCanvaで編集するというサービス特性を踏まえ、 「購入して終わり」ではなく「購入した素材を使って自分の広告を作る」までを サービス体験として捉えて設計しました。