【ECサイト開業の心得】ネットショップはこう作る!~デザイン編~

CATEGORY :  自社EC売上UP
STAFF :  ゆりーか

こんにちは。広報担当のゆりーかです。
今回は2章ということでネットショップのデザインについてお話します。ネットショップのデザインとは何なのか・どんな作業をしているのかを弊社のフローに沿ってご紹介します。デザイナーのプチインタビュー付き!

目次
・ネットショップのデザイン
・売れているネットショップのデザイン
・ネットショップのデザインにもトレンドがある
・デザインの制作フロー
・デザイナーに聞いてみた!デザインで大切なこと

ネットショップのデザイン

1章で制作したワイヤーフレームをもとにサイトのデザインを決めていきます。ショップのロゴ・ファーストビューのバナー・カテゴリーや検索メニューのデザイン・買い物かごやランキングのアイコンなどなど。ネットショップの見た目となる部分を作っていきます。

その際に大切なことは購入者目線でユーザビリティを考えたデザインを作ることです。まずユーザビリティとは簡単にいうとターゲティングしたユーザーがそのサイトを使いやすいと感じる度合です。
例えばターゲットの年齢が高めなのであれば、フォントサイズを大きくしたりアイコンにテキストで説明を入れるなど。実際にユーザーの目線になって、ユーザーが使いやすい・見やすい・商品を探しやすいと思ってもらえるようなデザインにしていきます。
そのためにはディレクターとの連携が非常に重要になります。商品の魅力をデザインでより、伝わるようなサイトに仕上げていきます。

売れているネットショップのデザイン

売れているネットショップは3つのポイントがしっかりと押さえられています。
それは
・商品をよく理解していること
・その強みを理解していること
・商品を引き立つ宣伝方法を理解していること
です。逆を言えばこの3つのポイントを押さえていれば売れるネットショップになるというわけです。

サイトデザインでも商品を引き立て、さらなる魅力を伝えることが可能になります。
ターゲット層・流れ・心理をつくユーザビリティと、見ている方にストレスを与えない配色・構成(レイアウト)が出来ているデザインが売れるネットショップにつながります。

人に例えると「ファッション」を意味します。

その人に見合ったファッションだから引き立つ魅力・個性が生まれます。
オリジナル商品で一点ものの商品であれば自然と個性的なサイトになりますし、どこでも売っている商品・似た商品であれば購入者が買いやすいサイトになります。

時代とともにデザインは変化していきますが、基本は変わりません。
まずは商品を知って、その商品を買っていただくターゲットの見極めができれば、デザインも自然に生まれていきます。

ネットショップのデザインにもトレンドがある

2016年のトレンドといえばカード型デザイン・シネマグラフ・パララックス・ストーリーテリングといった言葉をよく聞かれたかと思います。
ネットショップでのデザインは、インパクトを与えることで閲覧者の目を惹くことも必要です。

2017・2018年と毎年トレンドは変化し続けます。
例えば2017年のトレンドであれば下記のようなものがあげられます。

スプリットスクリーン

画面を大きく分割するレイアウトのこと。コンテンツを強調できるため、お問合せや購入につながるボタンをクリックしてもらいやすくなる。シンプルではあるが伝えたいことを目立たせることが可能。

パララックスデザイン

視差効果を使ったデザインのこと。前後の要素の動くスピードを変化させて、奥行きや立体感を表現する。

参考サイト(下記画像クリック)

レスポンシブデザイン

PC・スマホ・タブレットなどさまざまなデバイスの画面サイズに合わせて、レイアウトやデザインを調整すること。

マテリアルデザイン

Googleが2014年にガイドラインとして発表したデザイン。直訳する「物質デザイン」で、実際に触れられるように見せたデザインのこと。統一されたデザインや動き・レイアウトで誰が見てもわかるように設計されている。

ミニマルデザイン

ページを構成する要素(テキスト・写真・色・機能etc)を最大限減らしたり、白い空間を多く取るなどしてシンプルに仕上げたデザインのこと。「Less is more」の心を大切にしている。

モダンレトロデザイン

くすんだ色見やヴィンテージ感のあるフォントなどを用いたデザイン。80~90年代頃を思い浮かばせる設計になっている。

シネマグラフデザイン

画像の一部だけ動きをつけたGIFアニメーションのこと。トップページなどに動画を使ったサイトが増えているが、動画に比べGIFの方がファイルサイズが小さいため、表示スピードの低下を抑える効果もある。

など。出せば出すほどでてきます。
扱っている商品からトレンドを見つけることができればプラスになります。ですが選択肢を間違えてしまうとマイナス効果にもなってしまいます。
トレンドに囚われすぎたデザインは、よくないサイトにもなってしまうのです。そこを注意してトレンドを取り入れていきましょう。

デザインの制作フロー

まずディレクターから素材や文章・依頼書をもらいます。依頼書にはターゲット・ショップのテーマカラー・どんなバナーが必要なのか・キャッチコピーや必ず入れたい文言・アイコンの有無など、どのようなネットショップにするのかがこと細かに書かれています。その指示書や構成案(ワイヤーフレーム)をベースにしてデザインを仕上げていきます。

ただディレクターが制作した指示書通り言われたままデザインを作るというわけではありません。ときにはデザイナーからの提案で構成を決めることもあります。打ち合わせを重ね、意見を出し合いながら形にしていくのです。そのためにはコミュニケーション能力と提案力は非常に重要となります。

デザイナーに聞いてみた!デザインで大切なこと

Webデザイナーに直撃インタビュー!!
ネットショップのデザインをする上でのポイントや大切なことを聞いてみました!

ネットショップのデザインをする上で心がけていることは何ですか?

デザインが商品よりも目立たないことを心がけています。商材から導けるものを徹底的に分析し、ユーザーが買いやすいサイトの制作をしていきます。
情報収集はもちろん、ネットの情報以外にも同業者の実店舗のお客様の流れ・商品配置・接客・レイアウトも常にチェックして日々生活しています。その中からヒントをもらいサイトデザインに表現することを心がけていますね。

Webデザインで大切なことを教えてください

目的を明確にしてデザインをすることが一番大切です。
この記事を読まれている方に質問しますが、「ネットで買い物をするときにデザインが良いから商品を買いますか?」

答えは「No」の方が大半だと思います。私自身もその質問から商品を購入したことはありません。
商品が魅力的に感じる・購入までスムーズに行える・ほしい情報が掲載されているなどの理由が、人が商品を購入するまでの心理をついているからだと思います。
ただデザインがなくてもいいのかというとそうではありません。商品が買いやすいレイアウト・配色・画像の使い方・文章の読みやすさ、といった人の目線に入る自然なデザインに仕上げることがWebデザインにとって大切なことだと私は考えます。

デザインをお願いしたい・デザインについて相談したい方はこちら↓↓
ご相談・お問合せはこちら
 

次回はネットショップのコーディングについて。コーディングとは何か・をご紹介します。お楽しみに!!