• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

伝わるデザインついて、瞬時に判断していくための知識を書き綴ります。デザイン探索

2020年1月15日(水曜日)  (村本 友梨)

「サービス/商品の詳細情報(一覧)」の役割・見せ方

皆さんこんにちは。
アシスタントクリエイターの村本です。

今、このブログでは
「Webサイトに置ける各コンテンツの役割と、なぜそれが必要なのか?」を
1つ1つ確認しています。

今回は「サービス/商品の詳細情報(一覧)」についてです。
---------------------------------


■「サービス/商品の詳細情報(一覧)」とは? ----
 このコンテンツでは、文字通りサービスや商品の詳しい情報を載せます。
 サービス(商品)の「特長」や「お客様の声」を読み、興味を持ってもらった利用者を
 次に誘導するのがこのコンテンツです。
 
■役割 ----
 利用者の立場で考えると、 
 「実際にサービス(商品)を利用してみようかな」と思ったときに
 次に見たいのがこの情報(詳細)のはずです。

 前回の記事にも書きましたが
 利用者はサイトを見ている時点で、複数の会社(サービス、商品)を比較しています。

 ですので、このコンテンツには
 「このサービス(商品)を利用しよう!」と判断するための情報を提供する役割があります。

■なぜ必要なの? ----
 どんなに興味深くても情報が少ないと判断に至らず、利用者は次の行動に迷ってしまします。
 また、闇雲に細かい情報ばかり並べても意味がありません。

 利用者にとって、判断材料にならない情報は不要ですし、
 無駄な情報が多いと情報整理に疲れてそのサイトを見るのをやめてしまいます。

 まずは、確信を持つための判断材料として何が必要か?
 情報整理をし、比較しても選ばれるための材料をきちんとそろえておくことが大切です。

 そしてWebサイトの最終目的である
 『お問合せ』や『予約/購入』の入力に進んでもらえるようにしましょう。

■デザインのポイント ----
 サービスや商品によって見せ方(デザイン)は異なりますが、
 気を付けたい点は基本的に同じです。

 ① 最短ルートで情報にたどり着けること
   カテゴリや階層がある場合、制作側の感覚ではなく利用者目線で考えて配置する。
   どういうカテゴリ分け(検索)が用意されていると、
   欲しい情報までストレスなくたどり着けるか。
   利用者の思考で情報整理し、
   気になる情報を次々に見ていけるようなボタン配置やデザインを取り入れること。

 ② 適切な表現で伝えること
   どのような表現方法が1番伝わるか?
   「リード文・テキスト・ビジュアル」?
  
   サービスや商品によって適切な表現を選ぶことが大切です。
   例えば…
   ・サービス(商品)が複数あり数値データや特長が多い場合は、
    表にまとめるてスッキリ見やすくする
   ・キレイな写真を大きく表示し、ビジュアルで良さを伝える
   ・文章表現を使い、数値やビジュアルだけでは伝わらない部分(5感や、体感)を伝える

 ③ 情報量に合わせたウィンドウ表示すること
   情報量が多い場合、そのまま全ての内容を載せると
   読みにくいだけでなく利用者に情報整理させる負担が大きくなり、
   サイトの離脱にもつながりかねません。

   特にスマホ表示では、スクロールの長さや文字サイズを意識して、
   情報を分割・整理する必要があります。
   この場合は、ページ遷移をせずにスクロールを減らすウィンドウ表示を検討しましょう。
   例えば…
   ・アコーディオン
   ・モーダルウィンドウ
   ・タブ切替 

 ④ コンバージョンボタンを配置すること
   Webサイトの最終目的は、『お問合せ』もしくは『予約/購入』です。
   利用者が「このサービス(商品)にしよう!」と思ったときに、
   それを手に入れるための手段が不明確だと、行動をやめてしまうかもしれません。

   ですので、『お問合せ』や『予約/購入』画面に繋がるボタンを必ず
   このコンテンツを読み進めた先に配置しておくことが重要です。

---------------------------------
まとめ

まずは、他社サイトと比較されることを前提とした情報整理が必要ですね。
そして、コンバージョンまでの導線を意識しつつどのような見せ方にするか
サービス(商品)に合わせて考えていくことが大切ですね。

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン