テーマが決まったら、ワイヤーフレームとデザインカンプの制作を行います。
Shopifyではワイヤーフレームの制作をしてからデザインカンプの制作に入る案件もあれば、ワイヤーフレームを制作せずにいきなりデザインカンプの制作に入る案件もあります。
テストストアでTOPページをカスタマイズする
使用するテーマが決まったらヒアリングした情報や要件をもとにいきなりワイヤーフレームを作り始めるのではなく、まずはテストストアでTOPページのカスタマイズをしていきましょう。
掲載すると決めたコンテンツをどのセクション・ブロックで表現するかを決める為です。
フルスクラッチのようにコーディングをしても良い案件ではテーマのセクション・ブロックを利用しない為、TOPページのカスタマイズを行わなくてもワイヤーフレームやデザインカンプを制作することが可能です。
ノーコード、ローコードの案件ではテーマの持っているセクションとブロックを利用してワイヤーフレームやデザインカンプを制作するため、TOPページのカスタマイズを行ってから制作するようにしましょう。
コンテンツをどのようなレイアウトで表現するかを考え、テーマが持っているセクションとブロックを使って表現をしていきます。
しょうこ作ったワイヤーフレームがテーマが持っているセクションやブロックの形を落とし込んだ見た目になっていない場合、後になって「ここはどのセクションを使って表現するの？」という事態になりかねません。
編集画面を開き、使用できるセクションとブロックを把握してからワイヤーフレームの制作に進みます。
TOPページのカスタマイズ
テーマの編集画面に移動し、まずはヘッダーとフッターの間にあるセクションを削除していきます。
初期値の状態でメインビューのセクションが使えそうな場合は、メインビューのセクションはそのまま残しておきます。
掲載したいコンテンツを表現できるセクションとブロックを探して、追加を行います。
使用するセクションやブロックの中のテキストは日本語の方がワイヤーフレームを作りやすいので、ボタンの文字やテキストコンテンツは日本語に変更しておくのがおすすめです。
掲載したいコンテンツを表現するセクションとブロックを一通り追加したら、ワイヤーフレームの制作へと移ります。
ワイヤーフレームの制作
ワイヤーフレームは、どのくらいコーディングをするのかによって見た目を変える必要があります。
ノーコードまたはローコードの案件の場合は、ワイヤーフレームもテーマの編集画面でできる見た目になるべく近づける必要があります。
どの程度コーディングを行って良いかによって、ワイヤーフレームの見た目も変えるようにしましょう。
ノーコードまたはローコードの案件の場合
ノーコードの案件ではコードを書かないため、ワイヤーフレームも使用するテーマのセクションやブロックの形に近づけて制作をする必要があります。
ローコードの案件の場合もそれほどコードはかかない案件が多いため、基本的にはテーマのセクションやブロックの形に近づけてワイヤーフレームを制作していきます。
先にデモストアに使用するテーマをインストールし、使用できるセクションやブロックの形を確認してからワイヤーフレームの制作を行いましょう。
しょうこテストストアで作った見た目を元にワイヤーフレームを作っていきますが、ワイヤーフレームの段階なのでピクセルはざっくりとで構いません。テストストアをプレビューで表示させ、検証ツールで余白や文字の大きさの値を測ってワイヤーフレームに反映させる必要はありません。
フルスクラッチの案件の場合
フルスクラッチの場合はテーマの編集画面内にあるセクションとブロックは気にする必要はない為、ワイヤーフレームの自由度も高くなります。
その為、編集画面のセクションやブロックの形は気にせずワイヤーフレームを制作しても問題はありません。
ただし、フルスクラッチと言ってもヘッダーはテーマの編集画面でできる見た目に合わせて欲しいと指示が出る場合も多いので、そのような案件ではヘッダーに関してはテーマでできるような形に近づけて制作を行うようにしましょう。
デモストアで作った簡易的なストアをワイヤーフレームとする場合
稀に編集画面で作ったデモストアをワイヤーフレームとする案件もあります。
デモストアをワイヤーフレームとする案件ではFigmaでワイヤーフレームは制作せず、Shopifyの編集画面でざっくりとしたページの見た目を制作する必要があります。
その後デモストアをどのようにクライアントに見せるかはディレクター次第ですが、デモストアをプレビューモードで表示させ、スクリーンショットを撮って共有するケースが多いです。
デザインカンプの制作
ノーコードまたはローコードの案件の場合
制作時の注意点
ノーコードの案件はコードを書かない分、編集画面でできる着色装飾以外の装飾を加えることができません。
また、ローコードの案件ついてはどのくらいコーディングをしても構わないかにもよりますが、見出し付近にあしらいとして画像を入れたり背景にあしらいを入れたりすることは可能とされるケースが多いです。
ローコードの案件でも商品画像内のカートに入れるボタンの位置やフィルタの位置を変更する場合は工数がかかるため、不可となるケースが多いです。
予算やディレクター・構築者によってどこまで編集を行って良いかが異なりますので、どのような装飾が可能か確認をした上でデザインカンプの制作を行うようにしましょう。
しょうこちなみにノーコードの案件でもボタンの文言やタイトルを日本語表記にしたり、テキストボックスの横幅を変更したりすることは構わない案件もあります。（中途半端な位置で改行されることを防ぐため。）
作り方
テストストアでセクションとブロックを使って構築し、完成したらプレビューモードに切り替えます。
（TOPページ構築例）
プレビューモードに切り替えた状態で検証ツールに切り替え、値を確認しながらFigmaやXDでデザインカンプを制作していきます。
検証ツールでは、横幅をデザインカンプの横幅に合わせてから値を確認していきます。
Shopifyでは必ずと言って良いほど小数点が入っている値が見つかりますが、小数点はデザインカンプに反映する必要はありません。
（小数点がある例）
Shopifyの案件では、パーフェクトピクセルは求められません。
必ずと言って良いほどデザインカンプと実装後の値がずれるため、デザインカンプでもテストストアと1pxもずらさないように値を合わせて制作していく必要はありません。
テキストや画像の値は大まかでも構わないという案件もあります。
そのような案件の場合は検証ツールで値を確認しながら制作することも可能ですが、テストストアをプレビューモードに切り替え画面の上から下までをスクリーンショットし、FigmaやXDにインポートした後スクリーンショットした画像の上からなぞるように制作することも可能です。
※デザインカンプのレイヤーには、なるべくShopifyの編集画面で利用したセクション名をつけておくようにしましょう。構築時にどのセクションを利用しているのかわかりやすくなります。
フルスクラッチの案件の場合
制作時の注意点
フルスクラッチの案件やヘッダー以外自由にデザインを作って良いような案件ではShopifyでやってはいけないことを守っていれば基本的に制限はありませんが、ローコードと同様に案件によってNGとなるデザインもあります。
フルスクラッチだからどんな見た目にしても構わないというわけではありませんので、案件ごとに必ずやってはいけない見た目がないかを確認するようにしましょう。
作り方
フルスクラッチの案件ではテーマが持っているセクションやブロックの形を気にせず作って良い案件が多いため、テストストアで全体を構築してからデザインカンプを制作する必要はありません。
ワイヤーフレームを元に、着色装飾を進めてデザインカンプを制作していきます。
ただし、フルスクラッチの案件の中でもヘッダーとフッターの形や一部の箇所のみテーマの編集画面でできる形に合わせなければならない案件もあります。
そのような案件の場合は該当箇所の見た目や値をテストストアで確認をする必要があるため、テストストアでどのような見た目だと構築可能か確認をしてからデザインカンプを制作するようにしましょう。
ノーコード・ローコードの案件、フルスクラッチの案件ともに、1つのセクションがどこからどこまでなのかわかるように背景に四角形の図形レイヤーを入れたりオートレイアウトを活用したりしましょう。
このように制作することで、構築者がデザインカンプを見た際にセクション上下のパディングの値がいくらなのかわかりやすくなります。
