ECサイトのデザインで学んだこと【新人Webデザイナーの記録】

久しぶりの投稿。

最近、初めてメイクショップでのECサイトのデザインを担当したので、そこで学んだことを記録しておこうと思う。

 

目次

“MakeShop”は制限が多い

メイクショップはご存知だろうか。

GMOが運営しているネットショップ構築サービスだ。

MakeShop メイクショップ

Webサイト制作会社に依頼するよりも低価格で簡単にショップを立ち上げられるようだ。

今回の案件では、MakeShopを利用したECサイトのデザインを、ということだった。

初めはよく分かっていなかったが、制作し始めると制限が多いことがわかった。

全然自由に作れない!

これからMakeShopでショップを立ち上げようとしている人や、デザインをしようとしている人の参考になればいいな。

 

制限1:写真は正方形しか使えない

写真の縦横比を変えられないようで、写真の横幅を大きくすると、その分縦幅も大きくなってしまうので、下の文章が目立たなくならないように調整が必要だ。

制限2:デザインできないボタンがある

「カゴに入れる」系のボタンは四角に文字を入れるくらいしかできないらしい。

角丸くらいならできるらしいが。

これのせいで他のボタンと同じデザインにできなかったのが残念だ。

制限3:価格表示に“¥”が使えない

おしゃれなイメージのサイトなら、価格表示に円よりも¥を使いたいと思うが、それは難しいようだった。

円を使わないといけないルールがあるとは…

制限4:お知らせには謎の[]が必要

お知らせのコンテンツは、謎のかっこ[]が必要らしい。

[2019.10.10] お知らせテキストお知らせテキスト

みたいな感じ。

普通のサイトにはない表示の仕方なので戸惑ったが、仕方がない。

こういう事情で微妙なデザインになってしまうのだなぁ。しみじみ。

ECサイトと通常のWebサイトとの作り方の違い

今回初めてECサイトのデザインをしたのだが、最初にデザインをして提出したら、「ECサイトであることを意識して」と返されてしまった。

先輩から色々指摘をしてもらい完成したので、そこで学んだことをまとめてみた。

気をつけること1:商品購入がメインであることを念頭に

ECサイト・オンラインショップとなると、ほとんどのユーザーの目的が「購入」であることを忘れてはいけない。

商品のこだわりや魅力をだらだら並べるよりも、まずサイトに着いた時点ですぐに商品をポチッとカートに入れられる設計であるべきである。

メインビジュアルの幅は狭めにし、すぐに商品が目に入るようにする

気をつけること2:商品とテキストのかたまり感を大事に

よく先輩から言われるのは「かたまり感」。

生活購買店 reed

上のサイトを例に挙げる。

写真とテキストがセットとして1つにまとまっている感じが、「かたまり感」だ。

そして、他の商品とのマージンを適度にとり、区切りを認識させる。

気をつけること3:ECだからって単調にしない

私の場合、制限があると、あれもできないこれもできないと思ってデザインも消極的になってしまう。

しかし、ボタンのデザインに凝ってみたり、背景画像を作り込んでみたり、できることは多い。

 

終わりに

さて、初めて挑戦したECサイトデザイン。

やってみたいデザインができないこともあったけれど、その制限の中で作ったことで、色んなことを学べたと思う。

そして、こうして記録しておくことでさらに記憶にとどめておけるだろう。

これからもデザインの勉強を頑張っていきたい。

ではまた。