Shopifyで構築されたおしゃれなサイトは多くありますが、すべてがプロの手によるものではありません。Shopifyウェブサイトのデザイン方法を学べば、コストを抑えてブランディングにつながるデザインをすることも、必要な機能を持つECサイトをデザインすることもできます。
この記事では、Shopifyウェブサイトのデザイン方法を6つのステップにまとめました。これからShopifyでウェブサイトを作ろうと思っている人や、Shopifyのウェブサイトデザインをカスタマイズしたいと思っている人は参考にしてください。
Shopifyウェブサイトのデザイン方法
1. ブランドのスタイルガイドを作る
ウェブサイトをデザインする際は、まずブランドのスタイルガイドを作りましょう。スタイルガイドとは、ロゴやフォント、色などのブランドアイデンティティをまとめたガイドラインです。
ブランドのスタイルガイドを作成すると、ウェブサイトデザインのあらゆる局面で判断がしやすくなります。
スタイルガイドに含めるべき項目には以下のようなものがあります。
配色
ウェブサイトのデザインにおいて、色はとても重要です。色の心理的効果や消費者に与える印象を理解し、ブランドやサイトの目的に合った色を効果的に使用する必要があります。
例えば、緑は自然などを連想させるため環境意識の高い企業やエコロジー関連のビジネスでよく使用されます。また、緑と赤のボタンが並んでいると、ユーザーは緑のボタンをクリックする傾向があります。これは、緑は「進む」というアクションに関連付けられ、赤は通常「停止」を象徴するためです。
こういった色の持つ効果も理解したうえで、ブランドの核となる色を決めると良いでしょう。
配色を決める際は、色を多用するのではなくいくつかに絞ることも必要です。自分で配色を考えるのが難しい場合は、Canva（キャンバ）のカラーパレットなどを利用してウェブサイトのイメージに合うか確認してみるのも良いでしょう。編集画面でキーワードから配色を提案してくれます。
フォント
ホームページ全体で同じ書体やフォントを使用することで、全体的にまとまった印象を与えることができます。同じサイト内で数種類のフォントを使用するのは問題ありませんが、例えば、商品名はゴシック、商品説明は丸ゴシック、という様に、同じ所には同じフォントを使用したほうが読みやすいでしょう。
本文のフォントはシンプルで読みやすいものにし、見出しはインパクトのあるものやブランドイメージに合うものにするのがおすすめです。
ウェブサイトデザイン初心者の場合、さまざまなフォントを使用するよりも、2〜3種類ほどに留め、各ページで一貫性を持たせながら使用するとクオリティの高いデザインになります。
Shopifyには無料で利用できるフォントも多数用意されているため、その中から選ぶのも良いでしょう。
ロゴ
ロゴはブランドの世界観を端的に伝える重要な要素です。無料で利用できるShopifyロゴメーカーを使って作成したり、外注したりすることもできます。印象的でブランドの本質を伝えるロゴを作成しましょう。
ゼロから自分でロゴをデザインする場合や外注する場合は、ロゴの種類を絞り込んでおくことで、よりブランドのイメージに近いロゴを作成できます。
2. 最適なテーマを選択する
次に、Shopifyテーマ（テンプレート）を選択して、ウェブサイトの骨組みを決めます。Shopifyテーマストアでは、有料無料問わず幅広いテーマを見つけることができます。無料トライアルもあるので、その期間にカスタマイズ性など細かい部分をチェックするのも良いでしょう。
テーマを選択する際は、以下の点を考慮しましょう。
ウェブサイトデザインの予算
Shopifyテーマは無料から500ドルのものまで幅広くそろっているので、予算に合ったものを選びましょう。低予算の場合でも、無料と有料の両方を検討するのがおすすめです。有料テーマは、よりカスタマイズ性が高いため、後々専門家にカスタマイズを依頼するよりもコストと時間を節約できる可能性があります。
必要な機能
動画の挿入や固定ナビゲーションなど特定の機能が必要な場合は、その機能をあらかじめ備えているテーマを選ぶと良いでしょう。Shopifyテーマストアの検索バーでは、テーマを機能で絞り込んで検索することができます。
モバイル最適化の有無
ターゲット顧客がInstagram（インスタグラム）やTikTok（ティックトック）で商品を見つけることが多いなど、自社サイトがスマホで閲覧されることが多いと想定される場合は、モバイル最適化ができるテーマを選びます。
モバイルデバイスでの読み込みスピードが遅いとウェブサイトから離脱してしまう可能性が高くなるだけでなく、モバイル最適化されたサイトはSEOにおいて有利にもなるため、テーマを選ぶ際は、デモストアのモバイル版を必ず確認するようにしましょう。
取扱商品数や業界
テーマによっては少ない商品数に適したものや、多数の商品に適したものなどがあるため、Shopifyテーマストアで検索するときに、「カタログサイズ」から条件を指定して検索しましょう。
また、テーマの中には特定の業界やビジネスニーズに合わせて設計されているものもあります。業界ごとに必要な機能が搭載されていたり、デザインの傾向に応じて作られていたりするため、簡単にその業界に適したウェブサイトをデザインできます。
3. テーマをカスタマイズする
次に、選んだテーマをカスタマイズします。そのままでも見栄えのよいウェブサイトになりますが、ブランドの世界観が伝わり、ユーザーが使いやすいサイトになるようデザインしましょう。
ブランドアイデンティティを反映する
Shopify管理画面で、［オンラインストア］から［テーマ］に移動し、カスタマイズしたいテーマの横にある［カスタマイズ］をクリックします。手順1で作成したスタイルガイドに沿って色やフォントなどの基本的なデザインやレイアウトを調整します。ロゴも［カスタマイズ］画面のテーマ設定アイコンから追加できます。
ナビゲーションを整える
明確で使いやすいメニューを設置し、顧客が必要な情報や商品を簡単に見つけられるようにします。メニューは簡潔にして、主要なカテゴリーやページへのリンクがわかりやすく配置されていることが重要です。ウェブサイトを訪問した顧客が次に何をすべきか明確にわかるように、スクロールしなくても見える場所、目立つ場所にCTA（行動喚起）ボタンも配置すると良いでしょう。
お茶専門店の中村藤吉本店は、トップページの上部にメニューを設置しています。メニュー名も日本語でわかりやすくすることで、顧客が訪問したいページを簡単に見つけることができます。
また、チェックアウト時に表示されるページも顧客体験に重要な役割を果たします。購入してくれたことに対する感謝のメッセージを伝えるページなども、ブランドスタイルガイドに沿ったデザインになるようカスタマイズしましょう。Shopify管理画面の［設定］から、［チェックアウト］、［カスタマイズ］と進むと、ロゴの追加、色やフォントの変更ができます。
写真を取り入れる
ECサイトでは写真もデザインの大きな要素のひとつです。イメージ写真や商品の写真を通してブランドコンセプトやメッセージを伝えることができます。
サイト訪問者が最初に目にするトップページのヒーローイメージは強い印象を与え、ブランドのメッセージを伝える重要な役割を果たします。目を引く高画質な画像とともに、記憶に残るコピーとCTAを組み合わせると良いでしょう。
例えば、コスメブランドのPaul&Joe（ポールアンドジョー）は、印象的な写真をキャッチコピーとともにトップページに掲載しています。
Liquid言語を使った高度なカスタマイズをする
Shopifyウェブサイトは専門的な知識がなくてもデザインできるのが特徴ですが、HTMLとCSSなどの知識があれば、テンプレート言語であるShopifyのLiquidを使用してより高度なカスタマイズをすることも可能です。テーマをカスタマイズする場合は、Shopify管理画面で［オンラインストア］から［テーマ］に移動し、［アクション］、［コードを編集］と進むことでコードを編集できます。
4. 商品ページをカスタマイズする
テーマと同様にブランドの世界観を維持しつつ、ユーザーにわかりやすく購入につながりやすいデザインの商品ページにします。デザインの観点からは次のような項目を設定しましょう。
- 商品名：商品ページのレイアウトを確認し、できるだけ商品名が改行されない長さにするのがおすすめです。
- 商品説明：特徴、素材、使い方などを記載します。丁寧な語り口、カジュアルで快活なトーン、柔らかく詩的な文など、ブランドパーソナリティに合ったトーンで書くようにしましょう。
- 商品画像：ディテールがよくわかるように商品撮影します。このとき、すべての商品を同じ色の背景、同じ照明で撮影するなど、一貫性を持たせるようにしましょう。そうすることで、商品一覧画面などでも統一感が生まれ、ウェブサイト全体のデザインクオリティが上がります。
- 購入ボタン：ブランドスタイルガイドに従って、購入ボタンの色やフォント、サイズなどもカスタマイズします。
5. ストアの詳細をカスタマイズする
Shopifyのアプリストアには、8,000を超えるアプリがあり、デザインやレイアウトの変更、ランディングページの作成など、ウェブサイトのデザインをカスタマイズするアプリもあります。
こういったアプリを使ってコンテンツページやギャラリーページなどをデザインしましょう。
例えば、新着商品のコレクションを紹介するページを作るのであれば、商品をただ羅列するのではなく、色ごとなど特定のテーマでまとめたり、大小さまざまな大きさの画像を並べたりすることで、目を引くページにすることができます。
こういったキュレーションはウェブサイト全体のデザインクオリティを上げるだけでなく、店舗が商品一点一点に向き合っていることが伝わり、ストアに対する顧客の信頼感向上にもつながります。
6. パフォーマンスを確認する
せっかく素晴らしいデザインのウェブサイトを作っても、正しく読み込まれなければ意味がありません。読み込みが遅い場合はサイトスピード改善を行いましょう。
Shopifyウェブサイトのデザインは、バランスが重要です。例えば、動画はブランドストーリーを伝えるのに最適ですが、ファイルサイズが大きいため読み込み速度が低下する可能性があります。画像サイズの最適化や動画編集ソフトを使ってファイルサイズを小さくするなどしましょう。
また、Shopifyサイトに追加した機能や他のプラットフォームに接続するためのサードパーティ製のコードなども、サイトの速度を低下させる可能性があります。パフォーマンスを低下させるものを把握し、それがどの程度サイトに重要なものなのかをしっかりと検討して取捨選択するようにしましょう。
Shopifyウェブサイトのデザインを外注するタイミング
制作会社などのプロに外注する最適なタイミングは、自分でウェブサイトをデザインした後です。最初から専門家に依頼することもできますが、自分の希望やビジョンを伝えるために多くの打ち合わせやコミュニケーションが必要となるだけでなく、ウェブサイト開設後も変更や調整をしたいときにその都度依頼しなければならず、カスタマイズ性や効率性が低くなってしまう可能性があります。
ベースを自分で作成すると、その分の予算を他のプロジェクトに使うことができます。また、ある程度ウェブサイトを運営した段階で外注することで、それまでに把握した顧客のニーズや業務上の課題に合わせてカスタマイズすることもできます。
制作会社などの専門家選びの際に重視すべきポイントは、Shopifyでのウェブサイト制作の実績や依頼内容の理解力、そしてウェブサイト制作後のサポート体制などです。ホームページを確認したり問い合わせたりして、複数社を比較検討すると良いでしょう。Shopifyパートナーから選ぶのもおすすめです。
まとめ
一見すると難しそうに見えるShopifyウェブサイトのデザイン方法ですが、豊富なテーマやアプリが利用できるためデザインの自由度が高く、コーディングの知識がない人や初心者でも簡単にカスタマイズすることができます。
紹介した6つのステップに沿って、まずはブランドのスタイルガイドを作成しそれを基準にAhopifyウェブサイトをデザインしていくことで、デザイナーなどに依頼しなくても高クオリティなものが作成できるでしょう。
Shopifyを使ったサイトで起業したい人や、ウェブサイトをリニューアルしてビジネスを成長させたい人は、この記事を参考にして、ブランドの世界観や商品の魅力などを反映したウェブサイトを作成してください。
よくある質問
Shopifyウェブサイトのデザインをするのにコーディングやプログラミングの知識は必要？
Shopifyウェブサイトをデザインするのにコーディングやプログラミングの知識は必要ありません。多彩なテンプレートやアプリを使うだけで直感的にストアをデザインできます。
Shopifyウェブサイトの構築にはどれくらい時間がかかる？
試験的なサイトであれば、Shopifyテーマを使用すると25分程度でウェブサイトを構築できます。テーマをカスタマイズして商品とコンテンツを追加するだけの場合は1〜2週間ほどで構築できます。
制作会社にサイト構築を依頼する費用は？
ウェブ制作会社にサイト構築を依頼する費用は、シンプルなサイトであれば50〜100万円ほどです。機能やデザインをカスタマイズしオリジナルのサイトを構築したいという場合は、数百万円ほどかかります。
Shopifyを使ったサイトにはどんな業界がある？
Shopifyを使ってウェブサイトを構築している業界は、雑貨やアパレル、飲食など幅広くあります。Shopifyストアの例では業界ごとに国内外さまざまな企業のサイトを紹介しているため、自分に合った業界のウェブサイトを見て参考にすることもできます。
文：Tamami Sakamoto
