shopifyで多い制作の事故を減らそう

最近、前制作者が投げ出した案件のヘルプをしたり、出来上がったページの追加カスタマイズで「いや、このカスタマイズしちゃったらこっちは動かないじゃん！」みたいに、ちゃんと理解せずに制作に挑んで後の事故処理のご相談が増えています＾＾；

事故が多い原因はそもそもの「要件定義」段階で無茶と気づいていないで進めちゃってる事が多いかと思うので、shopify制作で気を付けなきゃいけない事をまとめてみました！

制作の経験がない場合は言ったん目を通しておくことをお勧めします！

制作の手順を確認しましょう

一番多いのは制作の手順を間違えている例です。

通常WEB制作をする場合の手段としては

それ以外にもNoCodeツール系もあると思いますが、そこは今回は置いといて、この３つのパターンが主なパターンだとしましょう。

この制作手順の中でshopifyで使えるのは「テンプレを使って作る」と「オリジナルテーマ制作」の２種類です。言わずもがなと思いますが、静的なページは作れません。

テンプレ（テーマ）を使って作る

この方式に関しては、WordPressのテンプレを使って作る場合にはわかると思いますが、ある程度テンプレの縛りがある中で制作していく事になります。テンプレで頑張ってもカスタマイズには限界がありますが、その分テンプレなので「コスト」と「時間」が節約できるのが大きなメリットですよね？

shopifyも沢山のテーマが公開されているので無料、有料問わずそこから選んで制作する分には「コスト」「時間」共に節約が出来ます

ので、ここに関してはおおむねWordPressと同じ認識で大丈夫です！

オリジナルテーマ制作

ここの認識で大きな間違いが起きていると感じています。

正直2022年1月段階でも「shopifyを理解している人」と言えるのは日本中探してもほとんどいない状況なわけですが、よくわからないけどWordPressと同じ要領で要件を定義する事例がめちゃくちゃ多いと感じています。

WordPressのオリジナルテーマ制作のフロント側の流れを考えると

と言う流れで作業しているかと思います。

ですが、この流れでshopifyの構築をするからおかしな事になってしまうのです！！

shopifyもオリジナルテーマの作成は確かに可能です・・・が立ち止まって考えてみて下さい。WordPressは基本的にブログを投稿出来ればいいと思いますが、shopifyはブログの投稿も出来る機能はありますが・・・それのコードの書き方知ってますか？

そしてshopifyはECサイトだと言う認識はございますか？

ECサイトにはWordPressなどで作るコーポレートサイトと違って絶対的に必要な機能が出てきます。

この辺も絶対的に構築しなくちゃいけない部分です。この機能まで自力で１から実装しようとした場合の労力ってどうでしょうか？出来ますか？

いや、正直やれば出来ます！！完全なフルスクラッチでも構築は可能ですが、明らかに工数が爆上がりするわけです。だってカートに入れるボタンを押した後の動作も、カート画面も、顧客登録画面も全部手作りしていかなきゃいけないんです。

ついでに言えばヘッダーにもカートアイコンあって、カート内の個数とかも書きたいですよね？それ全部実装しようとした時の手間を考えていますか？

ほとんどのケースでこの手間の事をわかっていないでWordPressと同じ流れでデザインまで組み上げた後に、実装に取り掛かるケースが多いと感じています。

この場合は本当に出来る人なら１から構築すればいいのですが、前にも書いた通り工数が爆上がるのでよほど予算が多いお仕事でない限りは、現実的に費用面が合わなくなるはずです。

なのでshopifyの制作は「何かしらのテーマをベースにカスタマイズする」のが現実的な制作方法になってきます。だって、テーマは「カートに入れる機能」「顧客登録」「顧客ページ」等々ECサイトで必要な要素は最初から持ってますからね！

テーマをベースに作る

ここまでに書いたように、現実的な制作は「テーマをベースに作る」事になります。ただし、テーマはWordPressのテンプレと同じで制約が出てきます。

そのテーマによって出来る事、出来ない事がある事をわかった上で作業をする必要があるんです。

一番多い事故はデザイン先行

僕が一番事故ってる可能性が高いと感じているケースは「デザイン」を先に決めちゃってるパターンです。

基本的な動作としてshopifyはセクションを「積み木」の様に重ねる作りをしているので、デザイン的に「積み木」になっていない、全体が１枚絵になっているデザインは不向きです。

１枚絵のサイトも構築は可能ですが、１つの積み木にすべてを詰め込むことになるので、後からなーんにも変更できない凝り過ぎた積み木が出来上がる事になります。

そうではなくて「積み木」だと意識してデザインを作っておくと、後からの変更も楽ですし、元あるテーマのパーツも上手い事、流用できたりして「費用面も抑えられます」

テーマ毎にJavaScriptが違う

一番認識が欠けているのが、テーマはshopifyが作っているのではなくてサードパーティーのテーマ制作会社が作っているという認識です！

何が違うって、テーマ毎にCSSのルールも違えばJavaScriptの変数の定義方法なども異なります。JavaScriptに関してはもはや読み解くのは不可能な分量ですので、ここをいじるのはどう考えても不可能な作りになっています。

ここで考えなくちゃいけないのは「そのJavaScriptが何を制御しているのか？」と言う点です。さっきの章でも書いていますが、ECサイトなのでカートに入れる動作、カート画面、会員の機能、さらには商品一覧のフィルター機能などECサイトは機能がもりもりです！

shopifyのliquidで作っている機能もあれば、JavaScriptで作っている機能もありますが、１番大切な認識は「テーマ毎にliquidで作っているのか、JavaScriptで作っているのか」はその制作会社次第！だと言う事です。

制作会社が変わるとliquidでカートに追加ボタンを書いている所もあるし、１回Vue.jsで書いてあるテーマも見た事がありますが・・・正直苦労しましたよ。

つまりJavaScriptが絡んでそうな所は、あまりいじらない方がいいです。オリジナルでセクションを作り切るなど、出来るならテーマの機能はいじらずに、追加してあげるような作りにしましょう！

ヘッダーいじるべからず

中でも一番事故るのが「ヘッダー」です。ECサイトのヘッダーって「高機能」なんですよ。だってカートボタンとかログインボタンとか、検索窓とか色々付くでしょ？

カートボタンと連動してカートアイコン

これを制御してるのはJavaScriptです。このJavaScriptにshopifyなりのルールがあるなら、いじり用もあるのですが、さっき言ったようにテーマ毎に違います！そしてそのコードはほぼほぼ読みほぐせません。

なのでヘッダーを改造するとどこかしら動作しない部分なんかが、かなり出やすいです！僕の場合はヘッダーの改造は基本的に「足し算」だけ承ります。「引き算」お断りして、基本的には有料テーマを買う理由がほぼほぼヘッダーの為！と言うケースもあります。

と言うのも有料テーマは４～５万円程度で買えて、高機能です！

それに対してヘッダーをフルカスタマイズするのはめちゃくちゃな労力で、制作者として携わった場合

「これ・・割が合わない」

ってなる事は目に見えています。僕はヘッダーフルカスタマイズの場合、程度にもよりますが「10万円ならやりますけど、どうします？」って真面目にお伺いしています。さらに「ヘッダーの改造で生じたバグが納品後に発覚しても直せない場合はあります！」と言う事もお伝えしています。10万円頂いたとしても保証は絶対に出来ないと思っています。だってjavaScritpのエラー地点が・・読み取れないんだもん。

なので ４～５万円の有料テーマはヘッダーで選べばいいと思ってます。正直その他の部分は作れますから！！

デザインは機能と工数を確認してから

デザイン先行のお仕事の場合、僕なら「ここは工数が凄いので難しい、もしくは費用が高くなります」なんて事言えるのですが、たいていの場合はその判断が出来ずに請け負っちゃっている場合が多くて、それで原因で事故ってます。しつこい様ですが

特にヘッダーの事故は後を絶ちません！！

僕はリキッドマスターズの生徒さんには「ヘッダーはいじらない方がいい」と事ある毎に伝えています。

他の部分でもフィルター機能だったり（アプリ導入が多いですが）、機能面とテーマの相性みたいな物があるんですけど、わからないから「とりあえずデザイン通り」に構築する事を目指して、めちゃくちゃ強引にカスタマイズされているshopifyサイトもしょっちゅう見かけます。

デザイン先行で作った結果、静的にHTMLを書き込んでるのは・・・もう８０％ぐらいの案件で見かけます。僕のカスタマイズの場合は「どう考えても書き換えないだろう」と言う部分以外はまず間違いなくliquidファイル内に「日本語」が書かれる事はありません！

ちゃんと理解できている場合は「書く必要がない」事を理解できているからです。

「わからない・・・けどHTMLを直書きしちゃえば見た目整う♪」

って感じで気軽に書いているんだと思いますが、これは後からのカスタマイズをめちゃくちゃ阻害してきますので、超注意してほしいです。

ただ実際にはそれを理解出来ている制作者さんは日本国内には殆どいないのではないでしょうか？それぐらい「出来ます」が出来てないパターンを目撃しまくってます。

shopify制作の手順（まとめ）

答えから書くと

この「テーマ選定が先」と言う事を忘れずに構築して下さい！もし予算が豊富で「オリジナルテーマ」で作るなら無視してもいい工程ですが、90%以上の制作は何かしら「テーマをベース」にカスタマイズする事になります！

また、ここまでには書いてませんでしたが、テーマっCSSも膨大な分量で持ってます。

それこそh2～h6まで、pタグ用等々、デフォルトのCSSが適用されてもいます。そうなるとどうなるかって、後からカスタマイズして追加するセクションでも静的に組んだ時とは違う方向にmarginで引っ張られたり、余計なline-heightが入ってたり・・・結構わちゃわちゃします。

テーマベースでは「ピクセルパーフェクト」もほぼ無理です。WordPressのオリジナルテーマ制作では余計なCSSなんて発生しませんよね？shopifyはテーマを元に作るので、全部思い通りにはいきません！（90％ぐらいはどうにか出来ます）

そこも忘れないで下さい。

テーマを踏まえてデザイン

テーマで出来る範囲でのデザインなんて幅が狭くない？と思うかもしれませんが、しっかりshopifyの機能、liquidをわかる人なら、90％ぐらいの部分はほぼほぼオリジナルセクションで制作可能です。

何なら便利な機能まで盛り込んでやりますよ！！そいう意味では110%を目指せます！！

僕の場合はヘッダーさえいじらなければ、「積み木」を意識してデザインされていれば、「ほぼほぼ自由にデザイン」してもらっても構いません！とは思っています。

もちろんオリジナルセクションで作る部分が増えていくと、その分の工数が増えるので費用面は上がっていきます。なので費用面も考えながらのデザインと言うのはWordPressほどの自由さがない中なので、デザイナーさんも意識された方がいいかとは思っています。

出来ればテーマの機能を使って作る方が安い

当然ですがそう言う事なので、その辺りは要件定義の段階から意識すべき物です。

デザイン出来てから「これ実装出来ますか？」とご依頼いただくパターンも結構あるのですが、そのパターンはすでに前任者が事故ってるパターンがかなり多いです（笑）

shopifyのお仕事は本当に「人がよく飛びます。」

・要件定義者
・デザイナー
・構築者

この全員にshopify理解がないパターンってのは現段階ではめちゃくちゃ多いので、どこか１か所でも理解がある方が制作に入る必要はあるかと思います。

実際には「構築者」がその役割を担う事が多いと思いますが、2022年1月の時点では９０％の構築者は「実際には理解出来ていない」と思った方がいいです。それがまだ現状と思いますので事故が多いんですよね＾＾；

そうならない様に

shopifyにはshopifyのやり方がある！！

・JavaScriptはテーマ後に違う
・テーマがベースになる以上、テーマ固有のCSSがある

WordPressとは違う事を理解してから進めましょう！