ユーザーが意識しないようなポイントをデザインの要素で視覚的にアピールすることで、商品を購入する意欲を掻き立てることができ、売上アップにつなげることができます。

今回は大手玩具販売のトイザらスさんを例に、その要素をご紹介していきます。

サイト名	トイザらス
URL	http://www.toysrus.co.jp/
QRコード

一目でカートの中身の商品個数と値段がわかる

カートに入っている商品の個数と値段がどのページにいても視覚的にわかりやすく表示されています。現状はフッターにしか表示されていなかったので、ヘッダーにも表示されていれば尚ユーザーに優しいかと思います。

オプション情報の視覚化

テキストのみでどのオプションが利用できるかを表示する方法もあるのですが、トイザらスではギフトラッピングなど商品詳細情報ページに画像で表示されているのでわかりやすいです。

商品リストを色で分けて表示

商品リストの一覧を表示する際に1行目、2行目で色を使い分けわかりやすく表示されています。気付かないような細かいところですが、無意識に視覚的に分かりやすい表示がされています。

（あともう少し！）会員登録のユーザビリティ

入力必須項目が多く、さらに２，３ページと続けて入力する必要があります。

名前入力の際に、姓名が分かれていたり、住所入力も全角のみしか入力できなかったりして、モバイルの場合では番地やマンションに住んでいる方など全角数字を打つのが大変だなと感じました。

せっかく商品をカートに入れて購入する意志があるお客さんに、ここでストレスを与えるのは大変もったいないところなので、モバイルではなるべく簡単にフォームの入力ができるようにデザインを気をつけなければなりません。

以下入力フォームの最適化（EFO：Entry Form Optimization）の5つポイント挙げておきます。

１，フォーム項目を減らす
モバイルの場合はPCに比べ入力に手間がかかります。ぱっと見てフォームの入力項目がたくさん並んでいると、入力する気も失せてしまいかねないので、本当に必要な項目に絞って入力してもらうようにしましょう。

２，電話番号・郵便番号の入力ボックスは分割しない
電話番号や郵便番号の表記は「09011111111」「5201234」などハイフンを使わないものが基本です。フォームを3つに分けてしまうと、それだけで手間がかかり、ミスタップなどを併発しかねません。

３，フォームには入力例をなるべく付ける
入力例があることによってユーザーのフォーム入力に対する抵抗感を取り除く効果もあります。

４，ソフトウェアキーボードは項目に合わせたものにする
電話番号や郵便番号、メールアドレスなどあらかじめ入力する文字種が決まっているものを入力するフォームには、その文字種にあったソフトウェアキーボードが出るようにするだけで、文字の切り替えの手間もなくなるので、便利です。

５，数字の全角半角を区別しない
PCでもいえる事ですが住所を入力する際など、よく「全角で入力してください」という説明があり、半角で入力した場合エラーと表示されるものがあります。
　
普段、英数字は半角で入力が基本の身からすると全角で入力するのはストレスを感じるので、プログラム側で全角半角を置き換えて入力する際のストレスを少しでも減らしてあげましょう。

終わりに

視覚的な要素を含め、細かいデザインの配慮一つでユーザー使い勝手も向上し、購買意欲も変わってきます。常にユーザーを意識したデザイン性、操作性を心がけることが出来れば良いなと思いました。

次回も「勝手にサイトレビュー」のコーナーをお楽しみに。