スマホサイトのアイコン事例集|カート|検索|読み込み中

Pocket

icon01スマホサイトのアイコン作りは悩む必要はない。デザインにこだわり過ぎると逆にユーザーには意味が伝わらない。スマホアプリを起動する時にタップするホーム画面のアイコンも同じ考えだが、ここではスマホサイト上に表示しているナビゲーション系アイコンの効果的なデザインについてお伝えしたい。

アイコンのデザインにおいて、もっとも重要なのは瞬間的にユーザーが「このアイコンは、この意味だ」と直感できることだ。だから「他のサイトにはないアイコンを作ろう」と制作担当者は思わないでよいと私は考えている。

言うまでもなく、ユーザーはあなたのスマホサイトのみを使っているのではなく、Yahoo!や楽天、Amazonなど多くのサイトを日常的に使っているから、各スマホサイトで共通しているアイコンでないと「このアイコンは、このサイトではこういう意味で、別のサイトではこういう意味だ」ということになってはユーザーに迷惑な話になってしまう。

既に実装済のアイコンもあるかもしれないが、メニューごとに各サイトのアイコンデザインを見ていきたいと思う。

■目次■
1 ユーザーに伝わりやすいアイコン事例
1-1 カート
1-2 行動履歴
1-3 検索
1-4 お気に入り
1-5 ログイン
1-6 会員登録・マイページ
1-7 メニューの開閉
1-8 読み込み中

2 フリー素材をアイコンで利用する方法

1 ユーザーに伝わりやすいアイコン事例

1-1 カート

カートを表現するアイコンはスーパーマーケットで利用するショッピングカートをデザイニングしたものがよい。ニッセンやジュピターショップチャンネル、その他多くのサイトで汎用的に利用されており、十分にユーザーには浸透していると考えられるためだ。ニッセンでは紫、zozotownでは黒背景に白を採用しているのはサイトデザイン全体に合わせた色調のトーンだ。

メニュー名称は「カート」でも「ショッピングカート」でも伝わる上に、例えばファミマ.com(ファミリーマートのネット通販)では「買い物かご」を採用しているが、数が多いのは「カ―ト」だと思うため、特に理由がなければ「カート」がよいだろう。
icon02

1-2 行動履歴

行動履歴のアイコンで「足あと」を用いて表現している例もありますが、足あとだけを見てそれが閲覧履歴であることを示すのは難しいと思う。アメブロ(サイバーエージェント社運営のブログ)では閲覧履歴を表す「ペタ」が足あとマークで表現されていますが、カートにおけるショッピングカートをデザイニングしたアイコンに比べてユーザーに浸透しているとは思えない。

そのため、行動履歴はネット通販のスクロールが採用している時計型か、Yahoo!ショッピングのようなデザインはなしで文字だけでメニューを表現するのがユーザーには分かりやすいだろう。

楽天では表と時計がデザインされたアイコンを閲覧履歴に利用していますが、「閲覧履歴」の文字があってこそ分かるアイコンだと思います。

icon03

1-3 検索

検索を表す「虫眼鏡」のデザインはパソコンでも利用されていますし、世界でも共通しているアイコンデザインだと考えられます。日本のユーザーにとってもフィーチャーフォン時代から使っているデザインだと思うので、検索は虫眼鏡で表すのが自然だと考えます。

icon04

1-4 お気に入り

ハート型か、星型のデザインが一般的だ。どちらも意味は通じるのだが、私は星型のほうが馴染み易いと考えている。その理由はパソコンサイトやスマホサイトのお気に入り=ブックマークは星型で表現するブラウザが多いからだ。例えばInternet Explorer ではブックマークは星型のアイコンで見慣れているユーザーも多いだろうと予測する。

ECサイトではユーザーが気に入った商品という意味のメニューなのでどちらも伝わりやすいと思います。

メニューの呼び名は「お気に入り」が一般的だと思いますが、例えば総合通販のセシールでは「ウィッシュリスト」となっています。ユーザーの使いやすさを優先すると「お気に入り」が良いでしょう。

icon05

1-5 ログイン

ログインは各サイトごとに表現が異なっていて、スタンダードになっているデザインはありませんが、分類すると「ドア型」か「鍵型」の2種類だ。もしくはログインにはアイコンはなしにしてテキストのリンクでログインを示すサイトも少なくありません。

ただ、ログインはサイトの中に入るというイメージからは楽天やコンビニのローソンが採用しているドア型がよいと思います。かといって鍵型が伝わらないということではないので、「ドア型」か「鍵型」であれば、ユーザーは迷うことはないだろう。

icon06

1-6 会員登録・マイページ

会員登録は「鉛筆型」の書き込むイメージのアイコンで、マイページは「人型」のアイコンが伝わりやすい。

Yahoo!ショッピングでは「My」をデザイン化していますがサイトの世界観を考慮してもカタカナ表記のほうがユーザーには伝わり易いでしょう。またCtoCのECサイトであるBUYMA(バイマ)ではテキストリンクで表現しています。バイマの場合は上部にナビゲーションが多いので配置を考えるとテキストにしたのかもしれませんが、もし配置する領域があればアイコン付きで会員登録メニューを設置するのがよいだろう。

icon07

1-7 メニューの開閉

閉じている状態を下矢印で表現する場合は、アコーディオンが開いたら矢印は上矢印に変わる必要がある。矢印以外には閉じている状態を「+」、開いている状態を「-」で表現しているサイトもあり、どちらでもユーザーには伝わるだろう。

重要なポイントは矢印でも+-であっても、今どちらの状態であるかが分かり、その状態から何が出来るかを表現することが重要です。

icon08

1-8 読み込み中

ぐるぐる回る読み込み中は灰色で表現された以下の図の形式がスタンダードだ。日本語で読み込み中と書かれているのも、ユーザーに「どのような状態であるか」を示すためにあったほうがよい。回る表現があれば、その意味だと伝わると考えないようにして、しつこいぐらいに説明したほうがよいだろう。文字を「Loading…」などにしてしまうと、年長者などには意味が伝わりにくい。あなたのサイトのユーザー層をしっかりと考えよう。

ZOZOTOWNでは読み込み中のデザインはこだわっていて、下記の図で参照していますが、ギターのような楽器を持った人型のアイコンになっている。これはすべてのサイトが真似できることではない。ZOZOTOWNであるからサイト全体の世界観にあった自由でおしゃれなアイコンが表現できるのだが、逆にサイト全体のデザインテイストに合っており、ユーザーに意味が伝われば自由にデザイニングできるということでもある。

icon09

2 フリー素材をアイコンで利用する方法

スマホサイトで利用できるアイコンは「素材 スマホ アイコン」などで検索すれば多く見付けることができるが、1で見てきたように色調やトーンなどはサイト全体で合わせる必要があるため、ネット上で拾ってきた素材をそのままサイト上に表現することは適切ではない。カートはショッピングカート型で表現すると言っても、カートのデザインは様々だから、アイコン素材を適当に使うのは私はおすすめできない。

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*