成功したショップは知っている

成功したショップは知っている
トップページデザイン、10のポイント

Tシャツを企画・制作・販売をしているショップ「GbM」。カラフルでポップなデザインが若い人をひきつけます。
1.販売する商品の特徴と客層を考える
販売する商品を意識しながら、配色、タイトル、ロゴ、壁紙、メニューなどのデザインを決めていきます。例えば、若者向けの商品ならば明るいポップなデザイン、高級品ならば落ち着きのある格調の高いデザインといったような感じですね。

2.何を販売しているか、一目で伝わる画像を載せる
商品画像、または商品に直結するイメージ画像(果物屋なら、フルーツの盛り合わせなど)をすぐ目に入る位置に載せましょう。訪れた人が販売している商品に興味があっても、何を販売しているショップかすぐにわからなければ、ページを閉じられてしまうかもしれません。

3.先に文章と商品画像を用意しておく
あいさつ、商品紹介、利用方法、店長紹介などの文章を先に書いておくと、文章を入れるスペースがどれぐらい必要かわかるので、デザインをしやすくなります。まだ内容を決められない場合は、サンプルとなる下書きを作っておきましょう。

また、オープン時に販売する商品の画像をデジカメで撮影して用意しておくと、載せる商品画像を考えに入れながら、デザインすることができます。

在宅ワーク・初心者も経験者も、そしてクライアントもサポート

4.ショップ名を目立たせる
お客さまは、ショップ名を覚えると、ショップのことをはっきりと意識してくれるようになります。なので、ショップ名が他のコンテンツにまぎれるデザインや、目立たない色はNGです。目立たせるためにサイズを大きくすることが多いですが、本文の文字サイズとのバランスを考え、6:1ぐらいになるよう調整してください。

ショップ名やロゴのインパクトが弱いと感じたら、周りに空白をつくると目立ちます。また、英字のみのショップ名は、日本人には認識されにくいので、カタカナ表記を組み合わせて使うといいかもしれません。

5.ファイルサイズの大きい動画や画像は使わない
トップページは動画を置かない方がいいでしょう。表示に時間がかかると面倒に思われて、何度も訪れるのを避けられてしまいます。同じ理由でトップページで使用する画像は、ファイルサイズを極力軽くする必要があります。


色を十二色に分けた十二色相環です。赤を基点にすると、補色は緑青。近似色は赤の隣にある赤紫と橙になります。

在宅ワーク・初心者も経験者も、そしてクライアントもサポート

6.配色の基本は2色+1背景色
ページ配色の基本は「メインカラー」「サブカラー」「背景色」の3色です。
「メインカラー」は商品のイメージに近い色を使うと調和しやすいです。花や植物ならば緑や茶色、食品ならば食欲をそそるオレンジなどの暖色系、などですね。
「サブカラー」はメインカラーの「近似色」または「補色(反対色)」を使うと調和しやすいです。
「背景色」は白が基本です。清潔感があり、商品が目立ちやすくなります。

7.文字とその他のバランスは4:6〜3:7
サイトの画面は、文字量が多くなりすぎると見づらくなります。特に初心者は文字量を減らした方が、すっきりと仕上がりやすくなります。文字情報を多く入れたい場合でも、文字:その他=3:7、多くても4:6程度に抑えましょう。

8.サイドメニューとメイン画面の比率は3:7
サイドメニューを作る場合、メイン画面との大きさの比率は3:7ぐらいにすると、バランスがよくなります。

また、メニューバーを設置する場合、長さは画面の端から端まで伸ばします。メニューバーを短くしてしまうとメインコンテンツとの繋がりが薄く感じられるようになってしまい、まぎれてしまいます。

9.商品メニューは商品種別にまとめる
商品メニューは、とにかくわかりやすいことが大切です。特にトップページのメニューはお客さまが商品を探すときに一番意識する商品種別がベストです。例えば、お酒の専門店ならば「日本酒」「ワイン」「焼酎」などのように分けます。色別や材料別などのメニューは、あくまでサブメニューと考えましょう。

10.デザインが決まらないときは、商品紹介ページから先に作る
トップページのデザインがなかなか決まらないときは、商品紹介のページを先に考えましょう。要素が少ないのでデザインしやすく、ショップの柱である商品画像を入れるのでショップのイメージを表現できるからです。商品紹介ページを作ると、自然とトップページのデザインも決めやすくなります。


いろいろとデザインのコツを紹介しましたが、一番大事なのは、どのようなデザインならお客さまは買い物しやすいか、考えることです。それさえ忘れずにデザインをすれば、あなたのすばらしいオリジナルショップができるはずです。


在宅ワーク・初心者も経験者も、そしてクライアントもサポート







×

この広告は1年以上新しい記事の投稿がないブログに表示されております。