9.制作③テーマの選定

コンテンツの整理ができたら、使用するテーマを選びます。

今回は、案件でよく使う無料テーマと有料をご紹介させていただきます。

テーマの選び方についてはSTEP2の「テーマの選び方」をご確認ください。

無料テーマ
  • Dawn
有料テーマ
  • Be yours
  • Masonry
  • Impulse
  • Prestige
  • Expanse
  • Empire
  • Pipeline
  • Focal
  • Broadcast
  • Symmetry

※テーマを選ぶ際には、5つほどテーマをインストールして編集画面でカスタマイズをしながら要件に合うテーマを選定していきます。

しょうこ

使用するテーマの候補が決まったら、問題がないかディレクターに確認します。2〜4つ候補を挙げて、選定した理由やテーマの特徴を添えて提案するようにしましょう◎

目次

無料テーマ

Dawn

編集画面が日本語で、使いやすいテーマです。

無料で利用できるテーマのため有料テーマと比較するとデフォルトで備わっていない機能も多く、フルスクラッチの案件でよく使用されます。

無料テーマの中でも最も利用機会の多いテーマです。

◯テーマ紹介ページ
https://themes.shopify.com/themes/dawn/styles/default?locale=ja

使われているサイト

Dawnの面影が残っておらず、Dawnとわからないくらいコーディングされているサイトも沢山あります。

有料テーマ

Be yours

編集画面が日本語で、使い勝手の良いテーマです。

ブログのサムネイルを非表示にすることができ、公開後ブログにサムネイルが設定されるかわからない案件におすすめです。

スマートフォン版では、メニュー項目を画面下に常に表示させることができる「モバイルドック」を利用することができます。

(モバイルドック)

◯テーマ紹介ページ
https://themes.shopify.com/themes/be-yours/styles/beauty?locale=ja

使われているサイト

Masonry

画面左側にメニュー項目を表示させることができるテーマです。

メニューを上部ではなく、サイドに表示させたい案件でよく使用します。

有料テーマの中でも価格はそこまで高くなく、編集画面は英語中心です。

◯テーマ紹介ページ
https://themes.shopify.com/themes/masonry/styles/chameleon?locale=ja

使われているサイト

Impulse

カスタマイズ画面の中でコンテンツ幅とセクション上下のパディングの調整ができませんが、使用しているサイトの多い人気テーマです。

商品一覧ページではサイドバーに色や在庫状況、価格の絞り込み機能を固定することができ、販売点数が多くても絞り込みを利用しながら商品を探しやすい作りとなっています。

しょうこ

コンテンツの上下パディングの調整ができないため、コードでの編集がNGな案件で選定すると詰まったような見た目になりやすいです;^^

◯テーマ紹介ページ
https://themes.shopify.com/themes/impulse/styles/clean?locale=ja

使われているサイト

Prestige

アパレル系のサイトでよく使われている人気のテーマです。

カスタマイズ画面の中でコンテンツ幅の編集ができず、上下のパディングのみ調整することができます。

画像やボタンアニメーションがスタイリッシュな印象に合わせやすく、視覚的に高級感を出しやすいことが特徴です。

デフォルトの状態でLINEのアイコンを表示させることができる、数少ないテーマの一つです。

レビュー数が多く、評価の高い人気テーマです。

◯テーマ紹介ページ
https://themes.shopify.com/themes/prestige/styles/couture?locale=ja

使われているサイト
しょうこ

アパレル系のサイトに限らず、日本で使われている有料テーマの中では最も多いのでは?というくらい使用されているテーマです!

Expanse

ブログをサイドに表示させることができ、ブログを有効活用したいクライアントに人気のテーマです。

画像が表示されるアニメーションに特徴があります。

ExpanseもPrestige同様、導入数が非常に多いテーマです。

◯テーマ紹介ページ
https://themes.shopify.com/themes/expanse/styles/modern?locale=ja

Empire

商品数が100を超えるような、販売する商品の多いサイトで検討されることの多いテーマです。

扱う商品が少ないストアで使用するケースはあまりありません。

◯テーマ紹介ページ
https://themes.shopify.com/themes/empire/styles/supply?locale=ja

使われているサイト

Pipeline

洗練されたデザインで、シンプルな雰囲気や上品な雰囲気に合わせやすいテーマです。

見出しの下に表示される線や商品一覧を表示できるセクションに表示されるスライダーボタンに丸みがあることで、スタイリッシュになりすぎずどこか優しさのある印象に仕上げやすいことが特徴です。

◯テーマ紹介ページ
https://themes.shopify.com/themes/pipeline/styles/bright?locale=ja

Focal

画像アニメーションに特徴のある、スタイリッシュなテーマです。

高級感のあるデザインに仕上げやすく、商品点数の多いサイトでよく使用されます。

Prestigeと同様に、デフォルトの状態でLINEのアイコンを表示させることができる数少ないテーマの一つです。

◯テーマ紹介ページ
https://themes.shopify.com/themes/focal/styles/carbon?locale=ja

使われているサイト
しょうこ

Focalは使いやすい機能がたくさん揃っていますが、シュッと動く画像アニメーションが扱う商品や目指す雰囲気に合わないこともあります;^^
高級でかっこいい雰囲気のサイトを作る場合におすすめです!

Broadcast

使えるセクション数が多く、ジャンル問わず使いやすいテーマです。

PC版SP版ともにブログの記事ページに最近の記事を掲載することができ、ブログの回遊を上げたいクライアントに人気です。

◯テーマ紹介ページ
https://themes.shopify.com/themes/broadcast/styles/bold?locale=ja

Symmetry

スタイリッシュで洗練されたデザインに仕上げやすく、使いやすいセクションが豊富に用意されているテーマです。

複数の商品やコレクションをグリッドでもカテゴリーでも表示させることができます。

動画を差し込めるセクションが他のテーマと比較すると多く、動画を複数箇所で活用したい案件におすすめです。

◯テーマ紹介ページ
https://themes.shopify.com/themes/symmetry/styles/chantilly?locale=ja

使われているサイト

テーマの提案の仕方

使用するテーマの候補を選んだら、ディレクターもしくはクライアントに提案をしていきます。

提案する際は、テーマの現在の価格、テーマが使われているサイト事例、テーマの特徴などを記載した上で提案していきましょう。

スプレッドシートにまとめ、比較してもらうのもおすすめです◎

▼テーマの提案例(ローコードで4つ比較する場合の例)
https://docs.google.com/spreadsheets/d/1LHymla-UfekpwKGJSywrUw-bjnV1bNyRXd7zM-JShrg/edit?gid=0#gid=0

ノーコードやローコードの案件の場合は、あまりコードで編集のされていないサイトをサイト事例として挙げるとクライアントにイメージしていただきやすくなります。

目次