Shopify でサイトデザインを作成するときに気をつけるポイント

Shopifyでサイトを構築する際はカスタマイザーを使用し、セクションを調整しながら作成していく必要があります。

そのためのテーマによって、デザインのレイアウトやできるデザインの幅が大きく変わってきます。

今回は、Shopifyでサイトを構築する際の、デザインを作成する際に気を付けるポイントをお伝えいたします！

先頭でも選択したように、Shopifyでサイトを構築するにはまずテーマを検討することが必要になります。

デザインを起こしてからテーマを選んでしまったら、作成したデザインが実現可能なテーマを考えることにかなり時間がかかります。

最悪の場合、デザインを一から作り直すことサイト構築のスケジュールに大きな影響を与えてしまう可能性もあります。

こういったケースを回避するためにも、テーマ選定を最初に行うことをおすすめします。

過去の記事でおすすめのテーマをご紹介しておりますので、テーマ検討でお困りの際はこちらもご参照ください。

使うテーマが決まったら、ストアにテーマをダウンロードします。

ここからカスタマイザーにてサイトの構想、レイアウトを作成していきます。

次にページ内に必要なセクションの確認と追加を行います。

ここで自分でできる範囲が基準となり、できない部分はカスタマイズが必要になる認識です。

このできる、できないの判断をするためにもカスタマイザーにて構成を考えることが大切になります。

ある程度できる範囲での作成が終わったら、各ページのカスタマイザーで作成したレイアウトをスクリーンショットで画像にし、Figma等のデザインツールに貼って詰めたデザイン作業を行います。

また、フォントに関してもデフォルトでの設定を使用する場合は選べるフォントが限られています。

そのためのカラーやフォントの設定も最初に行なっておくことで、Figmaでの作業も効率よく行うことが可能です。

カスタマイザーで難しいデザインでもコードを編集することで可能なデザインもあります。

作成したデザインが本当に実装可能かどうかは確認して進めることで、その後の修正が少なく効率よく進めることができます。

また実際にかかる工数も確認しながら進めることで構築がスタートした際のスケジュール感も事前に決めて作業できるメリットもあります。

最初はできるデザインとできないデザインの判断が難しいですが、都度確認することで自分の知識にもな次回以降の引き出しを作ることができるため、可能であれば確認しながらの作業をおすすめいたします。

以上の３点が特にShopifyでサイトを作成する時に気をつけるポイントとなります。

最後に、実際にデザインカスタマイズをした場合としてない場合でどれくらいデザインが変わってくるのかの実例をご紹介します。

弊社公式サイトのABOUTページでは以下のカスタマイズを行っています。

• 画像文字のタイトルを入れる
• タイトルとテキストを動画と少し重なるようにデザイン
• 動画の自動再生

画像で比較すると以下の通りです。

このデザインでは「Video Hero」のセクションに「Heading_image」と「TextHeading」を追加して動画の上に表示させています。

添付画像のように、デザインにこだわりたい場合はコードの編集が必須となります。

今回は、Shopifyでサイトを構築する上でデザインを作成する際に気を付けるべきポイントについてお伝えしました！

GO RIDEでは既に構築され公開済みのサイト改修も行っております。

構築していても納得のいくデザインができない、カスタマイザーだけでは限界を感じているなど、お困りなことがございましたらお気軽にお問い合わせください！