デザイナー視点で見るShopifyのテーマデザイン！セクションの種類からカスタマイズの方法まで解説！
Shopifyには無料・有料問わず多くのデザインされたテーマが用意されており、要望に合わせてテーマのカスタマイズをすることができます。テーマエディタを使用して、カラースキーム、フォント、レイアウト、ヘッダー、フッターなどを調整することができます。
今回はデザイナーの目線から、Shopifyのテーマやカスタマイズ性についてまとめてみたいと思います！
Shopifyのデザインカスタマイズ
Shopifyは、ECストア構築の世界的プラットフォームで、使いやすさ、豊富なテーマ、モバイルフレンドリーなデザインが特徴です。カスタマイズ性も高く、アプリやプラグインで機能を拡張でき、セキュリティ対策も万全。美しいデザインとユーザーエクスペリエンスを重視し、スマホでのアクセスも重視されています。SEO対策やマーケティングツールも充実。
ある程度コーディングの知識があれば、デザインのカスタマイズもかなり自由構築できます。
テーマのカスタマイズ
Shopifyでは、ページごとに異なるデザインやコンテンツを適用できるカスタムページテンプレートを作成できます。これにより、商品ページ、カテゴリページ、コンタクトページなど、異なる目的に合わせたレイアウトを作成することが可能です。
テーマで用意されたセクションを利用することで、ノーコードで編集・修正することが可能です。
さらに高度にカスタマイズしたい場合は、オリジナルのセクションを作成することもできます。
ノーコードでカスタマイズができる箇所
テーマにより異なりますが、以下のような箇所は基本的にノーコードでカスタマイズが可能です。
- 画像とテキストの配置位置
- ボタン/背景色などの色指定
- フォントサイズの指定
- ブログのタイトルやタグ表示
以下の記事もおすすめ！
セクションの種類
Shopifyには多くのテーマがあり、テーマごとにセクションのデザインが異なります。
かなりこだわったものから、シンプルで汎用性の高いもの、動画の埋め込みやブログの表示も可能です。
Shopifyの無料テーマであるDawnを例にいくつかご紹介します。
スライドショー
複数の画像が登録できるスライドショーはほとんどのテーマで用意されています。
動画
動画もほとんどのテーマで埋め込むことができます。Youtubeや動画の直接埋め込みで自動再生をするなどの表示方法があります。
ページ
Shopifyの「ページ」で作成したものを呼び出すことができます。すでに作成したページを他のページで呼び出したいときなど、利用頻度は少ないですが便利な機能です。
メルマガ登録
Shopifyでは標準でメルマガのシステムを利用することができます。メルマガの登録フォームを挿入することができます。
デザインを変更したい場合に便利！カスタムcssの追加
レイアウトやデザインを変えたい時は、カスタムのcssを追加して変更することができます。
1 custom.cssを追加
以下にcustom.cssというファイルを配置します。
Shopify > テーマ > コードを編集 > アセット > 新しいアセットを追加する
2 theme.liquid内で読み込む
以下のliquid内に先ほど作成したcssを<head></head>内に読み込みます。
Shopify > テーマ > コードを編集 > theme.liquid
上記でcustom.cssがサイト全体に読み込まれるため、追加で変更したい箇所がある場合はcssを記載することができます。
同じような手順でjsの読み込みも可能です。
セクション内に個別にcssを読み込むこともできます。
まとめ
Shopifyはテーマの種類が豊富で、デザインもモダンで操作性も高く、管理画面のUIもよくできています。
必要なブロックを組み合わせることで、簡単かつスピーディーにオンラインストアを構築することができます。
さらにこだわったデザインを作成したい場合、弊社ではカスタムデザインのサイト作成事例も多数ございます。
お気軽にお問い合わせください！
以下の記事もおすすめ！
OTHER ARTICLES
View all
