富士通キッズコンテンツ作成ハンドブック基本編 · 「富士通キッズコンテンツ作成ハンドブック」の使い方「富士通キッズコンテンツ作成ハンドブック」は、子どもの特性を考慮した制作ノウハウを紹

富士通キッズコンテンツ作成ハンドブック基本編

目次

本ハンドブックについて ..................................................................................................................................................................................... 1

著作権について ................................................................................................................................................................................................ 1

1. 富士通の子ども向けウェブコンテンツへの取り組み ....................................................................................................................................... 2

1 - 1. 富士通の子ども向けサイト「富士通キッズ：夢をかたちに」について ................................................................................................ 2

1 - 2. 社内向け「キッズコンテンツ作成ハンドブック」策定について ....................................................................................................... 3

1 - 3. 「富士通キッズコンテンツ作成ハンドブック」公開について ............................................................................................................. 3

1 - 4. 「富士通キッズコンテンツ作成ハンドブック」の使い方 ................................................................................................................... 3

2. ライティング.................................................................................................................................................................................................. 4

2 - 1. 分かりやすい表現 ........................................................................................................................................................................ 4

2 - 2. 文章量 ......................................................................................................................................................................................... 4

2 - 3. ターゲット層（対象者の年齢）の明記 ............................................................................................................................................. 5

2 - 4. 漢字の表記 .................................................................................................................................................................................. 6

2 - 5. 読み仮名の表記 .......................................................................................................................................................................... 8

2 - 6. カタカナの表記............................................................................................................................................................................. 8

3. 子ども向けウェブコンテンツのユーザビリティ、アクセシビリティ ...................................................................................................................... 9

3 - 1. 標準的なナビゲーションとインタラクションスキーム ........................................................................................................................ 9

3 - 2. リンク要素 .................................................................................................................................................................................. 10

3 - 3. 文字サイズ ................................................................................................................................................................................ 10

3 - 4. 画面の明滅 ................................................................................................................................................................................ 10

3 - 5. 音（BGM） .................................................................................................................................................................................. 10

3 - 6. Adobe® Flash®使用時の留意事項 ............................................................................................................................................ 11

3 - 7. キャラクターデザイン .................................................................................................................................................................. 12

4. コンテンツ .................................................................................................................................................................................................. 13

4 - 1. 子ども向けサイト特有のコンテンツ .............................................................................................................................................. 13

5. 公開の前に ................................................................................................................................................................................................ 14

6. 商標について ............................................................................................................................................................................................. 15

7. 参考文献 ................................................................................................................................................................................................... 15

8. 本書に関するお問い合わせ ........................................................................................................................................................................ 16


本ハンドブックについて

「富士通キッズコンテンツ作成ハンドブック」の対象

本ハンドブックは、主に企業などのウェブサイト担当者で子ども向けウェブコンテンツへ取り組まれる方を対象としています。

「富士通キッズコンテンツ作成ハンドブック」の構成

本ハンドブックは、「基本編」と「ペルソナマーケティング編」の 2 冊から構成されます。

富士通キッズコンテンツ作成ハンドブック

基本編ペルソナマーケティング編

子ども向けウェブコンテンツ制作のポイントを、ユニバーサルデ基本編付属の参考資料。

ザインを中心にまとめたもの。子ども向けウェブコンテンツのターゲットである「小学生」、

文章表現や操作性など、子どもの特性を踏まえたコンテンツ制「先生」、「保護者」の生活やインターネットの利用シーンを

作のノウハウを紹介している。調査し、ペルソナの形でまとめたもの。

ペルソナとは

ペルソナとは、製品やサービスのユーザー像を仮想の人物として具体的に定義したものです。（本書では、便宜上ペルソナを記述した文書その

ものも「ペルソナ」と呼びます。）

ペルソナには、年齢、性別、家族構成などのプロフィールに加え、好み、生活スタイル、価値観などの情報が記述されます。また、ユーザーが製

品やサービスを、いつ、どこで、どのような目的で、また、どのような心理状態で利用するかをストーリー形式で記述することもあります。

近年、ペルソナは、製品やサービスの提供者がユーザーのニーズや製品やサービスの利用シーンを明確にイメージできる方法として、 HCD (Human Centered Design) やマーケティングの分野で注目され、多くの実践事例が報告されています。

著作権について

本ハンドブックは、著作権法上の著作物にあたります。著作権法上の例外を除き、本書の一部又は全部を富士通株式会社の許可なく複製、転

用することを禁じます。

本ハンドブックに関するご相談は、下記お問い合わせ先までご連絡ください。

お問い合わせ先：

富士通株式会社キッズハンドブック事務局

[email protected]

1

mailto:[email protected]


1. 富士通の子ども向けウェブコンテンツへの取り組み

1 - 1. 富士通の子ども向けサイト「富士通キッズ：夢をかたちに」について

子ども向けサイト開設の背景

昨今、子ども達の理数離れが進んでいると言われています。

次世代を担う大切な人材の育成は、企業の社会的責任であるという考えのもと、ものづくり・技術を基本とする企業として、私たち人類の「夢」を

「かたちに」する「技術」について子ども達に伝える、小学校高学年向けの情報発信ポータルサイト「富士通キッズ：夢をかたちに」（以下「富士通

キッズ」）を開設しました。

「富士通キッズ」とは？

• 富士通グループが提供する子ども向けウェブコンテンツを取りまとめる情報ポータルサイト http://jp.fujitsu.com/about/kids/

• 「富士通キッズ」からリンクしている子ども向けウェブコンテンツの総称

「富士通キッズ」の目指す方向（コンセプト）

• 「未来を担う子ども達に技術の素晴らしさを伝えたい」

理数離れが問題になっている今、未来を担う人材となる子ども達に、技術がいかにわくわくして面白いかを伝えていきたい。

親子で技術の楽しさ・面白さを語り合うきっかけの場として多くの方にご活用いただきたい。

• 「ユニバーサルデザインの導入による良質なコンテンツの提供」

富士通はユニバーサルかつ、バリアフリーなウェブサイトを推進し、誰もが情報社会の恩恵を受けられる事を目指しています。今回は、情報

社会へのスタートラインを切ったばかりの子ども達が「利用しやすい良質なコンテンツ」を体験できるよう、新たに子どもへの配慮を付加したユ

ニバーサルデザインを導入しています。

キーボードだけで操作が可能

子どもの特性を考慮したコンテンツの実装

2

http://jp.fujitsu.com/about/kids/


1 - 2. 社内向け「キッズコンテンツ作成ハンドブック」策定について

策定の目的：富士通グループ間のナレッジ共有のために

本ハンドブック公開以前に、富士通では、魅力的で操作性に優れた質の高いコンテンツを富士通グループワイドで提供していくことを目的に、富

士通キッズサイト開設で得たノウハウをまとめ、社内向け「キッズコンテンツ作成ハンドブック」を策定しました。社内向けハンドブックを活用すること

で、富士通の子ども向けウェブコンテンツに対する考え方、指針、およびその作成上のルールを明確にし、富士通グループの子ども向けサイトの

方向性の統一および品質の維持・ユニバーサルデザインの徹底を目指しています。本書を、子ども向けコンテンツ作成の際の指針・参考資料と

して富士通グループ間のナレッジ共有に役立てています。

1 - 3. 「富士通キッズコンテンツ作成ハンドブック」公開について

公開の意図：子ども向けのユニバーサルデザインの普及を目指して

当初社内向けハンドブックとして本書を策定しましたが、富士通が子ども向けウェブコンテンツへの取り組みで培ったノウハウを、少しでも多くの方

に役立てていただきたいと考え、本ハンドブックを社外に向けて公開することとしました。

「子ども達の教育は社会総がかりで」と言われて久しい昨今、企業の社会的責任の観点から、企業の持てる資産を子ども達へ還元する、子ども向

けウェブコンテンツの存在が益々重要になってきています。そうした時流の中、新たに子ども向けウェブコンテンツへ取り組まれる方に本ハンドブ

ックをご活用いいただき、子ども向けウェブコンテンツの備えるべき要素への気付き、およびユニバーサルデザインに配慮した、より良いサイト実

現への一助となれば幸いです。本ハンドブックをより多くの方にご活用いいただくことで、子ども向けウェブコンテンツ全体へのユニバーサルデザ

インの普及に貢献できればと考えています。

良い絵本との出会いは子ども達の感性を刺激し、心を豊かに育み、一生の財産となると言われています。同様に、良質なコンテンツとの出会いも、

子ども達の感性を刺激し、その後の人生の大きな財産に繋がるものと考えています。子ども達と良質なウェブコンテンツとの出会いが増えることを

願っています。

1 - 4. 「富士通キッズコンテンツ作成ハンドブック」の使い方

「富士通キッズコンテンツ作成ハンドブック」は、子どもの特性を考慮した制作ノウハウを紹

介する「基本編」と、ターゲットである「小学生」、「先生」、「保護者」の生活やインターネット

の利用シーンを調査し、ペルソナの形でまとめた「ペルソナマーケティング編」の 2 冊から

構成されています。

2 冊のハンドブックは、それぞれ、サイト運営の標準的な工程である「戦略」「企画」「設計」

「制作」「運用」の各場面に応じて使います。両冊とも、サイト運営のサイクル全般を通して

活用できる内容ですが、特に以下の工程で使い分けると効果的です。

ペルソナを使って「富士通キッズ」トップページの

設計を検討している様子

基本編「設計」、「制作」、「運用」

ペルソナマーケティング編「戦略」、「企画」、「設計」、「制作」、「運用」

※ペルソナは、サイト制作の全工程において活用するのが望ましい

→ どの工程でも、常にペルソナの視点でサイトを評価する

詳しくはペルソナマーケティング編を参照のこと

3


2. ライティング

本章では、文章表現、漢字・読み仮名の表記など、子ども向けウェブコンテンツのライティングに関する基本的な事項を解説します。

2 - 1. 分かりやすい表現

一般（大人）向けの文章に読み仮名をふるだけでは、子どもに分かりやすく、やさしい文章とは言えません。子どもは自分の知らない言葉や漢字

が多用されていると、その文章を敬遠してしまう恐れがあります。

子ども向けウェブコンテンツを作成する際は、子どもが理解しやすいよう、複雑な技術用語や専門用語を平易な表現に置き換えることが重要です。

やさしい表現に置き換えることで、子どもだけでなく IT の専門知識を持たない方も理解できるというメリットもあります。

また、子どもに親しみや興味を持たせるためには、文末での語りかけの表現や、文とイラストを併用したレイアウトの工夫なども大切です。

ライティングのポイント

• 複雑な技術用語や専門用語を、子どもが日常使っている平易な表現に置き換える

• 子どもに親しみやすさを持たせるため、文末に語りかけの表現を使用する

• 簡潔で、簡単に理解できる文章にする

• 文だけでなくイラストを併用し、レイアウトを工夫する

2 - 2. 文章量

子どもは大人に比べ読解力と忍耐力に欠けるため、冗長な文章にストレスを感じ、また大人に比べスクロールを嫌う傾向にあります。

子どもが読みやすい文章とするために、 1 ページ内の文章量には充分な配慮が必要です。

ポイント

• XGA（1024×768pixels）で 1 画面に収まるようにする

例）ユメカタ研究室の各技術紹介では、以下の文字数を目安としています。

語りかけの表現

1 行 20 文字

昀大 180 文字

一文 50 文字程度

コラム： A4 用紙に収まるレイアウト

総合学習の時間など、学習の調べものとしてもインターネットを活用するシーンが増えているようです。

家で調べてプリントアウトし、学校に持っていく。そういった利用シーンを考慮し、子ども向けウェブコンテンツでは A4 用紙に収まるレイ

アウトの工夫も必要です。

4


2 - 3. ターゲット層（対象者の年齢）の明記

メインターゲット以外の年齢層を対象とするコンテンツを配信する場合には、リンク元に対象年齢または学年を記載します。

「富士通キッズ」の場合、メインターゲットは小学校高学年です。そのため、中学生以上を対象とした「やさしい技術講座（富士通研究所）」へのリ

ンクには、「対象：中学生以上」と併記しています。

例 1）

例 2）子どもへ向けた内容でない場合にも、対象（例の場合は「保護者の皆様」）を明記する

5


2 - 4. 漢字の表記

子ども向けウェブコンテンツの文章で使用する漢字表記に関する原則と注意事項を解説します。

漢字表記の原則

• 漢字は、固有名詞など特殊な場合を除き、常用漢字の範囲内で使用する

常用漢字以外の漢字を使用する場合は必ず読み仮名をふる

常用漢字表（文化庁）

http://www.bunka.go.jp/kokugo/main.asp?fl=list&id=1000003929&clc=1000000068

• 小学校学年別漢字配当に従い、ターゲットの学年に合わせた漢字を使用し、必要に応じて読み仮名をふる

学年別漢字配当表（文部科学省）

http://www.mext.go.jp/b_menu/shuppan/sonota/990301b/990301d.htm

例）小学校高学年がターゲットの場合

¾ 小学 4 年までに習得する漢字：読み仮名なしで漢字

¾ 小学 5 年以上で習得する漢字：読み仮名付きで漢字

漢字習得学年表記

中学生以上ひらがな（注）

小 6 読み仮名付きで漢字

小 5

小 4

読み仮名なしで漢字小 3

小 2

小 1

┐

├ ターゲットの学年

┘

注）文章の構成や読みやすさに応じて、小学校学年別漢字配当以外の漢字を使用してもよい。その場合は必ず読み仮名をふる

例 1）「愛」の場合

Æ 「愛」：小 4 習得漢字

Æ 表記：愛 ※読み仮名なし

例 2）「夢」の場合

Æ 「夢」：小 5 習得漢字

Æ 表記：夢（ゆめ）

例 3）「猿」の場合

Æ 「猿」：小学校学年別漢字配当以外の漢字（常用漢字）

Æ 表記：さる

文章の構成や読みやすさに応じて「猿（さる）」としてもよい

6




漢字表記上の注意点

• 漢字は既習でも「ターゲットの学年で習わない読み方」をする場合は、ひらがな、または読み仮名をふった表記とする

例）小学校高学年がターゲットのコンテンツ上で、「麦芽」を表記する場合

Æ 「麦」：小 2 習得漢字だが、「ばく」という読みは小学校で習わない

Æ 「芽」：小 4 習得漢字

Æ 表記：「ばく芽」または「麦芽（ばくが）」

• 熟語や複合語は、語の中の一文字に読み仮名をふるのではなく、全体にふる

例）「想像」場合

Æ 「想」：小 3 習得漢字

Æ 「像」：小 5 習得漢字

Æ 表記： ○ 想像（そうぞう） × 想像（ぞう）

7


2 - 5. 読み仮名の表記

漢字に読み仮名をふる場合は、「 2 - 4. 漢字の表記」に則し、都度読み仮名をふります。

本項では、具体例として「富士通キッズ」サイトでの取り組みを解説します。

• テキスト中の漢字に読み仮名をふる場合は、該当する漢字の後に全角カッコで読み仮名をふる

注）ruby タグについては下記コラム「 ruby タグについて」を参照

• 画像や Adobe® Flash®内の漢字に読み仮名をふる場合はルビをふる（漢字の上側に読み仮名をふる）

• 漢字に読み仮名をふる場合にはひらがなを使用し、アルファベットや外国語にふる場合にはカタカナを使用する

• 固有名詞は学年別漢字配当とは関係なく一般に使用されている表記に従い、都度読み仮名をふる

• 数字には読み仮名をふらない

例 1）アルファベットや外国語の場合

¾ ADSL（エーディーエスエル）

¾ FMV BIBLO（エフエムブイビブロ）

例 2）固有名詞の場合

¾ 人名：織田信長（おだのぶなが）、夏目漱石（なつめそうせき）

¾ 地名：茨城県（いばらきけん）、長万部（おしゃまんべ）

コラム： ruby タグについて

ruby タグは XHTML1.1 DTD での拡張要素です。そのため、 ruby タグを含まない DTD では、文法上この要素は使えません（「富士通キ

ッズ」では XHTML1.0 を採用しているため、 ruby タグは不使用）。

JIS X 8341-3 では、「 5.1 a)」にて、関連する技術の規格および仕様に則り、かつ、それらの文法に従って作成することが必須要件として

明記されています。

2 - 6. カタカナの表記

次のような場合には、カタカナを使用します。

• 外国の国名・地名・人名

• 外来語

• 擬声語（音や声を表す言葉）

など

8


3. 子ども向けウェブコンテンツのユーザビリティ、アクセシビリティ

子ども向けウェブコンテンツを作成する場合も、一般的なユーザビリティ、アクセシビリティの基本を考慮する必要があります。

特に子どもは大人と比べ、読解力、忍耐力、情報収集能力が低いなど、大人とは異なった特性を持ち、また、年齢によっても視覚表現に対する

好みやサイトでの行動パターンが異なるため、子ども向けウェブコンテンツ特有の配慮が必要となります。

本章では、子どもへの訴求効果の高いポイントを取り上げます。

「子どもと成人の違い *」

• アニメーションと音響効果は、子供には有効なデザイン要素だ。第一印象がよくなり、サイトに滞在してもらいやすくなる。

• 地理的なナビゲーション・メタファーが有効である。子供は、部屋、村落、 3D マップ、その他の擬似環境を好む。これは様々なサイト／サブサ

イトの概観図、もしくはエントリーポイントとして役立つ。

• 子供たちはめったにスクロールしない。画面上部の見えている範囲だけで操作する場合がほとんどだ。

*出展：Jakob Nielsen博士のAlertbox http://www.usability.gr.jp/alertbox/

“キッズ・コーナー：子どものためのウェブサイト・ユーザビリティ ” （2002 年 4 月 14 日）

http://www.usability.gr.jp/alertbox/20020414.html

また、アクセシビリティの具体的な実装についても、充分な配慮に努めることが望まれます。ここでは、富士通ウェブ・アクセシビリティ指針と JIS X

8341-3 を基に解説していきます。

参考）富士通ウェブ・アクセシビリティ指針 http://jp.fujitsu.com/webaccessibility/v2/

JIS X 8341-3 とは

日本工業規格「 JIS」が 2004 年 6 月 20 日に制定した「高齢者・障害者等配慮設計指針―情報通信における機器、ソフトウェア及びサービス―

第三部：ウェブコンテンツ」。ウェブコンテンツがアクセシビリティ向上のために満たすべき具体的な要件を規定。

富士通ウェブ・アクセシビリティ指針とは

富士通が 2002 年 6 月に策定・公開した、ウェブコンテンツのアクセシビリティに関する指針。現在は第 2.01 版（2006 年 5 月公開）。

JIS X 8341-3 をはじめ、国内外の様々な動向との整合性を保ち、それぞれの要件を網羅的にカバーしている。

3 - 1. 標準的なナビゲーションとインタラクションスキーム

ナビゲーションの GUIは、サイト内で一貫性を持たせることが重要です。また、「こう反応するだろう」というユーザーの予測可能性を裏切るインタラ

クションは混乱の原因となります。ナビゲーションの GUI、インタラクションスキームは、サイト内で一貫したデザインを用いるようにします。

［対応する富士通ウェブ・アクセシビリティ指針］

（優先度 2） 36. サイト内での基本操作部分（「トップページ」、「サイトマップ」などへのリンクや、ページ内リンクなど）は、

サイト内での表現（文言・形状・色彩・配置など）や機能に、一貫性をもたせる。

http://jp.fujitsu.com/webaccessibility/v2/36.html

［対応する JIS X 8341-3］

5.3f（推奨）

9

http://www.usability.gr.jp/alertbox/


http://jp.fujitsu.com/webaccessibility/v2/



3 - 2. リンク要素

クリックできる要素は、クリックできることがわかるようにします。例えば、ボタン画像にはボタン然としたデザインを用いるなどです。

クリックできることを示唆するデザインとして、シンプルなロールオーバーは効果的な表現方法といえます。


（優先度 2） 38. リンクがあることが見ただけでわかるようにする。



5.3g（推奨）

3 - 3. 文字サイズ

テキスト、画像を問わず、なるべくシンプルで比較的大きな文字を使うよう心がけます。

「富士通キッズ」での文字サイズは、テキストの場合は 14 ポイント、画像内の文字の場合は 13 ポイントを推奨値としています。

また、テキストの文字サイズは利用者が変更できるようにしておかなくてはなりません。


（優先度 2） 56. 文字を画像で使用する時は、文字フォント・サイズ・コントラストなどを考慮し、読みやすくする。


（優先度 1） 60. 文字サイズ・フォント・および行間は、利用者が変更できるようにする。



5.5c（推奨）、5.6a（必須）、5.6b（推奨）

3 - 4. 画面の明滅

【重要】画面、もしくは画面の一部が短時間で連続的に変化するような表現を使わないようにします。

1 秒間に数回の明滅や、ストロボ光のような光量の急激な変化は、光過敏性てんかんの発作を引き起こす可能性があります。


（優先度 1） 13. 画面全体が短時間で連続的に変化するような表現を使用しない。

画面の一部でも、明滅やスクロールの速いものや、色のコントラストが極端に変わるものなどは、使用しないことが望ましい。



5.8a（推奨）、5.8b（必須）

関連項目: 5.1a（必須）

3 - 5. 音（BGM）

動画などで音（ BGM、ナレーション）を使用する場合、ユーザーが音のオン・オフを設定できるようにします。

また、自動的に音を再生する場合は、リンク元で音が再生されることが推測できるよう必ず明記（支援技術で読み上げられるように）します。


（優先度 3） 69. 自動的に音（ BGM など）を再生しない。



5.7a（推奨）

関連項目: 5.1a（必須）

10







3 - 6. Adobe® Flash® 使用時の留意事項

Adobe® Flash®を用いた動的なコンテンツは、子どもに対する訴求効果の高い、有効な表現方法です。 Adobe® Flash®

の利点を活用するために

も、使用時にはユーザビリティ、アクセシビリティの面で以下の配慮が必要です。

• Adobe® Flash®コンテンツが閲覧できない環境への配慮

Adobe® Flash®が閲覧できない環境へ配慮し、 HTML 版やテキスト版などの代替手段を用意します。また、可能であれば、プラグインの有無

（含バージョン判定）を自動的に検出し、昀適なバージョンのプラグインをダウンロードできるように誘導するのが望ましいでしょう。


（優先度 1） 24. 特定の技術やプラグイン（ JavaScript™・Java™アプレット・ Adobe® Flash®

・Adobe® PDF など）が必要なコンテンツ

を提供する場合は、代替手段・代替情報も併せて提供する。



5.4e（必須）

関連項目: 5.1a（必須）、 5.1b（推奨）


（優先度 2） 25. 特定の技術やプラグイン（ JavaScript™・Java™アプレット・ Adobe® Flash®

・Adobe® PDF など）はアクセシブルな

ものを用いる。また、コンテンツは、それらの技術やプラグインが提供するアクセシブルな機能を、昀大限活用して作成する。


［対応するJIS X 8341-3］

5.1b（推奨）

関連項目: 5.4e（必須）

• キーボードのみの操作に対応すること

Tab キーによるフォーカスの移動、矢印キーでの操作、 Enter キーでの実行など、キーボードによる操作のみで、 Adobe® Flash®内に設置さ

れたナビゲーションを操作できるようにします。


（優先度 1）33. 特定の入力装置に依存せず、少なくともキーボードだけですべての操作ができるようにする。



5.3a（必須）

• スクリーンリーダーでの読み上げに対応すること

Adobe® Flash®内に記述された文章やメニューなどを、スクリーンリーダーで正しく読み上げられるようにします。


（優先度 1） 6. できるだけ多くの機器やソフトで操作・利用できるように、利用環境を定める。



なし

11






コラム： Internet Explorer® 7 のズーム機能に対応した Adobe® Flash®

Internet Explorer® 7 にはウェブページをズーム表示する機能が実装されていますが、 ActionScript™でスケールを固定するなどの指定が

ある場合には、 Adobe® Flash®コンテンツがズーム機能に対応しないことがあります。

Adobe® Flash®コンテンツの文字を拡大表示する場合などにも有効な機能なので、 Adobe® Flash®

使用時には Internet Explorer® 7 のズ

ーム機能に対応するよう配慮するのが望ましいでしょう。

3 - 7. キャラクターデザイン

子どもに興味や親しみを持たせるにはキャラクターが効果的です。コンテンツ内でキャラクターから直接子どもに話しかけさせるのも、子どもの興

味を喚起し非常に効果的です。

例 1）

例 2）

12


4. コンテンツ

本章では、子ども向けサイト特有のコンテンツに関する基本的な事項を解説します。

4 - 1. 子ども向けサイト特有のコンテンツ

使い方（ヘルプ）、保護者・先生へのメッセージなど、コンテンツの内容に応じて必要なページを適宜用意します。

特にコンテンツの閲覧・操作に説明が必要な場合には、必ず「使い方（ヘルプ）」を用意し、当該コンテンツと一体化させて実装します。

例 1）使い方

富士通キッズ「ユメカタ研究室」

http://jp.fujitsu.com/about/kids/yumekata/

ユメカタ研究室の「使い方」ナビゲー

ションを Adobe® Flash®内に設置

Adobe® Flash®内に操作説明を表示

例 2）保護者・先生へのメッセージ

富士通キッズ「保護者の皆様へ」

http://jp.fujitsu.com/about/kids/parents/

13

http://jp.fujitsu.com/about/kids/yumekata/

http://jp.fujitsu.com/about/kids/parents/


5. 公開の前に

コンテンツを公開する前には、品質チェックを行うことが重要です。

目視確認

• ページ全体が正常に表示、動作することを目視確認する。可能であれば、複数の想定ユーザー環境で確認するのが望ましい

代表的な想定ユーザー環境

オペレーティングシステムブラウザディスプレイ解像度

WindowsⓇ Windows VistaⓇ Internet ExplorerⓇ6、7

FirefoxⓇ 1.5.x、2.0x

XGA(1024×768pixels)

WindowsⓇ XP

Mac OSⓇ Mac OSⓇ X SafariTM2.0.x

注）特に Internet Explorer® 7 の確認では、ズーム機能を利用した場合などの表示確認が重要です。

文法チェック

• 文法チェッカーなどを使用し、構文エラーがないことを確認する

例） http://validator.w3.org/

アクセシビリティチェック

• チェックツールを使用し、検出可能な範囲にアクセシビリティ上の問題がないことを確認する

例） WebInspector http://jp.fujitsu.com/about/design/ud/assistance/webinspector/download.html

• 色のない状態（グレースケール）で表示しても、内容が伝わることを確認する

¾ ウェブページの画面を画像データとして保存し、画像編集ソフトなどでグレースケールに変換し、明度の違いだけで内容が把握でき

るかどうか確認する

¾ 文字色チェックツールを使用し、文字色と背景色の組み合わせが適切であることを確認する

例） ColorSelector http://jp.fujitsu.com/about/design/ud/assistance/colorselector/download.html

¾ 画面を色変換させるチェックツールを使用し、図やグラフ、動画などの配色が適切であることを確認する

例） ColorDoctor http://jp.fujitsu.com/about/design/ud/assistance/colordoctor/download.html

• 音声ブラウザやスクリーンリーダーを使用し、正しく読み上げられることを確認する

¾ alt 属性の内容の適切さなど、チェッカーツールや目視では判定できない問題を確認するときに効果的

• キーボードのみで操作ができることを確認する

¾ 上下矢印キーによる画面スクロール、 Tab キーによるフォーカスの移動が可能か

¾ 全てのリンクおよび入力項目に文脈に沿った正しい順序で移動できるか

¾ リンクやコマンドは Enter キーで実行できるか

• ブラウザの設定を変更し、内容が伝えられることを確認する

¾ グラフィックス表示をオフにし、代替表示される alt テキストだけで情報が伝えられるか

¾ サウンド出力をオフにし、重要な情報が伝達できなくなることがないか

¾ スタイルシートをオフにし、ページが読めるか

¾ 画面表示色をハイコントラスト（注 1）にし、白黒反転などさせてページが読めるか

注 1: Windows®の場合、 [コントロールパネル ] → [ユーザー補助 ] → [画面] で選択

14

http://validator.w3.org/

http://jp.fujitsu.com/about/design/ud/assistance/webinspector/download.html

http://jp.fujitsu.com/about/design/ud/assistance/colorselector/download.html

http://jp.fujitsu.com/about/design/ud/assistance/colordoctor/download.html


6. 商標について

Adobe Flash、Adobe PDF は Adobe Systems Incorporated（アドビシステムズ社）の米国ならびにその他の国における商標または登録商標で

す。

Windows Vista、Internet Explorer は米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。

Java およびすべての Java 関連の商標およびロゴは、米国およびその他の国における米国 Sun Microsystems, Inc.の商標または登録商標で

す。

Mac OS、Safari はアップルコンピュータ社の商標です。

Firefox は Mozilla Foundation の登録商標です。

記載されている製品名などの固有名詞は、各社の商標または登録商標です。

7. 参考文献

y 講談社校閲局編「日本語の正しい表記と用語の辞典」（講談社第二版 1992 年）576 頁

y 財団法人日本規格協会「 JIS X 8341 高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス第 3 部：ウェ

ブコンテンツ」（財団法人日本規格協会第一版 2004 年）

y 富士通株式会社「富士通ウェブ・アクセシビリティ指針第 2.01 版」（2006 年 5 月 26 日改訂）

http://jp.fujitsu.com/webaccessibility/

y 文化庁「国語施策情報システム常用漢字表」


y 文部科学省「小学校学習指導要領別表学年別漢字配当表」


y Jakob Nielsen「Jakob Nielsen 博士の Alertbox “キッズ・コーナー：子供のためのウェブサイト・ユーザビリティ ”」（2002 年 4 月 14 日）


y Jakob Nielsen「Jakob Nielsen 博士の Alertbox “ティーンエージャーのためのウェブサイト・ユーザビリティ ”」（2005 年 1 月 31 日）


y Nielsen Norman Group, Usability of Websites for Children:70 design guidelines based on usability studies with kids, Nielsen

Norman Group Report

y Nielsen Norman Group, Teenagers on the Web:61 Usability Guidelines for Creating Compelling Websites for Teens, Nielsen

Norman Group Report

y Jakob Nielsen, Kids' Corner: Website Usability for Children, Jakob Nielsen's Alertbox (April 14, 2002)

http://www.useit.com/alertbox/children.html

y Jakob Nielsen, Usability of Websites for Teenagers, Jakob Nielsen's Alertbox (January 31, 2005)

http://www.useit.com/alertbox/teenagers.html

15


8. 本書に関するお問い合わせ

お問い合わせ先

富士通株式会社キッズハンドブック事務局

[email protected]

16

mailto:[email protected]


2007 年 12 月 5 日版

企画・制作・発行 : 富士通株式会社

本書の無断転載を禁止します

Documents

富士通キッズコンテンツ作成ハンドブック基本編 · 「富士通キッズコンテンツ作成ハンドブック」の使い方 「富士通キッズコンテンツ作成ハンドブック」は、子どもの特性を考慮した制作ノウハウを紹

富士通キッズコンテンツ作成ハンドブック基本編 · 「富士通キッズコンテンツ作成ハンドブック」の使い方「富士通キッズコンテンツ作成ハンドブック」は、子どもの特性を考慮した制作ノウハウを紹