デザイン作成からテーマへの反映ロードマップ

Shopifyでデザインを実装する際に、どこからどのように作成すれば良いか迷ったことはございませんか？

今回はデザイナーがデザインを作成して、エンジニアにバトンタッチするまでのロードマップをご紹介いたします！

今回使用したテーマは「Minimalista」です。

テーマはこちらからご確認ください。

以前デザインを作成する際のポイントをご紹介いたしました。

気になる方はこちらをご確認ください。

今回もデザイン作成の際は、カスタマイザーにて組み立てたのちにFigmaにてデザインの修正をし構築していきました。

タイトルと本文など、カスタマイザーにて設定できる範囲でもフォントは複数設定することが可能です。

またカラーパレットも複数設定が可能なため、セクションごとにカラーを変更することができます。

まずはテーマに備わっているセクションから構築するサイトに適しているセクションをピックアップする。

今回ピックアップしたセクションは以下です。

・横並びに3つのタブを配置可能

・ホバーすると各セクションが大きく表示される

このセクションは横並びで配置できることでスクロールを削減できること、またちょっとした動きがコード無しで使用できるためサイトに動きをつけることができる。

・基本的な情報は表示非表示が選択可能

・ブログ記事は最大9つまで表示可能

画面に大きく表示できるセクションなため興味を持ってもらいやすい配置が可能なこと、また「Column」と「Grid」の２タイプから選ぶことができる。

・矢印ボタンにてテキストの表示非表示が可能

FAQなどでよく使われるデザインのテキストセクションで、矢印にて開閉できるためセクションのボリュームを抑えることが可能です。

・コンタクフォームのサイドに写真を挿入可能

コンタクトフォームはシンプルなことが多いですが、企業の雰囲気がわかる写真を置くだけで安心感を与えることができます。

ピックアップができればそこに画像の挿入、テキストの変更をおこないます。

・アカウントページ（アカウント作成ページ、ログインページ含む）

・カートページ

・お問いわせページ

・ブログ記事ページ

はページを別途作成せずカスタマイザーにて作成できます。

デフォルトで用意のあるページで表示されているセクションにはすでに文言が入っており、カスタマイザーからは編集がきません。

そのため、「デフォルトテーマのコンテンツを編集する」より文言を変更します。

カスタマイザーの上部にあるページから、テンプレートを作成するします。

ページを作成し、作成したテンプレートを適用。

ここまでできたらカスタマイザーにてページごとにデザインを変更して作成することが可能です。

・Social accounts

・Favicon

などテーマ設定から必要な設定をおこないます。

Shopifyマーケットにて通貨の設定、テーマの日本語化とローカライズ、英語の翻訳まで行えばカスタマイザーにて言語セレクターと通貨セレクターの表示が可能です。

ここまで行った時点で再度ページの確認を行います。

問題なければ、Figmaで起こしたデザインでコード編集が必要な部分の実装に入ります。

エンジニアの方にバトンタッチして細かいデザインを実装してもらえればデザインの構築・実装は完了です。

今回使用した「Minimalista」の機能面について少しご紹介いたします。

その他テーマでも備わっていることの多い、必須で欲しい機能は利用可能です。

例えば以下があります。

・トップに戻るボタン

・パンくずリスト

・おすすめ商品

・よくある質問ページ

・製品のフィルタリングと並べ替え

また、カウントダウンタイマーや年齢確認機能、カスタマイズ可能なお問い合わせフォームはテーマによっては備わっていないことの多い機能です。

今回はデザインを作成してから実装までのロードマップをお伝えいたしました！

Shopifyでサイト構築する際の参考になりますと幸いです。