Transcript 卒業論文審査会 「Webの読みやすさ実験ツールの開発」

卒業論文審査会
Webの読みやすさ実験ツールの開発
岩手県立大学 ソフトウェア情報学部
ソフトウェア情報学部 4年 柴田 大樹
指導教員：鈴木克明
藤原康宏 市川尚
発表内容
• 読みやすさ実験環境を開発した経緯
読 み 楽
• ユーザビリティ評価を行った結果
– →ユーザビリティは確保できた
– が、説明や追加箇所が増えた
• デモンストレーション
2
研究内容
• 読みやすさの実験環境をつくる
この「読みづらい」
★ディスプレイでは読みづらい
を解決できないか？
ディスプレイが発光すること
ディスプレイは丸みをつけることが苦手
3
研究内容
••読みやすさについてある程度の指針はできている
「読みづらい」を解決できないか？
•見出しには文字を大きくしたり、着色を他と変えること
•テキストには左右の余白を持たせること
向後千春
•それらにアレンジを加えたいなら、アレンジしたものを
｢Webブラウザ上でのテキストの見やすさを規定するレイ
アウト要因｣
読み比べる環境が必要
•テキストが主体の新聞社のサイトをサンプルとして、
Web上での文字の読みやすさを追求
李明姫
「ウェブ画面における読みやすい文字表現の研究」
4
CSS(カスケーディングスタイルシート)
• Cascading Style Sheetの略
• デザインに関する細かい設定を記したもの
• 使い回しが可能→Webサイトに統一感
CSS
5
システムの構成
調整値を入力
読み楽
CSS
データベース
プレビュー提示
Web制作者
CSS保存
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
ダウンロード
7
システム構成
読み楽
CSS
CSS
a
CSS
CSS
b
CSS
CSS
c
CSS
日時・サンプルHTML等入力
d
HTML
CSS
CSSを選択
e
f
g
h
実験を制御
評価を集計
Web制作者
カルテ
評価結果閲覧
HTMLCSS
HTMLCSS
a
被験者
HTMLCSS
d
f
8
使いやすいかどうか評価
• 二つに分けて評価
– 評価A
• 1日目：CSS作成→カルテ作成
• 2日目：実験結果を確認→CSSダウンロード
• アンケート、インタビュー、観察
– 評価B
• 被験者となり、実際にAで作ったCSSを評価
• アンケート、インタビュー、観察
9
評価Aの結果
アンケート項目
平均点
CSSを作るという作業はスムーズに行えたと思いますか？
3.7
実験を行う際のカルテという名前は分かりやすかったですか？
3.7
カルテ作成はスムーズに行えたと思いますか？
4.7
サンプル文章に何を入れるべきかわかりましたか？
3.3
適用させるCSSを選ぶ方法は簡単にできましたか？
5.0
実験結果を探し出すのはスムーズに行えましたか？
5.0
どこが実験箇所かすぐにかりましたか？
5.0
CSSをダウンロードする機能は簡単に行えましたか？
3.7
HTMLファイルとCSSファイルの合成は簡単に行えそうですか?
4.0
CSSの削除は簡単に行えましたか？
4.3
このシステムは全体的に使いやすかったですか？
4.3
10
評価Aの結果
• 自由記述・アンケートから
– 言葉に説明がほしかった
• 訪済リンク、ホバーリンクなど
– 追加して欲しいCSSの調整箇所
• 文章や見出しの囲み
•影
– 追加して欲しい機能
• カラーチャート
11
評価Bの結果
• 数値入力式のアンケート
– 評価はスムーズに行えたか？
– 評価の戻る、進むボタンはわかりやすかったか？
→全員が５の評価
• 自由記入欄
– 戸惑いはしなかったが、どのようにチェック
をすればいいかの説明が欲しかった
12
評価結果
• 全項目で平均が3以上
– ユーザビリティは確保できた
• 追加・改善箇所
– 説明箇所を増やす
– 変更項目には囲みが必要
– カラーチャート
13
まとめ
• Web上でCSSが作れ、それに対して実験
を行えるツールの開発を行った
• ユーザビリティ評価では若干の改善が必
要な部分が出てきたが、確保はできた。
• 今後は他のブラウザにも拡大できるよう
にしていきたい。
14