ブロックチェーン・AI・システム開発の株式会社INDETAIL

【moremall】カッコいいショップを作る3つのポイント

2014.08.08
Peeko

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

こんにちは!先日金縛りになった夢を見たPeekoです。

ベッドでゴロゴロしていたらそのまま寝てしまったようで、金縛り状態で目が覚めました。
すると部屋のドアから見知らぬ女性が入ってきて、私の隣に横になったのです。

朝起きたら女性は居なかったのであれは夢だったのでしょうね…

さて、7/14にグランドオープンした【moremall(モアモール)】ですが、
続々と新しいショップがオープンしていて嬉しいです!

モアモールのショップデザインは自由度が高く、色々なオリジナルサイトを作ることができますが、自由度が高すぎて逆に迷うという声もちらほら聞こえてきます。

というわけで今回はモアモールショップカスタマイズ時の3つのポイントをお伝えしたいと思います。

テンプレートは基本的な形の「Minimal」を使っていきたいと思います。

テーマカラーを決める!

まずはショップのテーマカラーを決めましょう。
配色設定では「文字色」「背景色」「アイテム文字色」「アイテムBOX」「検索エリア」の色を決めることができます。
たくさん色を使う配色は難易度が高いため、テーマカラーを決めてその色を活かす作り方をした方が、簡単でまとまりが良いです。

テーマカラーを1色決めましょう。

見本ではテーマカラーを「ネイビー」として、ネイビーを差し色で使ったパターン(左)と「背景色」にしたパターン(右)を作りました。

テーマカラーを決める!

(左)はロゴをネイビーにしたため、「背景色」はネイビーが目立つように白にしました。
「文字色」「アイテム文字色」「アイテムBOX」は背景色に対して見やすい色にしています。
また、差し色として「検索エリア」もネイビーにしました。

(右)は「背景色」にネイビーを使い、ロゴを目立つように白にしました。
「文字色」「アイテム文字色」「アイテムBOX」は(左)と同じく背景色に対して見やすい色にしています。
「検索エリア」をロゴと同じ色にしてメリハリをだしました。

このように、テーマカラーを決め、全体に使う、またはポイントに使い「文字色」「アイテム文字色」「アイテムBOX」はテーマカラーが映えるように設定すると、全体的にきれいにまとまります。

スライダーは横長の画像サイズのものを使う

「Minimal」ではスライダー画像は横長のものを使うことをお勧めします。
縦幅があり過ぎると、商品写真が画面の下の方に表示されてしまうため、ファーストビューで商品写真が見えなくなってしまいます。

※ファーストビューとはサイトにアクセスした際ユーザーが最初に見る範囲のことを言います。この範囲は画面の解像度に依存しているため、はっきりと定まっているものではありません。おおよそ600px~800px程度。

スライダーは横長の画像サイズのものを使う

スライダーに推奨画像サイズが記載されていますので、これを参考サイズにすると良いでしょう。
※推奨画像サイズ : 横幅 800px~1,000px × 縦幅: 150px~200px

推奨画像サイズが記載されています

商品写真が大事

商品写真は商品の魅力を伝える最も大事なものですが、ショップを魅力的なデザインにするためにも重要です。

アイテム登録の1番最初の画像が、一覧で表示される画像になりますので、この写真は特に気合を入れましょう。

商品写真が大事(アイテム管理画面)

一覧では画像は正方形で表示されるため、1番最初の画像は正方形のものを登録しましょう。

また、写真自体が商品の魅力を伝えられる写真であることも重要です。

どうやったら魅力のある写真になるのかわからないという方のために、moremall(モアモール)では商品の写真撮影や画像編集のサブメニューも用意していますので、利用してみるのも良いかと思います。

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

「いいね」ボタンを押すと、最新情報をすぐに確認できます。