Shopifyをノーコードのサイト制作ツールとして語ってみた
Shopifyといえば、ノーコードでECサイトを開設できるプラットフォームです。
しかし、実はECではないWebサイトを作るためのツールとしても中々悪くないなと思っています。
僕は現在「タテプロ」という縦型ショート動画特化のクリエイターマッチングサービスの事業責任者を務めていますが、そのサービスサイトはShopifyで制作しています。
タテプロ（Shopifyで作っているサービスサイト）：
無料テーマのDawnを使い、一切コードでのカスタマイズをせず自力で作ったサイトです。デザインもShopify構築もド素人の人間による成果物なので、デザインなどのクオリティは正直イマイチですが、サービスサイトとしては特段問題なく機能しています。
とはいえ、実は何かしら明確なメリットを求めてShopifyに移行したわけではありませんでした。
元々タテプロのサービスサイトはSTUDIOというノーコードツールで作っていたのですが、僕がもう一つセールス責任者を務めている「Tolstoy」という動画コマースアプリのShopify環境での機能検証をするために、Shopifyに移行したという経緯です。
ちなみにTolstoyは、こんな感じでサイトに動画を埋め込めるアプリです。
Tolstoy：
そのためShopifyに特別メリットを期待していたわけではなかったのですが、いざ使ってみると、ShopifyはECではなくてもノーコードのWebサイトとしても意外に良いところがあるなと感じました。
最近だと、ノーコードのWebサイト制作ではSTUDIOを使っている方が多いと思います。
自分ももう一つのサービスサイトではSTUDIOを使っているため、Shopifyはそこと比べてどうなの？という観点でメリット・デメリットを挙げてみようと思います。
Shopifyで作られたサービスサイトの例
Shopifyの支援会社やアプリベンダーの中には、Shopifyでサービスサイトを作られている会社さんもいらっしゃいます。
Koala InspectorというChrome拡張機能を使うと、訪問したサイトがShopifyが否か、テーマ、入れているアプリの一部を確認できるのですが、そのツールを使って自分が把握できている限りの事例をいくつか紹介します。
Tsunさん：
Shopify周りの支援やアプリを提供しているTsunさんのサービスサイトです。
僕自身も「RuffRuff著者情報」というアプリをサービスのブログで活用させてもらっています。シンプルなデザインながら、豊富な情報がとても見やすく整理されたサイトです。
株式会社飛躍さん：
企業のサービスサイトのお手本のようなサイトです。こういうお手本のようなBtoBサイトの設計やデザインもShopifyで実現できちゃうんですね。
tuna EC：
株式会社RESORTさんのShopify向けサービスのサイトです。良い意味でBtoBっぽくないポップかつ親しみやすいデザインで、個人的にも好みです。
STUDIOと比べたShopifyのメリット
ノーコードの編集がシンプルゆえに簡単
Shopifyをノーコードで使う場合、基本はテンプレートにあるブロックを使う形になります。
フォントや画像サイズは基本「大・中・小」くらいの粒度の選択肢のみ、デザインも左右の配置を変えるくらいしか変数がありません。
そのためあまりデザインのカスタマイズができないのですが、裏を返せば「デザインであれこれ迷わずにすむ」というメリットがあります。
STUDIOはノーコードで調整できる要素が多く、デザインのカスタマイズ性はShopifyよりも優れています。
ただしその分、マージンやパディングなどWebデザインの基本を理解せずに素人がいじると、デザインがぐちゃぐちゃになりやすいです。
また端末ごとのレスポンシブデザインもSTUDIOだと個別でデザインの調整が必要で、これの手間が結構かかります。一方でShopifyだと完全に自動でレスポンシブデザインが反映されるので、迷う必要がないです。
カスタマイズが自由にできることは、一見すると良い面しかないように感じるのですが、自由度が高いがゆえに迷ってしまう、また時間をかけすぎてしまうという側面もあります。
事業者自身がサイトを作る場合、なるべくデザイン周りに時間をかけず、他の重要な業務にリソースを振るべきだと僕は思います。そのため、できることが限定されていることは個人的にはメリットです。
コードが書ければかなり自由にカスタマイズもできる
Shopfyは「liquid」というHTML/CSSにShopify特有の構文をまぜた独自の言語を使うことでカスタマイズができます。
そのため、知識さえあればデザイン、機能のカスタマイズがかなり柔軟にできます。
サイトが軽い（気がする）
Page Speed Insightの指標、また体感のサイトスピードでもSTUDIO時よりもShopifyの方が軽い印象でした。
Shopifyの場合はテーマによって重さ、軽さが違ったりするので一概には言えない点は要注意ですが。
ページのtitleとmeta discriptionを自動で生成してくれる
STUDIOだと自分で設定をしないとtitleとmeta discriptionの属性が空なのですが、Shopifyの場合はページ情報から自動で生成をしてくれます。
もちろんそのままだと内容が微妙なケースの方が多いのですが、万が一設定し忘れてても何かしらの属性は埋まっているので、SEOの観点で最低限の品質担保ができている点はありがたいです。
そのおかげは分かりませんが、STUDIO時代に書いたブログの一つが、Shopify移行後に検索結果で上位に表示されるようになりました。
デメリット
価格はSTUDIOよりも高い
機能が近いプラン同士で比較をすると以下の通り、Shopifyの方が高いです。
Shopify ベーシックプラン：3,650円 / 月
STUDIO CMSプラン：2,480円 / 月
加えて、STUDIOは独自ドメイン不要ならフリープラン、また独自ドメインでも980円の下位プランがあります（PV数50,000、CMS10アイテムまで)。そのため、ブログやリリースをほぼ出さず、CMSを使わないようなサイトであればShopifyは流石に高すぎます。
そもそも、EC向けのプラットフォームとWebサイト制作プラットフォームを比較すること自体が本来適切ではないのですが、サイト制作の機能だけで比較をするとどうしても割高になってしまいますね。
ディレクトリの命名にカスタマイズ性がない
Shopifyの場合、以下のようにディレクトリの名称が規定されており、ここは変えることができません。
通常ページ：/page/xxx/yyy
CMS系：/blog/xxx/yyy
※xx / yyの部分は任意の文字を設定可能です。
そのため、たとえばブログとリリースでディレクトリを分けたい場合は、以下のように1つ下の階層で分類する必要があります。
/blog/contents/
/blog/news/
BtoBサービス向けの問い合わせフォームを作るのが面倒
Shopifyのデフォルトの問い合わせフォームはそのままだと大変簡素です。また個人からの問い合わせが前提なので、法人向けにはとても使えません。
フォームの項目を増やすには、Shopifyアプリを使うか、もしくはliquidでカスタムする必要があります。
アプリを使わずカスタマイズする方法：
STUDIOだとフォームはテンプレートとして既にあり項目のカスタマイズもできるので、その点はだいぶ差があります。
ちなみにタテプロの場合は顧客管理でHubspotを使っているため、Hubspotのフォームを埋め込む形で運用しています。
MAツールなどの外部のフォームがあれば、それを使うのがベターかなと思います。
結局ShopifyでEC以外のサイトを作るのってありなの？
ここまで書いておいて申し訳ないのですが、コストパフォーマンスを考えると、STUDIO、ペライチ、Webflow等のノーコードツールではなくShopifyを使うべき明確な理由はそこまでないと思います。
ただ、Shopify支援に関わる場合は、顧客側にノーリスクな本番環境で様々なテストをできる場所として、また顧客に見せるポートフォリオの一つとして、Shopifyで自社サイトを作っておくという選択肢もありなのではと思っています。
僕も現在TolstoyというShopifyアプリを提供している中で、自社のサービスサイトをアプリの検証のために使っています。
以上、誰のためになるのか何とも言えないトピックですみませんが、最後まで読んでいただいた方、お付き合いいただきありがとうございます。