Shopifyの有料テーマStreamlineを実際に使ってみた感想

shopify streamline

shopify(ショッピファイ)でネットショップを作ろうと思っている。有料テーマのStreamline(ストリームライン)はどんな特徴があるのか知りたい。

ネットで「おすすめテーマ○選!」とかの記事はあるけど、実際に使った感想が載っておらず、参考にならなくて困っている。

こんなことを考えている方へ。

この記事のポイントは以下です。

実際に使ってみて分かったStreamline(ストリームライン)の良い点、いまいちな点、このテーマを使うのにおすすめの人

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。

shopifyの有料テーマStreamlineを実際に使ってみた感想

shopify streamline

Streamline(ストリームライン)は$180の有料テーマです。ファーストビューに動画を設定できたりと、躍動感のあるデザインが特徴です。

良い点

Streamline(ストリームライン)の良い点は以下。

・ファーストビューに動画を入れることができる
・ファーストビューをPC画像、スマホ画像で分けれる
・動きのあるサイトをノーコードで構築できる
・FAQページ用のテンプレートがある
・全幅用のテンプレートもある

やはり有料テーマだけあって、色々と洗練されています。無料とは違いますね。

では順番に解説していきます。

Streamline(ストリームライン)ではファーストビューに全幅で動画を入れることができます。インパクトのあるファーストビューをつくれます。

これに対応しているテーマってあまりないんですよね。コーディングすれば実装できますが、ノーコードで実装できる点がありがたいです。

shopify streamline

サポート形式は、youtube、mp4、Vimeoです。URL埋め込みで簡単に実装できるのが最大のメリットです。

Supports YouTube, .MP4 and Vimeo. Not all features supported by Vimeo.

shopify streamline

ファーストビューは動画ではなく、画像に変えることもできます。そしてPC画像、スマホ画像で出し分けもできます。この機能も他のテーマにあまりないんですよね。

shopify streamline

ファーストビューの背景画像はobject-fit: cover; で切り取られますが、そうするとデバイス幅が狭くなった時に、表示範囲がおかしくなったりすることがあります。

管理画面からobject-positionの設定もできるので、ある程度はコントロールできますが、100%狙い通りの表示範囲にすることはできません。そんなときに、PCとスマホ画像の出し分けは重宝します。

動きのあるサイトをノーコードで構築できるのが、Streamline(ストリームライン)の最大のメリットでしょう。設定できるアニメーションの動きが激し目なので、スポーティな商材と相性がいいです。

たとえば、以下では、150pxのテキストを右から左へfastで(早く)動かす、というアニメーションを設定しています。

shopify streamline

また、FAQページ用のテンプレートも用意されています。アコーディオン形式でQAを記載できます。これを使えば、shopping guide も作成できます。もちろんノーコードで管理画面から編集可能です。

shopify streamline

画像を大きく見せたいときのために、全幅用のテンプレートも準備されています。

shopify streamline

新しいテンプレートくらいコーディングすればいいじゃないか・・・

と思うかもしれませんが、ノーコードでできるならそれに越したことはないです。サイト関係者が全員コーディングを理解できるわけではないですし。

イマイチな点

Streamline(ストリームライン)のイマイチな点は以下。

・万人受けするデザインではない
・メニューの位置に癖がある

順番に解説します。

まず、万人受けするデザインではないです。デザインを表すキーワードとしては「スポーティ」「動きがある」「激しい」「力強い」といった感じです。

化粧品とか”和”の商材には合わないでしょうね。どのテーマもデザインの特色があるので、商材とブランドコンセプトにあったテーマを選べば良いかと。

あと、メニューの位置に癖があります。

デフォルトでは、PC時にもヘッダーは追従せず左下にハンバーガーメニューが出現します。ただ、管理画面からのカスタマイズでヘッダーを固定に変えることができます。

shopify streamline

スマホ時は画面下にメニューが出現します。日本のサイトではスマホ時のメニューは右上か左上にあることが多いと思います。この辺はトリッキーです。

shopify streamline

Streamline(ストリームライン)がオススメな人

shopifyの有料テーマStreamline(ストリームライン)がおすすめなのは以下の人です。

・スポーツ系や躍動感のあるサイトを作りたい
・結構激しい動きのあるサイトが好き
・ノーコードで完結させたい

Streamline(ストリームライン)はサイトに動きを付けたい人におすすめのテーマです。ノーコードで設定できるアニメーションの種類も多いし、アニメーションのスピードも編集できます。

スポーツ商材と相性がいいですね。

どのくらいカスタマイズしたか?

Streamline(ストリームライン)はスポーツ系のアパレルECで使用しました。ノーコードで一通り構築をして、そのあとデザイナーさんによる調整という形で進みました。

Atlantic(アトランティック)同様に、ノーコードで構築しても十分洗練されたデザインになっています。

この案件では、カスタムフィールドをたくさん使って、オリジナルのページをいくつか作りました。デザイン性を担保しながらもユーザー更新を簡単に行えるようにしています。

外部のアプリを使うことで、shopifyでもカスタムフィールドを使うことができます。使い方はほぼワードプレスのカスタムフィールドと同様です。

デザイン性の高いページをユーザー更新可能な形で実装するときに重宝します。shopify案件では、ほぼ毎回使用しています。

私がよく使うのは以下のカスタムフィールドアプリです。無料で使えるので嬉しいです。

この案件では、結構多くのアプリを導入しました。北米での配送アプリ、チャットアプリ、ポイントプログラムのアプリなどです。なお、クライアントは海外の会社だったので、日本語非対応アプリがほとんどでした。

導入したアプリの一部は以下。

Shopifyでのサイト構築を学ぶおすすめの方法

Shopifyのリファレンスは基本的には英語です。自己学習をする際には言語の壁にブチあたります。不安な思いを抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。

  • デイトラで学ぶ

デイトラは質の高いカリキュラムと圧倒的なコスパの良さで、開校1年で受講生7000人突破したオンラインスクールです。「ShopifyEC構築コース」では、HTML/CSSの基礎からWordPressのオリジナルテーマ制作までを学ぶことができます。サポート体制も充実しており、Slackでプロのエンジニアによるアドバイスやフィードバックを受けることができます。

  • TechAcademyで学ぶ

TechAcademy(テックアカデミー)に、専属のパーソナルメンターがマンツーマンでサポートする「Shopifyコース」が誕生しました。
安い買い物ではないので、TechAcdemyの講座を無料体験で試してみるのがおすすめです。

  • 本で学ぶ

商品売るならShopify 世界標準かつ最先端のECサイト構築入門」がおすすめです。shopifyとは?という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
実際に読んだ私のレビューはこちらの記事をご覧ください。

  • 動画で学ぶ

Udemyの「Shopifyでクライアントのストアを作る人のための講座 」がオススメです! 私も買いましたがShopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
実際に購入した私のレビューはこちらの記事をご覧ください。


【Udemyがセール中(2021年10月4日(月)まで)】
対象コースが ¥1,730から。
2021年10月4日(月)まで!【Udemy】セール中のShopifyの講座一覧を見る >>

まとめ

この記事のポイントをまとめます。

Streamline(ストリームライン)の良い点は以下です。

・ファーストビューに動画を入れることができる
・ファーストビューをPC画像、スマホ画像で分けれる
・動きのあるサイトをノーコードで構築できる
・FAQページ用のテンプレートがある
・全幅用のテンプレートもある

Streamline(ストリームライン)のイマイチな点は以下。

・万人受けするデザインではない
・メニューの位置に癖がある

Streamline(ストリームライン)がおすすめなのは以下の人です。

・スポーツ系や躍動感のあるサイトを作りたい
・結構激しい動きのあるサイトが好き
・ノーコードで完結させたい

今回の記事はここまでです。

この記事を書いた人

hiro

美味しいご飯とお酒と一人旅が好き。EC企業に5年▶︎web制作フリーランスへ。ECサイト制作、デザイン、コーディング、サイト分析、CVR改善、ブログ書いたりして生活しています。

旅行ブログ「アジアをひとりで旅してみたら」も運営中。