Shopifyウェブサイトのデザイン方法を5つのステップで解説

Shopifyで構築されたおしゃれなサイトは多くありますが、すべてがプロの手によるものではありません。費用をかけて専門家に依頼する代わりに、Shopifyウェブサイトのデザイン方法を学べば、コストを抑えつつ、独自のデザインや機能を持つECサイトをデザインできます。この記事では、Shopifyウェブサイトのデザイン方法を5つのステップにまとめました。

Shopifyウェブサイトを自分でデザインする利点

• 作成時間を短縮できる
• デザインを微調整する
• コストを節約できる

自分でデザインすることで、外部の業者やデザイナーのスケジュールに依存せずスムーズにサイト制作を進めることができます。アイデアもすぐに実装でき、運用開始後に顧客のフィードバックを受けた際も迅速に対応できます。

デザインの微調整を簡単に行えるのもメリットです。Shopifyには、そのままウェブサイトとして使用できるほど洗練されたデザインが多数ありますが、カスタマイズすることも可能です。デザインや機能に関する微調整を自由に行えるので、ブランドのアイデンティティに合わせて細かい部分までカスタマイズできます。外部委託するときのようにコストやスケジュール調整などを気にする必要がないため、顧客に一貫したカスタマージャーニーを提供できるよう、納得のいくまで調整できます。

また、外注する場合はデザインや開発の費用がかかりますが、自分で作成することでその分のコストを節約できます。Shopifyの基本プランに含まれるテンプレートや機能を利用すれば、追加の投資を抑えつつ、機能的で魅力的なウェブサイトを作成できます。

簡単にプロフェッショナルなサイトデザインにするための5つのステップ

1.デザインを決める

ウェブサイトのデザインを決める際は、必要な機能やデザインの方向性を定めるために、まず MVPサイトを作ります。MVPとはMinimum Viable Productの略で、顧客に価値を提供できる実用最小限の製品を意味します。必要最低限の機能を備えたMVPサイトを立ち上げ顧客からのフィードバックを収集することで、追加する機能を選定したり、デザインのヒントを得たりすることができます。

MVPサイトでの試験運用が終わりウェブサイトを本格的にデザインする際は、考慮すべきことが6つあります。

1. 顧客の信頼

顧客の信頼を得るために、サイトには問い合わせページやわかりやすく返品ポリシーなどを記載したページを追加します。Aboutページで運営者やビジネスについて丁寧に伝えるのも良いでしょう。また、フッターの下部にデフォルトで表示される「Powered By Shopify」メッセージを残しておくと、Shopifyを信頼できるプラットフォームとして認知する多くの顧客の信頼獲得に役立ちます。

2. 視覚的魅力

顧客は商品を実際に手に取ることができないため、視覚的要素が購入決定において非常に重要な役割を果たします。最適な画像サイズを守ったり、画像編集ソフトを使用したりして、高解像度の画像を提供できるようにしましょう。

商品画像を掲載する際は、顧客に商品の質感や色合いが細かく伝わるように複数の角度からの画像を掲載したり、使用シーンを示す画像を加えたりするのも効果的です。

例えば、家具の製作・販売を行うKANADEMONOは、製品の全体像や機能や素材にクローズアップした画像、使用イメージ画像など多くの画像を商品ページに掲載しています。

金属の工芸品や雑貨などを扱うKANAGU STOREは、光の当て方や影の使い方を工夫して撮影し、商品の特性やブランドの世界観を表現しています。

3. 配色

ウェブサイトのデザインにおいて、色を効果的に使用することも重要です。色を効果的に利用することで、顧客に取ってもらいたい行動を促すことができます。

例えば、緑と赤のボタンが並んでいると、ユーザーは緑のボタンをクリックする傾向があります。これは、緑は「進む」というアクションに関連付けられ、赤は通常「停止」を象徴するためです。

ウェブサイトの目的によって、選ぶべき色は変わります。緑は自然などを連想させるため環境意識の高い企業やエコロジー関連のビジネスでよく使用されるなど、色の持つイメージを考慮することも大切です。また、配色を決める際は、色を多用するのではなくいくつかに絞ることも必要です。

自分で配色を考えるのが難しい場合は、Canvaのカラーパレットなどを利用してウェブサイトのイメージに合うか確認してみるのも良いでしょう。編集画面でキーワードから配色を提案してくれます。

4. タイポグラフィ

ホームページ全体で同じ書体やフォントを使用することで、全体的にまとまった印象を与えることができます。同じサイト内で数種類のフォントを使用するのは問題ありませんが、同じフォントは同じ使用方法で統一したほうが読みやすいです。本文のフォントはシンプルで読みやすいものにし、見出しはインパクトのあるものやブランドイメージに合うものにすると良いでしょう。

ウェブサイトデザイン初心者の場合、様々なフォントでバランスを取るよりも、2〜3種類ほどに留め、各ページで一貫性を持たせながら使用することをおすすめします。

5.モバイル最適化

スマホなどでの閲覧が主流となっている中で、ウェブサイトのモバイル最適化は欠かせない項目の一つです。Shopifyのテーマにはモバイル用のレイアウトも含まれているため、簡単にサイトをモバイル最適化させることができます。

6. 商品コレクション

商品をコレクション別にグループ化すると、顧客が商品を見つけやすくなります。顧客は複数のページを調べて欲しいものを探す必要がなくなり、興味のあるカテゴリーごとに商品を閲覧できるようになります。

例えば、以下の着物専門サイトの場合、商品カテゴリー以外にシーン別のコレクションを作り、着物のルールに詳しくない消費者でも簡単に商品を検索できるようにしています。

2. 最適なテーマを選択する

次に、Shopifyテーマ（テンプレート）を選択して、ウェブサイトの骨組みを決めます。Shopifyテーマストアでは、有料無料問わず幅広いテーマ を見つけることができます。さらに、無料トライアルもあるので、その期間にウェブサイトを構築することもできます。

テーマを選択する際は、以下の点を考えるようにしましょう。

ウェブデザインの予算はいくらか

Shopifyテーマは無料から200ドルのものまであるので、予算に応じて選びましょう。低予算の場合でも、無料と有料の両方を検討すると良いでしょう。有料テーマには、コレクションのフィルタリングやメガメニューなどの機能が多く備わっているので、後に専門家に依頼するよりもコストと時間を節約できます。

どのくらいの商品を販売する予定なのか

Shopifyのテーマによって、少数の商品に適したものや多数の商品に適したものなどがあります。Shopifyテーマストアで検索するときに、「カタログサイズ」から条件を指定して検索できます。

どの業界なのか

Shopifyのテーマは、特定の業界やビジネスニーズに合わせて設計されているものもあります。業界ごとのニーズやデザインの傾向に応じて作られているため、簡単にその業界に適したウェブサイトをデザインできます。

例えば、有料テーマのPrestige（プレステージ）は、高級感と洗練されたデザインを特徴とし、フィルター機能やパーソナライズされたおすすめ機能があるため、特にアパレルブランド、ジュエリー商品などを扱うウェブサイトに適しています。

3. 商品を追加する

テーマを選択したら、ウェブサイトに商品を追加します。まず「商品」セクションに移動して、管理画面のメニューから「商品」をクリックします。そして、「商品」ページにある「商品を追加」ボタンをクリックして商品の登録を始めます。登録商品ごとに、以下のような詳細情報を入力します。

• タイトル：ウェブサイトやカートで表示される商品名です。長くても70文字程度になるようにします。
• 説明：商品の詳細な情報を伝える商品説明を加えます。特徴、素材、使い方などを詳しく書くと、顧客が商品を使用しているシーンをイメージしやすくなります。
• 画像：商品の画像をアップロードします。商品の異なる角度や使用例を示す複数の写真を掲載することで詳細が伝わります。商品のディテールがよくわかるように商品撮影し、高解像度の写真を使用します。
• 価格：商品の価格を設定します。配送コスト、原材料、商品の認識価値などを考慮して価格設定しましょう。

4. 拡張機能やストアの詳細を設定する

Shopifyのアプリストアには、8,000を超えるアプリがあり、それらを使うことでウェブサイトに簡単に機能を追加できます。

検索や予約販売など顧客に便利な機能を追加できるアプリや、デザインやレイアウトの変更、カスタムフィールドの追加など、ウェブサイトの見た目や使い勝手を向上させるアプリもあります。また、ビジネスのパフォーマンスを分析し、データに基づいた意思決定をサポートするためのレポート機能を持つアプリも多数存在します。アプリはカテゴリーごとに整理されているので、欲しい機能を簡単に見つけることができます。

また、管理画面で言語や決済方法、メール通知、配送方法なども設定します。管理画面で設定できることは限られている場合がありますが、アプリでカスタマイズできるものもあります。越境ECを考えている場合は、言語に加え通貨なども設定しましょう。

5. カスタマイズする

テーマエディタで、ページレイアウト、色、フォント、画像などの基本的なデザインを調整します。Shopify管理画面で「オンラインストア」から「テーマ」を選択し、「カスタマイズ」ボタンをクリックすることでカスタマイズを開始できます。

ここでは、サイトの顔となるトップページと、顧客と密に関わる商品ページのカスタマイズについて見ていきます。

トップページをカスタマイズする

最初に目にするトップページは顧客に強い印象を与え、ブランドのメッセージを効果的に伝えるための重要な役割を果たします。顧客の注意を引き付けるには、約3秒かかると言われています。短時間で顧客を引き付けるための、トップページデザインの効果的な戦術を3つ紹介します。

1.明確なメッセージを伝える

ウェブサイトを訪問した顧客が次に何をすべきか明確にわかるように、スクロールしなくても見える場所、目立つ場所に CTA（行動喚起）ボタンを配置します。CTAは「今すぐ購入」「製品を詳しく見る」「ニュースレターに登録する」など明確でわかりやすいものにします。CTAと一緒に表示するキャッチコピーは、商品に興味をもたせるような行動を促すものにします。

スキンケアを扱うAnua（アヌア）は、いくつかの商品をピックアップし、それぞれのキャッチコピーとCTAとともにスライドを作成しています。複数アイテムをスライドにして取り上げることで、訪問時の印象を弱めることなく、より多くの商品やメッセージを伝えています。

2.ナビゲーションを簡素化する

明確で使いやすいナビゲーションメニューを設置し、顧客が必要な情報や商品を簡単に見つけられるようにします。メニューは簡潔にして、主要なカテゴリーやページへのリンクがわかりやすく配置されていることが重要です。

お茶専門店の中村藤吉本店は、トップページの上部にメニューを設置しています。メニュー名も日本語でわかりやすくすることで、顧客が訪問したページを簡単に見つけることができます。

3.ウェブサイトにベストセラー商品を表示する

ウェブサイトの上部やファーストビューエリアにベストセラー商品の情報を掲載します。これにより、顧客が最初に目にする部分で人気商品を簡単にアピールできます。

沖縄のビールメーカーのオリオンビールは、トップページにベストセラー商品を掲載し、わかりやすいキャッチフレーズでブランドのアイデンティティを明確にしています。

商品ページをカスタマイズする

商品ページは顧客が商品について知り、最も多く滞在するページです。商品ページをカスタマイズすることで、顧客により良い購買体験を提供できます。以下の点に気をつけてページをカスタマイズし、ブランドや商品の魅力を伝えましょう。

説得力のある商品説明とイメージ

商品説明で最も重要なことは、商品を購入するメリットを明確に伝えることです。商品の特徴、用途、素材、サイズなどに加え、専門知識を交えた説明や、商品を使ったアイデアなどを加えると説得力が増します。箇条書きで情報を整理するのも効果的です。

商品の画像は、高品質で魅力的な画像にし、顧客にポジティブな第一印象を与えるようにします。また、商品がどのように見えるか、どのように使用できるかなど、使用イメージがわかるような画像も追加しましょう。可能であれば、商品を使用した動画を追加するのも効果的です。商品の魅力がより伝わり、顧客の購買意欲を高めることができます。

例えば、レザーアイテムを取り扱うブランド、土屋鞄は、ウェブサイトで動画を使用してバッグを紹介しています。これにより、顧客はバッグを持ったときのイメージやサイズ感などを想像しやすくなります。

レビュー

商品ページにレビューや評価を表示することは、Shopifyサイトデザインのカスタマイズにおいて非常に重要です。レビューを目立つ位置に配置することで、信頼性を高め、新規顧客の購買意欲を引き出すことができます。顧客が商品を使用している写真やビデオなどの共有も効果的です。

サイトシール

サイトシールはウェブサイトの信頼性や安全性を示すためのビジュアルマークで、多くの場合、セキュリティ証明書や信頼できる第三者機関からの認証が含まれます。ウェブサイトでは、セキュリティが重要視されるため、サイトシールの表示は重要です。

外注するタイミング

制作会社などのプロに依頼するタイミングは、自分でウェブサイトをデザインした後です。最初から専門家に依頼することもできますが、自分の希望やビジョンを伝えるために多くの打ち合わせやコミュニケーションが必要となるだけでなく、開設後も変更や調整をしたいときにその都度依頼しなければならず、カスタマイズ性や効率性が低くなってしまう可能性があります。

ベースを自分で作成すると、その分の予算をプロジェクトの特定項目に集中させることができます。ある程度サイトを運営した段階で専門家の手を入れることで、それまでに把握したクライアントのニーズや用途に合わせカスタマイズされたウェブサイトを作成することもできます。

制作会社などの専門家選びの際に重視すべきポイントは、Shopifyでのウェブサイト制作の実績や依頼内容の理解力、そしてウェブサイト制作後のサポート体制などです。ホームページを確認したり問い合わせたりして、複数社を比較検討すると良いでしょう。

まとめ

Shopifyウェブサイトのデザイン方法を5つのステップにまとめました。Shopifyウェブサイトのデザインプロセスは、計画から実装、カスタマイズに至るまで多くの要素が関わっています。一見すると難しそうに見えますが、豊富なテーマやアプリを提供するShopifyなら、ブランドのアイデンティティや商品の魅力などを反映したウェブサイトを簡単に作ることができます。

Shopifyウェブサイトのデザイン方法を学んで一から作成したい人、Shopifyのサイトデザインをカスタマイズしてビジネスを成長させたい人は、この記事を参考にしてみてください。

文：Chieko Hiroi