# ページとテンプレート

Plain Jane Starterには、完全なeコマースストアを構築するための基本的なページテンプレートが含まれています。本ガイドでは、利用可能なテンプレートと各ページタイプの設定方法を説明します。

## 利用可能なページテンプレート

実際のテーマファイルに基づき、Plain Jane Starterには次のテンプレートが含まれます：

### 🛍️ コレクションページ

**目的：** 商品の一覧表示と閲覧

**機能：** コレクションページは、ソートオプション（注目、最安値、最新順、A–Z順）付きのクリーンなグリッドレイアウトで商品を表示します。顧客は商品カタログを閲覧し、各商品の個別ページに移動できます。

**セットアップ：** Shopify管理画面でコレクションを作成し、コレクションに商品を追加し、テーマ設定でコレクションレイアウトを構成し、ソート機能をテストします。

### 📦 商品ページ

**目的：** 個別商品の表示と購入

**機能：** 商品ページは、画像ギャラリー、バリアント選択（サイズ、色など）、SKU表示、価格情報、商品説明、カートへの追加機能、および下部の関連商品セクションを備えた個別商品を紹介します。

**セットアップ：** 高品質な画像で商品を追加し、詳細な商品説明を書き、該当する場合はバリアントを設定し、在庫管理を構成し、カート追加フローをテストします。

### 📋 コレクション一覧ページ

**目的：** ストア内のすべてのコレクションの概要

**機能：** すべてのコレクションをグリッド形式で表示し、顧客が特定のコレクションを閲覧および移動できるようにします。

**セットアップ：** Shopify管理画面で複数のコレクションを作成し、コレクション画像を追加し、コレクション説明を書き、コレクションの順序を整理します。

### 📄 デフォルトページテンプレート

**目的：** カスタムコンテンツ用の標準ページテンプレート

**機能：** About、FAQ、ポリシー、またはその他必要なカスタムコンテンツページに使用できる基本的なコンテンツページテンプレートです。

**セットアップ：** Shopify管理画面でページを作成し、デフォルトテンプレートを選択してコンテンツと画像を追加し、ページのSEO設定を構成してナビゲーションメニューからリンクします。

### 📞 お問い合わせページ

**目的：** 顧客との連絡および問い合わせ対応

**機能：** 検証付きのお問い合わせフォーム、カスタマイズ可能なメッセージ欄、現地時間を表示するタイムゾーン表示、Shopifyによるメール連携を含みます。

**セットアップ：** Shopifyでお問い合わせページを作成する（既存のページを使用してもよい）、"Contact"テンプレートを選択し、テーマカスタマイザーでメッセージをカスタマイズし、Clock Settingsでタイムゾーンを構成します。

### 🔒 パスワードページ

**目的：** 公開前のストア保護とメール収集

**機能：** ストアをロックするパスワード保護インターフェース、プレローンチでのリード収集用のメールサインアップフォーム、カスタマイズ可能なメッセージおよびブランディング、モバイル対応デザインを含みます。

**セットアップ：** Shopifyの設定 > Preferencesでパスワード保護を有効にし、テーマカスタマイザーでパスワードページのデザインを構成し、メール収集フォームを設定し、メッセージや色をカスタマイズします。

### 👤 顧客アカウントページ

**目的：** 顧客アカウント管理

**機能：** Plain Jane Starterには、ログインページ、登録ページ、アカウントダッシュボード、注文履歴、住所管理を含む完全な顧客アカウント機能が含まれます。

**セットアップ：** Shopifyの設定 > Checkoutで顧客アカウントを有効にし、テーマカスタマイザーでアカウントページ設定を構成し、ログインおよび登録のフローをテストします。

### 🔍 検索ページ

**目的：** 商品およびコンテンツの検索機能

**機能：** 顧客が検索機能を使用したときに検索結果を表示し、関連商品を示し、フィルタリングオプションを含みます。

**セットアップ：** 検索ページはShopifyの組み込み検索と自動的に動作します。検索機能が関連する結果を返すことを確認するためにテストしてください。

### 🛒 カートページ

**目的：** フルショッピングカートの表示

**機能：** すべてのアイテム、数量、合計を含むフルショッピングカートを表示します。このページはカートドロワーが無効になっているときに使用されます。

**セットアップ：** カートページは自動的に動作します。Theme Settings > Cart Drawerでカートドロワーを使用するかカートページを使用するかをカスタマイズできます。

### 🚫 404エラーページ

**目的：** 見つからないページを適切に処理する

**機能：** ユーザーフレンドリーなエラーメッセージ、ストアへのナビゲーションへの戻り、ブランドに一致したデザインを提供します。

**セットアップ：** 404ページは自動的に動作します。必要に応じてテーマコードを通じてメッセージをカスタマイズできます。

### 🎁 ギフトカードページ

**目的：** ギフトカード情報の表示

**機能：** 顧客がギフトカードを受け取ったときに、ギフトカードの詳細および引き換え情報を表示します。

**セットアップ：** Shopifyでギフトカードを有効化して販売すると自動的に動作します。

## Starter に含まれていないもの

Plain Jane Starterに含まれていないページタイプ：

* ❌ **ルックブックページ** - ビジュアルな商品プレゼンテーションページ
* ❌ **ブログテンプレート** - ブログ投稿やブログ一覧ページは含まれていません
* ❌ **Aboutページテンプレート** - 代わりにデフォルトのページテンプレートを使用してください
* ❌ **高度な商品ページのバリアント** - 商品ページのレイアウトは1種類のみ

## ページ設定のベストプラクティス

### コレクションページ

商品のために論理的なコレクション構造を作成します。関連キーワードを含む説明的なコレクション説明を追加します。高品質なコレクション画像をアップロードします。テーマ設定でグリッドレイアウトを構成します。フィルタリングとソート機能をテストします。モバイル閲覧に最適化します。

### 商品ページ

異なる角度からの複数の高品質な商品画像を追加します。詳細でSEOに配慮した商品説明を書きます。該当する場合は商品バリアント（サイズ、色など）を設定します。在庫管理を構成します。カート追加フローを徹底的にテストします。明確な行動喚起でコンバージョン最適化を行います。

### コンテンツページ

関連するキーワードを用いてSEO最適化されたコンテンツを書きます。テキストを区切るための関連画像を追加します。明確な行動喚起を含めます。関連ページや商品へのリンクを張ります。モバイルでの可読性をテストします。読み込み速度をチェックし、画像を最適化します。

### お問い合わせページ

お問い合わせメッセージをカスタマイズして期待値を設定します（例：「24時間以内に返信します」）。Clock Settingsで正しいタイムゾーンを設定します。お問い合わせフォームの送信をテストします。フォーム送信がメールに届くことを確認します。フォームがモバイルデバイスで動作することを確認します。

## 一般的なページ設定の問題

### コレクションページが空

**問題：** コレクションページに商品が表示されない

**解決策：** Shopify管理画面でコレクションに商品を追加します。商品のステータスが「Active」になっていることを確認します。商品が販売チャネルで利用可能であることを確認します。コレクションの条件とフィルターを確認します。

### 商品ページの情報が欠落している

**問題：** 商品ページが不完全に見える

**解決策：** 複数の高品質な商品画像を追加します。完全な商品説明を書きます。該当する場合はバリアントを設定します。在庫と価格を構成します。商品タグやカテゴリを追加します。

### お問い合わせフォームが動作しない

**問題：** お問い合わせフォームの送信が届かない

**解決策：** Shopifyの設定でメール通知を構成します。実際のメールでフォーム送信をテストします。迷惑メールフォルダに送信が入っていないか確認します。すべてのフォームフィールドが正しく動作していることを確認します。

### 顧客アカウントが利用できない

**問題：** 顧客がアカウントを作成できない

**解決策：** Shopifyの設定 > Checkoutで顧客アカウントを有効にします。「アカウントは任意」または「アカウントは必須」を選択します。登録およびログインのフローをテストします。メール通知が機能していることを確認します。

## モバイル最適化

Plain Jane Starterのすべてのテンプレートは完全にレスポンシブでモバイルデバイス向けに最適化されています。ただし、最良の体験を確保するために実際のモバイルデバイスでページをテストすることを推奨します。

**モバイルテストチェックリスト：** 実際のiOSおよびAndroidデバイスでテストします。モバイルネットワークでの読み込み速度を確認します。フォーム機能と入力フィールドを検証します。ナビゲーションメニューとドロップダウンをテストします。モバイルサイズでのテキストの可読性を確認します。画像が適切にスケールすることを確認します。ボタンがタップしやすいことを確認します。

## SEO最適化

各ページテンプレートはShopifyの組み込みツールを通じて基本的なSEO最適化をサポートします。

**SEO設定手順：** 一意で説明的なページタイトルを設定します。魅力的なメタディスクリプション（150〜160文字）を書きます。すべての画像に説明的な代替テキストを追加します。クリーンで説明的なURLを使用します。関連ページ間で内部リンクを作成します。ページの読み込み速度を速く保ちます。

**SEOのベストプラクティス：** 各ページに対して独自で価値のあるコンテンツを書きます。コンテンツ内でキーワードを自然に使用します。ファイルサイズを圧縮して画像を最適化します。モバイル対応のレスポンシブデザインを保証します。コンテンツを定期的に最新の状態に保ちます。信頼できるソースからのバックリンクを構築します。

## ページ管理ワークフロー

### 新しいページの作成

コンテンツ構造と目的を計画します。Shopify管理画面のオンラインストア > Pagesでページを作成します。適切なテンプレート（defaultまたはcontact）を選択します。コンテンツ、画像、フォーマットを追加します。SEO設定（タイトル、説明、URL）を構成します。ナビゲーションメニューにページを追加します。公開前にプレビューとテストを行います。公開してページをプロモートします。

### 既存ページの更新

変更を行う前に現在のコンテンツをバックアップします。コンテンツ、画像、設定の更新を行います。テーマカスタマイザーで変更をプレビューします。コンテンツが大幅に変更された場合はSEO情報を更新します。すべてのリンクをテストしてナビゲーションが機能することを確認します。変更公開後は分析でパフォーマンスを監視します。

## サポートを受ける

ページ設定の問題については、基本的な設定手順はGetting Started Guideを参照し、カスタマイズオプションについてはTheme Settingsのドキュメントを参照し、一般的な解決策についてはFAQ & Troubleshootingを参照してください。

機能が不足している場合や高度な機能が必要な場合は、含まれていない内容を理解するためにLimitations Overviewを確認し、より多くの機能が必要な場合はPlain Jane 3.0またはPlain Jane Interactiveへのアップグレードを検討してください。

***

## ヘルプが必要ですか？

💬 **Discordでコミュニティに参加：** <https://discord.gg/hcc2GvgZc6>

📧 **メールでお問い合わせ：** <support@openspaces.design>

💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応