Shopifyストアのすべてのデザインガイド

フォント、色、アクション！ 芸術的な傾向がある場合、Shopifyストアの設計はエキサイティングな課題になる可能性があります。 しかし、セリフフォントと非セリフフォントのどちらかを選択するように求められたときに少し不器用に感じるマーケターや起業家にとって、このプロセスは非常に困難に感じる可能性があります。

Shopifyには、簡単に始められるようにする多数のリソースがありますが、事前に作成されたテーマテンプレート、採用するエキスパートデザイナー、アプリやウィジェットでいっぱいのマーケットプレイスについて話していますが、意思決定の麻痺は非常に現実的な問題です。 好例：誰もが視覚的に魅力的で注目を集め、コンバージョンに最適化されたShopifyストアを望んでいますが、そこにたどり着くのは口で言うほど簡単ではありません。

Shopifyストアのデザインオプションに関しては、事実上空が限界ですが、どこから始めますか？ 色見本を書き留めます—これは、Shopifyの究極のデザインガイドであり、常に必要であるが存在を知らなかったものであり、カスタマイズ、起動、販売を開始するために必要なすべてのヒントとコツが含まれています。

記事上で：
Shopifyのテーマ
製品写真
テーマのカスタマイズ
メニュー構造
ホームページヘッダー
3つの持ち帰りのヒント
助けが必要？

Shopifyのテーマ

Shopifyストアを構築するための最初のステップは、適切なテーマを選択することです。 これは、ストアのユーザーエクスペリエンス、視覚的な美学、機能を決定するサイトのバックボーンと考えてください。

何百ものオプションを提供するShopifyのテーマストアを使用すると、最適なものを簡単に見つけることができます。 さらに、それらのほとんどは複数のスタイルバリエーションを提供します。つまり、色、フォント、およびアプリに関するブランドのルックアンドフィールに合わせてカスタマイズできます。

圧倒されていると感じていますか？ Shopifyのフィルターを使用して、次の方法で選択肢を絞り込みます。

• 製品カタログのサイズ。 多数の製品がある場合は、無限スクロールやグリッドレイアウトなどの機能が必要になる場合があります。

• あなたの業界。 ファッション企業は、買い物客が複数のサイズと色から選択できるテーマを必要とする場合がありますが、アートや写真のブランドは、より大きな製品画像スロットを必要とする場合があります。
• 価格。 Shopifyはさまざまな無料のテーマを提供していますが、より複雑なテーマは最大180ドルかかる場合があります。

後でタイポグラフィと配色をカスタマイズできますが、全体的な美学とレイアウトの点でサイトのビジョンに一致するテーマを選択すると、カスタマイズプロセスはより簡単になります。

製品写真

私たちはShopifyの強力なテーマのマーケットプレイスの大ファンですが、1つのリスクがあります。それは、カスタマイズを考慮しても、他の人と同じように見えるストアを持つことです。 1つの簡単な解決策？ ユニークな製品写真。

ブランドを競合他社と区別するには、会社のアイデンティティと態度をカプセル化した製品写真を撮ることが重要です。 写真は、ブランドのスタイルとトーンを設定する上で大きな役割を果たします。

楽しんで、製品の写真を少し大胆にすることを恐れないでください。

• あなたの製品の写真をいくつかのライフスタイルの写真と混ぜ合わせてください。そこでは、あなたの製品がサポート小道具やモデルを使ってその場で撮影されています。
• さまざまなレイアウトを試してください。 たとえば、常に白い背景にアパレルを配置して撮影するのではなく、フラットレイまたはモデルの採用を検討してください。
• まっすぐではなく、興味深い角度からトリミングして写真を撮ります。 これは、ショットにスタイルとセンスを加えるのに最適な方法です。

すばらしい製品やライフスタイルの画像を撮影するためのヒントについては、このDIYガイドをご覧ください。

テーマのカスタマイズ

テーマを選択し、製品写真のカメラロール全体から選択できるようになったので、ここで楽しい部分があります。サイトを独自の何かに変換することです。

Shopifyが提供する便利さのおかげで、カスタマイズにはコーディングは必要ありません。 代わりに、テーマ設定をクリックするだけで、ストアの視覚スタイルを調整するためのさまざまな方法が見つかります。

色

[色]メニューでは、テキスト、ボタン、フォームフィールドなど、ストア内の多くの要素の色を切り替えることができます。

上級者向けのヒント：召喚状（CTA）を目立たせるには、ページの他の部分と対照的な、より大胆で明るい色にすることを検討してください。

タイポグラフィ

このセクションは、ストア全体のすべてのテキストの視覚的な外観を制御します。 見出しと本文のフォントの種類、太さ、縮尺を調整できます。

ファビコン

ファビコンは、ブラウザのタブに表示される小さなアイコン（通常は会社に関連付けられたロゴまたは単純な画像）です。

• 適切な画像がありますか？ アップロードされると、Shopifyは自動的に32x32pxにサイズ変更します。
• 持っていませんか？ Shopifyには、使用できる無料の画像がたくさんあります。

チェックアウト要素

チェックアウトプロセスは、eコマースサイトの最も重要な部分です。 素晴らしいチェックアウト体験がなければ、買い物客が購入の途中でカートを放棄するリスクがあります。

チェックアウトを可能な限りシームレスにするために、以下をカスタマイズできます。

• アクセント、ボタン、エラーの色
• チェックアウト固有のタイポグラフィ
• チェックアウトおよび注文の概要ページの背景パターン、色、または画像

メニュー構造

Shopifyの既成のテーマのほとんどにはこれらの重要な要素が含まれていますが、ストアを立ち上げる前に、次のヒントを覚えておく必要があります。

ナビゲーションバー

ナビゲーションバーはすべてのページの上部にあり、買い物客はページ間をすばやく移動できます。

上級者向けのヒント：買い物客が必要なものを圧倒することなく簡単に見つけられるようにします。 メインナビゲーションバーを比較的クリーンでシンプルに保つために、カーソルを合わせない限り非表示になるドロップダウンオプションとしてカテゴリとサブカテゴリを追加できます。

アナウンスバー

期間限定セール？ 配送が遅れますか？ 新店開店時間は？ すべての買い物客が知る必要のある重要な情報を宣伝する必要がある場合は、アナウンスバー（グローバルヘッダーとも呼ばれます）が答えです。

ほとんどのShopifyテーマにはアナウンスバーが付属しています。Shopifyテーマエディターでカスタマイズしてオンにするだけです。

上級者向けのヒント：アナウンスバーがサイトと同じように様式化されていることを確認します（ブランドの色、フォント、CTAを考えてください）。

フッター

フッターは、サイトで最も過小評価されている領域の1つです。 ホームページをスクロールしてフッターにたどり着く買い物客はほとんどいないことは事実ですが、情報にすばやくアクセスする必要があるときに最初に目にする場所の1つです。

フッターを編集するには、オンラインストアのナビゲーションページに移動する必要があります。

プロのヒント：

• フッターは、ナビゲーションバーの同じ情報を再ハッシュするだけのものではありません。 代わりに、配送、返品と交換、サイトのプライバシー、仕事の機会などに関するページへの重要なリンクを追加してください。
• ソーシャルメディアアイコンをボタンとして使用します—フッターの冗長性を減らします。
• 買い物客が電子メールまたはSMSの更新にサインアップできるようにします。
• ホットライン、「ライブチャットの開始」、電子メールヘルプなどのカスタマーサービスのクイックリンクを提供します。

ホームページヘッダー

ホームページのヘッダーは、買い物客がWebサイトにアクセスしたときに最初に目にするものです。 優れた第一印象を与えると、彼らはさらにスクロールします。 それらを引き付けることに失敗すると、タブが閉じます。 そうは言っても、ホームページのヘッダーは次のようになります。

• あなたのブランドが何であるか、またはあなたが販売する製品のスナップショットを提供します
• 販売イベントを宣伝する
• ブランドの態度とアイデンティティを示す
• あなたのトップ製品を紹介する

ホームページのヘッダーが動画、カルーセル、静止画像のいずれであっても、定期的に変更することを目指す必要があります。忠実な顧客にとってWebサイトが古くなったり古くなったりすることは決してありません。

3つの持ち帰りのヒント

Shopifyストアのデザインはとても楽しいものですが、基本的に空白のキャンバスでフォント、色、ウィジェットを試し始めると、手に負えなくなることもあります。 Shopifyの設計プロセスを可能な限り管理しやすく、頭痛の種をなくすために、次の点に注意してください。

1.フォームよりも機能、常に

あなたは美しいサイトを持つことができますが、それが直感的に流れず、素晴らしいカスタマージャーニーを提供しない場合、販売は停滞するでしょう。 おすすめ：

• 設計プロセスを開始する前に、サイトで達成したいことに焦点を合わせます。 これにより、必要なツールやウィジェットを絞り込み、ShopifyAppStoreに初めてアクセスしたときに発生する可能性のある選択の麻痺を防ぐことができます。
• 買い物客が商品検索をすばやく絞り込むことができるように、推奨事項や堅牢なフィルターなどの便利な機能を実装します。
• サイトの速度を優先します。 大量のウィジーアニメーション、クールなアプリ、高解像度の画像を追加したくなりますが、含める要素が多いほど、サイトの読み込み時間が長くなります。 調査によると、ページの読み込みに1秒余分にかかると、コンバージョンが最大7％減少し、ページビューが11％減少する可能性があります。 一方、より速いサイトはグーグルでより高いランキングで報われる。
• 画像の圧縮。 コンプレッサー.ioのような無料のツールは、ファイルサイズを縮小しながら、高品質の製品画像を鮮明に保つのに役立ちます。
• ShopifyテーマストアでサードパーティのWebサイトのテーマよりもテーマを選択する。 サードパーティのテーマはShopifyの評価プロセスを通過しないため、バックエンドに予期しない追加が行われ、読み込み時間が長くなる可能性があります。

注意：Shopifyストアの立ち上げは、1回限りのプロセスではありません。 サイトを立ち上げて売り上げが伸び始めたら、ヘッダー画像の刷新、SEOコピーの書き換え、画像の更新など、すべてのページを継続的に最適化する必要があります。 信頼してください：面倒ですが、コンバージョンを促進し、新しい買い物客を引き付け、カスタマーエクスペリエンスを向上させるのに役立ちます。

プロのヒント：サイトの速度に関して、サイトがどのように進んでいるかわからない場合は、 GoogleのPageSpeedInsightsツールを確認してください。URLを入力するだけで、サイトの速度向上に関する洞察と推奨事項が提供されます。

2.サイトをシンプルに保つ

すべての製品、画像、コピーを武器庫に展示したくなりますが、ほとんどの場合、それは顧客体験を詰まらせるだけです。 あなたはあまりにも多くの情報であなたのサイトを過負荷にしたくありません—だれも散らかったリサイクルショップのデジタルバージョンの製品をふるいにかけることを望んでいません。 代わりに、シンプルに保ち、ベストセラーに焦点を合わせ、可能な限り（画像、コピー、ウィジェット、ページ、さらには製品自体であろうと）脂肪を取り除きます。

3.すべてをテストします

1つのボタンを青から赤に変更するだけでコンバージョンを増やすことができると言ったらどうでしょうか。 特定の色、画像、グラフィックを使用してサイトを立ち上げたとしても、それらがうまく機能していることを知る方法はありません。 （私たちはあなたに勝利の公式を与えたいのですが、真実は次のとおりです：ベストプラクティスはブランドのユニークな顧客、製品、そしてニッチに依存します。）

ここでA/Bテストが登場します。これは、何が最高のパフォーマンスを発揮するかを判断するために重要なプロセスです。 （新しいマーケターのために、ここにA / Bテストのすべてのガイドがあります。）純粋な本能だけで操作するのではなく、これらのストアデザイン要素をA/Bテストすることをお勧めします。

• さまざまなボタンの色
• CTA、ウィジェット、および画像の場所
• ナビゲーションバー
• ソーシャルメディアアイコンのデザイン
• 画像スタイル—例：商品とライフスタイルの画像
• 背景画像またはテクスチャ

助けが必要？

Shopifyのインターフェースを使用すると、マーケターや起業家は店舗のデザインを簡単にDIYできますが、店舗の外観を明確に把握している完璧主義者の場合は、時間のかかるプロセスになる可能性があります。

助けを求めても大丈夫です！ Shopifyは、豊富なリソースと何百人もの専門家を提供しており、信頼して店舗の世話をすることができます。 時には、雑草だけを通り抜けるよりも、プロのデザイナーの専門知識を活用する方が良い場合があります。

私たちに関しては、AdRollはShopifyストアに一流のマーケティングを提供することに関してあなたの後ろ盾を持っています。 売上をターボチャージする準備ができている場合は、ShopifyのAdRoll統合を確認してください。