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

投稿日 2020年12月26日
更新日 2021年9月7日
著者 hiro
カテゴリー Shopify

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

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

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

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

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

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

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

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

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

Streamline（ストリームライン）デモサイトはこちら >

良い点

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

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

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

shopifyの無料テーマDebut（デビュー）を実際に使ってみた感想 >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

イマイチな点

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

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

順番に解説します。

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

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

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

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

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

Streamline（ストリームライン）がオススメな人

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

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

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

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

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

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

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

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

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

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

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

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

shopifyアプリストア – Metafields Custom Field Master >

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

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

shopifyアプリストア – ClickShip（カナダ＆アメリカの物流アプリ） >

shopifyアプリストア – LoyaltyLion rewards & referral – ポイントプログラムアプリ（日本語非対応） >

shopifyアプリストア – Tidio Live Chat – チャットボット（日本語非対応） >

Shopifyの理解・学習に役立つ方法まとめ

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

デイトラで学ぶ

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