1 AHPによる飲食店Webサイトの 視覚デザイン評価 酒井浩二，仲野理恵子，山本嘉一郎 京都光華女子大学 人間関係学部 2 １．はじめに • 利用する飲食店の選択方法 – 雑誌・ちらし – 普段行き慣れた店 – 口コミ – Webサイト • Webサイトどうしの競合 – 膨大な飲食店Webサイト数：「平成17年12月末 現在，約49,000店舗が掲載」（ぐるなび調査） – 消費者が選択したくなるWebサイトの要因を検討 する必要性 3 Webデザインと印象評価 • Webデザインの印象評価への影響（佐藤ら，1999） – 配色 → 「豪華さ」「独創性」 – 静止画の位置 → 「まとまり」「あたたかさ」 – 素材の重心位置 → 「まとまり」 • Webデザインの重要な要素（北尾ら，2003） – 欲しい情報に簡単にアクセスできる – 見やすい – 見て楽しい • 高い印象評価が高い利用率を促すと推測 4 ２．本研究の目的 • 2つの主目的 – ①Webサイトの評価基準を的確に捉える – ②Webサイト構築の留意点を明確にする • Webデザインの分類（ニールセン，2000） – ページデザイン：各ページのレイアウト – コンテンツデザイン：掲載するコンテンツのデザイン – サイトデザイン：複数のページの統合 • AHPを使ってコンテンツデザインを感性評価 AHP 5 「AHP」とは？ • AHP（Analytic Hierarchy Process；階層分析法） – 問題解決型の意思決定モデル – 合理的に重要度の高い案を評価・選択 • AHPの特徴 – 階層化： 総合評価 → 評価基準 → 代替案 • 例： 「新車の選定」→「値段」「燃費」→「A車」「B車」「C車」 – 統合化：最終的に1つの評価にまとめる – 合理化：あいまいな評価・選択を明確に説明 • 本研究：AHPをWebサイトの感性評価に適用 6 AHPの階層図 • 評価基準が2階層 – 上位：視覚デザインの特徴 – 下位：視覚デザインの印象評価 総合評価 評価基準 飲食店の選択 好感度 代替案 画像 配色 適切さ 飲食店A 美しさ 食欲 促進度 飲食店B 文章 量の 適切さ 親しみ やすさ 飲食店C Webサイトの評価基準 7 • 各評価基準の対象 – 配色：背景色，文字色，レイアウトのアクセント色 – 画像：料理，店内の画像 – 文章：タイトル，メニュー，店内情報など 評価基準 配色 画像 文章 意味 好感度 配色に対する好ましさ 適切さ 飲食店Webサイトとしての配色のふさわしさ 美しさ 画像の鮮明さや被写体の鮮やかさ 食欲促進度 料理画像からそそられる食欲の度合い 量の適切さ 文章の量のふさわしさ 親しみやすさ ユーザに向けられる言葉の親しみやすさ 3つの飲食店の主な特徴 背景色 アクセント色 主な文字の色 一部の文字の色 画像の枚数 料理画像の枚数 料理画像のサイズ (pixel) 料理画像の彩度 文字数 文章のスタイル 飲食店A 白 ベージュ 黒 赤 3 2 135×180 高 371 文章表現 飲食店B 紫 薄いグレー 薄い紫 水色 6 2 250×180 180×135 低 218 文章表現 飲食店C 黒 濃いグレー 白 赤 6 4 250×200 高 397 主に箇条書き 3つの店舗の共通点 ボタン，文字，画像などのレイアウト タイトルの位置，大きさ 文字のフォントの大きさ トピックス欄1つ，アクセス情報などの表1つ など 8 飲食店AのWebサイト 9 飲食店BのWebサイト 11 飲食店CのWebサイト 10 ３．方法 12 • 被験者：24名（21歳から35歳） • 刺激：3つの飲食店Webサイトのトップページ • 手続き：5段階での一対比較で評定 – 第1ステップ：評価基準の一対比較 ステップ • • • • 「配色」「画像」「文章」で一対比較 → 3対 「配色」：「好感度」と「適切さ」の比較 → 1対 「画像」：「美しさ」と「食欲増進度」の比較 → 1対 「文章」：「量の適切さ」と「親しみやすさ」の比較 → 1対 評価基準の一対比較の例 「配色」の方が 「画像」の方が 同程度に重要 若干重要 重要 明らかに重要 絶対に重要 1 2 3 4 5 ○ 13 – 第2ステップ：各評価基準で3つの飲食店を一対比較 ステップ • • • • 「配色」：「好感度」と「適切さ」 → 6対 「画像」：「美しさ」と「食欲増進度」 → 6対 「文章」：「量の適切さ」と「親しみやすさ」 → 6対 6つの評価基準ごとに3つの飲食店の一対比較（計18対） • 評定について – 評価基準の解釈は回答者次第 – 見ための印象に基づいて評定 評価基準ごとの飲食店Webサイトの一対比較の例 「配色の好感度」 同程度に重要 若干重要 重要 1 2 3 明らかに重要 絶対に重要 4 「飲食店A」の方が 「飲食店B」の方が ○ 5 14 • 分析方法 – 各行の要素を幾何平均してウェイトを算出 – 整合度が0.15以下の回答者（計19名）を採用 整合度 配色＞画像 – 分析内容 「5」 配色＜文章 「1/5」 画像＞文章 「5」 • 評価基準のウェイト • 評価基準ごとの飲食店Webサイトのウェイト • 総合評価のウェイト 不整合な場合 回答者１のデータ 画像 配色 文章 幾何平均 ウェイト 画像 1 1/4 1/3 0.437 0.122 配色 4 1 2 2.000 0.558 文章 3 1/2 1 1.145 0.320 3.582 1.000 整合度C.I.=0.009 ４．AHP評定の結果と考察 • 評価基準のウェイト – 高い：「画像」 – 中程度：「配色」 – 低い： 「文章」 上位 配色 0.325 画像 0.490 文章 0.186 下位 好感度 適切さ 美しさ 食欲促進度 量の適切さ 親しみやすさ 0.736 0.264 0.410 0.590 0.398 0.602 15 16 評価基準ごとの飲食店のウェイト１ • 下位の評価基準2つの飲食店評価は類似 – 上位の評価基準ごとに飲食店評価を検討 評価基準 上位 配色 画像 文章 下位 好感度 適切さ 美しさ 食欲促進度 量の適切さ 親しみやすさ 代替案 飲食店A 0.460 0.486 0.339 0.303 0.356 0.301 飲食店B 0.203 0.138 0.152 0.149 0.274 0.387 飲食店C 0.337 0.376 0.509 0.548 0.370 0.312 17 評価基準ごとの飲食店のウェイト２ • 飲食店A： 配色が高く，画像は中程度 • 飲食店B： どの評価基準でも低い • 飲食店C： 配色が中程度，画像が高い 評価基準 上位 配色 画像 文章 代替案 飲食店A 0.460 0.316 0.339 飲食店B 0.188 0.153 0.329 飲食店C 0.352 0.532 0.332 18 飲食店Aの特徴 • 「配色」の評価が高い – 白の背景色と黒の文字色のシンプルさ – 淡いベージュのアクセント色 → 明るい店や食べ 物のイメージを喚起 • 「画像」の評価が中程度 – 豪華で鮮明な2つの料理画像 → 美しさ感の喚起 – 小さい画像サイズ → 印象度が低い • 「文章」の評価が中程度 – 「いらっしゃいませ！」など話しかける言葉の使用 →臨場感や親しみやすさの増大 19 飲食店Bの特徴 • 「配色」の評価が低い – 紫の背景色，グレーのアクセント色 → 食欲を減退 – 紫の背景色，薄紫の文字色 → 明度差が小さいた め視認性や可読性が低い • 「画像」の評価が低い – 低彩度の料理画像を掲載，画像の背景を黒にして 暗い場所で撮影 → 料理の色彩が乏しい • 「文章」の評価が中程度 – 短い文章 → 読みやすい – 手書き文字も配置 → 親しみやすい 飲食店Cの特徴 20 • 「配色」の評価が中程度 – 黒の背景色，濃いグレーのアクセント色 → 食欲を減退 – 黒の背景色，白の文字色 → 明度差が大きいため視認 性や可読性が高い • 「画像」の評価が高い – 高明度で高彩度の料理画像 → 料理の色彩が豊か – 4枚もの大きいサイズの画像 → 印象度が大きい • 「文章」の評価が中程度 – 箇条書き → 分かりやすい – 話しかける言葉がない → やや親しみにくい 総合評価のウェイト • 総合評価のウェイトは有意（p<0.001） • ウェイトの平均を多重比較 – 飲食店C＝飲食店A＞飲食店B （0.438） （0.365） （0.197） • Webサイトの評価 – 画像と配色が大きく影響：視覚的な訴求力の高い コンテンツを掲載 – 評価を高めるポイント • 背景色や文字色など配色を考慮 • サイズの大きい彩度の高い料理画像を数多く掲載 • 箇条書きなどによる簡潔な文章表現 21 22 ５．飲食店Webサイト開設の留意点 背景色に白を使うのがシンプルで見やすい 背景色を黒で文字を白にすると視認性が高まる アクセント色に食欲を増進させる暖色系の色を使う 料理画像は，サイズが大きく鮮明で彩り豊かなもの を数多く掲載する • 料理画像の明度と彩度が高まるように，撮影時には 照明の強さや配置に注意する • 文章は箇条書きを中心に簡潔な表現を用いる • 目立たせたい文章に目立つ色や手書きなどを使う • • • •
© Copyright 2024 ExpyDoc
