Minimal

Minimalは、どんなデバイスでも見た目の良いワイドレイアウトに対応したテーマです。完全なフレキシビリティーを提供するように設計された機能が搭載されているため、追加のレイアウトオプション、商品ビュー、コレクションビュー、ナビゲーションスタイル、およびタイポグラフィの選択肢を使用してストアをカスタマイズできます。

Minimalを使用したオンラインストアの例

テーマエディタ

テーマエディタを使用して、テーマをカスタマイズします。テーマエディタのツールバーは、セクションテーマ設定に分かれています。

セクションとテーマ設定を表示するテーマエディタのツールバー

セクションを使用して、ストアの各種ページのコンテンツとレイアウトを変更できます。テーマ設定を使用して、ストアのフォントと色をカスタマイズし、ソーシャルメディアのリンクやチェックアウトの設定を変更することができます。

セクションは、オンラインストアの各ページのレイアウトを決定するカスタマイズ可能なコンテンツブロックです。

  • ホームセクションでは、スライドショーやメールマガジン登録といった機能が含まれており、追加、再配置、削除することができます。ホームページには最大25個のセクションを追加できます。

  • 各ページタイプには、独自のセクションが含まれています。たとえば、商品ページセクションで、オンラインストアの各商品ページのレイアウトを決定します。

  • ページセクションは常に、オンラインストアの特定の場所にあります。カスタマイズ可能ですが、再配置および削除することはできません。

  • 各テーマには、ヘッダーやフッターなどの固定セクションが含まれており、オンラインストアの各ページに表示されます。

独自のセクションの選択、およびビジネスに適したカスタマイズ方法を詳しく知ることができます。

Minimalには、以下の静的セクションが含まれます。

  • ヘッダー
  • フッター
  • 商品ページ
  • コレクションページ
  • コレクションリストのページ
  • ブログ
  • 記事
  • カートページ

動的セクション

動的セクションを追加並べ替え、あるいは削除して、ホームページのレイアウトをカスタマイズすることができます。各テーマには、選択可能な固有の動的セクションがあります。

Minimalには、以下の動的セクションが含まれます。

  • ブログ記事
  • コレクションリスト
  • 特集コレクション
  • ギャラリー
  • テキスト付き画像
  • スライドショー
  • おすすめ商品
  • ニュースレター
  • マップ
  • リッチテキスト
  • ビデオ
  • HTMLをカスタムする

ヘッダー

あなたの会社のロゴを、ストアの見出し部分に追加することができます。最適なフォーマットは、背景を透明にした.pngファイルです。ロゴ画像のサイズは450 x 200ピクセルに指定してください。幅を調整することで、ロゴ画像のサイズを変更できます。

Minimalを使用すると、ストアのページの上部に表示される顧客向けのメッセージを作成することもできます。

メッセージは完全にカスタムで、連絡先情報、ストアイベントや販売に関する情報、ストアのスローガンやブランディングメッセージなどを含めることができます。

ヘッダーセクションをカスタマイズするには、以下の操作を実行します。

  1. [セクション] をクリックします。

  2. [ヘッダー] をクリックします。

  3. ロゴ領域で [画像を選択する] をクリックし、次のいずれかの操作を行います。

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - ローカルコンピュータから画像を選択するには、[ライブラリー] タブをクリックし、次に [プラス] ボタンをクリックします。

  1. カスタムロゴの幅 (ピクセル単位) フィールドにロゴの幅を入力します。

  2. [メインメニュー] エリアで、[メニュー] リストからストアのヘッダーに表示するナビゲーションメニューを選択します。

  3. ストアのロゴの下にナビゲーションメニューを表示する場合は、[ロゴの下のメインメニューを中央寄せする] をチェックします。

  4. ストアのロゴをページの左に揃えたい場合は、[ロゴを左寄せする] をチェックします。

  5. ヘッダーの下に小さな線を表示する場合は、 [ヘッダーに分割線を表示する] をオンにします。

  6. [トップバー] セクションで、[トップバーのテキスト] フィールドにカスタムメッセージを入力します。

  7. ヘッダーに検索バーを表示する場合は、[検索バーを表示する] にチェックを入れます。

  8. 保存をクリック

フッター

フッターセクションでは、ストアの各ページの下部に表示されるコンテンツを編集できます。以下の機能をフッターに追加できます。

  • 支払いアイコン
  • ソーシャルメディアのアイコン
  • ニュースレターのサインアップ
  • カスタムテキスト
  • 最新のブログ記事へのリンク
  • メニュー

メニュー、ニュースレターのサインアップ、著作権のテキスト、支払いアイコンを表示するウェブサイトのフッターセクション。

フッターセクションをカスタマイズするには:

  1. Minimal を検索して、[カスタマイズ] をクリックします。

  2. [セクション] をクリックします。

  3. [フッター] をクリックします。

  4. [支払いアイコン] にチェックを入れることで、フッターに支払いアイコン (マスターカードやPayPalなど) を追加します。

  5. コンテンツエリアのフッターに最大6つのコンテンツブロックを追加します。

- [コンテンツを追加する] をクリックしてコンテンツブロックを追加します。次の選択肢からブロックの種類を選択します。 - メニュー - ソーシャルアイコン - ニュースレターのサインアップ - 最新のブログ記事 - テキスト

- [⁞⁞] アイコンをクリックしてブロックを別の場所にドラッグすることで、コンテンツブロックを移動します。 - ブロックをクリックしてから [コンテンツを削除] をクリックして、コンテンツブロックを削除します。
- ブロックをクリックしてから設定を編集して、コンテンツブロックをカスタマイズします。

  1. 保存をクリック

商品ページ

商品ページセクションでは、以下の要素を追加したり削除したりできます。

  • 商品のブランド名または販売元
  • 数量セレクター
  • 画像ズーム
  • 商品説明内のタブ
  • 各種ソーシャル共有アイコン
  • 関連商品
  • 動的チェックアウトボタン
  • 商品の推奨

さらに、サムネイル画像の位置を設定したり、バリエーションピッカー、[カートに追加する] ボタン、および動的チェックアウトボタンのサイズを選択したりできます。

商品ページの設定を編集するには、以下の手順を実行してます。

  1. トップバーのドロップダウンメニューから [商品ページ] を選択します。

  2. [セクション] をクリックします。

  3. [商品ページ] をクリックします。

  4. 商品のブランド名または販売元を表示するには、[販売元を表示する] にチェックを入れます。ブランド名や販売元を表示するには、商品に販売元を追加する必要があります。

  5. 数量セレクターを表示するには、[数量セレクターを表示する] にチェックを入れます。

  6. 記事のサムネイルの画像のズームタイプを選択するには、ズームタイプリストから [Lightbox][ズームイン]、または [ズームなし] を選択します。

  7. 商品サムネイル画像の位置を設定するには、商品サムネイルの位置ドロップダウンメニューから [メイン画像の右] または [メイン画像の下] を選択します。

  8. 商品説明でタブを使用するには、以下の手順を実行します。

    1. [商品説明の横にタブを表示する] にチェックを入れます。これで、商品説明が1つのタブに表示され、サイズ表、返品ポリシーなどのその他のコンテンツが2つ目のタブに表示されるようになります。
    2. タブのコンテンツエリアで、[ページを選択] をクリックし、2つ目のタブに表示するコンテンツの入ったページを選択します。
  9. 各種ソーシャル共有アイコンを表示するには、[商品の共有を有効にする] にチェックを入れます。

  10. ページの下部に関連商品を表示するには、以下の手順を実行してください。

    1. [関連商品を有効にする] にチェックを入れます。
    2. 関連商品のブランド名または販売元を表示するには、[販売元を表示する] にチェックを入れます。
    3. セール中の関連商品にセールアイコンを表示するには、[丸で囲んだ「セール」を表示する] にチェックを入れます。
    4. 売り切れている関連商品に売り切れアイコンを表示するには、[丸で囲んだ「売り切れ」を表示する] にチェックを入れます。
    5. 関連商品のタイトルテキストを中央寄せにするには、[商品画像下のテキストを中央に寄せる] にチェックを入れます。

    商品が属するコレクションによって、表示される関連商品が決まります。関連商品を表示するには、商品のコレクションを作成するか、既存のコレクションに追加する必要があります。商品がコレクションの一部でない場合、関連商品は表示されません。

  11. 動的チェックアウトボタンを表示するには、[動的チェックアウトボタンを表示する] をオンにします。

  12. バリエーションピッカー、カートに追加するボタン、および動的チェックアウトボタンのサイズを設定するには、バリエーションピッカーとボタンサイズドロップダウンメニューからサイズを選択します。

  13. 保存をクリック

商品の推奨を追加または削除する

お客様が興味のある可能性がある他の商品を見つけやすくするために、商品ページにおすすめ商品を表示できます。

  1. トップバーのドロップダウンメニューから [商品ページ] を選択します。

  2. [商品の推奨] をクリックします。

  3. 商品ページで商品のおすすめを表示または非表示にするには、[動的推奨を表示する] チェックボックスを使用します。

  4. オプション: おすすめ商品の上に表示されるタイトルを変更するには、[見出し] フィールドに新しいタイトルを入力します。

  5. オプション: チェックボックスを使用して、商品の推奨の表示方法を選択します。

- 商品の販売元を表示する - 丸で囲んだ「セール」を表示する - 商品画像下のテキストを中央に寄せる

  1. 保存をクリック

コレクションページ

Minimalには、コレクションページでの商品の表示方法をカスタマイズできる、次の設定が含まれます。

  • 販売アイコン、売り切れアイコン、商品販売元名を表示または非表示にする

  • お客様が並べ替えオプションを選択できるようにし、コレクションを商品タグ別に絞り込む

  • 各商品画像の下のテキストを中央揃えにするか、左揃えにするかを選択する

コレクションの表示方法を設定するには、次のようにします。

  1. テーマエディタのコレクションページに移動します。

  2. [セクション] タブをクリックします。

  3. [コレクションページ] セクションをクリックします。

  4. 商品の販売元またはブランド名を表示するには、[販売元を表示する] にチェックを入れます。

  5. 販売アイコンを表示するには、[商品のセールを丸で囲んで表示する] にチェックを入れます。

  6. 売り切れアイコンを表示するには、[丸で囲んだ売り切れを表示する] にチェックを入れます。

  7. お客様がコレクション内の商品のソート順を選択できるようにするには、[コレクションの並べ替えを有効にする] にチェックを入れます。

  8. お客様が商品タグによる結果の表示を絞り込みできるようにするには、[商品タグによる絞り込みを有効にする] を選択します。

  9. 商品画像の真下にテキストを表示するには、[商品画像下のテキストを中央に寄せる] にチェックを入れます。

  10. 保存をクリック

ブログ

複数の執筆者のブログ記事を特集するときは、各ブログ投稿の執筆者名を自動的に表示したい場合があります。

ブログ記事の執筆者を表示するには、次のようにします。

  1. テーマエディタのブログページに移動します。

  2. [セクション] タブをクリックします。

  3. [ブログ] セクションをクリックします。

  4. [ブログ記事の執筆者を表示する] にチェックを入れます。

  5. 保存をクリック

カートページ

Minimalを使用すると、カートページの注文メモを有効にすることで、お客様に注文とともに指示を入力してもらうことができます。

注文メモを有効にするには、以下の手順を実行します。

  1. カートに商品を追加すると、テーマエディタのカートページに移動します。

  2. [セクション] タブをクリックします。

  3. [カートページ] セクションをクリックします。

  4. [注文メモを有効にする] にチェックを入れます。

  5. 保存をクリック

特集コレクション

ホームページにコレクションを特集することができます。コレクションの特集は、販売や新しいコレクションの宣伝に役立ちます。

ホームページにコレクションを特集するには、次のとおりにします。

  1. [セクション] タブをクリックします。

  2. [特集コレクション] セクションをクリックします。

  3. コレクションの上に表示されるテキストを変更する場合は、[見出し] フィールドにテキストを入力します。

  4. コレクションリストから、表示するコレクションを選択します。コレクションを追加するには、[コレクションを追加] リンクをクリックして、新しいタブでコレクションを作成するページを開きます。

  5. 行ごとの商品リストから、各行に表示する商品の数を選択します。

  6. リストから、表示する商品行の数を選択します。

  7. 各商品画像の下に販売元またはブランド名を表示する場合は、[商品の販売元を表示する] にチェックを入れます。

  8. 販売中の商品に丸を表示する場合は、[商品のセールを丸で囲んで表示する] にチェックを入れます。

  9. 売り切れの商品に丸を表示する場合は、[丸で囲んだ売り切れを表示する] にチェックを入れます。

  10. 商品テキストを中央揃えにする場合は、[商品画像下のテキストを中央に寄せる] にチェックを入れます。

  11. 保存をクリック

スライドショー

最大6枚の画像を切り替えられるホームページスライドショーを作成できます。

Minimalテーマのスライドショーセクション

スライドショー画像の推奨サイズは1280 x 460ピクセルです。

スライドショーセクションには、以下の設定が含まれます。

  • スライドの高さ - スライドショーの高さを設定します。最初の画像のスライドの高さに適応するを選択して、スライドショーの高さを最初の画像の高さに合わせることができます。
  • スライドの自動切り替え - 自動的に再生するようにスライドショーを設定します。
  • スライドを変更する間隔 - スライドを変更する頻度を選択します。
  • トランジション効果 - 画像をスライドするかフェードするかを選択します。
  • テキストサイズ - スライドショーのテキストサイズを設定します。
  • 画像 - 画像スライドをスライドショーに追加します。
  • 画像位置 - スライドショーで最優先してフォーカスする画像の領域を選択します。
  • オーバーレイ不透過率 - 画像のオーバーレイの濃淡を設定します。オーバーレイで画像のアピアランスを暗くすると、スライドショーのテキストを読みやすくすることが可能です。
  • テキストの色 - スライドショーのテキストの色を設定します。
  • テキストアラインメント- スライドに合わせてテキストを配置します。
  • 見出し - 見出しをスライドに追加します。
  • ボタンラベル - スライドにテキストラベル付きのボタンを追加します。
  • ボタンリンク - ボタンをオンラインストアの別の部分にリンクさせます。

ホームページにスライドショーを追加するには、以下の手順を実行します。

  1. Minimal を検索して、[カスタマイズ] をクリックします。

  2. [スライドショー] をクリックします。

  3. 設定でスライドショーをカスタマイズします。

  4. 保存をクリック

ニュースレター

ホームページにニュースレターのサインアップを追加することができます。これにより、メールマーケティングキャンペーンのお客様のメールアドレスを収集できます。メールマーケティングについて詳しくは、Shopifyブログをご覧ください。

ウェブサイトにあるニュースレターのセクション。お客様がメールアドレスを入力するフィールドと「購読」と書かれたボタンがあります。

ホームページにニュースレターのサインアップを追加するには、次のとおりにします。

  1. Minimal を検索して、[カスタマイズ] をクリックします。

  2. [セクション] をクリックします。

  3. [セクションを追加] > [ニュースレター] をクリックします。

  4. 見出しフィールドに、ニュースレターのサインアップの見出しを入力します。デフォルトの見出しは「ストアからのお知らせを受け取る」です。

  5. サブテキストフィールドにニュースレターのサインアップの小見出しを入力します。デフォルトのテキストは、「プロモーション、新商品、セールについて、あなたのインボックスに直接知らせる。」です。

  6. ニュースレターのサインアップセクションの背景色を設定するには、背景の色見本をクリックして色を選択します。

  7. 保存をクリック

ビデオ

YouTubeまたはVimeoでホストされているビデオをホームページに追加できます。ビデオはお客様を引き込み、ビジネスへの関心を高めることができます。

ホームページにビデオを追加するには、次のとおりにします。

  1. Minimal を検索して、[カスタマイズ] をクリックします。

  2. [セクション] をクリックします。

  3. [セクションを追加] > [ビデオ] をクリックします。

  4. 見出しフィールドに、ビデオの見出しを入力します。

  5. ビデオリンクフィールドに、ビデオの共有リンクを入力します。

    YouTubeの共有リンクは次のようになります。https://youtu.be/OTJXAUZY9t0このYouTubeヘルプの記事では、YouTubeビデオの共有リンクをコピーする方法を学ぶことができます。

    Vimeoの共有リンクは次のようになります。https://vimeo.com/281332510このVimeoヘルプセンターの記事では、Vimeoビデオの共有リンクをコピーする方法を学ぶことができます。

  6. 保存をクリック

HTMLをカスタムする

カスタムHTMLセクションでは、HTMLコードを使用してホームページのカスタムコンテンツを作成できます。たとえば、HTMLを使用してテキストブロックの書式を設定し、表を作成し、外部のウェブサイトからコンテンツを埋め込んだりすることができます。

カスタムHTMLをホームページに追加するには

  1. Minimal を検索して、[カスタマイズ] をクリックします。

  2. [セクション] をクリックします。

  3. [セクションを追加] をクリックします。

  4. 高度なレイアウトエリアで、[カスタムHTML] > [追加] をクリックします。

  5. [カスタムHTML] をクリックし、ホームページに追加するHTMLコードを入力します。

  6. 保存をクリック

テーマ設定

テーマ設定を使用して、オンラインストアの色と文字体裁をカスタマイズすることができます。ソーシャルメディアアカウントへのリンクを設定したり、カートの設定を編集したり、ファビコンを追加したりすることもできます。

Minimalには、以下のテーマ設定が含まれます。

  • レイアウト
  • 文字体裁
  • SNS
  • ファビコン
  • チェックアウト

レイアウト

Minimalを使用すると、ストアの最大幅を1030ピクセルから幅広いレイアウトの1340ピクセルに変更できます。幅広いレイアウトを使用すると画像をより大きなサイズで表示することができますが、テキストも引き伸ばされます。

テキストではなくグラフィックスにフォーカスする場合は、より広いレイアウトを使用します。

レイアウトの幅を変更するには、次のとおりにします。

  1. [テーマ設定] タブをクリックします。

  2. [レイアウト] をクリックします。

  3. [ワイドレイアウトを有効にする] にチェックを入れます。

オンラインストアのさまざまな部分のカラーを選択できます。

色の設定をカスタマイズする

  1. *の隣にある *[カスタマイズする] をクリックします。

  2. [テーマ設定] をクリックします。

  3. [カラー] をクリックします。

  4. コンテンツのタイプごとに、カラー見本をクリックしてカラーピッカーを使用します。

    テーマエディタのカラーピッカー

- 直近の選択エリアには、あなたが最近テーマで選択したカラーが表示されます。 - 現在使用中エリアには、あなたがテーマの別の部分で現在使用しているカラーが表示されます。

カラーを透明に設定するには、[なし] をクリックします。

  1. 保存をクリック

文字体裁

オンラインストアのテキストのフォントスタイルとサイズを設定できます。

文字体裁の設定をカスタマイズする

  1. *の隣にある *[カスタマイズする] をクリックします。

  2. [テーマ設定] をクリックします。

  3. [文字体裁] をクリックします。

  4. テキストのタイプごとに、[変更] をクリックしてフォントピッカーを使用します。

    フォントピッカーの「変更」ボタン

  5. 検索フィールドを使用するか、[さらに読み込む] をクリックしてフォントを検索します。

    利用可能なフォントをすべて表示するには、「Shopifyのフォントライブラリー」を確認してください。

  6. 使用するフォントの名前をクリックします。

  7. フォントを太字や斜体などの別のスタイルに変更するには、[標準] をクリックします。次に、使用するスタイルをクリックし、[選択] をクリックします。

    フォントピッカーで使用可能なフォントウェイトの選択

  8. 保存をクリック

ファビコン

オンラインストアをブランド化するのに役立つお気に入りのアイコンまたは「ファビコン」をアップロードして、次の場所にロゴを表示することができます。

  • ウェブブラウザーのタブ
  • ウェブブラウザーの履歴
  • デスクトップのアイコン
  • ブックマークするときのオンラインストア名の横

ファビコンをアップロードするには、次のとおりにします。

  1. [テーマ設定] タブをクリックします。

  2. [ファビコン] をクリックします。

  3. ファビコン画像の領域で [画像を選択する] をクリックし、次のいずれかの操作を行います。

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - ローカルコンピュータから画像を選択するには、[ライブラリー] タブをクリックし、次に [プラス] ボタンをクリックします。

  1. 保存をクリック

SNS

商品やブログ記事用のソーシャル共有ボタン、ソーシャルメディアアカウントへのリンクを追加することができます。

ソーシャルメディアの設定をカスタマイズするには

  1. Minimal を検索して、[カスタマイズ] をクリックします。

  2. [テーマ設定] をクリックします。

  3. [ソーシャルメディア] をクリックします。

  4. ソーシャル共有画像をアップロードするには、ソーシャル共有画像エリアで、[画像を選択する] または [無料の画像を探す] をクリックします。

  5. ソーシャルメディアアカウントへのリンクを追加するには、アカウントエリアで、所定フィールドにアカウントへのリンクを入力します。https://instagram.com/shopifyhttps://twitter.com/shopify 等の完全なリンクを入力してください。

    ソーシャルメディアアカウントへのリンクは、オンラインストアのフッターに表示されます。

  6. 商品やブログ記事にソーシャル共有ボタンを追加するには、シェアのオプションエリアで、チェックボックスのいずれかまたはすべてをオンにします。

    次の共有ボタンを追加できます。

- Facebookでシェアする - Twitterに投稿する - Pinterestでピンする (ブログ記事共有には使用できません)

  1. 共有ボタンのスタイルを変更するには、ボタンスタイルメニューから [ブランド化されました] または [ロゴのみ] を選択します。

  2. 保存をクリック

チェックアウト

このセクションでストアのチェックアウトをカスタマイズすることができます。ストアのチェックアウトページに関する詳細については、こちらをクリックしてください。

画像のヒント

商品画像の最適サイズ

Minimalテーマは、高解像度の写真を使うとより洗練されプロフェッショナルに見えるので、1024 x 1024ピクセル以上の画像を目指すことをおすすめします。画像は2048 × 2048ピクセルの大きさにすることができます。

ズームイン機能を使用する場合は、非常に大きな画像を使うことが特に重要になります。この機能を有効にするには、 [セクション] タブをクリックし、商品ページセクションで、画像のズームタイプズームインに設定します。

商品画像がコレクションページに並んで表示される場合、サイズが異なる可能性があります。画像が同じサイズに見えるようにするには、商品の特集画像になる画像は、アップロードするすべてで同じ幅と高さの比を使用してください。

高解像度の画像をアップロードしたにもかかわらず、商品ページのメイン商品画像が小さすぎると思われる場合は、 [テーマ設定] タブに移動し、レイアウトセクションの [ワイドレイアウトを有効にする] チェックボックスをオフにします。

それがうまくいかない場合は、セクションタブの商品ページセクションに移動し、商品サムネイルの位置メイン画像の右に設定します。

ナビゲーションのヒント

ドロップダウンメニューを追加する

メインメニューにドロップダウンメニューを追加するには、メニューページにメニューを作成する必要があります。この記事で方法を確認してください。

商品のヒント

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

商品またはバリエーションの価格よりも高い「価格比較」を設定します。商品がその内容でセール中として正確に設定されている場合、バッジはコレクションページの該当商品画像に自動的に表示されます。

表示されない場合は、セクションタブに移動し、コレクションページセクションを見て、販売バッジ機能が有効になっていることを再度確認します。

売り切れた商品に「売り切れ」オーバーレイを追加する

セクションタブに移動し、コレクションページセクションにある [丸で囲んだ売り切れを表示する] チェックボックスをオンにします。

ホームページのヒント

より広いレイアウトを有効にする

テーマ設定タブに移動し、レイアウトセクションにある [ワイドレイアウトを有効にする] チェックボックスをオンにします。

変更を保存します。

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

無料体験を試す