本文へ移動
うぇぶ、ひゃっくり|Webサイト100選
  • ホーム
  • はじめまして
  • サイトについて
  • お問い合わせ
うぇぶ、ひゃっくり|Webサイト100選
  • ホーム
  • はじめまして
  • サイトについて
  • お問い合わせ

カテゴリー

  • Webデザイン分析 (26)
  • 考えごと (17)
  • 学んだこと (13)
  • 学習ログ (10)
  • AI活用ログ (4)
  • 制作記録 (3)
ホームWebデザイン分析No.022 東京消防庁こどもページのデザイン分析|Webサイト100選

No.022

No.022 東京消防庁こどもページのデザイン分析|Webサイト100選

Webデザイン分析 | 実際のWebサイトを見ながら、「なぜ伝わるの?」「なぜ使いやすいの?」を分析しています。 UI・UX・配色・余白・レイアウト・動きなどを観察し、 「なんとなく良い」を言葉にして学ぶカテゴリです。

2026/06/01 Webデザイン分析 約8分
No.022 東京消防庁こどもページのデザイン分析|Webサイト100選

東京消防庁のこどもページを開いたとき、「あ、全然違う」と思いました。同じ東京消防庁のサイトでも、大人向けのページとは雰囲気がまるで別です。子ども向けに作るだけで、ここまで作りが変わるのかと驚きながら分析しました。

はじめに

ひゃっくり君
ひゃっくり君
東京消防庁のこどもページって、すごくわかりやすい感じがする。普通の行政サイトと全然違う?
本当にそう思った。文字の大きさも色も絵も、全部子ども向けに変えているんだ。だれに向けるかで、作りがここまで変わるんだね。
AIMI.
AIMI.

この記事でわかること

  • 防災というむずかしいテーマを、イラストでこわくなく伝える工夫
  • 答えによって展開が変わる「みんなの防災クイズ」
  • ぬりえやペーパークラフトを一覧で並べる、迷わないトップページ
  • 子ども向けのサイトをもっと楽しくするために、私が考えたこと

結論

東京消防庁こどもページは、防災というむずかしいテーマを、イラストと分かりやすい分類で子どもに届けるサイトです。派手な演出にたよらず、大きな文字・余白・はっきりした色の差で、だれでも迷わず使えるように作られています。

サイトの基本情報

  • サイト名:東京消防庁こどもページ
  • 運営:東京消防庁
  • 目的:子ども向けの防災や消防の情報の発信
  • 主に見る人:小学生・中学生、保護者、先生
  • 基礎知識:東京消防庁は東京都の消防本部で、島しょ地域と稲城市をのぞく都内のほぼ全域を受け持っています。81の消防署があり、職員は18,839人です(2025年4月1日現在。東京消防庁「組織」)。国の「総務省消防庁」とは別の組織です。

防災を、こわくなく伝えるイラスト

東京消防庁こどもページの、街と消防車のイラストを使った最初の画面
出典:東京消防庁こどもページ(2026年10月撮影)。分析した3月から変わっている部分もあります

東京消防庁こどもページは、小学生・中学生を中心に、子どもが一人でも防災や消防について学べるように作られています。保護者や先生が子どもと一緒に見ることも考えられていて、信頼できることと分かりやすいことの両方が大切にされていました。

土台は白で、消防を思わせる赤やオレンジがメインです。目立たせる色にはオレンジや黄色が使われています。文字は大きめで読みやすく、写真よりイラストが中心です。実際の写真よりイラストのほうが、こわい話題でも気持ちの負担が軽くなり、自然に内容に興味を持てるのだと思います。

ひゃっくり君
ひゃっくり君
子ども向けのサイトって、どう違うの?
文字が大きくて、イラストも多いの。むずかしい防災の話でも、こわくなく読めるんだ。
AIMI.
AIMI.

答えで展開が変わる防災クイズ

マスコットキャラクターの「キュータ」が、いろいろなコーナーの案内役として登場していました。

印象に残ったのは「みんなの防災クイズ」です。地震・火災・生活の中の事故からコースを選び、答えによって次に出てくる展開が変わる、物語のようなクイズになっていました。ただ読むだけでなく、自分で選んだ結果が返ってくるので、遊びながら考えることができます。

一覧で並べる、迷わないトップページ

東京消防庁こどもページの、大きな丸いボタンが並ぶメニュー
出典:東京消防庁こどもページ(2026年10月撮影)。分析した3月から変わっている部分もあります

東京消防庁こどもページの組み立て

トップページには、防災クイズ、ぬりえ、ペーパークラフトなどの主な内容が一覧で並んでいます。探し回らなくても、興味を持ったものからすぐに見られる作りです。

ボタンは大きく押しやすく、カテゴリから個別のページへすぐに移れます。動きや演出は控えめで、子どもでも操作に迷わないことが優先されていました。情報を増やしすぎず、学ぶ内容を中心に整理しているので、初めて訪れた子どもでも迷いにくいと感じました。

このサイトから取り入れたいこと

  • むずかしい話題は、イラストでやわらげる:写真よりイラストのほうが、こわさや重さを減らせます。
  • 読むだけでなく、選ぶ・答える体験を入れる:自分で選ぶと、内容が記憶に残りやすくなります。
  • 子ども向けは、大きなボタンと一覧で:探す手間をなくすと、すぐに楽しめます。

自分が子ども向けのページを作るなら、文章の説明の最後に「やってみよう」の小さなクイズを一問だけ入れてみたいと思います。読んだ内容をすぐに使ってみることで、子どもが「分かった」を実感しやすくなるはずです。

ほかのサイトと比べると

同じ「行政・公共」の東京都公式サイト(「No.005 東京都公式サイトのデザイン分析」)は、白い画面に最小限の色で、だれもが必要な情報に早くたどり着けることを大切にしていました。同じ東京の行政のサイトでも、こどもページはイラストと明るい色、クイズで「楽しく学べる」ことを優先しています。見る人が変わると、同じ行政のサイトでもここまで作りが変わるのだと実感しました。

東京消防庁こどもページを見て、私が気づいたこと

このサイトから学んだこと

子ども向けのサイトだからといって飾りを増やすだけではなく、情報を分かりやすく整理することが大切だと感じました。特にカテゴリの分け方や案内が分かりやすく、使う人が迷わず目的の内容へたどり着ける作りは参考になりました。また、防災というむずかしいテーマでも、伝え方によって親しみやすくできることを学びました。

ひゃっくり君
ひゃっくり君
AIMIなら、どこを変えてみたい?
防災クイズやミニゲームを増やしたいな。ただ、探しやすさはくずさないようにね。
AIMI.
AIMI.

自分ならこう作る

今のシンプルで分かりやすい作りは保ちながら、防災クイズやミニゲームなど、参加できる内容を増やすと、もっと楽しみながら学べるサイトになると考えました。ただし、情報の探しやすさをそこなわない範囲で取り入れることが大切だと思います。

これから学ぶ人へ

Webデザインは見た目だけでなく、使う人に合わせて情報を整理することが大切だと、改めて感じました。特に子ども向けのサイトでは、だれでも分かる案内や表現が求められます。使う人の目線で考えることの大切さを学べる、よい例でした。

※この記事は、Webデザインを学ぶ過程で実際の公開サイトを見て気づいたことをまとめた学習記録です。

同じ「行政・公共」のサイトとして、「No.005 東京都公式サイトのデザイン分析」も分析しています。見比べると、それぞれの工夫の違いがよく分かります。

この記事のまとめ

東京消防庁こどもページは、防災というむずかしいテーマを、イラスト・大きな文字・はっきりした色で、子どもにこわくなく届けるサイトです。答えで展開が変わる防災クイズや、一覧で並ぶぬりえ・ペーパークラフトで、遊びながら学べるように作られています。「だれでも迷わず使える」という考え方は、多くのサイトに生かせると感じました。

よくある質問(FAQ)

Q. 東京消防庁こどもページは、なぜ子ども向けだと分かるのですか?

A. 文字が大きいこと、色が明るいこと、写真よりイラストが多いことが、子ども向けの印象を作っていると思います。

Q. 子ども向けのWebページを作るときに大切なことは何ですか?

A. 読める漢字に気をつけること、押す場所を大きくすること、見て楽しい絵を使うことなどが大切だと思います。

Q. 防災の情報を子どもに伝えるには、どんな工夫がありますか?

A. むずかしい言葉を避けること、クイズのような参加できる内容を入れること、キャラクターに案内してもらうことなどが効果的だと思います。実際の画面は東京消防庁こどもページで見られます。

関連記事

  • No.005 東京都公式サイトのデザイン分析
  • No.025 名古屋市のデザイン分析
  • No.023 ベネッセのデザイン分析

うぇぶ、ひゃっくり|Webサイト100選

この記事をシェア

X(Twitter) LINE Facebook
#Webデザイン分析

この記事が役に立ったら、他の学習記事もチェック!

学習記事一覧へ →
‹ 前の記事 No.021 国立科学博物館 公式サイトのデザイン分析|Webサイト100選 No.021 国立科学博物館 公式サイトのデザイン分析|Webサイト100選 次の記事 › No.023 ベネッセ公式サイトのデザイン分析|Webサイト100選 No.023 ベネッセ公式サイトのデザイン分析|Webサイト100選

関連記事

No.025 名古屋市公式サイトのデザイン分析|Webサイト100選

No.025 名古屋市公式サイトのデザイン分析|Webサイト100選

名古屋市のサイトを見て、最初は「東京都のサイトと似ているな」と思いました。でも見...

2026.06.10 9分で読める
No.021 国立科学博物館 公式サイトのデザイン分析|Webサイト100選

No.021 国立科学博物館 公式サイトのデザイン分析|Webサイト100選

国立科学博物館のサイトは、恐竜の展示がある博物館なのに、デザインがとても落ち着い...

2026.05.29 8分で読める
No.002 キユーピー公式サイトのデザイン分析|Webサイト100選

No.002 キユーピー公式サイトのデザイン分析|Webサイト100選

キユーピー公式サイトをぼんやり眺めていたら、「赤が多いのに、なんでうるさく感じな...

2026.04.04 9分で読める

Webデザイン100選まで

残り 74 サイト

26 / 100 件

プロフィール

AIMI.

AIMI.

Web制作と学びの記録

Webデザインと子どもに関わる仕事をしながら、 日々の「気づき」や「なぜ?」を大切にしています。 仕事のこと、学んだこと、子どもの成長や教育について考えたことを、 自分なりに整理しながら記録しています。

カテゴリー

  • Webデザイン分析 (26) ›
  • 学習ログ (10) ›
  • Webデザイン (2) ›
  • プログラミング (6) ›
  • 参考書 (2) ›
  • AI活用ログ (4) ›
  • 制作記録 (3) ›
  • 学んだこと (13) ›
  • 考えごと (17) ›

人気の記事

  1. 1 HTMLとは?ゼロからWebページを作る基本と、私が最初に作ったページ
    HTMLとは?ゼロからWebページを作る基本と、私が最初に作ったページ

    2026.06.30

  2. 2 Webデザイン初心者におすすめの参考書は?図解の本が合った私の選び方
    Webデザイン初心者におすすめの参考書は?図解の本が合った私の選び方

    2026.10.05

  3. 3 CSSとは?できること・書き方の基本と、余白でつまずいた私の練習法
    CSSとは?できること・書き方の基本と、余白でつまずいた私の練習法

    2026.07.15

アーカイブ

  • 2026年10月 (10)
  • 2026年9月 (10)
  • 2026年8月 (11)
  • 2026年7月 (10)
  • 2026年6月 (11)
  • 2026年5月 (10)
  • 2026年4月 (11)

タグ

  • #Webデザイン分析26
  • #心理学16
  • #Webデザイン学習15
  • #初心者向け12
  • #子育て・教育12
  • #AI活用9
  • #プログラミング教育6
  • #職業訓練校5
  • #効率化・タイパ5
  • #ポートフォリオ制作5
  • #歴史・思想4
うぇぶ、ひゃっくり|Webサイト100選

一度見たら、止まらない。Webデザインの連鎖。 実在するWebサイトの分析と、子ども向けプログラミング教室で教える経験から、「わかりやすく伝える」工夫を言葉にしています。

カテゴリー

AI活用ログ Webデザイン分析 制作記録 学んだこと 学習ログ 考えごと

サイト情報

ホーム はじめまして サイトについて お問い合わせ

© 2026 うぇぶ、ひゃっくり|Webサイト100選.