東京消防庁のこどもページを開いたとき、「あ、全然違う」と思いました。同じ東京消防庁のサイトでも、大人向けのページとは雰囲気がまるで別です。子ども向けに作るだけで、ここまで作りが変わるのかと驚きながら分析しました。
はじめに
この記事でわかること
- 防災というむずかしいテーマを、イラストでこわくなく伝える工夫
- 答えによって展開が変わる「みんなの防災クイズ」
- ぬりえやペーパークラフトを一覧で並べる、迷わないトップページ
- 子ども向けのサイトをもっと楽しくするために、私が考えたこと
結論
東京消防庁こどもページは、防災というむずかしいテーマを、イラストと分かりやすい分類で子どもに届けるサイトです。派手な演出にたよらず、大きな文字・余白・はっきりした色の差で、だれでも迷わず使えるように作られています。
サイトの基本情報
- サイト名:東京消防庁こどもページ
- 運営:東京消防庁
- 目的:子ども向けの防災や消防の情報の発信
- 主に見る人:小学生・中学生、保護者、先生
- 基礎知識:東京消防庁は東京都の消防本部で、島しょ地域と稲城市をのぞく都内のほぼ全域を受け持っています。81の消防署があり、職員は18,839人です(2025年4月1日現在。東京消防庁「組織」)。国の「総務省消防庁」とは別の組織です。
防災を、こわくなく伝えるイラスト

東京消防庁こどもページは、小学生・中学生を中心に、子どもが一人でも防災や消防について学べるように作られています。保護者や先生が子どもと一緒に見ることも考えられていて、信頼できることと分かりやすいことの両方が大切にされていました。
土台は白で、消防を思わせる赤やオレンジがメインです。目立たせる色にはオレンジや黄色が使われています。文字は大きめで読みやすく、写真よりイラストが中心です。実際の写真よりイラストのほうが、こわい話題でも気持ちの負担が軽くなり、自然に内容に興味を持てるのだと思います。
答えで展開が変わる防災クイズ
マスコットキャラクターの「キュータ」が、いろいろなコーナーの案内役として登場していました。
印象に残ったのは「みんなの防災クイズ」です。地震・火災・生活の中の事故からコースを選び、答えによって次に出てくる展開が変わる、物語のようなクイズになっていました。ただ読むだけでなく、自分で選んだ結果が返ってくるので、遊びながら考えることができます。
一覧で並べる、迷わないトップページ

トップページには、防災クイズ、ぬりえ、ペーパークラフトなどの主な内容が一覧で並んでいます。探し回らなくても、興味を持ったものからすぐに見られる作りです。
ボタンは大きく押しやすく、カテゴリから個別のページへすぐに移れます。動きや演出は控えめで、子どもでも操作に迷わないことが優先されていました。情報を増やしすぎず、学ぶ内容を中心に整理しているので、初めて訪れた子どもでも迷いにくいと感じました。
このサイトから取り入れたいこと
- むずかしい話題は、イラストでやわらげる:写真よりイラストのほうが、こわさや重さを減らせます。
- 読むだけでなく、選ぶ・答える体験を入れる:自分で選ぶと、内容が記憶に残りやすくなります。
- 子ども向けは、大きなボタンと一覧で:探す手間をなくすと、すぐに楽しめます。
自分が子ども向けのページを作るなら、文章の説明の最後に「やってみよう」の小さなクイズを一問だけ入れてみたいと思います。読んだ内容をすぐに使ってみることで、子どもが「分かった」を実感しやすくなるはずです。
ほかのサイトと比べると
同じ「行政・公共」の東京都公式サイト(「No.005 東京都公式サイトのデザイン分析」)は、白い画面に最小限の色で、だれもが必要な情報に早くたどり着けることを大切にしていました。同じ東京の行政のサイトでも、こどもページはイラストと明るい色、クイズで「楽しく学べる」ことを優先しています。見る人が変わると、同じ行政のサイトでもここまで作りが変わるのだと実感しました。
東京消防庁こどもページを見て、私が気づいたこと
このサイトから学んだこと
子ども向けのサイトだからといって飾りを増やすだけではなく、情報を分かりやすく整理することが大切だと感じました。特にカテゴリの分け方や案内が分かりやすく、使う人が迷わず目的の内容へたどり着ける作りは参考になりました。また、防災というむずかしいテーマでも、伝え方によって親しみやすくできることを学びました。
自分ならこう作る
今のシンプルで分かりやすい作りは保ちながら、防災クイズやミニゲームなど、参加できる内容を増やすと、もっと楽しみながら学べるサイトになると考えました。ただし、情報の探しやすさをそこなわない範囲で取り入れることが大切だと思います。
これから学ぶ人へ
Webデザインは見た目だけでなく、使う人に合わせて情報を整理することが大切だと、改めて感じました。特に子ども向けのサイトでは、だれでも分かる案内や表現が求められます。使う人の目線で考えることの大切さを学べる、よい例でした。
※この記事は、Webデザインを学ぶ過程で実際の公開サイトを見て気づいたことをまとめた学習記録です。
同じ「行政・公共」のサイトとして、「No.005 東京都公式サイトのデザイン分析」も分析しています。見比べると、それぞれの工夫の違いがよく分かります。
この記事のまとめ
東京消防庁こどもページは、防災というむずかしいテーマを、イラスト・大きな文字・はっきりした色で、子どもにこわくなく届けるサイトです。答えで展開が変わる防災クイズや、一覧で並ぶぬりえ・ペーパークラフトで、遊びながら学べるように作られています。「だれでも迷わず使える」という考え方は、多くのサイトに生かせると感じました。
よくある質問(FAQ)
Q. 東京消防庁こどもページは、なぜ子ども向けだと分かるのですか?
A. 文字が大きいこと、色が明るいこと、写真よりイラストが多いことが、子ども向けの印象を作っていると思います。
Q. 子ども向けのWebページを作るときに大切なことは何ですか?
A. 読める漢字に気をつけること、押す場所を大きくすること、見て楽しい絵を使うことなどが大切だと思います。
Q. 防災の情報を子どもに伝えるには、どんな工夫がありますか?
A. むずかしい言葉を避けること、クイズのような参加できる内容を入れること、キャラクターに案内してもらうことなどが効果的だと思います。実際の画面は東京消防庁こどもページで見られます。
