卒業論文審査会 Web の読みやすさ実験ツールの開発 岩手県立大学 ソフトウェア情報学部 ソフトウェア情報学部 4 年 柴田 大樹 指導教員：鈴木克明 藤原康宏 市川尚.

Presentation on theme: "卒業論文審査会 Web の読みやすさ実験ツールの開発 岩手県立大学 ソフトウェア情報学部 ソフトウェア情報学部 4 年 柴田 大樹 指導教員：鈴木克明 藤原康宏 市川尚."— Presentation transcript:

1 卒業論文審査会 Web の読みやすさ実験ツールの開発 岩手県立大学 ソフトウェア情報学部 ソフトウェア情報学部 4 年 柴田 大樹 指導教員：鈴木克明 藤原康宏 市川尚

2 2 発表内容 読みやすさ実験環境を開発した経緯 ユーザビリティ評価を行った結果 –→ ユーザビリティは確保できた – が、説明や追加箇所が増えた デモンストレーション 読 み 楽

3 3 研究内容 読みやすさの実験環境をつくる ★ディスプレイでは読みづらい ディスプレイが発光すること ディスプレイは丸み をつけることが 苦手 この「読みづらい」 を解決できないか？

4 4 研究内容 「読みづらい」を解決できないか？ 見出しには文字を大きくしたり、着色を他と変える こと テキストには左右の余白を持たせること 向後千春 ｢ Web ブラウザ上でのテキストの見やすさを規定す るレイアウト要因｣ テキストが主体の新聞社のサイトをサンプルとして、 Web 上での文字の読みやすさを追求 李明姫 「ウェブ画面における読みやすい文字表現の研究」 読みやすさについてある程度の指針はできている それらにアレンジを加えたいなら、アレンジした ものを読み比べる環境が必要

5 5 CSS CSS ( カスケーディングスタイルシート ) Cascading Style Sheet の略 デザインに関 する 細かい設定を記したもの 使い回しが可能 →Web サイトに統一感

6 6 CSS HTMLCSS a b c

7 7 読み楽 システムの構成 CSS データベース CSS ダウンロード Web 制作者 調整値を入力 プレビュー提示 CSS 保存 CSS 作成機能

8 8 読み楽 CSS a b c d e f g h システム構成 Web 制作者 HTML 日時・サンプル HTML 等入力 CSS を選択 HTML CSS a HTML CSS d HTML CSS f カルテ 実験を制御 被験者 評価 評価を集計 評価結果閲覧 実験機能

9 9 使いやすいかどうか評価 二つに分けて評価 – 評価 A 1 日目： CSS 作成 → カルテ作成 2 日目：実験結果を確認 →CSS ダウンロード アンケート、インタビュー、観察 – 評価 B 被験者となり、実際に A で作った CSS を評価 アンケート、インタビュー、観察

10 10 評価 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

11 11 評価 A の結果 自由記述・アンケートから – 言葉に説明がほしかった 訪済リンク、ホバーリンクなど – 追加して欲しい CSS の調整箇所 文章や見出しの囲み 影 – 追加して欲しい機能 カラーチャート

12 12 評価 B の結果 数値入力式のアンケート – 評価はスムーズに行えたか？ – 評価 の 戻 る 、進 むボタンはわかりやすかったか ？ → 全員が ５ の評価 自由記入欄 – 戸惑いはしなかったが、どのようにチェック をすればいいかの説明が欲しかった

13 13 評価結果 全項目で平均が 3 以上 – ユーザビリティは確保できた 追加・改善箇所 – 説明箇所を増やす – 変更項目には囲みが必要 – カラーチャート

14 14 まとめ Web 上で CSS が作れ、それに対して実験 を行えるツールの開発を行った ユーザビリティ評価では若干の改善が必 要な部分が出てきたが、確保はできた。 今後は他のブラウザにも拡大できるよう にしていきたい。