Shopifyの第1のソースとなるオンラインストア2.0機能を備えた最初のテーマであるDawnテーマは、組み込まれたパフォーマンスと柔軟性により、より良い商業を構築するのに役立ちます。Shopify Dawnテーマは、テーマの開発におけるHTML第一主義と必要に応じたJavaScriptのみのアプローチを採用しています。

Shopifyで始めているマーチャントの場合、Dawnテーマはデフォルトのテーマです。つまり、Shopify Debutテーマと比較して、35倍も速いテーマで始めることができます。素晴らしい機能とエキサイティングなアドオンで構築されているDawnテーマを詳しく見てみましょう。

Shopify Dawnテーマの概要：

Dawn Shopifyテーマは、原子的なデザイン要素、最小限のJavaScript、およびその他の主観的なセットの機能を使用して、超軽量なモバイルファーストテーマとして柔軟性を最大化し、複雑さを最小化する最初のテーマです。

Shopify Dawnテーマの最高の機能：

• Webネイティブ： Shopify Dawnテーマは、ポリフィルではなくプログレッシブなエンハンスメントを介して、最新のWebブラウザをサポートし、古いブラウザのサポートも維持しています。

• すべての機能をサポート： テーマの機能、デザイン、柔軟性により、マーチャントはJSONテンプレート、アプリのブロック、およびすべてのページのセクションを使用して、カスタムレイアウトを構築することができます。

• 必要に応じたJavaScriptのみ： Shopify Dawnテーマは、JavaScriptが必要な場合にのみ使用するアプローチを取り、ストアのパフォーマンスを向上させながら最高の体験を提供します。

• アクセシビリティ： コンテンツのツリービューからアクセス可能なカラースキームまで、Dawnテーマはページの階層を簡単に更新できるように整理されています。

DawnテーマShopifyのインストール方法

Shopifyテーマのダウンロードと同じくらい簡単に、Shopify Dawnテーマを利用することができます。Shopifyテーマストアを訪れて、Shopify Dawnテーマを見つけることができます。Shopify GitHubリポジトリでは、テーマの開発、カスタム要求のプルとプッシュを行うことができます。

テーマをShopify Dawnテーマに移行するか、オンラインストア2.0機能でテーマをアップグレードするか、または既存のテーマにShopify 2.0機能を実装する際のヘルプをお探しの場合は、いつでもHulkAppsのShopifyオンラインストア2.0専門家に連絡することができます。

Shopify 2.0にアップグレード

Shopify 2.0 Dawnテーマエディターで変更内容を簡単に確認

新機能やツールを簡単に利用できるようにシンプルにしたShopify Dawnテーマエディターは、左パネル、プレビューセクション、および右パネルの3つのパートから成り立っています。

ここでは、セクションのレイアウトや構造を変更してストアページ上のコンテンツシーケンスを反映させることができます。必要な場合には、セクションの内部にセクションまたはブロックを追加することもできます。

テーマエディタのプレビューセクションでは、レイアウトの変更内容が表示されます。モバイル、デスクトップ、フルスクリーンの3つのプレビューオプションで変更内容を確認することもできます。

テーマエディタには、セクションのコンテンツをドリルダウンする代わりに、ライトパネルのサイドバーにセクションのコンテンツを表示するツリービュー構造が追加されました。このサイドバーからコンテンツを非表示にしたり、編集したり、特に動的リソースを含めることができます。これらのオプションにより、ページの階層を迅速に更新することができます。

それ以外のShopify 2.0テーマやShopifyとShopify 2.0のテーマアーキテクチャのデザインについて詳しく知りたい場合は、当社のブログ「Online Store 2.0 Shopify Themes and Architecture」をお読みください。

なぜShopifyを新しいShopify Online Store 2.0にアップグレードする必要があるのか

クリエイティブな人々を力づけ、柔軟なストアフロントを構築するためのさらなるパワーをマーチャントに提供するため、Shopify Online Store 2.0は新しいストアデザイン体験を提供します。詳細については、当社のShopify 2.0 introductionのブログを読んでください。以下は、Shopify VintageテーマとShopify Dawnテーマの違いのクイックな比較です。

Shopify Dawnテーマのカスタマイズ

Shopify Dawnテーマで遊び、自由なサイト構築を行う前に、サポートされているページタイプ、セクション、カラースキームについていくつかのポイントがあります。

Shopify Dawnテーマ - ページタイプ：

各テーマには固有のデフォルトセクションと設定があり、以下はDawnで既に利用可能なページテンプレートです。

• 製品ページ

デフォルトでは、製品情報セクションと製品のおすすめセクションが表示されます。 製品情報 には、次のデフォルトブロックが含まれています：

• テキスト（デフォルトではベンダー属性を表示）
• タイトル
• テキスト（デフォルトでは製品のサブタイトル属性を表示）
• 価格
• バリアントピッカー
• 数量選択ツール
• 購入ボタン
• 説明
• シェア

製品情報セクションには、製品の評価、数量選択ツール、カスタムリキッド、折りたたみタブ、ポップアップなどの追加ブロックを最大16個まで含めることができます。

スティッキータイプの製品情報オプションが必要な場合や、特定のバリアントが選択された場合に他のバリアントのメディアが非表示になり、ビデオループを有効にしたい場合は、製品情報セクションの設定で変更をマークすることができます。

製品のおすすめ

用語が示すように、製品のおすすめは、この製品と一緒によく購入される類似した製品や製品を表示します。右パネルから製品の詳細をカスタマイズすることができます。

• コレクションページ

製品ページのように、コレクションページにはデフォルトでコレクションバナーと製品グリッドセクションがあります。コレクションバナーのセクション設定にはコレクションの説明を表示とコレクションの画像を表示というオプションがあり、また、製品グリッドのセクション設定では、ページごとの製品数の比率などが表示されます。

• コレクションリストページ

上記の2つと同様に、コレクションリストページにはすべてのコレクションと必要なオプションが表示されます

• ページ、ブログページ、ブログ投稿ページ、カートページ、パスワードページ、404ページ、検索ページ

他のページと同様に、これらのオプションには独自のセクションと設定があり、ブランドのストーリーテリングに適した構成を行うことができます。

Shopify Dawnテーマ - セクション：

Shopify Online Store 2.0の機能とツールをショーケースするための内蔵の参照の一環として、Shopify Dawnテーマはセクションのいたるところで機能します。つまり、任意のページにセクションを追加することができ、各ページに表示されるデフォルトのセクションは通知バー、ヘッダー、フッターです。

利用可能な他のセクションは次のとおりです：

• ブログ記事
• コラージュ
• コレクションリスト
• お問い合わせフォーム
• カスタムリキッド
• メール登録
• 注目の製品
• 注目のコレクション
• イメージバナー
• テキスト付きイメージ
• マルチカラム
• ページ
• リッチテキスト
• ビデオ

各セクションには独自のセクション設定があり、ビジネスニーズに合わせて設定を行うことができます。Shopify 2.0のメタフィールドについての詳細な情報については、当社のブログ「なぜShopify dynamic sectionsはゲームチェンジャーなのか？」をご覧ください。

Shopify Dawnテーマ - カラースキーム：

2016年に発売されたデビューShopifyテーマの進化版となるShopify Dawnテーマは、先進的なUXデザインとWeb標準を導入したデザインアーキテクチャを採用しています。その結果、このテーマは前編成よりも35％高速で、パフォーマンスが向上しました。

カラースキームを管理する

• 単色の場合、

• カラーピッカーを使用するか、

• カラーの16進数値を入力します

• カラーグラデーションの場合、

• グラデーションCSSコードをカラーボックスに貼り付けます

Shopify Dawnテーマのキーフィーチャー

• Atomicカラーシステム：

色は顧客の会話に大きな影響を与えることがわかっているため、Shopify Dawnテーマでは、アクセントカラーと背景カラーを提供し、ブランド表現の幅を広げるためにより多様性のあるテーマになっています。

• オープンソースのテーマコード：

オープンスタンダードの採用を奨励することにより、Shopify Dawnテーマはオープンソースのテーマです。参照テーマにより、高品質なテーマ開発を可能にし、ShopifyマーチャントがプレミアムなShopifyテーマにアクセスできるようにします。

• カスタマイズ可能なセクション：

最適な体験を提供するための適切な道を示すShopify Dawnテーマは、スライドショーボタンをイメージバナーセクションに置き換えて、1つの画像、テキスト、CTAを表示することができます。

Shopify Dawnテーマの最も良い部分は、画像がスムーズにスクロールするのではなく、次の画像にスナップするスライダーコンポーネントです。これにより、ビジュアルの調和が保たれ、ストアのパフォーマンスが向上します。

• パフォーマンスの向上：

最高のユーザーエクスペリエンスを提供することを見失うことなく、Shopify Dawnテーマは柔軟性を最大化し、複雑さを最小化することを目指しています。

たとえば、ヘッダーナビゲーション（デスクトップタイプ）は、バーガーアイコンに折りたたまれるのではなく、ナビゲーションアイテムが衝突すると複数回折り返されるようになりました。ナビゲーションレイアウトを変更することで、このテーマの振る舞いは柔軟性や変換率を損なうことはありません。

もし、優れたCRO戦略を得て、優れた変換結果をもたらすことを望むマーチャントならば、HulkAppsのShopify CRO expertsと協力して組織を成長させるお手伝いをいたします。

• スマートデフォルト：

カスタムセクションに画像をトリミングしたり、コンテンツが画像に重なることを防いだりするため、Shopify Dawnテーマのイメージの完全性とアクセシビリティは、Shopifyテーマのメインデザインの原則です。

Shopify Dawnテーマカスタマイズでブランドの声を発揮

オンラインストア2.0の導入は、新しい商業スタイルの始まりを意味しており、Shopify Dawnテーマは、最高のパフォーマンスを提供しながら、よりスマートでユニークなデザイン上の意思決定を行うための助けとなります。つまり、高速なテーマで柔軟性が高まります。

パフォーマンスとアジリティの健全なバランスを保ちつつ、オープンソースのコードベースであるShopify Dawnテーマは、ストアのカラーチョイスを簡素化し、強化します。カスタマイズ可能なセクションとスマートデフォルトにより、より多様な店舗デザインへの制御を得ることができ、デザインの変更に対する開発者への依存度を低減します。

2021年8月以降、Shopifyから始めるマーチャントにとって新しいデフォルトのテーマであるShopify Dawnテーマを活用することができます。HulkAppsのShopifyオンラインストア2.0エキスパートと協力して、Shopify Dawnオンラインストアを利用することができます。