【Shopify公式テーマ】Kagamiを使ってECサイトの写真をさらに魅力的に見せよう! | Shopifyを活用した越境・国内ECサイトの制作・運用など役立つ情報をお届け|Shopify WORKS

2019.6.12

【Shopify公式テーマ】Kagamiを使ってECサイトの写真をさらに魅力的に見せよう!

今回紹介するShopify公式テーマは「Kagami」です。Shopifyのテーマに対してユーザーからの要望はさまざまありますが、「スマホでもパソコンでも関係なく、写真を大きくみられるサイトにしたい」、「ツイッターやインスタなどのSNSと連携させたい」といった内容のものをよく耳にします。

そんな方にオススメしたいテーマとして「Kagami」があります。
ページの構成は非常にシンプルですが、サイト全体に商品画像を大きく表示するレイアウトで、商品やブランドの魅力を視覚的にストア訪問者に訴えることができるテーマです。

今回は、そんな人気必至のテーマ「kagami」を、特徴やどんなサイトが作れるのかなどをもとに紹介していきます。

kagamiについて

Kagamiは、商品やブランドのイメージを強くストア訪問者に訴えるために、写真を大きく表示したグリッドレイアウト(要素を格子状に並べることによって、美しく整えられた印象のWebサイトを作るためのデザイン手法)で構成されるテーマです。

主な機能として、「スライドショーやビデオ」、「インスタのフィードの表示」、「FAQページ」「2種類のナビゲーションメニュー」などが挙げられます。

ECサイトで商品を買う際、お客様は実際に商品を手に取ってみることができないため、購入する、しないの意思決定において商品の写真が重要なファクターになっています。

スライドショーやインスタフィードの表示が備わっていることで、顧客に商品の魅力をECサイトで最大限伝えることができるのです。

また、「Kagami」にはレスポンシブデザイン(デバイスの画面サイズに依存しないwebサイトを構築するデザイン)が備わっているため、スマホでもパソコンでも、商品の画像を綺麗に見せることができ、お客様がどのデバイスからストアを訪問してきたとしても、直感的に商品やブランドの魅力を伝えることができるECサイトにすることができます。

二つのナビゲーションメニュー

kagamiの大きな特徴として、扱う商品の量やトップページのデザインに合わせて2種類のナビゲーションメニュー(任意のリンク先を設定してあるメニュー)を選ぶことができます。

メガドロップダウンメニュー

スクリーン幅をフルに活用した広い領域に多層構造のメニューが表示されます。
情報量やページ数が多いサイトにおいて使うと、お目当てのコンテンツを一目で探せるので、ユーザビリティが向上します。また、カテゴリー別にイメージを設定することができ、お客様に視覚的に商品を印象付けることができます。

Shopify公式テーマKagami

参照:
GENEVA

サイドバー

スライドショーなど、メインの写真を活かしたい場合には、ナビゲーションメニューをサイドバーに表示することがオススメです。写真をより大きくみせる構成にすることができます。

商品数があまり多くなく、ナビゲーションメニューがそんなに複雑な構造を必要としていないときは、こちらのほうが使いやすいと思います。

Shopify公式テーマKagami

基本ページのデザイン

続いて、商品の詳細や一覧、ブログ記事を表示するページのデザイン・機能について紹介します。
基本ページは、主に3つです。

  1. 商品ページ
  2. カテゴリー(コレクション)・商品一覧ページ
  3. ブログ記事ページ

商品ページ

簡素な構成ですが、スライドショーが備わっていたり、商品の説明を記載するエリアも十分確保されていたりするので、非常に使い勝手の良い構成になっています。

また、さらに商品の詳細を書きたいときやや商品画像のギャラリーを一覧で表示したい時は、ページの下側にそのスペースも設けられているので、顧客に商品の魅力を伝えるという面では最高のテーマになっています。

カテゴリー(コレクション)・商品一覧ページ

商品一覧ページも商品画像が中心のデザインになっています。各カテゴリーの詳細がページの上側に追加できたり、カテゴリーやタグによる商品の絞り込みも可能だったりと、機能的にも十分といえます。

ブログ記事ページ

トップページにはブログ記事の一覧が下の画像のような感じで表示されます。日付やコメントなどの細かい情報もそろっていて、かつレイアウトも見やすく整っています。
PCで見るとサイドに余白が残っていて寂しさがありますが、スマホなどで見た場合には問題ないでしょう。

Shopify公式テーマKagami

kagami の販売価格とサイト例

「Kagami」は「Shopify Themes」で販売されている有料のテーマで、価格は180ドルになります。Shopifyの公式テーマの中だと平均的な価格になっています。

また、kagamiでどんなサイトが作れるのかについては、「Kyoto」「Baptiste」「Geneve」などのデモサイトで紹介されています。いずれのサイトもきれいでインパクトのある写真を用いて、顧客に印象深く魅力を伝えられていることがわかります。

Shopify公式テーマKagami

おわりに(どんな人にオススメか?)

以上、Shopify の公式テーマ「kagami」の紹介でした。

シンプルでインパクトのあるレイアウトで、かつレスポンシブ対応や絞り込み機能など、必要な機能はそろっているため、質の高いサイトを作りたい方にもオススメできるテーマになっています。

ぜひ、「kagami」を使って、魅力溢れるウェブストアを作って見てください。

あなたにおすすめの記事

よく読まれている記事

この記事を見た人はこんな記事も見ています

Shopify Works blogをご覧のみなさまへ

Shopify works Blogでは、Shopifyのアプリや構築制作方法、運用マーケティング手段についてはもちろん、自社のECサイトを構築・運用する 上で必要な情報を紹介しております。現在日本では開発業者の数が少ないため、検索しても役立つ情報が少ないことが現状です。そのためSh opify works Blogでは、今後Shopifyの導入を検討している企業担当者様へ向けて、正確な役立つ情報を発信して行くことを心掛けております。
企業担当者様については、Shopify導入に対してご不明点や懸念事項がございましたら、お問い合わせ窓口よりお気軽にお問い合わせください。
また他カートをご利用中でShopifyへの乗り換えをご検討中の企業様についても、ご支援が可能でございます。世界シェアNo.1のECプラットフ ォームが日本で展開を初めて2年が経ちましたが、Shopify Works blogではさらにShopifyの魅力を発信していきます。