今回紹介するShopify公式テーマは「Kagami」です。Shopifyのテーマに対してユーザーからの要望はさまざまありますが、「スマホでもパソコンでも関係なく、写真を大きくみられるサイトにしたい」、「ツイッターやインスタなどのSNSと連携させたい」といった内容のものをよく耳にします。
そんな方にオススメしたいテーマとして「Kagami」があります。
ページの構成は非常にシンプルですが、サイト全体に商品画像を大きく表示するレイアウトで、商品やブランドの魅力を視覚的にストア訪問者に訴えることができるテーマです。
今回は、そんな人気必至のテーマ「kagami」を、特徴やどんなサイトが作れるのかなどをもとに紹介していきます。
kagamiについて
Kagamiは、商品やブランドのイメージを強くストア訪問者に訴えるために、写真を大きく表示したグリッドレイアウト(要素を格子状に並べることによって、美しく整えられた印象のWebサイトを作るためのデザイン手法)で構成されるテーマです。
主な機能として、「スライドショーやビデオ」、「インスタのフィードの表示」、「FAQページ」「2種類のナビゲーションメニュー」などが挙げられます。
ECサイトで商品を買う際、お客様は実際に商品を手に取ってみることができないため、購入する、しないの意思決定において商品の写真が重要なファクターになっています。
スライドショーやインスタフィードの表示が備わっていることで、顧客に商品の魅力をECサイトで最大限伝えることができるのです。
また、「Kagami」にはレスポンシブデザイン(デバイスの画面サイズに依存しないwebサイトを構築するデザイン)が備わっているため、スマホでもパソコンでも、商品の画像を綺麗に見せることができ、お客様がどのデバイスからストアを訪問してきたとしても、直感的に商品やブランドの魅力を伝えることができるECサイトにすることができます。
二つのナビゲーションメニュー
kagamiの大きな特徴として、扱う商品の量やトップページのデザインに合わせて2種類のナビゲーションメニュー(任意のリンク先を設定してあるメニュー)を選ぶことができます。
メガドロップダウンメニュー
スクリーン幅をフルに活用した広い領域に多層構造のメニューが表示されます。
情報量やページ数が多いサイトにおいて使うと、お目当てのコンテンツを一目で探せるので、ユーザビリティが向上します。また、カテゴリー別にイメージを設定することができ、お客様に視覚的に商品を印象付けることができます。
参照:
GENEVA
サイドバー
スライドショーなど、メインの写真を活かしたい場合には、ナビゲーションメニューをサイドバーに表示することがオススメです。写真をより大きくみせる構成にすることができます。
商品数があまり多くなく、ナビゲーションメニューがそんなに複雑な構造を必要としていないときは、こちらのほうが使いやすいと思います。
基本ページのデザイン
続いて、商品の詳細や一覧、ブログ記事を表示するページのデザイン・機能について紹介します。
基本ページは、主に3つです。
商品ページ
簡素な構成ですが、スライドショーが備わっていたり、商品の説明を記載するエリアも十分確保されていたりするので、非常に使い勝手の良い構成になっています。
また、さらに商品の詳細を書きたいときやや商品画像のギャラリーを一覧で表示したい時は、ページの下側にそのスペースも設けられているので、顧客に商品の魅力を伝えるという面では最高のテーマになっています。
カテゴリー(コレクション)・商品一覧ページ
商品一覧ページも商品画像が中心のデザインになっています。各カテゴリーの詳細がページの上側に追加できたり、カテゴリーやタグによる商品の絞り込みも可能だったりと、機能的にも十分といえます。
ブログ記事ページ
トップページにはブログ記事の一覧が下の画像のような感じで表示されます。日付やコメントなどの細かい情報もそろっていて、かつレイアウトも見やすく整っています。
PCで見るとサイドに余白が残っていて寂しさがありますが、スマホなどで見た場合には問題ないでしょう。
kagami の販売価格とサイト例
「Kagami」は「Shopify Themes」で販売されている有料のテーマで、価格は180ドルになります。Shopifyの公式テーマの中だと平均的な価格になっています。
また、kagamiでどんなサイトが作れるのかについては、「Kyoto」「Baptiste」「Geneve」などのデモサイトで紹介されています。いずれのサイトもきれいでインパクトのある写真を用いて、顧客に印象深く魅力を伝えられていることがわかります。
おわりに(どんな人にオススメか?)
以上、Shopify の公式テーマ「kagami」の紹介でした。
シンプルでインパクトのあるレイアウトで、かつレスポンシブ対応や絞り込み機能など、必要な機能はそろっているため、質の高いサイトを作りたい方にもオススメできるテーマになっています。
ぜひ、「kagami」を使って、魅力溢れるウェブストアを作って見てください。