Vue Storefrontを利用したECサイト(PWA)構築
この記事で紹介するVue StorefrontはEC事業に置ける日々の運用やビジネスに直接影響与えたり、売上に直結するような小技的な話ではありません。ただ、今後増えゆくPC以外のスマートフォンやその他デバイスからのアクセスにおいてユーザーの購買体験の質を落とさせない仕組みがVue Storefrontにはふんだんに盛り込まれています。
今後ECサイトをよりスマホユーザーにとって使いやすい設計にしたり、最新の技術を盛り込んでみたいとお考えの方はECサイト構築手段の一つとしてVue Storefrontについて是非知っておいて頂ければと思います。
Vue Storefrontとは
Vue Storefront は世界中で注目を集めるEC向けのオープンソースプロジェクトです。 Vue Storefront はその名の通り、フロントエンド技術でトレンドのVue.jsで構築されます。またPWAを前提としている為、パフォーマンスに特化したECサイト構築を可能にします。
PWAは「Progressive Web Apps」の略でネイティブアプリに近い機能をWeb上で再現することができる技術です。詳しくは参考以下リンクをご覧ください。
モバイルファーストとVue Storefront
Vue Storefrontはモバイルファーストに対して非常に重きを置いています。
モバイルファーストに注力する理由の一つとしてモバイルファーストインデックスへの対応が挙げられます。モバイルファーストインデックスとは、これまでサイトの評価基準をデスクトップ（PC）を主として検索順位へ反映していたものからスマホ（モバイル）を評価基準とするようにした方針のことです。
これによりスマホ（モバイル）コンテンツがより重要視されるようになりました。
実際、Googleは2018年3月27日からモバイルファーストインデックスの導入を開始しており、スマートフォン表示の最適化はデファクトスタンダードとなりました。
モバイルファースト対応の現状
Googleが示すモバイルファーストインデックスによる影響だけでなく実際にユーザーがインターネットを利用する端末にも近年大きな変化が生まれています。2017年の時点で既にPCでのインターネット利用率52.5%をスマートフォン59.7%が上回っています。
モバイルファーストの対応においてレスポンシブ化はセットで語られるようになりましたが、モバイルでの表示高速化としてAMPやPWAといった技術もかなり注目を集めてきています。
AMPは「Accelerated Mobile Pages」の略でGoogleとTwitterが共同で開発したモバイル端末での表示を高速化する為の仕組みのことです。PWAは既に説明した通りです。
一部主要ECカートサービスにおいても以下のようにAMPやPWAといった技術を取り入れていこうという流れがあります。
ただし、ここで紹介したサービスはどちらもサードパーティによるプラグイン開発が活発という特徴があります。
実際にはECカートサービスやパッケージを用いてECサイト構築するとなると、フロントエンド開発において最新のライブラリやPWAといった先端技術を利用できるケースは稀です。
次にVue StorefrontがこれまでのECサイト構築にどのような影響を与えるのか特徴と一緒に紹介したいと思います。
Vue Storefrontの特徴
Vue Storefrontの最大の特徴はヘッドレス（バックエンドとは分離されている状態）であることです。次のアークテクチャをご覧頂くと分かるようにCMSとDBが完全に分離されています。この為、MagentoやShopify、BigCommerceといった様々なCMSと連携が可能となります。
ECのフロントエンド開発、パフォーマンスに対して完全に特化したサービスとなるため注目を集めています。
Vue Storefrontの特徴をまとめたものが以下になります。
- プラットフォームから分離されている
- パフォーマンスを重視している
- モバイルファーストのアプローチ
- 先端技術を利用
- カスタマイズ性の高さ
- オープンソース（MITライセンス）
- Server Side Rendering (SSR)
- オフラインでも動く
Vue Storefrontで構築されたデモサイトがあるので触ってみてください。
ホーム画面への追加や機内モードにしてオフラインでの動作などPWAならではの体験ができましたでしょうか？
Storefront UI
Vue Storefrontではユーザーにとって使い易いUI体験も提供できるようECサイトに特化したUIライブラリも用意しています。
Storefront UI
Storefront UIで利用されるコンポーネントの一覧がStorybookで確認できるので是非触ってみてください。2019年6月時点ではまだアルファ版での提供となっています。
StorefrontUI — Customization-first component library
まとめ
Vue Storefront自体、日本ではまだ馴染みのないOSSだと思いますが次世代のECサイトとしてのあり方を切り開くポテンシャルを十分持っていると思います。引き続きVue Storefrontに関する動向はチェックして共有して行きたいと思いますのでフォロー宜しくお願いします。
ECサイトの立ち上げ、改修でお悩みの方
メーカーのEC立ち上げから大型ECサイトリプレイスまで御社の売り上げ規模、予算、業務フローにあわせたカートをご提案いたします。以下サイトよりお気軽にお問い合わせください。
