テーマとストアデザイン

テーマとは

Shopifyのテーマとは、ストアのデザイン・レイアウト・見た目全体を決定するテンプレートシステムです。HTML・CSS・JavaScriptの知識がなくても、テーマを変えるだけでショップの印象を大きく変えられます。Shopifyのテーマは「Liquid」と呼ばれる独自テンプレート言語で構築されており、テーマエディター（ノーコードビルダー）でほとんどの変更が可能です。このレッスンでは公式テーマ「Dawn」の特徴から、無料・有料テーマの選び方、カスタマイズ手順、効果的なTOPページのセクション設計まで学びます。

テーマ・デザイン

---

Dawn（公式デフォルトテーマ）

DawnはShopify公式が開発・提供する無料のデフォルトテーマです。2021年のShopify OS 2.0と同時にリリースされ、パフォーマンス・セクション設計・開発者フレンドリーの3点において旧来のテーマを大きく刷新しました。

Dawnの主な特徴

パフォーマンス最適化 DawnはCore Web Vitals（LCP・INP・CLS）を強く意識した設計で、画像の遅延読み込み・CSS/JSの最小化・不要なリクエストの削減が組み込まれています。GoogleのPageSpeed Insightsでモバイルスコア80以上が標準的に達成できます。

JSON Templatesによる柔軟なセクション設計 Shopify 2.0テーマの最大の特徴は「JSONテンプレート」です。旧来のLiquidテンプレートと異なり、ページ単位でセクション（ページの構成ブロック）を自由に追加・削除・並べ替えできます。商品ページ・コレクションページ・ブログページそれぞれにカスタムセクションを追加できるようになり、デザインの自由度が飛躍的に向上しました。

オープンソース DawnのコードはGitHubで公開されており、エンジニアが自由にフォークして改造できます。テーマのベースとしてカスタム開発を行う際の出発点としても活用されています。

---

無料テーマの種類と選び方

Shopifyテーマストアには無料テーマが11種類あります。すべてShopify公式がメンテナンスしており、Shopify 2.0対応・セキュリティアップデートが保証されています。

💡 テーマ選びは「デモストアで体験する」が基本: テーマストア（themes.shopify.com）の各テーマページには「デモを見る」ボタンがあり、実際の表示イメージを確認できます。モバイル表示・商品一覧ページ・カートページも必ず確認してから選択しましょう。

---

有料テーマの特徴と代表例

有料テーマは買い切り型で（価格はテーマにより異なり、数百ドル程度が中心。最新の価格はテーマストアで確認してください）、一度購入すれば追加費用なしで永続利用できます。無料テーマと比べてアニメーション・高度なフィルタリング・マーチャンダイジング機能などが充実しています。

人気有料テーマ

Impulse ファッション・アパレル向けの定番有料テーマ。スタイリッシュなホームページビルダー・プロモーションバナー・高度な商品フィルタリング機能が特徴です。

Prestige ラグジュアリーブランド向け。大きなヒーロー画像・動画背景・スムーズなアニメーションが特徴で、高単価商品のブランドイメージ醸成に最適です。

Turbo Out of the Sandbox製の超高速テーマ。CSSアニメーション・予測型検索・マルチカラム商品フィルターなど多機能で、大規模カタログのECに適しています。

⚠️ 有料テーマ購入前の注意点: 有料テーマは購入後の返金が原則不可です。必ずデモストアで全ページ・モバイル表示・ページ読み込み速度を確認してから購入しましょう。また購入後にShopifyのメジャーアップデートが入った際の対応状況も開発会社のサポートポリシーで確認が必要です。

---

テーマエディターの使い方

Online Store → Themes → 「Customize（カスタマイズ）」ボタンをクリックするとテーマエディターが開きます。

エディターの構成

左パネル（セクション管理） 現在のページに追加されているセクションの一覧が表示されます。セクションをクリックして設定を変更したり、ドラッグアンドドロップで並べ替えたりできます。「セクションを追加する」ボタンで新しいセクションを挿入できます。

中央エリア（プレビュー） 変更がリアルタイムでプレビューされます。上部のアイコンでデスクトップ・タブレット・モバイル表示を切り替えられます。

右パネル（設定詳細） 選択したセクションの詳細設定（テキスト・画像・ボタンリンクなど）が表示されます。

Theme settings（テーマ設定） 左パネル下部の「Theme settings」からカラースキーム・フォント・ボタンスタイルなど、サイト全体のデザイン基本設定を変更できます。

カスタマイズの基本操作

1. ◆テーマエディターを開く（Online Store → Themes → Customize）
2. ◆変更したいページを上部のドロップダウンから選択（Home / Products / Collections 等）
3. ◆左パネルのセクションをクリックして設定を変更
4. ◆新しいセクションを追加する場合は「Add section」をクリック
5. ◆Theme settings でカラー・フォントを調整
6. ◆モバイル表示を切り替えてスマートフォンでの表示を確認
7. ◆「Save（保存）」をクリックして変更を反映

---

セクション設計：効果的なTOPページの作り方

TOPページはストアの第一印象を決める最重要ページです。訪問者の多くはTOPページを見てから商品ページに進むかどうかを判断します。以下の順序でセクションを配置すると、購買転換率（CVR）の向上が期待できます。

推奨セクション構成

① Hero Banner（ファーストビュー） ページを開いた直後に表示される最上部のビジュアルエリアです。ブランドの世界観を伝える高品質な画像または動画、キャッチコピー、CTA（Call to Action）ボタンを配置します。Hero Bannerで離脱するか進むかが決まるため、最も制作コストをかけるべきエリアです。

② コレクション一覧 商品カテゴリ（コレクション）をビジュアルで表示します。「新作」「ベストセラー」「セール」などの切り口で2〜4コレクションを並べます。

③ おすすめ商品（Featured Products） 売れ筋または推したい商品を4〜8点ピックアップして表示します。価格・レビュー評価を見せることで、その場での購買判断を促せます。

④ 信頼性セクション（Trust Signals） アイコン+短いテキストの形式で「送料無料」「30日返品保証」「安全な決済」などを横並びで表示します。購入に躊躇している訪問者の不安を取り除く効果があります。

⑤ レビュー・UGC 実際の購入者のレビューや、SNSの投稿写真を表示します。社会的証明として非常に効果的で、CVRを大きく改善するケースが多くあります。

⑥ メールリスト取得（Newsletter Signup） メールアドレスを入力するフォームと、登録特典（例：初回購入10%オフクーポン）を提示します。ストアへの再訪を促すメールマーケティングの起点となります。

---

画像・メディアの最適化

Shopifyのテーマは画像品質がCVRに直結します。以下の点を守ることで、表示速度と視覚品質を両立できます。

商品画像の推奨仕様

• ◆サイズ: 2048×2048px（正方形・ホワイトバック推奨）
• ◆ファイル形式: WebPまたはJPEG（Shopifyが自動でWebPに変換）
• ◆ファイルサイズ: 1MB以下に最適化（TinyPNGなどで圧縮）
• ◆枚数: 商品あたり4〜8枚（正面・側面・使用シーン・ディテール）

ヒーロー画像の推奨仕様

• ◆サイズ: 1440×600px（横長）または 1920×1080px
• ◆ファイルサイズ: 500KB以下に圧縮（表示速度に直結）

💡 Shopifyは画像を自動でCDN配信する: アップロードした画像はShopifyのCDN（Fastly）を通じて世界中のエッジサーバーから配信されます。適切なサイズ・圧縮で画像をアップロードするだけで、日本国内はもちろん海外からも高速表示が実現します。

---

CSS・Liquidによる高度なカスタマイズ

テーマエディターだけでは実現できない細かいデザイン調整はCSS（カスタムCSS）で行います。

Online Store → Themes → Customize → Theme settings → Custom CSS から直接CSSを追加できます。またテーマコードを直接編集する場合はOnline Store → Themes → ︙ → Edit code から各テンプレートファイルにアクセスできます。

カスタムCSSの例（ボタンの色を変更する）

編集は必ずテーマのバックアップ（テーマを複製）を取ってから行うことを強く推奨します。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆Dawnテーマで3パターンのカラースキームを試す: テーマエディターのTheme settingsからカラースキームを3種類変えてスクリーンショットを比較し、自分のブランドに最も合う配色を選ぶ。
2. ◆TOPページのセクション構成を設計する: 本レッスンの推奨6セクション構成を参考に、自分のストアのTOPページをスケッチまたはFigmaでワイヤーフレームとして設計する。
3. ◆無料テーマ3種のデモを比較する: Dawn・Craft・Refreshのデモストアをそれぞれモバイルで開き、商品ページ・カートページ・フッターのデザインを比較してスプレッドシートにまとめる。
4. ◆商品画像を最適化してアップロードする: 手持ちの商品画像（なければフリー素材）をTinyPNG（tinypng.com）で圧縮し、最適化前後のファイルサイズとPageSpeed Insightsのスコアを比較する。

📝まとめ

Shopifyのテーマはストアの第一印象とパフォーマンスを決定します。公式テーマDawnは無料・高速・柔軟で、ほとんどのケースでスタートに最適です。無料テーマ11種は業種別に最適化されており、デモで確認してから選択します。有料テーマ（買い切り）は高度なフィルタリングやアニメーションが必要な中規模以上のECに向きます。テーマエディターのセクション機能を活用してTOPページをHero→コレクション→おすすめ商品→信頼性→レビュー→メール取得の順で設計すると購買転換率の向上が期待できます。常にモバイル表示を最優先に確認しながらデザインを仕上げましょう。