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

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

2018年6月22日(金曜日)  (村本 友梨)

めせんのはなし

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

伝わるデザインついて、瞬時に判断していくための内容を書き綴ります。
デザインや、レイアウトについて試行錯誤する際の基盤(材料)となる内容です。

今回は「Webサイトを見るときの目線の動き」について改めて考えました。

まずは自分自分が初めて訪れるサイトに対してどのような動きをしているかです。

◆自身の行動は…?
 ・まず画面左上から右下へ全体を見て、自分の欲しい情報に関する見出しがないか探す。
 ・次にナビゲーションを左から右に見て、欲しい情報がありそうなカテゴリを探す。
 ・上記の2点を確認しても欲しい情報が見当たらない、
  もしくは情報が多すぎてどれを選択してよいか分からないと探す手間を感じる。

というような流れですが、どうしてこのような動きになるのでしょうか。
以下の理由があげられます。


①目の構造
 ・人の目の視野は左右それぞれ94度、上下は上55度~下80度です。
 ・ただし、情報をつかもうと集中して見る場合の視野は極端に狭くなり、
  上下左右ともに2度程度になります。

この2度の視野で文字を追うことになるため、
目線はどうしてもライン的な動きになってしまうようです。
またこの時、集中している部分以外の内容は全て背景と化してしまいます。

②経験で見る
 ・ユーザーの情報探しは、その人これまでの経験に基づきます。
 ・何の説明がなくても、どこにどのような情報があるか、
  どこをクリックすれば欲しい情報にたどり着けるかなど、
  私たちは無意識のうちにこれまでの経験をもとに探します。
 例えば:
 ・問い合わせをする前に「よくあるご質問」のぺージが無いかを確認する。
 ・画像の横に矢印があれば、それを押してスライドさせて別の画像の情報をみる。

私もいつからこの「≡」マークがスマートフォンサイトのメニューボタンであると
認識したのでしょうか。
全く覚えていませんが、当たり前のように使っています。

-----
これらの理由を理解して、インタラクションデザインを考えることが大切ですね。

◆インタラクションデザイン
:使い方を(操作性)を自然と理解させるデザインのこと。
 ・配置されているインターフェースがどういう役割なのかを一目で理解できること。
 ・ユーザーの一連の動きに合わせたコンテンツ配置を意識すること。

優れたインタラクションデザインは、人を自然とサポートして目的まで誘導してくれます。