Shopify水素デモストアのリスト[更新]

公開: 2022-04-25

目次

ShopifyはSaaSeコマースプラットフォームであるため、ユーザーはオンラインストアをカスタマイズするために多くの制限に直面しますが、Hydrogenを使用すると、これはもはや当てはまらない可能性があります。

水素は、開発者がカスタムストアフロントを構築するためのShopifyの最初のReactベースのフレームワークです。 このフレームワークでは、React Serverコンポーネント、サーバー側のレンダリングとキャッシュAPIを使用することで、開発者は短時間でスピーディーで非常に柔軟なストアフロントを作成できます。

デモストアは、フレームワーク、その構造、およびコンポーネントについて理解するのに役立ちます。 さらに、ShopifyHydrogenストアが実際にどのように見えて機能するかを明確に把握できます。

Shopify水素ストアフロントデモ

  1. Shopifyの公式デモ

公式デモは、開発者向けのオンライン環境であるStackBlitzにアップロードされます。 ライブプレビューは、右側のパネルに数秒で取得されます。 このデモストアはモバイルでは表示できませんのでご注意ください。

  1. Shopifyサプライ

これは実際にはデモストアではなく、Shopify自身がHydrogenを使用して作成した公式ストアです。

  1. Tapitaによる水素デモ

Shopify水素フロントエンドデモは、SimiCartがTapitaHydrogenページビルダーを使用してすべてのページをドラッグアンドドロップして作成します。

  1. rafaelcg.comによる水素デモ

このフロントエンドデモは教育目的で作成されており、開発者がHydrogenを使用して基本的なカスタムストアフロントを構築する方法を示しています。

  1. 正気による水素デモ

デモでは、Shopify水素ストアがSanity.io（製品とマーケティングデータを組み合わせるツール）とどのように連携できるかを示します。

Shopify水素プロジェクトのデモ

これは、ShopifyHydrogenのコンポーネントと構造を理解するのに役立つGithubのデモプロジェクトのコレクションです。

  • Shopifyによるデモ
  • Shopifyサプライによるプロジェクト
  • ShobhitSirohiによるデモ
  • henryclongによるデモ
  • andacg1によるデモ
  • bschnell-googleによるデモ
  • kwaaaaaaによるデモ

Shopify水素とShopify通常ストア：違いは何ですか？

開発者にとっては簡単かもしれませんが、Shopifyの販売者は、Shopify水素、それに関連する用語、およびその仕組みを理解するのが難しいと感じるかもしれません。

したがって、ShopifyHydrogenとShopifyの通常のストアの主な違いを指摘するために簡単な比較を行い、技術に精通していないShopifyの加盟店がより良い状況を把握できるようにします。

意味

  • Shopify水素：UIコンポーネントを備えたカスタムストアフロントのフレームワーク
  • Shopify ：eコマースプラットフォーム

フレームワークとプラットフォームは、部外者が理解するための2つの紛らわしいIT用語です。

プラットフォームにはソフトウェアとハ​​ードウェアの両方が含まれており、人々がそのアプリケーションを作成して使用するための環境を提供します。 一方、ソフトウェアのみを含むフレームワークは、開発者がアプリケーションを作成するための既製のコンポーネントを備えたテンプレートのようなものです。

プラットフォームは、人々が滑り台やシーソーを訪れて遊ぶ遊び場と見なされることがよくあります。 一方、フレームワークはシーソーそのものです。 付属の木材や塗料を使用して、カスタムのシーソーを作成できます。

それでは、Shopifyのケースに戻りましょう

eコマースプラットフォームであるShopifyには、ストア所有者がオンラインWebサイトを作成するためのテーマ、eコマース機能、およびアプリがあります。

一方、フレームワークであるShopify水素は、開発者がShopify Webサイトで機能するカスタムストアフロントを構築するために必要な構造、ツール、およびコンポーネントを提供します。

コーディング言語

  • Shopify水素：Reactsフレームワークを使用したJavascript
  • Shopify通常ストア：Shopify Liquid

Liquidは、Shopify専用のShopifyの唯一のコーディング言語です。 一方、Javascriptは、何百万ものアプリケーションで使用される非常に普遍的なコーディング言語です。 たとえば、Netflix、Facebook、Candy Crush、Linkedinなどは、Javascriptを使用するいくつかの注目すべきアプリケーションです。

Shopify Liquidsは堅実なコーディング言語ですが、特にパフォーマンスに関していくつかの制限があります。 ShopifyストアフロントにJavascriptを使用すると、独自のWebサイトUI＆UXを構築するための無限の可能性を開きながら、より高速なWebページが可能になります。

使いやすさ

  • Shopify水素：開発者志向
  • Shopifyの通常のストア：技術者向けではない

水素のウェブサイト、そのデモ、そのチュートリアルで紹介されている用語は、開発者を対象としています。 誰でもShopifyストアを作成できますが、ShopifyHydrogenを介してカスタムストアフロントを作成するにはコーディングの経験が必要です。

利点

水素は、開発者とマーチャントに、Shopifyで動的なeコマースエクスペリエンスを作成するための新しい方法を提供します。 柔軟性の欠如やパフォーマンスの高速化など、現在のShopifyストアフロントに関する多くの既存の問題を解決します。

Shopify水素の利点について詳しく見ていきましょう。

迅速に開発

30近くのコンポーネントが含まれているため、公式のデモテンプレートには、箱から出してすぐに購入できる完全な顧客購入の旅がすでに含まれています。 このようにして、開発者はセットアップをスキップして、すぐにコーディングに取り掛かることができます。

また、Shopify水素には、Storefront APIに直接接続する、すぐに使用できるフック、コンポーネント、ユーティリティが付属しています。 したがって、GraphQLクエリを作成する必要なしに、データフェッチがシンプルかつ効率的になります。

よりよい性能

Shopify水素は、高度なWebテクノロジーを利用して、速度を最適化し、パフォーマンスを活用します。

  • ストリーミングサーバー側レンダリング
  • Reactサーバーコンポーネント
  • スマートなビルトインキャッシュと効率的なデータフェッチ
  • サーバー側のレンダリング、クライアント側のフェッチ、エッジ配信を動的に組み合わせる

パフォーマンスの向上は必然的にGoogleCoreVitalsスコアの向上につながり、したがってSEOの結果が向上します。

多様性の向上

水素は、Shopifyがヘッドレスコマースに対応する方法です。これは、2022年の最も顕著なeコマーストレンドの1つです。

ヘッドレスコマースとは、フロントエンドをバックエンドから切り離して、比類のないカスタマイズ性と統合性を実現することを意味します。

これをHydrogenで行うことにより、バックエンド機能に影響を与えることなく、フロントエンドに自由に変更を加えることができます。 これには、パーソナライズを改善するための複数のフロントエンドの使用と、ShopifyのURL構造の修正が含まれます。

さらに、ヘッドレスアーキテクチャを使用すると、すべてのカスタマイズとメンテナンスをバックエンドとフロントエンドで同時に実行できます。 フロントエンドプロセスがバックエンドに影響を与えないこと、およびその逆のことを知っていると、開発者と設計者は仕事をするためのより多くの自由を得ることができます。

もっと見る：ヘッドレスShopifyストアの例

より良いパーソナライズ

eコマースの未来は、顧客に最も関連性の高い体験を提供することにあります。

シンプルなパーソナライズはローカリゼーションから始まります。ページはさまざまな国の購入者向けにさまざまな言語に翻訳されています。

ただし、最近では、eコマースのパーソナライズはますます複雑になっています。 価格はさまざまな状況に応じて動的に変化し、製品の推奨事項はさまざまな顧客に対してさまざまに表示されます。

eコマースストアは現在、ウェブサイトの細部をすべてパーソナライズしようとしています。

Shopifyの主任エンジニアであるIlyaGrigorikは、最新のeコマースのパーソナライズについて説明し、すべてのページをオープンなテトリスボードとして視覚化しました。ボード上の各「スロット」は、訪問者に動的にアピールするようにカスタマイズできます。

では、ShopifyHydrogenはパーソナライズにどのように役立ちますか？

Shopify水素ストアフロントは、堅固な構造ではなく、さまざまなUIコンポーネントで構成されています。 開発者と販売者は、各コンテンツコンポーネントを調整して、最高の動的コンテンツとパーソナライズされたカスタマーエクスペリエンスを提供できます。

たとえば、過去の購入や人口統計情報などの顧客データに基づいて、製品の推奨のブロックを作成できます。

さらに、パーソナライズされたWebストアは非常に複雑であることが多く、優れた速度パフォーマンスを維持するには、より強力で動的なWebテクノロジーが必要です。 Shopifyは長い間この問題に気づいていました。 したがって、サーバー側のレンダリング、動的キャッシュ、データフェッチの改善など、より高速なストアを実現するためのHydrogenのすべての取り組みは、この特定の問題を念頭に置いて行われます。

SimiCartで水素ストアフロントをカスタマイズする

水素は、eコマースの未来に向けたShopifyの足がかりです：ダイナミクスとパーソナライズ。 水素を使用すると、Shopifyは顧客、特にスケールアップしたマーチャントにより多くの価値を提供できるため、他の柔軟なプラットフォームに対する競争上の優位性を維持できます。

マーチャントにとって、現在のShopifyフロントエンドを放棄し、Hydrogenストアフロントを構築することは、パフォーマンスやカスタマイズなどの既存の多くの問題点を解決するのに役立ちます。 これにより、平均注文額が高くなり、既存顧客維持率が向上し、収益が増加します。

ただし、現時点では、Hydrogenは、技術に精通していないShopifyの所有者ではなく、開発者向けに作成されています。 コーディングの経験が必要であり、最初からページビルダーツールがなく、初心者向けのガイドもありません。

SimiCartは、ShopifyHydrogenを使用してヘッドレスストアフロントを手頃な価格で構築するための完全な開発ソリューションを提供します。 パッケージにはドラッグアンドドロップのページビルダーツールが付属しているため、Shopifyの販売者は通常のShopifyストアと同じようにカスタムのHydrogenストアフロントを作成できます。

水素ストアフロントを簡単に構築