Shopify Skeleton Themeとは？テーマ構築の出発点を解説

2026年1月18日

#Shopify #コンサルティング

Skeleton Themeとは

Skeleton Themeは、2025年5月にShopifyが公開した最小構成のテーマです。

GitHub: https://github.com/Shopify/skeleton-theme

必要最低限のファイルとコードのみで構成されており、ここから独自のテーマを構築していくための土台として設計されています。

DawnとSkeleton Themeの役割の違い

多くの方は、Dawnを「Shopifyが無料で配布している実用テーマ」と認識していると思います。

しかし、Shopify公式はDawnを"reference theme"（参照テーマ）と呼んでいます。

Dawn: "Shopify's first source available reference theme"（参照テーマ）
出典: Shopify/dawn - GitHub
Skeleton Theme: "A clean, flexible starting point"（出発点）
出典: Skeleton theme is now available - Shopify Developer Changelog

「reference」とは参照用という意味です。つまり、Dawnは「こう作ればいい」を学ぶためのお手本であり、そのまま実戦で使うことを想定したテーマではありません。

DawnもRiseも、Shopifyが言いたいのは「これを参考にして、ちゃんとカスタマイズしてストアのクオリティを上げてくださいね」ということなのです。

Dawnを見ながら学び、Skeletonから作る。これがShopify公式が示しているテーマ開発の形です。

なぜSkeleton Themeが生まれたのか

汎用テーマは、多種多様なストアに対応できるよう設計されています。アパレル、食品、雑貨、どんな業種でも使えるように、あらゆる機能が詰め込まれています。

しかし、これは裏を返せば「1ストアを表示するのに、10ストア分のコードが動いている」状態です。自分のストアでは使わない機能のコードも、すべて読み込まれています。

結果として起こるのが、表示速度の低下です。

大手ストアは資本力でカスタムテーマを構築し、高速な表示を実現しています。一方、小規模ストアは汎用テーマを使わざるを得ず、表示速度で劣る。この差は、努力では埋まりません。

Skeleton Themeは、この構造的な問題に対するShopify公式の回答です。

公式Skeletonから始める大変さ

ただし、公式Skeleton Themeは文字通り「骨格だけ」です。HTMLの構造はありますが、ECサイトとして動く仕組みがほとんど入っていません。

例えば以下のような「当たり前の動作」を、すべてゼロから開発する必要があります。

バリエーションを選んだら価格・在庫表示が切り替わる
カートに商品を追加したらヘッダーのカート数が更新される
コンポーネント間でイベントを連携する仕組み（pubsub）
共通で使うユーティリティ関数（global.js）
日本語のローカライズファイル
お客様アカウント関連の画面一式

見た目を作るだけでなく、ECとして機能する基盤を全部作るところから始まる。それが公式Skeletonからの開発です。

テーマ構造から見直すと何が変わるか

Skeleton Themeから構築することで得られるメリットは大きく2つあります。

1. 表示速度の改善

不要なコードがなくなることで、ページの読み込み速度が向上します。表示が速いストアは離脱率が下がり、ユーザー体験が向上します。

2. ストア独自のUI/UXが実現できる

汎用テーマの制約から解放され、自分のストアに最適化されたデザインと導線を構築できます。「テーマの都合」に合わせるのではなく、「ストアの都合」でUIを設計できるようになります。

実務での体感として、CVRで10%〜20%の差が出ます。

ストアの大小は関係ありません。小規模だからといって汎用テーマで妥協する理由はないのです。

CVRが高い → 収益性が高い → 事業の成長速度が速い

この因果関係を考えれば、スケルトンから作ることは投資として合理的です。私たちとしては必須と考えています。

Shopifyで勝つための土台

ECコンサルティングでは、広告運用やUI改善の話が中心になりがちです。もちろんそれらも重要ですが、小手先の改善だけでは本質的な差は埋まりません。

勝つための土台は、テーマ構造から見直すことです。

テーマ構造を理解し、Skeleton Themeから構築できるかどうか。これは、信用できるコンサル・制作会社を見分ける一つの基準になります。

「Dawnをカスタマイズします」ではなく「Skeletonから作れます」と言えるかどうか。経験・技術力の差がここに表れます。

ARMERIAのテーマ配布

ARMERIAでは、Skeleton Themeから独自に構築したテーマを配布しています。

公式Skeletonから始める大変さを解消し、「すぐに独自機能の開発に集中できる状態」まで基盤を整えています。ECサイトとして当たり前に動く仕組みはすでに実装済み。あとは、あなたのストアに必要な機能を作ることに集中できます。

Online Store 2.0 完全対応

このテーマはShopify Online Store 2.0の機能にフル対応しています。

Sections Everywhere: 全ページでセクション追加・並び替え可能
JSONテンプレート: 全テンプレートがJSON形式
ブロック構造: 主要セクションをブロック化、順序変更可能
App Blocks（@app）: 各セクションでアプリブロック挿入可能
メタフィールド連携: 標準対応

テーマエディター上でコードを触らずに柔軟なページ構築が可能です。

デザインシステム

フォント

日本語表示に最適化されたゴシック体のシステムフォントを採用しています。Windows環境では游ゴシック・メイリオ、macOS環境ではヒラギノ角ゴシックが使用されます。Webフォントを使用しないことで、読み込み速度の向上と安定した日本語表示を実現しています。

フォントサイズ

フォントサイズは6段階のスケールで定義しています。多数のWebサイト構築経験から、サイト全体の統一感を保ちやすい設計として採用しました。

--font-size-xs:  0.75rem  (12px)
--font-size-sm:  0.875rem (14px)
--font-size-md:  1rem     (16px) ← 本文基準
--font-size-lg:  1.125rem (18px)
--font-size-xl:  1.25rem  (20px)
--font-size-xxl: 1.5rem   (24px)

カラー

ベースカラーに加え、グレー系を3段階（ライトグレー、グレー、ダークグレー）用意しています。グレーの使い分けにより、情報の階層や重要度を視覚的に表現でき、デザインに一貫性が生まれます。

ライトグレー: セクション背景など
グレー: ボーダー、プレースホルダーなど
ダークグレー: サブテキスト、キャプションなど

角丸

ボタンやカードの角丸は、サイト全体の印象を左右する重要な要素です。テーマ設定で一括管理できるようにしており、ブランドイメージに合わせて調整可能です。

CSS読み込みの最適化

Shopifyでは、renderやblocksで同じsnippetを複数回呼び出すと、その中のCSS読み込みも重複してしまいます。また、使用しないセクションのCSSまで読み込んでしまうケースもあり、これがパフォーマンス低下の原因になります。

このテーマでは、パフォーマンスとFOUC（スタイル適用前のちらつき）のバランスを考慮し、共通CSSは同期読み込み、セクション固有CSSは非同期読み込みというルールを採用しています。

お客様アカウント設定

このテーマは「従来のお客様アカウント」を採用しています。

ログイン・登録画面のデザインをカスタマイズ可能
パスワード保存が使えるためリピーターの利便性が高い
新方式のワンタイムパスワード（毎回メール確認）は離脱の原因になる

ダウンロード

ダウンロードは無料です。

Armeria Skeleton Theme - ver 1.0.0

ただし、テーマを手に入れただけで勝てるわけではありません。使いこなせるかはあなた次第です。

テーマは土台に過ぎません。その上にどんな戦略を乗せ、どう運用していくか。そこまで含めて考えられる方に、このテーマを使っていただきたいと思っています。

著者: ARMERIA編集部
監修: ARMERIA（Shopifyアプリ開発／ECコンサルティング）
最終更新: 2026/06/02

ブログに戻る