Brooklynのヒント

この記事では、オンラインストアでBrooklynを設定するために役立つヒントやベストプラクティスを紹介します。

ナビゲーションのヒント

ドロップダウンメニューの追加

メインメニューにドロップダウンメニューを追加するには、ナビゲーションページにメニューを作成する必要があります。詳細については、「オンラインストアにドロップダウンメニューを設定する」を確認してください。

オンラインストアのメインメニュー。マウスのカーソルを「カタログ」のリンクに移動している。「リビングルーム」や「寝室」などのコレクションにリンクするドロップダウンメニューを表示している。

メインメニューをサイドバーメニューに変換する

多くのスペースがメインメニューによって使用されている場合、ヘッダーセクションのボタンをクリックすると開くサイドバーメニューにメニューを変換できます。

オンラインストア左側のサイドバーメニューサイドバーメニューに表示される「ホーム」や「カタログ」などとリンクするメインメニュー

メインメニューをサイドバーのスタイルに変更することを防ぐには、以下の手順を実行します。

  • メインメニューに追加するリンクは最大で4~5個までとする。
  • メインメニューのリンクには幅の狭いフォントを使用する。タイポグラフィ設定からアクセントテキストのフォントを変更できます。
  • メニューアイテムを作成する際に文字数を限定する。たとえば、「頻繁に尋ねられる質問」の代わりに「よくある質問」、「お問い合わせください」の代わりに「お問い合わせ」とすることができます。

画像のヒント

Brooklynに最適な商品画像のタイプ

  • 高解像度な画像によって洗練されたプロフェッショナルな印象を与えられるため、最低でも1,024 x 1,024ピクセルの商品画像が必要です。商品画像に最適なのは、正方形です。

  • 背景が単一色の写真が理想的です。単一色とは、濃淡やハイライトのない1色のみのことです。すべての画像の背景が単一色であることが必要です。

  • 商品画像から縁を削除するには、色の設定から商品の背景色を透明に設定します。

背景が白の商品リストが2つ表示されている。オンラインストアの背景も白なため、商品画像の縁が存在しない。

スライドショー画像に最適なサイズ

Brooklynデモストアに表示される2種類の画像スライドは、いずれも1,200 x 800ピクセルです。画像スライドをすべてこのサイズに合わせることをおすすめします。

小さな画面でトリミングされる画像

小さいデバイスの場合、画面の上端から下端まで画像スライドで埋まります。スライドの高さがデバイスの画面の高さに合うように、スライドのサイズが変更されます。画像をゆがめずにスライドを画面全体に表示するために、スライドの左右がトリミングされます。

大きい画面の場合、ブラウザーのウィンドウの幅に合うように、画像スライドのサイズが変更されます。画像をゆがめずにスライドをウィンドウ全体に表示するために、スライドの下部がトリミングされます。

以下に表示されている例は、同じオンラインストアのデスクトップ版とモバイル版です。

高さがあるというよりも幅が広いスライドショーのデスクトップ版で画像が表示されている。同じ高さの同じ画像だが、上下左右がトリミングされた画像のため、幅の狭い画面にも対応しているモバイル版が表示されている。

コレクションの画像全体を表示する

画像全体を表示するには、コレクション内にアイキャッチ画像が必要です。

Brooklyデモストアで、コレクションの画像全体が表示されている状態を確認できます。上部に表示されるコレクション画像のサイズは、1,405 x 800ピクセルです。

高さがあるというよりも幅が広いスライドショーのデスクトップ版で画像が表示されている。

同じ高さの同じ画像だが、幅の狭い画面にも対応するために上下左右がトリミングされた画像のモバイル版が表示されている。

ブログ記事の画像を設定

ブログ記事の最初の画像は、ブログページのアイキャッチ画像として使用されます。ブログ記事に画像を追加する方法については、ブログ記事の執筆で説明されています。

商品のヒント

商品に販売バッジを追加する

通常料金よりも高い定価を設定することで、商品に販売バッジを追加できます。バッジはコレクションページでその商品の画像に表示されます。

コレクションページで拡大表示される商品を設定する

コラージュスタイルで商品を表示するためにコレクションページを設定している場合、一部の商品が大きい画像、他の商品が小さい画像で表示されます。コレクション内の商品の順番で画像のサイズが決まります。管理画面のコレクションページで、商品の順番を変更できます。編集するコレクションをクリックし、商品エリアで [並び替え] ドロップダウンメニューから [手動で] を選択します。次に、オンラインストアに表示する順番で商品をドラッグアンドドロップします。

管理画面のコレクションページ。

6個の商品ごとに、最初の商品と6番目の商品の商品画像が拡大表示されます。たとえば、1、6、7、12、13、18番目の画像がコレクションで拡大表示されます。

コラージュスタイルで商品を表示しているコレクションページ。商品の順番が画像のサイズと関係していることを説明するため、商品上に番号が表示されている。

すべて同じサイズの商品画像のグリッドで表示するには、グリッドスタイルで商品を表示するためにコレクションを設定します。

バリエーションを選択する際のスクロールアニメーション

商品ページで、スクロールする必要がない程度に商品の説明が短いため画面に収まる場合、画像付きバリエーションを選択するとスクロールアニメーションが表示されます。スクロールする必要がない程度に画面に収まりきらないほど説明が長い場合、最上部の画像がバリエーション画像に置き換えられ、スクロールアニメーションは作成されません。

スクロールアニメーションを使用する場合、商品説明を短くします。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す