logo header
logo header
logo header
logo header
  • 2014.09.19
  • 技術ブログ

【moremall】ECサイトテンプレート「Light&Dark」をカッコよく使うための3つのポイント

※2017.07.31追記: 「MOREMALL(モアモール)」事業、サービス終了のお知らせ

こんにちは!寒さに弱いPeekoです。
朝夜は寒くなり、札幌はすっかり秋になりました。
すでに寒さに震えているので、冬になるのが恐ろしいです。

さて、弊社サービスのmoremallは9/1に新しいECサイトテンプレート「Light&Dark」がリリースされました。
今回はこのテンプレートをカッコよく使うためのポイントをお伝えしたいと思います!

ECサイトテンプレート「Light&Dark」

「Light&Dark」は少数のアイテムを魅力的に見せるために設計されたデザインテンプレートです。
これまでのテンプレートよりもカスタマイズ箇所が少ないため、すぐにショップをオープンさせることができます。

アイテム登録時のポイント!

moredesk(管理画面)のアイテム管理でアイテムを登録する際、1番目の画像が商品画像として表示され、2番目の画像が商品背景として表示されます。

アイテム登録時のポイント!

例では1枚目にデニムだけの写真、2枚目にデニムを着用した女性が映っている写真を登録しています。
画像が1枚だけ登録されている場合は、商品画像・背景ともに1枚目の写真が表示されます。

商品一覧の写真形状を選択

商品一覧の写真形状を選択というとわかりにくいかもしれませんが、画像の赤い四角の部分に表示される写真の形状のことです。

商品一覧の写真形状を選択

写真の形状は「オリジナル画像」「正方形トリミング」「円形トリミング」より
選択することができます。

・オリジナル画像
登録した時の画像サイズそのままの画像比率で表示されます。

・正方形トリミング
登録した画像が正方形にトリミングされて表示されます。
縦長や横長の画像が登録されている場合は、画像が途切れて表示されます。

・円形トリミング
登録した画像が正円にトリミングされて表示されます。
正方形トリミングの円形バージョンです。

トリミング例

様々な画像サイズのアイテム写真を登録している場合は、正方形トリミングや円形トリミングを選ぶとスタイリッシュにまとまりますし、自分で調整した画像比率で表示したい場合は、オリジナル画像を選んで頂ければと思います。

ヘッダーカラーを選択

上部のショップ名や検索ボックス、カートを表示する領域と下部のページングを表示している領域のカラーをライトとダークの2色から選ぶことができます。
イメージ的にはライトは透明感のあるサイト、ダークにするとクールなサイトになります。
商品やショップイメージに合った方を選んで頂ければ良いかと思います。

ヘッダーカラーを選択

また、このテンプレートのデザインはアイテム写真によって印象が大きく変わるため、アイテムを1つ以上登録してからショップデザインをカスタマイズすることをおすすめします。

アイディア次第でカッコいいショップを作ることができますので、色々試してみてあなただけのオリジナルショップを作ってみてはいかがでしょうか?

ともに世界をアップグレードできる、そんな日を夢見て。
Upgrade the World!