WooCommerce初心者必見!無料ダウンロードできる画面一覧&ワイヤーフレーム

ツール・サービス

今回は、WooCommerce初心者のために、無料テーマ「Storefront」に対応したワイヤーフレームを提供します。

Figma形式で編集可能な全16種類の画面を網羅しており、これからオンラインショップを構築する方々のお役に立てるかと思います。

対象画面一覧

対象となる画面は、以下の通りです。
これらは「Storefront」テーマに基づいた基本的な画面で、WooCommerceサイトに必要な画面の構成をカバーしています。

・トップ
・ショップ
・カテゴリ一覧
・検索結果
・商品個別
・お買い物カゴ
・支払い
・注文完了
・ログイン
・マイアカウント
 - 注文(注文履歴)
 - 注文詳細
 - ダウンロード(ダウンロード販売した商品の一覧)
 - 住所
 - 請求先住所(編集)
 - お届け先住所(編集)
 - アカウント情報編集

ワイヤーフレームの特徴と活用方法

提供するワイヤーフレームは、Figma形式で作成しています。
ダウンロードしたファイルをFigmaにインポートして、簡単にカスタマイズできます
自分のショップに合ったデザインやレイアウトに自由に変更してください。

以下はその主な特徴です:

  • 編集可能:Figmaを使用することで、各画面を簡単に編集でき、自分のニーズに合わせたカスタマイズが可能です。
  • 柔軟性:新たな機能追加や変更も柔軟に対応できるため、将来の拡張にも対応可能。
  • 設計効率の向上:初心者でもワイヤーフレームを参考にしながらスムーズに設計作業が進められます。

ダウンロードの方法

Figmaで作成されたwoocommerceのワイヤーフレームデータは、以下のリンクからダウンロードしてください。

ダウンロードしたファイルをFigmaにインポートしてご利用ください。

おわりに

WooCommerceのオンラインショップ制作において、必要な画面構成が分からないときに、このワイヤーフレームが大いに役立つはずです。

今回提供したワイヤーフレームを使って、魅力的なオンラインショップ作成のお手伝いができたら幸いです。

もし、ファイルに不備などございましたらご一報いただけると助かります。

PROFILE

本間智久
MAMEプロダクションという屋号で、フリーランスのウェブデザイナーとしてお仕事しています。
 
広告や販促物のグラフィックデザイナーを務めた後、求人サイト運営会社にてウェブデザイナーとして勤務。
サイトの運営、リニューアル、特集コンテンツのディレクションや作成、SEO内部施策などの業務を担当。
2012年に独立。
 
趣味は、テレビゲームと酒場巡り。