📱ページとテンプレート

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

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

テーマコードの解析に基づき、Plain Jane Starterには次のテンプレートファイルが含まれています：

🏠 ホームページ（index.liquid)

目的：ストアのメインランディングページ 機能:

  • シンプルな商品展示

  • お知らせバー統合

  • 基本的なナビゲーションメニュー

  • ニュースレター登録を備えたフッター

セットアップ:

  1. Shopifyカスタマイザーで設定

  2. お知らせバーのメッセージを設定

  3. ショップロゴをアップロード

  4. フッターの内容を設定

🛍️ コレクションページ（collection.liquid)

目的：商品一覧と閲覧 機能:

  • 設定可能なグリッドレイアウト（デスクトップ2–3列、モバイル1–2列）

  • 商品フィルタリングと並び替え

  • エンドレススクロールオプション

  • レスポンシブデザイン

セットアップ:

  1. Shopify管理画面でコレクションを作成

  2. テーマ設定でショップレイアウトを構成

  3. 列の間隔と商品サイズを設定

  4. エンドレススクロールを有効/無効にする

📦 商品ページ（product.liquid)

目的：個別商品の表示と購入 機能:

  • 商品画像と情報

  • バリアント選択

  • カートに追加する機能

  • 基本的な商品ナビゲーション

セットアップ:

  1. 高品質な画像で商品を追加

  2. 商品情報を設定

  3. バリアント（サイズ、色など）を設定

  4. カートに追加の動作をテスト

📋 コレクション一覧（list-collections.liquid)

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

  • コレクションのグリッド表示

  • コレクションのサムネイル

  • 基本的なコレクション情報

  • 個別コレクションへのナビゲーション

セットアップ:

  1. 複数のコレクションを作成

  2. コレクション画像を追加

  3. コレクションの説明を作成

  4. コレクションの順序を整理

📄 アバウトページ（page.liquid)

目的：コンテンツ用の標準ページテンプレート 機能:

  • 基本的なコンテンツ表示

  • テキストと画像のレイアウト

  • カスタムページセクション

  • SEO最適化

セットアップ:

  1. Shopify管理画面でページを作成

  2. コンテンツと画像を追加

  3. ページのSEO設定を構成

  4. ナビゲーションメニューからリンク

📞 お問い合わせページ（page.contact.liquid)

目的：顧客とのコミュニケーションと問い合わせ 機能:

  • 検証付きの問い合わせフォーム

  • 連絡先情報の表示

  • 所在地／住所情報

  • メール連携

セットアップ:

  1. Shopifyでお問い合わせページを作成

  2. 問い合わせフォームの設定を構成

  3. 事業情報を追加

  4. メール通知を設定

🔒 パスワードページ（password.liquid)

目的：ストア保護とメール収集 機能:

  • パスワード保護インターフェース

  • プレローンチ向けのメール登録フォーム

  • カスタムメッセージとブランディング

  • モバイル対応デザイン

セットアップ:

  1. Shopify設定でパスワード保護を有効にする

  2. テーマ設定でパスワードページのデザインを構成

  3. メール収集フォームを設定

  4. メッセージとカラーをカスタマイズ

🖼️ ルックブックページ

目的：ビジュアルな商品プレゼンテーション 機能:

  • 画像中心のレイアウト

  • 商品の展示

  • ビジュアルストーリーテリング

  • ブランドの紹介

セットアップ:

  1. Shopifyでルックブックページを作成

  2. 高品質な画像をアップロード

  3. ルックブックのセクションを構成

  4. 関連商品へのリンクを追加

🔍 検索結果（search.liquid)

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

  • 検索結果の表示

  • 商品フィルタリング

  • 関連性の高い結果のランク付け

  • 結果なしのメッセージ表示

セットアップ:

  • Shopifyの検索と自動的に連携

  • テーマ設定で検索ページのスタイリングを構成

  • 商品で検索機能をテスト

🚫 404エラーページ（404.liquid)

目的：見つからないページを適切に処理 機能:

  • ユーザーフレンドリーなエラーメッセージ

  • ストアへのナビゲーションに戻す

  • 検索候補の表示

  • ブランドに一貫したデザイン

セットアップ:

  • Shopifyにより自動的に処理される

  • 必要に応じてエラーメッセージをカスタマイズ

  • ナビゲーションリンクが正しく動作することを確認

ページテンプレートの制限

Starterに含まれていないもの

欠けている高度なページタイプ

  • ❌ カスタマーアカウントページ - ログイン、登録、アカウント管理はなし

  • ❌ ブログテンプレート - ブログ投稿やブログ一覧ページはなし

  • ❌ 高度な商品ページ - バリアント固有のテンプレートはなし

  • ❌ ギフトカードページ - 基本的にShopifyのデフォルトのみ

欠けている高度な機能

  • ❌ ページセクション - 高度なセクションシステムはなし

  • ❌ 動的コンテンツ - 限られたコンテンツ管理

  • ❌ インタラクティブ要素 - ホットスポットや高度なインタラクションはなし

  • ❌ 高度なSEO - メタタグは基本的なもののみ

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

1. ホームページの最適化

2. コレクションページ

3. 商品ページ

4. コンテンツページ

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

ホームページが正しく読み込まれない

  • テーマの公開を確認 - テーマがライブに設定されていることを確認

  • コンテンツを確認 - まず商品とコレクションを追加する

  • ナビゲーションをテスト - メニューリンクが機能していることを確認

  • モバイル表示を確認 - レスポンシブデザインをテスト

コレクションページが空になっている

  • コレクションに商品を追加 - 表示にはコレクションに商品が必要

  • 商品ステータスを確認 - 商品がアクティブで利用可能であること

  • コレクション設定を確認 - 利用可能性と条件をチェック

商品ページに情報が欠けている

  • 商品画像を追加 - 複数の高品質画像が必要

  • 説明を作成 - 完全な商品情報が必要

  • バリアントを設定 - サイズ、色、オプションを構成

  • 在庫を確認 - 在庫レベルが設定されていることを確認

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

  • 通知を設定 - Shopifyでメール通知を設定する

  • フォーム送信をテスト - すべてのフィールドが正しく動作するか確認

  • メールの配信を確認 - メールが迷惑メールに入っていないか確認

モバイル最適化

すべてのテンプレートはレスポンシブですが、次を検討してください：

モバイル特有の考慮事項

  • タッチ操作に適したナビゲーション - 大きくタップしやすいボタン

  • 読みやすい文字サイズ - 適切なフォントのスケーリング

  • 最適化された画像 - モバイルネットワークでの高速読み込み

  • シンプルなレイアウト - 複雑な多列デザインは避ける

テストチェックリスト

SEO最適化

基本的なSEO設定

  1. ページタイトル - 各ページに固有で説明的なタイトルを設定

  2. メタディスクリプション - 検索結果向けの魅力的な説明文

  3. 画像の代替テキスト（alt） - すべての画像に説明的なaltテキストを設定

  4. URL構造 - わかりやすく説明的なURLにする

  5. 内部リンク - 関連ページ間でリンクを張る

SEOのベストプラクティス

  • ユニークなコンテンツ - 各ページに独自で価値のあるコンテンツを

  • キーワード最適化 - 自然なキーワードの使用

  • 読み込み速度 - 画像を最適化しアプリを最小化する

  • モバイル対応 - レスポンシブデザインが重要

  • 定期的な更新 - コンテンツを新鮮で最新に保つ

ページ管理ワークフロー

新しいページの作成

  1. コンテンツ構造を計画 - ページの内容と目的を概説する

  2. Shopify管理画面で作成 - 適切なページテンプレートを使用

  3. コンテンツを追加 - コピーを書き画像をアップロードする

  4. SEOを構成 - タイトル、説明、URLを設定する

  5. ナビゲーションに追加 - メニュー構造に含める

  6. 機能をテスト - すべてが正しく動作するか確認する

  7. 公開とプロモート - ライブにして共有する

既存ページの更新

  1. コンテンツをバックアップ - 変更前に現在のバージョンを保存

  2. 更新を行う - コンテンツ、画像、または設定を編集

  3. 変更をプレビュー - 公開前にテストする

  4. SEOを更新 - 必要に応じてメタ情報を更新

  5. すべてのリンクをテスト - ナビゲーションが引き続き機能することを確認

  6. パフォーマンスを監視 - 変更後に分析を確認

ヘルプを得る

ページ設定の問題について

機能が不足している場合

サポート連絡先

  • 技術的な問題： [email protected]

  • Shopifyプラットフォーム： Shopifyサポート

  • アプリ統合： 個々のアプリ開発者

次のステップ： まずはあなたの ホームページ設定、次に各ページタイプを体系的に進めて完全なストアを構築してください。

ヘルプが必要ですか？

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

📧 メールでお問い合わせ： [email protected]

💻 ライブチャット： 月曜〜金曜、午前10時〜午後6時（EST）に当社ウェブサイトで直接利用可能

前へテーマ設定次へ制限事項

最終更新