ログイン
始める

Easy Digital Downloads ブログ

WordPressチュートリアル、ヒント、リソースでビジネスを成長させる

Easy Digital Downloads ストアデザインガイド

Easy Digital Downloads Themes: プロフェッショナルなストアの外観にする方法

最終更新日:

著者画像
投稿者 ケイシー・カバナー ライター
レビュアー画像
レビュー済み クリス・クロソフスキー 投稿者 社長

ストアは機能します。注文は通り、ファイルは配信され、お金はあなたの口座に入金されます。

それから、あなたが賞賛するストアの隣に自分の商品ページを見ると、未完成のように感じられます。商品画像は小さく、価格はプレーンテキストで表示され、タイトルと購入ボタンの間には、クリックしたくなるようなものは何もありません。

Easy Digital Downloadsのテーマは、その答えの大きな部分を占めており、良いテーマを選ぶことは、ほとんどの人が考えている以上に重要です。しかし、テーマはサイトのフレームを制御しますが、ストアページ内のコンテンツは制御しません。だからこそ、同じテーマを使用しても、まったく異なる見た目のストアになるのです。

3つの要素がストアの外観を形作ります。どの要素がどの問題の原因であるかを知ることが、推測から修正リストを作成することへの転換点となります。

このガイドでは、それぞれの要素について説明します。

目次を表示
目次を隠す

主なポイント

要点意味すること
テーマがフレームを設定するテーマは、サイト全体のフォント、色、ページ幅を制御しますが、ストアのレイアウトは制御しません。
ブロックがストアの作業を行うEasy Digital Downloadsには、商品グリッド、購入ボタン、カートを構築するブロックが付属しています。
すでにショップページがあるEDDはアクティベーション時にショップページを作成し、Productsブロックと連携させます。
小規模なカタログにはレイアウトのヘルプが必要2つの商品は意図的に配置されたように見えたり、未完成に見えたりします。レイアウトがどちらに見せるかを決定します。

EDDストアの外観を実際に制御するもの

ストアの外観は、3つの別々のレイヤーから成り立っています。どのレイヤーがどの問題の原因であるかを知ることで、実際には問題ではなかったWordPressテーマを交換する手間を省くことができます。

それらのレイヤーは次のとおりです:

  • WordPressテーマ。フォント、色、ページ幅、ヘッダー、フッター。サイト全体のすべて。
  • Easy Digital Downloadsブロック。商品グリッド、価格、購入ボタンなど、ストアページに実際に表示されるもの。
  • チェックアウトページ。テーマが触れない独自のパス上の独自のデザイン。

たとえば、商品ページに小さな画像とプレーンな価格が表示され、周囲にスペースがないとします。それはテーマではなくブロックレイヤーの問題です。テーマを切り替えてもフォントは変更されますが、レイアウトはそのまま窮屈なままです。

あるいは、フォントがぶつかり合ってヘッダーが古臭く感じるかもしれません。それはテーマの問題であり、ストア向けに構築されたデジタルeコマーステーマは、一般的なブログテーマよりも多くの問題をすぐに解決してくれるでしょう。

Easy Digital Downloads テーマ:探すべきこと

Easy Digital DownloadsはほぼすべてのWordPressテーマと連携するため、短いリストに縛られることはありません。しかし、単に邪魔にならないテーマと、デジタル販売を念頭に置いて構築されたテーマの間には、実際の差があります。

後者の種類は、その価値を発揮します。商品中心のレイアウト、バッジや保証などの信頼シグナル用のスペース、そして単に表示するだけでなくコンバージョンを目的としたコンポーネントが付属しています。

オプションを比較する際は、クリーンなタイポグラフィ、ページ幅の制御、および完全なブロックエディタサポートを探してください。

WooCommerce を多用したテーマは、コミットする前に詳しく調べる価値があります。それらは、デジタルストアでは使用しない製品要素をスタイリングしており、その追加の重みがストアページと競合することがあります。

Easy Digital Downloads には特別なテーマが必要ですか?

いいえ、そしてそれは何かを費やす前に知っておく価値があります。Easy Digital Downloads は、WordPress に付属するデフォルトのテーマを含む、ほとんどの WordPress テーマで動作します。

WordPressテーマディレクトリからのEasy Digital Downloadsテーマオプション。

ただし、「動作する」と「のために構築された」は同じではありません。汎用テーマはストアを正しくレンダリングします。デジタル販売のために設計されたテーマはさらに進んでいます。製品中心のレイアウト、信頼バッジと保証のためのスペース、そしてストアフロントに呼吸する余地を与えるページテンプレートです。

EDD の チェックアウトテンプレートでも同じ考え方を見ることができます。これらは、一般的なチェックアウトのスタイリングではなく、人々が実際にデジタル製品をどのように購入するかに基づいて設計されています。

どちらのパスでも機能します。最初のパスはすぐにライブになります。2番目のパスは、成長するにつれてより多くの作業が可能になります。

Easy Digital Downloads テーマの見つけ方

EDD は、デジタルストアでうまく機能するオプションの テーマディレクトリを保持しており、ここが開始するのに最も速い場所です。言及する価値のある 2 つ:

GeneratePress はコードを最小限に抑え、製品ページの読み込みを速くします。ページビルダーなしで、ページ幅とタイポグラフィを直接制御でき、EDD はテーマディレクトリにリストしています。

デジタルストア用のGeneratePress WordPressテーマ。

Sydney は aThemes から提供されており、ヘッダー、フッター、メニューの組み込みビジュアルコントロールが多く、設定を選択するよりもクリックで調整したい場合に便利です。EDD のテーマディレクトリにもリストされています。

Sydney aThemes オプションをストアデザインのための Easy Digital Downloads テーマとして

どちらもクリーンなベースを提供します。より広い比較が必要な場合は、その他の WordPress eコマーステーマを別途まとめています。

EDDブロックでストアページをスタイルする

これは多くのストアオーナーが決して触れないレイヤーであり、最大の視覚的利点が得られる場所です。

Easy Digital Downloads は、WordPress ブロックエディター用の独自のブロックセットを提供します。これらは、製品、価格、ボタン、カート、領収書、アカウントページなど、ストアの表示に必要なすべてを処理します。

これらは通常のブロックなので、他のコンテンツと同じように配置および配置できます。テンプレートファイルやコードは不要です。

EDDが自動的に作成するページ

Easy Digital Downloads をアクティブ化すると、何も触る前にストア全体のフローが作成されます。すべての割り当ては、ダウンロード » 設定 » 一般 » ページの下にあります。

プラグイン設定のEDDブロックを使用したEasy Digital Downloadsのページ割り当て。
ページ機能使用中のブロック
ショップすべての製品を表示します製品
プライマリチェックアウト購入者が詳細を入力して支払う場所チェックアウト
確認購入直後に表示されるお礼ページ確認
領収書ダウンロードリンク付きの詳細な領収書領収書
取引失敗支払いがキャンセルされたり失敗したりした場合に購入者が表示されるページなし
注文履歴リピート顧客の完全な購入リスト注文履歴

つまり、すでにストアフロントがあります。多くのストアオーナーは、ショップページが存在し、すでに製品ブロックに接続されていることに気づかずに、手動で 2 番目の製品ページを作成しています。

領収書注文履歴は、顧客が繰り返し訪れるページなので、早い段階でスタイルを設定する価値があります。サイトの他の部分と一致する領収書は、購入が本物の場所で行われたことを購入者に伝えます。

設定画面は、見た目以上に重要です。チェックアウト画面が空白になったり、領収書が表示されなくなったりした場合、ここでのページ割り当ての間違いが一般的な原因です。サイト移行後に最初に確認すべき場所でもあります。ページのIDは、移行時に必ずしも保持されるわけではありません。

EDDは、プラグインページでフローを文書化しています。

すべてのEDDブロックとその機能

12以上のEasy Digital Downloadsブロックがあり、すべてブロックインサーターで「EDD」で始まります。多くのストアでは3つか4つで十分ですが、EDDがすでに提供している機能を、別のプラグインを探す前に知っておくと役立ちます。

ブロック機能使用箇所
製品商品のグリッドまたはリストを表示しますショップページ
チェックアウトチェックアウトフォームを表示しますメインチェックアウトページ
確認購入後の注文概要を表示します確認ページ
領収書個別の注文領収書を表示します領収書ページ
注文履歴顧客の過去の注文を一覧表示します注文履歴ページ
購入ボタン1つの商品の購入ボタンを配置します任意の場所
カート(ウィジェット)カート、ミニカート、アイテム数オプションを表示します任意の場所
ユーザーダウンロード顧客が購入したファイルを、オプションで検索機能付きで表示します作成したアカウントページ
プロフィールエディタ顧客が自身の詳細情報を更新できるようにします作成したアカウントページ
ログイン顧客ログインフォームを追加します割り当てたログインページ
登録顧客登録フォームを追加します選択した任意のページ
ダウンロード利用規約商品カテゴリまたはタグを表示します選択した任意のページ

最初の5つは、EDDが作成したページにすでに配置されています。残りは自由に配置できます。

アカウントブロックは、リピート顧客がいる場合に重要になります。注文履歴ユーザーダウンロードを組み合わせることで顧客アカウントページが作成され、「ファイルはどこ?」というメールが大幅に減少します。

ログイン登録は、アカウントが必要な場合にのみ追加する価値があります。ゲストチェックアウトで単一ダウンロードを販売する場合、それらはあまり追加せずに摩擦を増やすだけです。

これらのブロックのいくつかは、設定を開く価値があります。カートブロックは、ミニカートとして実行したり、空のときに非表示にしたり、チェックアウトページで非表示にしたり、アイテム数または合計を表示したりできます。ユーザーダウンロードには検索フォームを含めることができ、顧客が多数のファイルを所有している場合には非常に役立ちます。

EDDブロックのドキュメントには、すべてのオプションが記載されています。

EDD Productsブロックでストアフロントグリッドを構築する

あなたのショップページはすでにこのブロックを実行しているので、新しいページを作成するのではなく、そのページを開くことから始めてください。「私のストアには storefront がない」という問題のほとんどは、実際にはアクティベーション以来誰も開いていないスタイル設定されていないショップページの問題です。

それを開き、EDD製品ブロックを選択し、列数と表示する製品数を設定します。カテゴリでフィルタリングできるため、テンプレートに触れることなく、さまざまな製品タイプごとに追加のページを作成できます。

EDD Productsブロックを使用したEasy Digital Downloadsの設定。

製品が少ない場合は、3列よりも2列の方がきれいに見えます。ゆったりとした間隔の広いカードは意図的に見えます。隙間の多い狭いカードは空虚に見えます。

テーマが提供している場合は、ページをフル幅テンプレートに設定してください。ブログ投稿の列に押し込まれた storefront は、ストアが小さく感じる最も一般的な理由の1つです。

売れる商品ページをデザインする

あなたの製品ページは意思決定が行われる場所であり、デジタル製品にとっては追加の作業を行っています。PDFを手に取ったり、コースをめくったりすることはできないため、ページはそのものを処理する代わりをする必要があります。

それは、タイトルと価格以上のものを表示することを意味します。

追加する各製品は、独自のページになります。ダウンロード » ダウンロードを追加に移動し、そこで入力したタイトル、説明、アイキャッチ画像、価格、ファイルが、購入者が着地するページを構築します。したがって、ほとんどの製品ページデザインは、後で別のテンプレートで設計するのではなく、製品を作成している間に行われます。

Easy Digital Downloads ストアでデジタル商品ページを作成する。

デジタル商品ページに必要なもの

ここで順序が重要です。購入者がスクロールする前に、これらを提示してください:

  • 一般的なアイコンではなく、実際の製品画像またはモックアップ
  • はっきりと表示された価格
  • スクロールせずに見える購入ボタン
  • 購入者が実際に何を得るかについての1〜2文

その下に、詳細を記載してください:含まれるもの、ファイル形式、ページ数またはトラック数、ライセンス条件、対象者。

具体性が説得力を高めます。「包括的なガイド」よりも、「12の印刷可能な演習を含む40ページのワークブック」の方が、より多くの質問に答え、より速く答えます。

製品で可能な場合は、プレビューを追加してください。サンプルチャプター、透かし入りのページ、または短いオーディオクリップは、他の段落のコピーよりも多くの疑問を解消します。

これについては、デジタルダウンロードのEC製品ページを最適化するガイドで詳しく説明しています。

サイトのどこにでも購入ボタンを追加する

EDD購入ボタンブロックは、商品ページだけでなく、あらゆるページや投稿に動作する購入ボタンを配置します。

購入ボタンブロックのEDDブロック設定。

これにより、あなたのストアフロントでは到達できない販売経路が開かれます。関連性の高いブログ記事の最後にボタンを配置しましょう。あなたの得意なことの横にある「会社概要」ページに配置しましょう。単一の商品専用に構築されたランディングページに追加しましょう。

各ボタンは特定の商品に紐付けられているため、どこに配置しても価格設定とチェックアウトは正確に保たれます。

ほとんどのクリエイターにとって、これはストアフロント自体よりも価値があります。なぜなら、あなたの文章をすでに信頼している読者は、まずショップを閲覧する必要がないからです。

チェックアウトページを整理する

チェックアウトは、ためらいがお金を失うページであり、また、ほとんどのストアオーナーがセットアップ後に二度と見ないページでもあります。

あなたのチェックアウトページを開いて何か購入してみてください。何であれ、もし不快に感じるものがあれば、それを最初に修正すべきことです。

チェックアウトを再スタイルする2つの方法

2つの別々のルートがあります。どちらを使用できるかは、セットアップによって異なります。

  • EDDチェックアウトブロック。誰でも利用できます。チェックアウトフォームを表示し、古いショートコードよりもクリーンなデフォルトを提供します。フル幅のページテンプレートと十分な余白と組み合わせると、追加のツールなしで意図的なチェックアウトが実現します。
  • チェックアウトテンプレート。 Easy Digital Downloadsには、既存のチェックアウトページにインポートできる10以上の既製のチェックアウトデザインのライブラリが含まれています。これらを使用するには、アクティブなライセンスを持つEasy Digital Downloads Proパスと、バージョン3.35.0以降のElementorプラグイン(Flexboxコンテナがオンになっていること)が必要です。ライブラリは、ダウンロード » 設定 » 一般 » ページの下にあるテンプレートの参照をクリックすると見つかります。
Easy Digital Downloads チェックアウト用テーマ。

EDDチェックアウトテンプレートの使用方法の完全なチュートリアルがありますので、この記事では繰り返しません。

どちらのルートを選択する場合でも、チェックアウトページからナビゲーション、サイドバー、その他のクリックを誘うものをすべて削除してください。

小さなカタログを実際のストアのように見せる

ほとんどのデジタル販売者は、1つから3つの商品で開始します。ほぼすべてのストアデザインガイドは、20個の商品があることを前提としていますが、そのため、そのアドバイスは小規模なカタログを悪化させます。

小規模なカタログは隠すべき問題ではありません。レイアウトの選択肢が異なるだけです。

数個の商品で機能するレイアウト

グリッドを埋めようとするのはやめましょう。グリッドはボリュームを表示するために構築されており、2つのアイテムを持つ3列グリッドはギャップを露呈します。

代わりにこれを行ってください:

  • 各商品に、片側に画像、もう片側に説明を配置した、幅広のフル幅の行を提供します。
  • 少なくとも6つの商品があるまで、3列ではなく、1列または2列のみを使用します。
  • 1つの商品を販売している場合は、ショップページを完全にスキップし、購入者を直接商品ページに誘導します。
  • ホームページでストアフロントへのリンクではなく、商品を前面に出します。

自信を持って提示された単一の商品は、空のショップよりも常に優れています。空の棚があるカタログではなく、よくデザインされた販売ページを考えてください。

正直にスペースを埋める信頼のシグナル

小規模ストアの余白は、フィラーではなく、購入理由で埋めるのが最適です。

実際の選択肢には、顧客レビューまたは推薦文、明確な返金ポリシー、購入後の流れ、実際の販売前に関する質問に答えるFAQ、および目に見える支払いセキュリティが含まれます。

これらすべてがそのスペースを得ているのは、買い手がすでに疑問に思っていることに答えているからです。ストック写真や薄っぺらいコピーはそうではありません。

顧客が気に入っているデジタル製品ストアの機能リストには、さらに多くのアイデアがあります。

裏付けのないものはすべてスキップしてください。レビュー数の捏造や偽の緊急性は疑わしく見え、特にデジタル製品の購入者はそれに敏感です。

ローンチ前にモバイルで確認する

ほとんどの購入者は携帯電話であなたのストアを見るでしょう。レイアウトの問題が明白になるのはモバイルです。

3つのことを確認してください。スクロールせずに購入ボタンが見えるか、製品画像が全幅に引き伸ばされたときにシャープさを保つか、チェックアウトフィールドをタップするのに十分な大きさにするかです。

reasonably modern なテーマであれば、ほとんどのことはテーマが処理します。製品ページのレイアウトは、特に狭い画面で意味をなさない順序で積み重ねられる列を構築した場合、壊れやすい場所です。


よくある質問:Easy Digital Downloadsのテーマとストアデザイン

Easy Digital Downloads はどのWordPressテーマでも動作しますか?

Easy Digital Downloads は、デフォルトのテーマを含むほとんどのWordPressテーマで動作します。ストアページはブロックと通常のページコンテンツから構築されるため、標準のWordPressページを適切に表示できるテーマであれば、ストアも適切に表示できます。WooCommerceを中心に構築されたテーマは、最初にテストする価値があります。

Easy Digital Downloads ストアをカスタマイズするためにコーディングスキルは必要ですか?

いいえ。WordPressの標準エディターでEDDのブロックを使用してストア全体のレイアウトを構築でき、テーマ設定でフォントと色を処理します。コーディングは、テンプレートのレンダリング方法を変更したい場合にのみ重要です。

WordPressでEDDストアのページを編集するにはどこに行けばよいですか?

ストアページはWordPressダッシュボードの[ページ]の下にあり、他のページと同じように編集できます。どのページがどの役割に割り当てられているかを確認するには、**[ダウンロード] » [設定] » [一般] » [ページ]** に移動してください。

Easy Digital Downloads に最適なテーマは何ですか?

普遍的な答えはありませんが、デジタル販売を念頭に置いて構築されたテーマは、一般的なテーマよりも多くのものを提供します。製品中心のレイアウトと信頼のシグナル用のスペースです。GeneratePressとSydneyはどちらもEDDのテーマディレクトリにあります。

ページビルダーなしでチェックアウトページのデザインを変更できますか?

はい。EDD Checkoutブロックは、古いショートコードよりもクリーンなチェックアウトを提供し、全幅ページテンプレートはほとんどの乱雑さを取り除きます。Checkout Templatesはページビルダーのルートであり、ElementorとEasy Digital Downloads Proパスが必要です。

数個の商品しか販売していないのに、ストアをいっぱいに見せるにはどうすればよいですか?

グリッドは空のスペースを強調するため、マルチカラムグリッドの代わりに、幅広の全幅商品行を使用します。6つ以上の商品があるまで、1つまたは2つのカラムにとどまります。残りはレビューと販売前FAQで埋めます。

ストアを自分好みに作り始めましょう

あなたのテーマは決してすべてではありませんでした。3つのレイヤーを分離すると、ストアに関するあなたの悩みのほとんどは、ブロック設定またはページ幅であることが判明し、それらは数分で済みます。

購入の決定が行われる製品ページから始めてください。実際の画像を追加し、価格とボタンをファーストビューに配置し、購入者が何を得るかを具体的に説明してください。次にショップページを開き、すでにそこにあるグリッドをスタイル設定してください。

チェックアウトテンプレートライブラリとEDDのプレミアム機能の残りの部分が必要な場合は、パスがあれば利用できます。

📣追伸:ニュースレターを購読し、FacebookTwitter/X、またはLinkedInでフォローして、WordPressのリソースをさらに入手してください!

人気の記事

開示:当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。EDDがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかをご覧ください。

EDDでシームレスな販売を体験

強力なツールと安全なトランザクションでデジタルストアを簡単に管理

現在EDDで人気!

EDDの新しいインナーブロックでチェックアウトページレイアウトをカスタマイズ
新しいインナーブロックでチェックアウトページレイアウトをカスタマイズ
チェックアウトページは、1つの固定デザインに固執する必要はもうありません。Easy Digital Downloadsを使用すると、ストアに適合するレイアウトをカスタマイズできます…
Easy Digital Downloads のエレメンターチェックアウトテンプレート
ストア向けの既製エレメンターチェックアウトテンプレートをご紹介します
チェックアウトページは、移動可能なパーツで構成されるようになりました。Easy Digital Downloads (EDD) は、10種類以上のエレメンターチェックアウトテンプレートを提供しています…

今日から販売を開始しましょう!

50,000人以上のスマートなストアオーナーに参加して、WordPressでデジタル製品を販売する最も簡単な方法を使い始めましょう。