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

発表内容 読みやすさ実験ツールを開発した つかいやすいか評価を行った結果 →説明や追加箇所が出てきた 読 み 楽

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

CSS CSS a CSS b HTML 一つのHTMLファイルでもスタイルシートによって違うデザインができるようになっています。 CSS c

CSSについての操作 最新のカルテ カルテに関しての操作

CSS作成機能 システムの構成～CSS作成機能 CSS データベース 読み楽 調整値を入力 プレビュー提示 CSS保存 ダウンロード Web制作者 CSS作成機能 CSS保存 CSS CSS CSS CSS このシステムは大きく二つの機能にわかれています。 一つめはCSS作成機能、もうひとつは実験機能です。 CSS作成機能でいくつか作成していくのですが、それが読みやすいかをWeb制作者以外の人に判断してもらう機能です。 そこで、まず、CSS作成機能の説明をしていきます。 ■まず、Web制作者がいます。これが本システムを主に利用するユーザーになります。 ■この制作者がシステムに文字の色や背景の色を調整値として入力していきます■するとシステムはCSSデータベースからブラウザを通してプレビューを表示するようになっています。■これを何回か繰り返して、お気に入りのCSSができたらこれを保存します。■保存されたCSSはシステムに蓄えられていきます。■このように何度かお気に入りのCSSを保存してシステムに蓄えられます。■そのなかでお気に入りのCSSがあれば、これをダウンロードすることができるようになっています。■ダウンロード後はWeb制作者が自分のWebページに利用することができます。■これがCSS作成機能になります。 CSS CSS CSS CSS CSS ダウンロード

実験機能 システム構成～実験機能 実験を制御 評価を集計 読み楽 評価 Web制作者 被験者 a b c d e f g h 評価結果閲覧 CSS a b c d e f g h 日時・サンプルHTML等入力 HTML CSSを選択 実験機能 実験を制御 評価を集計 Web制作者 カルテ 評価結果閲覧 ○月×日～△日(実験期間) ■もう一つは実験機能です。Web制作者がこの機能を使うときは実験者と呼びます。 ■実験者は日時や時間、被験者に見せる元になるHTMLを入力します。このHTMLというのは、フレームを使ったものや、テーブルレイアウトされたものには対応していません。 ■次に今まで作ったCSSが提示され、実験者はどのCSSをサンプルとして先ほどのHTMLに合成させるかかを決めていきます。 ■例えば、今回はaとdとfを選択したとするとその情報をカルテというものに実験期間やサンプルHTML、CSSを情報として記録し、これが実験を制御するものになります。 ■ここで実験者が予め依頼していた被験者に合成されたHTMLファイルをシステム上で見せて評価させます。 ■システムはこの評価情報を集計して、カルテに書き込みます。 ■そして、評価結果は実験者がこれを見ることができます。 ■これが実験機能です。 被験者 HTML CSS a HTML CSS d HTML CSS f 評価

使いやすいかどうか評価 二つに分けて評価 評価A 評価B 大学生3名 1日目：CSS作成→カルテ作成 アンケート、インタビュー、観察 評価B ユーザビリティ評価は二つに分けて行いました。 一つめの評価はスタイルシートをプレビュー画面を見ながら作成して、 実験カルテを作成させるタスクを行いました。そして、実験結果を元に どのスタイルシートを適用させたときが一番読みやすいのかを確認し、 それをダウンロードさせました。 このユーザビリティ評価Aという実験は二日かけて行われ、 ユーザビリティ評価Bはユーザビリティ評価Aの1日目の実験終了後に行いました。

評価Aの結果 操作に対する説明不足 操作に対する説明を入れた アンケート項目 平均点 CSSを作るという作業はスムーズに行えたと思いますか？ 3.7 実験を行う際のカルテという名前は分かりやすかったですか？ カルテ作成はスムーズに行えたと思いますか？ 4.7 サンプル文章に何を入れるべきかわかりましたか？ 3.3 適用させるCSSを選ぶ方法は簡単にできましたか？ 5.0 実験結果を探し出すのはスムーズに行えましたか？ どこが実験箇所かすぐにかりましたか？ CSSをダウンロードする機能は簡単に行えましたか？ HTMLファイルとCSSファイルの合成は簡単に行えそうですか? 4.0 CSSの削除は簡単に行えましたか？ 4.3 このシステムは全体的に使いやすかったですか？ 操作に対する説明不足 操作に対する説明を入れた 改善策

評価Aの結果 自由記述・アンケートから 操作に対する説明を入れた 文章や見出しに囲みを追加した カラーチャートを付け加えた 言葉に説明がほしかった 訪済リンク、ホバーリンクなど 追加して欲しいCSSの調整箇所 文章や見出しの囲み 影 追加して欲しい機能 カラーチャート 操作に対する説明を入れた 改善策 文章や見出しに囲みを追加した 改善策 カラーチャートを付け加えた 改善策

使いやすいかどうか評価 二つに分けて評価 評価A 評価B 大学生3名 1日目：CSS作成→カルテ作成 アンケート、インタビュー、観察 評価B 被験者となり、実際にAで作ったCSSを評価 この評価Bでは被験者に評価Aで作成されたスタイルシートを実際に評価してもらいました。

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

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

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

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

参考文献 向後千春，堀田龍也，黒田卓，山西潤 李明姫 ブラウザ上でのテキストの見やすさを規定するレイアウト要因(1998) http://kogolab.jp/research/paper/1998/JET98-5/JET98-5.html 李明姫 ウェブ画面における読みやすい文字表現の研究(2002) 九州大学博士学位論文

対応していないタグについて フレームで構成されているページ テーブルでレイアウトされているページ Fontタグ、bタグなどの見栄えを表すものが入っているページ (その部分以外は動作します)

調整要素について １ ７ ２ ３ ４ ５ ６ ８ ９ １０ １１ １２ １３ 本文 見出し 表 画像 大見出し 中見出し 小見出し 表の中身 表の外枠 ８ ９ １０ 箇条書き 引用 ルビ リンク １１ １２ １３ 通常リンク 訪問済みリンク リンクの上に マウスがある状態