非デザイナーのためのデザイン基礎講座

Eコマースのデザインを考える上で、UI（ユーザーインターフェース）はとても大切です。UIを無視したデザインを行うのは、特に非デザイナーにとっては致命的になりやすいです。非デザイナーが世界観を醸し出すECサイトを作りたいと言って、構築されたこともちょくちょくありますが、まったく売れずにPM（プロジェクトマネージャー）やディレクターが首になったというのはよくある話です。

今回は、ECサイトのUI、デザインで陥りやすいポイントを5つに絞ってお話いたします。

ECサイトのデザインをUIとして考えるとしたら、やはり売れているECサイトを真似て作るのが一番です。某モールのようなデザインは嫌い！とか言う場合、大概Eコマースのことを知らない方か、Eコマースをやったことが無い方に多いです。

売れているECサイトは、それなりに時間を掛けて、データ分析して、何度もブラッシュアップしています。有名なECサイトになればなるほど、そのUIだけで何千万も、何億円も掛けています。そういった売れている、かつ自分の商材と似ている、さらに自分の感性に合ったECサイトがあれば、良いところを真似て作るのは、非デザイナーとしては恥ずかしくなく、むしろどんどん吸収するべきです。

ECサイトは、実際にモノやサービスを購入して頂く必要があります。単に会社概要のページとは違います。このECサイトのお店は、大丈夫なのか？ちゃんと買えるのか？個人情報は大丈夫なのか？どういう人が運営しているのか？在庫はあるのか？などなど考え、検討しながら、個人情報を入力し、クレジットカードの情報を入力し、購入するわけですから、生半可なUIでは、なかなか購入までたどり着けません。

つまり、非デザイナーであれば、売れているECサイトのフレームを研究することが大事だということになります。

何度も言って申し訳ないのですが、ECサイトでは、お客様になる方が、簡単に商品を検索し、購入できるように、迷わないように、直感的に分かりやすくすることが最初のポイントです。

ECサイトに必要な要素は何でしょうか？
実はたくさんの要素が必要です。この要素が最初に考えてほしい、陥りやすいポイントの１つ目です。

この要素一つずつがデザインに影響してきます。例えば、カートに入れるボタンです。カートに入れるボタンが分かりにくく、どこにあるか分からなかったら、お客様は購入できなくなります。例えば、カートのボタンの色は何色が良いのでしょうか？大きさ、サイズは？このようなことを考えていると、膨大な時間が必要になりますが、非デザイナーでしたら、売れているECサイトのカートボタンがどうなっているかを見ればよいのです。

例えば、Amazonや楽天を確認してみてください。実は、年々ブラッシュアップしているのですが、Amazonで見ると最近は、黄色でカートに入れるという文字が入っています。楽天は普通のグレーのフォームボタンから、最近では赤系のエンジ色にすべてのお店で統一されています。このカートボタンを薄くしたり、他の色のボタンにすると、やはりカート投入率は急激に下がります。カートボタンはどこにあるかが直感的にわかりやすくする必要があるのです。

グローバルヘッダーに、かごを見るボタンを設置している場合も要注意です。特に同梱で複数の商品を購入されるようなECサイトの場合には、かごに入れてから他の情報ページや商品ページを見ることになるため、カートを見るボタンが分かりにくいと購入まで進まなくなってしまいます。

非デザイナーがECサイトのデザインを考える場合には、こういったカートボタンなどの要素をひとつひとつ考える必要があります。

ECサイトのUIを考えるのであれば、まずはグローバルヘッダー、メイン画像と実際に購入ボタンがついている商品ページのファーストビューとかご周り、そしてもう一つ、カートの中です。まずはこの３つを考えます。この３つのそれぞれの要素がちゃんと自社のブランドや商品に合っているかを確認します。

例えば、グローバルヘッダーにある要素として、よく課題になるのが、電話番号やFAX番号を載せるのか、問合せボタンは、法人向けなのか、個人向けなのかなどです。

モールであれば電話番号やFAXは掲載できませんが、自社サイトでは掲載できます。でも、電話番号を掲載するとサポートできる人が社長しかいなかった！みたいなこともあり、その場合はサポートができません。こういう場合には電話番号を乗せることは出来ないです。

ECサイトに必要な要素を一覧にしましたのでご参考にしてください。

非デザイナーがECサイト構築時に陥りやすいポイント
1.ECサイトに必要な要素をそれぞれ理解する
2.ECサイトの安全性をどう表現するか？
3.ECサイトの検索対策とデザインのバランスを検討する
4.PCではなく、スマホファーストデザインを考える
5.ベンチマーク先のECサイトで実際に購入したことがあるか？

ECサイトで次の課題になるのが、安心というテーマです。これも陥りやすいポイントです。今は詐欺サイトも多くなっていますので、いかに安心できるデザインにするかは重要になります。今はブランドが立っている企業でも、この安心というテーマは必要です。

お客様に安心してご購入いただく安心の要素も一覧にしましたのでご参考にしてください。自社にあった安心感をECサイト上に表示するのがポイントです。

ECサイトのグローバルヘッダーに必要な要素(自社に合わせて設置)
看板/電話番号・FAX番号/初めての方/お問い合わせ/会員ログイン/買い物かご/送料/お支払い方法/返品交換キャンペーン/FAQ/お客様の声/会社概要/SNS/送料無料ライン/サイト内検索ボックス/メイン画像/注意喚起/お知らせ・News/特定商法取引表示/お届け日時/ブランド/新規会員登録/マイページログイン/ハンバーガーメニュー/実店舗一覧

ECサイトのUIで陥りやすい３つ目は、検索対策です。Google検索やモール内検索などを考えると、どうしてもテキストが必要になり、被リンクが必要になります。このテキストや被リンクを画像だけで構成してしまうと検索には掛からないECサイトになってしまいます。かと言って、文字だらけ被リンクだらけにしてしまったら、とても見辛いECサイトになってしまいます。ここはバランスを見て判断するしかありませんが、ノンブランドやこれからECサイトを新しく作る場合には、検索エンジン対策を考えて作らないとまったく意味のないECサイトになってしまいます。世界観だけで売れるのはごく僅かなブランド企業だけだと思ったほうが良いのです。

４つ目の陥りやすいポイントは、スマホ対応です。これだけスマホで購入するお客様がいらっしゃるのに、非デザイナーはPCだけで考えてしまうことが多いのです。スマホファーストでUIを確認する必要があります。

最近では、レスポンシブ対応でデザインを作成することが多いのですが、このレスポンシブは余分なソースを呼び込んできますので、ECサイトのページのスピードは落ちます。どれを優先するかになります。

最後に陥りやすいポイント、これが実はいちばん重要なのですが、ECで購入したことがある方とECで購入したことがない方の差です。いろんなECサイトで購入したことがある方は、自然と分かって来るのですが、やたら文句の多い非デザイナーのディレクターやプロジェクトマネージャーがECで購入した経験が少ないと、そのプロジェクトは、最初の段階で躓いてしまいます。構築の実績だけではなく、何を購入しているかはディレクションやスタッフを選定する上で大事なポイントなのです。

今、私が携わっているいくつかのプロジェクトの中で、UI＝デザインを無視して作ってしまったECサイトがあります。プロに任せて構築したということですが、どうしてこうなってしまったのかとても疑問です。

ECサイトでUIを考える時、自分が良いなと思うECサイトで実際に購入してみるというのが実は一番なのです。非デザイナーでしたらさらに必要でしょう。何か偉そうに言っている部長とか社長に次の質問をしてみてください。「自分のECサイトで実際に購入したことがあるか？」という質問です。あるよ！という場合も、実際に一緒に購入までやってみるのも手です。実は新規登録もログインもしたことがない部長や社長も多いのです。そんな方が指揮を取ったら大変なことになります。
この購入体験を私と一緒に自分のスマホで購入まで行った後は、皆さん同じことを言います。

「これじゃ買えない・・・」、「なんでこうなっているのか？」
それはスタッフに言うのではなく、あなたに言いたい。

ECサイトは購入体験がデザインに大きく影響します。
頭の中だけでは解決しないのです。

 - JECCICA記事, お知らせ, その他, コラム, ニュース