ECサイトのデザイン編集と聞くと、「HTMLやCSSといった専門的なコードを書かないといけないのでは…」と、多くの人が身構えてしまうかもしれません。特に、ビジネスの立ち上げで忙しい中、新しいプログラミング言語を学ぶ時間などない、と感じるのが当然です。しかし、安心してください。現在のShopifyには、まるでプレゼンテーション資料を作るような直感的な操作で、誰でも簡単かつ自由にデザインを編集できる「テーマエディタ」という強力なツールが備わっています。
このテーマエディタは、あなたのECサイトの「見た目」を操作するための、いわば視覚的なリモコンのようなものです。コードの知識は一切不要。積み木を組み立てるように、必要なパーツ（コンテンツ）をドラッグ＆ドロップで配置し、テキストを打ち替え、画像を差し替えるだけで、あなたのブランドイメージをサイトに反映させることができます。
この記事では、コーディングに苦手意識を持つ初心者の方に向けて、Shopifyテーマエディタの基本的な使い方を、専門用語を極力避けながら、一つひとつのステップを丁寧に解説していきます。この記事を最後まで読み終える頃には、あなたはテーマエディタの基本操作をマスターし、業者に頼ることなく、自分自身の力でストアのデザインを自在に編集できる自信が持てるようになっているはずです。
テーマエディタの基本画面を徹底解説
まず、敵を知ることから始めましょう。テーマエディタは一見すると情報量が多く見えるかもしれませんが、構造は非常にシンプルです。画面は大きく「左側の構造パネル」「中央のプレビュー画面」「右側の詳細設定パネル」の3つに分かれています。それぞれの役割を理解すれば、どこを触れば何が変わるのかがすぐに分かるようになります。
司令塔：左側サイドバーの役割
画面の左側に表示されているのが、ページの構造を管理する「司令塔」、サイドバーです。ここには、あなたのページがどのような要素で構成されているかが、上から順番にツリー構造で表示されています。
このサイドバーは、大きく分けて「ヘッダー」「テンプレート」「フッター」の3つのエリアで構成されています。
- ヘッダー：サイトの最上部に表示される部分で、ストアのロゴやメインメニュー（ナビゲーション）が含まれます。全ページ共通で表示される重要なエリアです。
- テンプレート：ページごとのメインコンテンツ部分です。トップページ、商品ページ、ブログ記事など、表示しているページによって内容が変わります。このエリアに「セクション」と呼ばれるコンテンツの塊を追加していくことで、ページを構築していきます。
- フッター：サイトの最下部に表示される部分で、お問い合わせ先やプライバシーポリシーへのリンク、SNSアイコンなどが配置されます。ヘッダー同様、全ページ共通で表示されます。
「テンプレート」エリアに並んでいる各「セクション」の左側にある点線のアイコンを掴んで上下にドラッグすれば、ページのコンテンツの順番を自由に入れ替えることができます。まるで、コンテンツの目次を並べ替えるような感覚で、ページの構成をダイナミックに変更できるのです。
作業場：中央プレビュー画面の機能
画面の中央に大きく表示されているのが、あなたの「作業場」となるプレビュー画面です。ここには、編集中のウェブサイトが、訪問者にどのように見えるかがリアルタイムで表示されます。左側のサイドバーで特定のセクションをクリックすると、プレビュー画面上の該当箇所が青い枠線で囲まれ、今どこを編集しているのかが視覚的に分かるようになっています。
このプレビュー画面は、ただ見るだけではありません。画面上部にあるアイコンを使えば、様々な機能を利用できます。
- 表示モードの切り替え：画面右上のデスクトップアイコンをクリックすると、モバイル（スマートフォン）表示に切り替えることができます。現代のECサイトは、半数以上がスマートフォンから閲覧されます。PCでの見た目だけでなく、必ずモバイルでの表示も確認しながら編集する癖をつけましょう。
- ページ切り替え：画面上部中央にあるドロップダウンメニュー（初期状態では「ホームページ」と表示）をクリックすると、編集したいページを切り替えることができます。商品ページやコレクションページなど、トップページ以外のデザインを編集する際に使用します。
- 元に戻す/やり直す：画面左上にある左向き・右向きの矢印アイコンは、「元に戻す」「やり直す」機能です。「操作を間違えてしまった！」という時に、このボタン一つで前の状態に戻せるので、失敗を恐れずに色々な設定を試すことができます。
設定項目：右側サイドバーの詳細
左側のサイドバーで編集したいセクションや、その中のさらに細かい「ブロック」を選択すると、画面の右側に、その要素を具体的に編集するための「設定項目」パネルが表示されます。ここが、実際にテキストを打ち込んだり、画像をアップロードしたりする場所になります。
例えば、「画像バナー」セクションの中の「見出し」ブロックを選択すれば、右側のパネルにテキストボックスが表示され、そこに好きな見出し文を入力できます。フォントサイズを変更したり、文字の色を変えたりする設定もここで行います。同様に、画像ブロックを選択すれば、画像をアップロードするボタンが表示され、ボタンブロックを選択すれば、ボタンのテキストやリンク先URLを設定する項目が表示されます。
このように、「左で構造を選び、右で中身をいじる」という流れを覚えれば、テーマエディタの操作はほぼマスターしたと言っても過言ではありません。
ページの骨格「セクション」を使いこなす
テーマエディタを使いこなす上で最も重要な概念が「セクション」です。セクションとは、ページを構成するコンテンツの大きな「塊」や「横長の帯」のようなものです。このセクションを積み木のように組み上げていくことで、ウェブページ全体が構築されます。
セクションの概念と種類
Shopifyのテーマ（特にDAWNのようなOnline Store 2.0対応テーマ）には、あらかじめ様々な種類のセクションが用意されています。これらは、ECサイトでよく使われるコンテンツのテンプレートだと考えてください。
例えば、以下のようなセクションが代表的です。
- 画像バナー：ストアの顔となる、テキストやボタン付きの大きな画像を配置するセクション。
- リッチテキスト：見出しと文章、ボタンを自由に組み合わせられる、シンプルなテキスト紹介用のセクション。
- 特集コレクション：特定の商品コレクション（例：「新着商品」「セール商品」）を一覧で表示させるセクション。
- 複数列：画像とテキストを組み合わせたカラムを複数並べて、サービスの特徴などを紹介するのに便利なセクション。
- お客様の声：顧客からのレビューや推薦文を引用して、信頼性をアピールするセクション。
- 動画：YouTubeやVimeoの動画を埋め込んで、ブランドの世界観や商品の使い方を伝えるセクション。
これらのセクションを適切に組み合わせることで、訪問者を惹きつけ、商品の魅力を伝え、購入へと導くストーリー性のあるページを作成することができます。
セクションの追加・複製・削除
ページのコンテンツを豊かにしていくには、セクションの追加操作が欠かせません。
- 左側サイドバーの「テンプレート」エリアの一番下にある「セクションを追加」をクリックします。
- すると、利用可能なセクションの一覧がポップアップで表示されます。
- 追加したいセクション（例：「特集コレクション」）を選択すると、ページの最下部にそのセクションが追加されます。
- あとは、ドラッグ＆ドロップで好きな位置に移動させましょう。
また、同じレイアウトのセクションを複数使いたい場合、一つずつ設定するのは手間がかかります。そんな時は「複製」機能が便利です。セクション名の横にある点線のアイコンをクリックすると、「複製」というメニューが表示されます。これをクリックするだけで、設定内容がコピーされた同じセクションがすぐ下に追加されます。
不要になったセクションは、セクションを選択した状態で右側パネルの最下部に表示される「セクションを削除」ボタンで簡単に削除できます。ただし、いきなり削除するのが不安な場合は、まずセクション名の横にある「目」のアイコンをクリックして「非表示」にしてみましょう。サイト上では見えなくなりますが、データは残っているので、いつでも再表示させることができます。
セクション単位でのデザイン設定
各セクションは、それぞれ固有のデザイン設定を持っています。セクション全体を選択した状態で右側の設定パネルを見ると、そのセクションに特化したカスタマイズ項目が表示されます。
例えば、「複数列」セクションでは、列の数（PC表示で3列にするか4列にするかなど）を変更したり、画像とテキストの配置を入れ替えたりすることができます。「画像バナー」セクションでは、画像の高さを調整したり、テキストボックスの背景色を変更したりできます。これらの設定を調整することで、同じセクションでも全く異なる印象を与えることが可能です。
パーツとなる「ブロック」を編集する
セクションが「大きな箱」だとすれば、「ブロック」はその箱の中身を構成する「個別の部品」です。見出し、テキスト、画像、ボタンなど、コンテンツの最小単位がブロックにあたります。このブロックを編集していくことで、セクションの具体的な中身を作り込んでいきます。
ブロックの概念と役割
ブロックは、必ずセクションの中に属しています。セクションによって、追加できるブロックの種類は決まっています。
例えば、「画像バナー」セクションを考えてみましょう。このセクションには、通常、「見出し」「テキスト」「ボタン」といったブロックを追加できます。左側のサイドバーを見ると、「画像バナー」セクションの下に、これらのブロックが階層構造でぶら下がっているのが分かります。
この構造を理解することが重要です。セクションはあくまでコンテンツを入れるための「枠組み」であり、その枠組みの中で、ブロックという「部品」を組み合わせることで、最終的な見た目が完成するのです。
ブロックの追加とコンテンツ編集
ブロックを編集する手順は非常に直感的です。
- まず、左側サイドバーで編集したいブロック（例：「見出し」）をクリックします。
- すると、右側の設定パネルに、そのブロックの詳細設定項目が表示されます。
- テキストブロックであれば、テキスト入力欄が表示されるので、好きな文言を入力します。見出しのレベル（H1, H2など）やフォントサイズもここで変更できます。
- 画像ブロックであれば、「画像を選択」ボタンが表示され、手持ちの画像をアップロードしたり、無料のストックフォトから探したりできます。
- ボタンブロックであれば、ボタンに表示するテキストと、クリックした際のリンク先URLを設定する欄が表示されます。
セクション内に新しいブロックを追加したい場合は、左側サイドバーの該当セクションの下部にある「ブロックを追加」をクリックし、追加したいブロックの種類を選択します。
ブロックの並べ替えとカスタマイズ
セクション内でのブロックの表示順も、ドラッグ＆ドロップで自由に変更できます。例えば、「画像バナー」セクションで、見出しよりも先にテキストを表示させたい場合は、左側サイドバーでテキストブロックを見出しブロックの上にドラッグするだけです。
また、各ブロックも、セクション同様に固有のカスタマイズ設定を持っている場合があります。例えば、ボタンブロックでは、ボタンのスタイル（枠線のみにするか、塗りつぶすかなど）を変更できることがあります。テキストブロックでは、文字の配置（左揃え、中央揃え、右揃え）を変更できます。これらの細かい設定を調整していくことで、デザインの細部にまであなたらしさを反映させることができます。
まとめ
Shopifyのテーマエディタは、専門知識がない初心者の方でも、プロフェッショナルなECサイトを構築できるように設計された、非常に強力でユーザーフレンドリーなツールです。今回解説した内容のポイントを改めて整理しましょう。
- 基本画面：「左の構造パネル」「中央のプレビュー画面」「右の詳細設定パネル」の3つで構成されている。
- セクション：ページを構成する「大きな箱」。追加、削除、並べ替えでページの骨格を作る。
- ブロック：セクションの中に入る「小さな部品」。テキストや画像など、具体的なコンテンツを編集する。
- テーマ設定：サイト全体のカラーやフォントなど、共通のデザインルールを一括で管理する場所。
テーマエディタの操作は、知識として学ぶよりも、実際に触ってみるのが上達への一番の近道です。「習うより慣れよ」の精神で、まずは恐れずにエディタを開いてみてください。
最後に、この記事を読み終えたあなたへの「最初の宿題」です。ぜひ、ご自身のストアで以下の3つのことに挑戦してみてください。
- トップページの「画像バナー」セクションの画像と見出しを、あなたのブランドを象徴するものに変更してみる。
- 「セクションを追加」から「特集コレクション」を選び、見出しを「当店のおすすめ」として、好きな商品を3つ表示させてみる。
- 「テーマ設定」の「カラー」を開き、ボタンの色をあなたのブランドカラーに変更してみる。
この3つをクリアできれば、あなたはもうテーマエディタの基本をマスターしています。失敗を恐れずに挑戦することが、あなたの理想のストアを実現するための、最も確実で楽しい一歩となるはずです。
コメント