Transcript 成果発表会で使ったPowerPoint（PPT形式

卒業研究成果発表会
Webの読みやすさ実験ツールの開発
岩手県立大学 ソフトウェア情報学部
ソフトウェア情報学科 4年 柴田 大樹
指導教員：鈴木克明
藤原康宏 市川尚
発表内容
• 読みやすさ実験ツールを開発した
読 み 楽
• つかいやすいか評価を行った結果
→説明や追加箇所が出てきた
2
CSS(カスケーディングスタイルシート)
• Cascading Style Sheetの略
• デザインに関する細かい設定を記したもの
• 使い回しが可能→Webサイトに統一感
CSS
3
CSSについての操作
最新のカルテ
カルテに関しての操作
5
6
システムの構成～CSS作成機能
調整値を入力
読み楽
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
•
•
•
•
大学生3名
1日目：CSS作成→カルテ作成
2日目：実験結果を確認→CSSダウンロード
アンケート、インタビュー、観察
– 評価B
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
使いやすいかどうか評価
• 二つに分けて評価
– 評価A
•
•
•
•
大学生3名
1日目：CSS作成→カルテ作成
2日目：実験結果を確認→CSSダウンロード
アンケート、インタビュー、観察
– 評価B
• 大学生3名
• 被験者となり、実際にAで作ったCSSを評価
• アンケート、インタビュー、観察
12
評価Bの結果
• 数値入力式のアンケート
– 評価はスムーズに行えたか？
– 評価の戻る、進むボタンはわかりやすかったか？
→全員が５の評価
• 自由記入欄
– 戸惑いはしなかったが、どのようにチェック
をすればいいかの説明が欲しかった
改善策
操作に対する説明を入れた
13
研究内容
• 読みやすさの実験環境をつくる
この「読みづらい」
★ディスプレイでは読みづらい
を解決できないか？
ディスプレイが発光すること
ディスプレイは丸みをつけることが苦手
14
研究内容
• 「読みづらい」を解決できないか？
•見出しには文字を大きくしたり、着色を他と変える
こと
•読みやすさについてある程度の指針はできている
•テキストには左右の余白を持たせること
向後千春
｢Webブラウザ上でのテキストの見やすさを規定するレイ
•それらにアレンジを加えたいなら、アレンジしたものを
アウト要因｣
読み比べる環境が必要
•テキストが主体の新聞社のサイトをサンプルとして、
Web上での文字の読みやすさを追求
李明姫
「ウェブ画面における読みやすい文字表現の研究」
15
まとめ
• Web上でCSSが作れ、それに対して実験
を行えるツールの開発を行った
• ユーザビリティ評価では若干の改善が必
要な部分が出てきた
• 今後は他のブラウザにも拡大できるよう
にしていきたい
16
参考文献
• 向後千春，堀田龍也，黒田卓，山西潤
– ブラウザ上でのテキストの見やすさを規定するレイ
アウト要因(1998)
– http://kogolab.jp/research/paper/1998/JET985/JET98-5.html
• 李明姫
– ウェブ画面における読みやすい文字表現の研究(2002)
– 九州大学博士学位論文
17
18
対応していないタグについて
• フレームで構成されているページ
• テーブルでレイアウトされているページ
• Fontタグ、bタグなどの見栄えを表すもの
が入っているページ
(その部分以外は動作します)
19
調整要素について
１
本文
見出し
表
２
３
４
中見出し 小見出し
８
箇条書き
９引用
大見出し
７画像
５
表の中身
６
表の外枠
１０ルビ
１１
通常リンク
１２
訪問済みリンク
リンク
１３
リンクの上に
マウスがある状態
20