TSUGU

INFORMATION

TSUGUテーマ ドキュメント

  • バージョン：0.1.0
  • テーマ開発者：RIS
  • 最終確認日：2026-08-31

TSUGUは、商品の背景にある人、土地、素材、技法、手入れ、信頼を、購入体験の中で伝えるためのShopify Online Store 2.0テーマです。

目次

  1. はじめに
  2. テーマ全体の設定
  3. ヘッダーとナビゲーション
  4. ホームページのセクション
  5. 商品ページ
  6. コレクション・検索・カート
  7. 固定ページ・ブログ・お問い合わせ
  8. 画像とフォーカルポイント
  9. Markets・言語・お客様アカウント
  10. アクセシビリティとSEO
  11. アプリとカスタムコード
  12. トラブルシューティング
  13. よくある質問
  14. サポート方針

1. はじめに

TSUGUをインストールした後、次の順序で設定します。

  1. Shopify管理画面で オンラインストア > テーマ を開きます。
  2. TSUGUの カスタマイズ を選択します。
  3. 下記のテーマ全体設定を行います。
  4. ロゴ、ファビコン、メニュー、商品、コレクション、固定ページ、記事、画像を登録します。
  5. ホーム、商品、コレクション、カート、検索、ブログ、記事、お問い合わせ、404、パスワード、ギフトカードの各テンプレートを確認します。
  6. 公開前にPCとスマートフォンでテストします。

大きな変更を行う前に、カスタマイズ済みテーマを複製して未公開のバックアップを残してください。

2. テーマ全体の設定

テーマエディターの テーマ設定 を開きます。

ブランド

  • ロゴ： 横長・縦長のロゴ画像を選択できます。TSUGUは画像の縦横比を維持します。
  • ロゴの幅： 80～240pxで指定できます。初期値は120pxです。
  • ファビコン： ブラウザーのタブやブックマークに表示される小さな画像です。キャッシュにより変更の反映が遅れる場合があります。

ロゴを選択していない場合は、ヘッダーのブランド名またはストア名が表示されます。

タイポグラフィ

  • メイン： Shopifyのフォントライブラリーから基本書体を選択します。
  • 初期書体はWork Sansです。
  • 利用可能な場合、通常・太字・斜体・太字斜体を読み込みます。

レイアウト

  • ページ幅： 狭い幅または広い幅を選択します。
  • ページ余白： ページ左右の最小余白を調整します。

変更後は、幅の狭いスマートフォン画面も確認してください。

カラー

TSUGUには、背景と文字を対応させた2組の設定があります。

  • 背景 と 文字色
  • サブ背景 と サブ背景上の文字色

色を変更した後は、本文、リンク、ボタン、入力欄の境界線、フォーカス表示が十分に読み取れるか確認してください。

入力欄の外観

  • 入力欄の角丸： 対応する入力欄の角の丸みを調整します。

3. ヘッダーとナビゲーション

ヘッダー セクションを開きます。

  • ブランド名： ロゴ未選択時に使用します。
  • メニュー： ストアのメインメニューを選択します。TSUGUは最大3階層のナビゲーションに対応します。
  • 国または地域のセレクターを表示： Shopify Marketsで利用可能な選択肢がある場合に表示されます。
  • 言語セレクターを表示： 公開済み言語が複数ある場合に表示されます。
  • お客様アカウントメニュー： 対応するお客様アカウントナビゲーションのメニューを選択します。

PCではドロップダウン、スマートフォンでは折りたたみ式のメニューを使用します。マウス操作とキーボード操作の両方で全リンクを確認してください。

告知 セクションでは、ストア全体へ表示する短い案内と任意のリンクを設定できます。

フッター

フッター セクションでは次を設定できます。

  • ブランド名とタグライン
  • ニュースレターの表示、見出し、本文
  • 最大4列のフッターメニューと各列の見出し
  • 著作権表示とPowered by Shopifyの表示
  • ストアで利用可能な場合のFollow on Shop
  • 有効な決済方法に対応するShopifyの決済アイコン

各種ポリシーはShopify管理画面で管理します。必要なポリシーリンクを適切なフッターメニューへ追加してください。

4. ホームページのセクション

TSUGUホーム導入

ブランドの導入を伝えるメインセクションです。

  • メインビジュアル の画像と適切な代替テキストを入力します。
  • 小さなラベル、見出し、本文、最大2つのボタンを設定します。
  • ブランドマニフェストを入力します。
  • 最大3つのコマースの柱ブロックへ、タイトル、見出し、本文、任意のリンクを設定します。

画像内に重要な文章を埋め込まず、ボタン名は短く、移動先が分かる内容にしてください。

TSUGU作り手紹介

作り手、工房、地域、素材、製造工程などを紹介します。

画像、代替テキスト、小さなラベル、見出し、本文、ボタン名、リンクを設定できます。

TSUGUカテゴリー

最大3つの編集型カテゴリーブロックから、コレクションや特集ページへ案内します。

各ブロックに画像、代替テキスト、タイトル、サブタイトル、リンクを設定できます。

TSUGU読み物ガイド

最大4つの読み物ガイドで、商品と学習コンテンツをつなぎます。

  • ブログ記事を選ぶと、記事の情報を使用できます。
  • 必要に応じて画像、代替テキスト、ラベル、タイトル、リンクを上書きできます。

TSUGUサポート

配送、返品、お手入れ、サイズ、設置、お問い合わせなど、最大4件のサポートリンクを設定できます。

ニュースレター

ニュースレターセクションまたはフッターのニュースレター設定から、Shopifyのお客様フォームを使用してメールアドレスを受け付けます。

Custom Liquidとカスタムセクション

  • Custom Liquid： 販売者が管理する連携やコンテンツ用のLiquidまたはHTMLを入力できます。
  • カスタムセクション： テーマブロックと任意の背景画像を追加できます。

カスタムコードは十分にテストしてください。第三者が追加したコードは、TSUGUの標準サポート対象外です。

5. 商品ページ

商品情報セクションでは、次のブロックを使用できます。

  • 販売元
  • タイトル
  • 価格
  • バリエーション選択と購入ボタン
  • 説明
  • 商品コンテキスト
  • Custom Liquid
  • アプリブロック

バリエーション選択と購入操作

TSUGUは、Shopifyの商品バリエーション、数量、在庫、単価、カート追加、および商品とストアで利用可能な場合の高速チェックアウトに対応します。

色や画像のスウォッチ表示には、Shopify管理画面の商品オプションとスウォッチ情報が必要です。

商品コンテキスト

商品コンテキストブロックでは、次のような背景情報を伝えられます。

  • 産地と作り手
  • 土地と地域
  • 素材と技法
  • 手入れと長く使うための情報
  • 配送または受注生産の情報

各ブロックには、番号またはラベル、見出し、リッチテキストがあります。事実に基づく内容を掲載し、商品変更時に更新してください。

商品メディア

Shopifyの商品へ登録された画像とリッチメディアに対応します。商品メディアの代替テキストはShopify管理画面で入力してください。

店頭受取

対象ロケーションでローカルピックアップが設定され、選択中のバリエーションで利用可能な場合にだけ表示されます。

関連商品と補完商品

表示内容はShopifyの商品データとSearch & Discoveryの設定によって決まります。対象商品がない場合は表示されないことがあります。

ギフトカード受取人情報

Shopifyの対象機能が有効で、対象ギフトカード商品の場合にだけ受取人入力欄が表示されます。

6. コレクション・検索・カート

コレクション

  • コレクションセクションで1ページの商品数を設定できます。
  • 絞り込みと並べ替えは、Shopify側の設定と商品データによって決まります。
  • 分かりやすいコレクション名、説明、画像を登録してください。

コレクション一覧

コレクション一覧テンプレートではコレクションカードを表示します。公開前に画像の切り抜きと説明を確認してください。

検索

検索結果と予測検索に対応します。表示対象はストア内で検索可能なコンテンツによって決まります。適切な商品名、説明、画像代替テキストを入力してください。

カート

商品、バリエーション、数量変更、削除、注文メモ、小計、購入手続き、買い物を続ける導線を表示します。

税、送料、関税、割引、通貨換算などにより、ストア上の小計はチェックアウトで変わる場合があります。

7. 固定ページ・ブログ・お問い合わせ

通常ページ、お問い合わせ、ブログ、記事、404、パスワード、ギフトカード用のテンプレートがあります。

お問い合わせページ

Shopifyの固定ページへ contact テンプレートを割り当てると、お問い合わせフォームが表示されます。小さなラベルと導入文はテーマエディターで設定します。

フォーム送信はShopifyが処理します。公開前にストアの通知設定を含めてテストしてください。

ブログと記事

記事本文にはShopifyのリッチテキストエディターを使用します。アイキャッチ画像と代替テキストを登録し、見出し、箇条書き、引用、リンクを確認してください。

8. 画像とフォーカルポイント

TSUGUはShopifyから画面幅に適した画像候補を取得し、必要に応じて画面外の画像を遅延読み込みします。

推奨手順：

  1. 使用するレイアウトに十分な大きさの鮮明な元画像をアップロードします。
  2. 画像の目的を簡潔に説明する代替テキストを入力します。
  3. 画像サムネイルから画像編集画面を開きます。
  4. 切り抜かれる可能性がある画像では、重要な被写体へフォーカルポイントを設定します。
  5. PCとスマートフォンのプレビューを確認します。

フォーカルポイントの変更は、同じShopify画像を使用しているすべての場所へ影響する場合があります。変更前に画像の使用場所を確認してください。

9. Markets・言語・お客様アカウント

  • 国または地域の選択肢はShopify Marketsで管理します。
  • 言語選択は公開済み言語がある場合に表示されます。
  • お客様アカウントの動作はShopify管理画面のアカウント設定によって決まります。

TSUGUには英語と日本語のテーマ翻訳が含まれます。商品、固定ページ、ポリシー、ナビゲーション、第三者アプリの文章は別途翻訳してください。

10. アクセシビリティとSEO

TSUGUには、キーボードフォーカス、本文スキップリンク、意味のあるメイン領域、フォームラベル、レスポンシブ配置、画像代替テキストの出力があります。

アップロードするコンテンツのアクセシビリティは販売者が確認してください。

  • 適切な代替テキストを入力する
  • 見出しの順序を保つ
  • リンクとボタンの移動先が分かる文言を使用する
  • 十分な色のコントラストを保つ
  • 必要な動画や音声へ字幕または文字起こしを用意する
  • メニューやカスタムコンテンツ変更後にキーボード操作を確認する

TSUGUはShopifyのページタイトル、説明、正規URL、ソーシャル共有画像、商品構造化データを使用します。ページタイトル、メタディスクリプション、アイキャッチ画像、商品情報はShopify管理画面で設定してください。

11. アプリとカスタムコード

商品セクションはShopifyのアプリブロックに対応します。アプリの外観と動作はアプリ開発者が管理しており、アプリ固有のサポートが必要になる場合があります。

Custom Liquid、スクリプト、外部連携を追加する前に：

  1. テーマを複製します。
  2. Shopifyのポリシーに準拠するコードであることを確認します。
  3. 表示速度、アクセシビリティ、多言語、スマートフォン表示をテストします。
  4. テーマ不具合の調査時には、カスタマイズを一時的に外して再現確認します。

12. トラブルシューティング

設定内容がストアへ表示されない

  • 正しいテーマとテンプレートを編集中か確認します。
  • セクションまたはブロックが表示状態か確認します。
  • 必要なShopifyデータが登録されているか確認します。
  • 保存後にプレビューを再読み込みします。

国・言語・店頭受取・おすすめ商品・高速チェックアウトが表示されない

これらはShopifyの設定、商品、Markets、ロケーション、公開言語、決済方法などの条件を満たした場合に表示されます。

画像が意図しない位置で切り抜かれる

画像編集画面でフォーカルポイントを確認し、PCとスマートフォンで表示を確認します。同じ画像を使う他の場所にも影響する可能性があります。

ファビコンが変わらない

設定を保存後、ブラウザーのプライベートウィンドウで確認するか、キャッシュを削除します。

メニューの階層が表示されない

選択中のShopifyメニューに項目があることと、階層が3段以内であることを確認します。

商品コンテキストが空欄になる

ブロックへ文章を入力するか、適切な商品データへ接続します。文章は自動生成されません。

13. よくある質問

日本以外の商品にも使用できますか？

はい。産地、人、素材、手入れ、信頼を伝える編集構造は、さまざまな商品分野に使用できます。デモ文章と画像は、実際のストア情報へ置き換えてください。

フォントと色は変更できますか？

はい。テーマ設定 > タイポグラフィ と テーマ設定 > カラー を使用します。変更後に読みやすさとコントラストを確認してください。

縦長ロゴを使用できますか？

はい。横長・縦長ロゴの縦横比を維持します。ロゴ幅を調整し、PCとスマートフォンのヘッダーを確認してください。

プレースホルダーが表示されるのはなぜですか？

必要な画像、参照先、文章が未設定です。対象セクションを開いてストアのコンテンツを設定してください。

商品も自動翻訳されますか？

いいえ。英語・日本語のテーマ画面文言は含まれますが、商品、固定ページ、ポリシー、メニュー、アプリの内容はShopifyの多言語機能などで別途翻訳してください。

商品レビュー機能は含まれますか？

テーマ内蔵のレビュー機能はありません。必要な場合は、互換性のあるShopifyアプリブロックを使用してください。

サポートにストアのカスタマイズを依頼できますか？

標準サポートは、TSUGUの不具合と内蔵機能に関する質問が対象です。ストア構築、コンテンツ入力、独自デザイン、カスタムコード、第三者アプリの作業は、別途合意がない限り対象外です。

14. サポート方針

テーマに関する質問は、公開TSUGUサポートフォームから送信してください。件名または本文の先頭に TSUGUテーマサポート と記載します。

次の情報をお知らせください。

  • ストアURL
  • TSUGUのバージョン
  • 可能な場合は未公開プレビューリンク
  • 問題があるページとテンプレート
  • 再現手順
  • 期待する結果と実際の結果
  • ブラウザー、端末、OS
  • スクリーンショットまたは短い画面収録
  • 関係するアプリやカスタマイズ

パスワード、決済情報、顧客の個人情報、非公開API認証情報は送信しないでください。

テーマサポートへのお問い合わせには2営業日以内に返信します。確認された重大なテーマ不具合は優先対応します。

標準サポートに含まれる内容：

  • TSUGU内蔵機能に関する質問
  • テーマ設定場所の案内
  • 確認されたテーマ不具合の再現と修正
  • 本説明書の内容確認

標準サポートに含まれない内容：

  • ストアデザインやコンテンツ入力の代行
  • 独自機能の開発
  • 第三者アプリ、決済、配送業者、外部サービスの不具合調査
  • 販売者が追加したカスタムコードによる問題
  • Shopifyプラットフォームやアカウント管理の問題

調査のため、最新の未変更TSUGUを複製した未公開テーマでの再現をお願いする場合があります。ストアへのアクセスは必要な場合に限り、Shopifyが承認するコラボレーター手順で依頼します。