No.025 豊島区- ワンピースの楽譜 | Webサイト100選
サイト概要
豊島区の公式ウェブサイトです。区民向けの新着情報や、区役所や区内の公共施設の案内・イベント情報など、豊島区に関する様々な情報を載せています。また、豊島区の取り組み、プロジェクトについても載せています。
No.025 豊島区-ワンピースの楽譜 | Webサイト100選
ここが魅力！
・豊島区民向けの幅広いジャンルの最新情報を幅広く入手できる！（例：健康・福祉、子育て・教育・若者、まちづくり・環境・産業など）
・後でまた見たいページや、取っておきたいページを登録（ブックマーク）できる！（マイページ）
サイドバー（左）一番下にある「このページを登録」ボタンを押すだけで登録できるため、簡単！
No.025 豊島区-ページ登録（マイページ）-ワンピースの楽譜 | Webサイト100選
・豊島区について学べるキッズページがある！（学校の授業などでも使える？）
No.025 豊島区-キッズページ-ワンピースの楽譜 | Webサイト100選
※ふりがなは自動でふられるのではなく、headerの「ひらがな表示」を選択する必要がある。
構成
・FV、header、nav
【幅769px以上（PC）】
No.025 豊島区-FV(769px以上)-ワンピースの楽譜 | Webサイト100選
【幅768px以下（スマホ）】
No.025 豊島区-FV(768px以下)-ワンピースの楽譜 | Webサイト100選
→SDGsへの優れた取り組みを行う自治体として選定された「SDGs未来都市」として、左上の豊島区の文字とSDGsのロゴを組み合わせたロゴを配置している。
ページ中心のお知らせ表示エリアは、スライダーを使用しており、順番に、自動で画像が切り替わり表示される。画像の下にはそれぞれの「見出し」が表示され、「STOP」ボタンを押すことでスライドショーを止めることもできる。
※インジケーターがないため、出てくるお知らせの総数は分からない。
「防災・緊急重要な情報」の背景のみ赤色を使用し、目立つようにしている。
header:「言語設定」は他のサイトでもよく見かけるが、その他にも、「文字サイズ・色合い変更」、「ふりがな表示」、「音声読上げ」などページ閲覧のための細かい設定ができるようになっている。様々な立場の人が見ることを想定していると考える。
・footer
【幅769px以上（PC）】
No.025 豊島区-footer(769px以上)-ワンピースの楽譜 | Webサイト100選
【幅768px以下（スマホ）】
No.025 豊島区-footer(768px以下)-ワンピースの楽譜 | Webサイト100選
→「区役所ご利用案内」のバナーが貼られている。
footerの下に、footerとは別のグループとして、有料で募集した外部サイトの広告バナーがまとめて貼られている。
No.025 豊島区-有料広告-ワンピースの楽譜 | Webサイト100選
使用パーツ・アイコン
バナー
分析・考察
■ターゲット：豊島区民
[理由]「届出・証明」にや「ワクチン接種」についてなど、全世代に関わるお知らせ・情報だけでなく、子どもや外国人、子育て家庭など、ターゲットを絞った情報ページも載っているから。
■特徴：
・新しいウィンドウが開く場合はそのことについて記載がある！モバイル機器が苦手な人のことも想定していると考える。
No.025 豊島区-新しいウィンドウ-ワンピースの楽譜 | Webサイト100選
・ページ左上にあるロゴの「豊島区」の文字と同じ青（#023466）をメインカラーにしている。
・外国人向けのページでは、文節ごとに空白を入れて読みやすくしている。
No.025 豊島区-外国人向けページ-ワンピースの楽譜 | Webサイト100選
・文字の対象範囲をドラッグして選択すると、近くに「▶読み上げる」ボタンが表示され、押すと音声の読み上げが始まる。
No.025 豊島区-音声読上げ-ワンピースの楽譜 | Webサイト100選
・文字サイズ：グローバルナビゲーションのカテゴリ名は14px。トップページの見出し名（「ライフシーンから探す」、「お役立ち情報」）は30px。説明文は14px。
・フォントの種類は、全体的に「メイリオ」。視認性がよく、読みやすいフォント。
Webサイト100選No.025-ワンピースの楽譜 | Webサイト100選
コメント