Blog スタッフブログ
【WEBデザイン】ECサイトから見る!シニア向けWEBデザインのコツ

こんにちは、Webデザイナーのそいです。
“スマホやパソコンを使うこと”が当たり前になった今では、ECサイトは年齢層を問わずたくさんのユーザーが利用しているコンテンツです。
今回はそんなECサイトに関して、シニア向けのネットショップのデザインにおいて重要な事を、実際のサイトを例に挙げて分析してみたいと思います。
今回ご紹介させていただく厳選サイトはこちら
トップページ

まずは、基盤ページ。TOPページから見ていきましょう。このページで工夫されているポイントをまとめてみます。
❶文字を大きくする
商品名や見出し、画像の中の文字など全体的に文字のサイズが大きく設定されています。
本文のサイズは18pxと、一般的なフォントサイズと指定されている16pxから2px大きく設定されています。
❷レイアウトや装飾は極めてシンプルにわかりやすく構成する
サイドコンテンツやメインコンテンツには見出しが入れられています。また、見出しにはあしらいが無く極めてシンプルにデザインされています。「注目商品 PICKUP」のように日本語+英語の組み合わせで見出しをデザインすることがよくありますが、あえて日本語のみで記載されています。
実際にサイトを閲覧してみて欲しいのですが、サイトの導線や構成も明確でわかりやすく設計されているのもポイントです。
❸ナビゲーションの表現
サイドナビゲーションにある項目やコンテンツは一般的ですが、どんなユーザーにも伝わるように「詳細検索はこちら」「お買い物」「最近見た商品」「買い物かご(カートに商品が入っていない場合『買い物かごはカラです』)」など通常のネットショップより丁寧に表現されています。
このように、ユーザーによってサイト内の文章を読みやすい表現にすることも、ユーザビリティを良くするという点で重要なポイントの一つです。
❹余白を広くとり、読みやすくする
❷のサイト構成の解説にも通ずることになりますが、コンテンツの要素と要素の間や全体感など余白が広くとられています。バナーや商品画像がずらずらと並び複雑になりがちなTOPページですが、すっきりと見やすい仕上がりになっています。
❺バナーデザイン
デザイン性が高い&購買意欲を湧き立たせるデザインが求められるバナー。伝えたい内容が端的にまとめられつつ、目を惹くバナーになっています。また、文字のサイズや色合いなどメリハリも効いたデザインになっています。
❻電話番号を目立つ位置に配置
ネットショップには珍しく、電話番号がヘッダー最上部に記載されています。ネットで商品は見れるけれども購入の仕方がわからない、などユーザーがネット購入だけに縛られないよう電話でも購入できるように設置されています。ユーザーが安心してサイトを利用できる導線が引かれており個人的に素晴らしいなと思いました。
商品一覧(特集)ページ

❶メインビジュアル
特集ページでは、どの商品(特集)カテゴリを閲覧しているかがわかりやすいようメインビジュアルが設定されています。
❷キャッチコピー
メインビジュアルとは別にキャッチコピーが添えられています。
❸検索機能
ソート機能、商品件数、ページャーと検索機能が大きいサイズ&見やすいデザインで配置されています。一般的なネットショップでは小さくレイアウトされていることが多いですが、このサイトではあえて大きく・目立つ位置にレイアウトされています。
商品詳細ページ

❶左側のコンテンツ
商品の情報(画像や商品の仕様・スペック説明)に関すること左側にまとめられています。
❷右側のコンテンツ
商品の購入に関すること(商品のサイズ・キャンペーン情報・配送日数・カート機能)は右側にまとめらています。
特にこのサイトでは、見出しが大きいサイズで設定されている、読みやすい余白で要素が置かれていることもあり、左側と右側のコンテンツの役割がとてもわかりやすい印象になっています。
その他

その他、上記のページでは商品を自由に組み合わせ・選べるという商品になりますが、通常の商品詳細ページとは別のレイアウトで、ユーザーには「商品を選ぶだけ」という操作のみで完結するようにシンプルな導線で設計されています。迷わず購入しやすいと直感的に思えるレイアウトで離脱率がぐんと下がりそうですね。
まとめ
いかがでしょうか。
今回は、シニア向けのECサイトにおけるデザインのコツを分析してみました。ECサイトは非常に情報が多く、必然的にごちゃごちゃとしたレイアウトになってしまいますがシニア向けのECサイトでは特に、ユーザーが迷わない・買いやすいを考慮された設計や工夫がなされているように感じました。
ユーザビリティを考えること、ユーザー視点のWEBデザインを作るうえでターゲット別のECサイトを見ることは勉強になるのでぜひ皆さんも実践・分析してみてくださいね。
今回もご一読いただきありがとうございました。