No.034 日本郵便- ワンピースの楽譜 | Webサイト100選
サイト概要
日本郵便株式会社の公式Webサイトです。郵便局が提供している切手、はがき、集荷。配達、銀行、保険などの商品・サービスやキャンペーン情報などをご紹介しています。
No.034 日本郵便-ワンピースの楽譜 | Webサイト100選
ここが魅力！
・送るものの種類ごとに、事前に自分で料金計算ができる！オプションサービスの設定も細かくできるため、実際に送る条件に近づけた結果を得られる！また、海外へ送る場合の計算もできる！
No.034 日本郵便-料金計算-ワンピースの楽譜 | Webサイト100選
No.034 日本郵便-料金計算-ワンピースの楽譜 | Webサイト100選
・郵便追跡サービスがある！郵便物、荷物、国際郵便物と対象が幅広い！
No.034 日本郵便-郵便追跡サービス-ワンピースの楽譜 | Webサイト100選
・新着切手情報が分かる！種類によってはリーフレット（宣伝用などの、折りたたみ式の印刷物）（PDFデータ）も見ることができる！
No.034 日本郵便-切手-ワンピースの楽譜 | Webサイト100選
・「ゆうびんきょく キッズサイト」がある！アニメーションやクイズなどを通して楽しく郵便について学べる！柔らかい色合いの、手書きのようなイラストや、様々なキャラクターが出てきて癒される！
No.034 日本郵便-キッズサイト-ワンピースの楽譜 | Webサイト100選
No.034 日本郵便-なぞポスト（キッズサイト）-ワンピースの楽譜 | Webサイト100選
構成
・FV、header、nav
【幅751px以上（PC）】
No.034 日本郵便-FV(751px以上)-ワンピースの楽譜 | Webサイト100選
【幅749px以下（スマホ）】
No.034 日本郵便-FV(749px以下)-ワンピースの楽譜 | Webサイト100選
→PCで見たときには、MV（メインビジュアル）の下のほうが見えない。今回ページを見たときのMV画像に載っている申し込み期限の情報などは、下にスクロールしないと見えない。UI（User Interface）を意識すると、スクロールをしなくても、申し込み期限が見えるほうが手間も少なくなって良いと考える。
header:グローバルナビゲーションは、クリックするとメガドロップダウンメニューが現れる。メガドロップダウンメニュー内で使われているアイコンは、メインカラーと同じ赤色のデザインのものに統一されている。また、下にスクロールしていくと、スティッキーヘッダー（固定ヘッダー）になる。背景が透過していると分かる。
画面サイズ幅が749px以下ではグローバルナビゲーション表示がなくなり、右に検索アイコン、左にハンバーガーメニューが現れる。
No.034 日本郵便-メガドロップダウンメニュー-ワンピースの楽譜 | Webサイト100選
・footer
【幅751px以上（PC）】
No.034 日本郵便-footer-ワンピースの楽譜 | Webサイト100選
【幅749px以下（スマホ）】
No.034 日本郵便-footer(749px以下)-ワンピースの楽譜 | Webサイト100選
→グループ会社である「ゆうちょ銀行」と「かんぽ生命」のバナー（ロゴ）が張られている。
ツールエリアの各ツールのアイコンは、疑似要素（::before）で配置している。それぞれのアイコンの上にマウスをかざすと、その部分の背景が白くなるが、元の背景色（薄いグレー）とのコントラストが低いため、分かりにくいと感じた。
No.034 日本郵便-ツール・footer(751px以上)-ワンピースの楽譜 | Webサイト100選
ツールエリアは、画面サイズ幅が749px以下になるとfooterから消え、内容の一部がスティッキーヘッダー（固定ヘッダー）に変わる。
No.034 日本郵便-スティッキーヘッダー（固定ヘッダー）-ワンピースの楽譜 | Webサイト100選
使用パーツ・アイコン
バナー
分析・考察
■ターゲット：就業者・法人、一般の人＝幅広いという印象
[理由]就業者・法人に関しては、レターパックなど仕事で使用するものの取り扱いがあることや、法人向けのページがあるから。一般の人に関しては、日々の配達・郵送に関する調べごとができる点や、保険に関するページがあるから。
■特徴：
・「銀行・保険」ページでは、スクロールしていくと、ページ右側に相談・セミナー予約ページに異動できるバナーが出現する。興味をもった人の、予約ページへの行き方が分からないストレスを生まないようにしていると考える。また、バナーの背景色にアクセントカラーを用いることで、気づきやすくしている。
No.034 日本郵便-相談・セミナー予約バナー-ワンピースの楽譜 | Webサイト100選
・キッズサイトでは、「たんけん」など好奇心が高まる言葉選びや、クリックできる箇所にアニメーション（上下の動き）をつけて「押したくなる」工夫がされている！また、「ゆうびんきょくたんけん まどぐちへん」では、一度押した吹き出しを「？」から「見た！」に変化させ、分かりやすくしている。
No.034 日本郵便-ゆうびんきょくたんけん（キッズサイト）-ワンピースの楽譜 | Webサイト100選
・文字サイズ：グローバルナビゲーションのカテゴリ名（「送る」、「受け取る」）は13px。トップページの見出し（「銀行と保険のサービス」、「ピックアップ」）は25px。説明文は14～15px。footerのリンク（「送る」、「受け取る」）は13px。
・フォントの種類は、グローバルナビゲーションのカテゴリ名には「Noto Sans」、見出しには「游ゴシック」が使用されている。Noto Sansは、游ゴシックより少し丸みを帯びた、親しみやすく優しいデザインである。游ゴシックは、字面を小さめに設計し文字間にゆとりを持たせることで、小サイズで組んでも文字同士が干渉せず、一字一字の識別性に優れた、読みやすい組版である。
また、説明文には「メイリオ」、footerの、細字のカテゴリ名（「手紙を知る・楽しむ」など）は「Source Han Sans Korean」が使用されている。メイリオは視認性がよく、読みやすい。Source Han Sans Koreanは、日本・中国・韓国で使われている文字を網羅したゴシック体のフォント「Source Han Sans」のうち、韓国語部分の名称で、日中韓で使われている漢字を統一されたデザインで利用できるため、東アジアに向けた印刷物やWebページ、ソフトなどで、イメージをずらすことなく各国の文字を使える。
Webサイト100選No.034-ワンピースの楽譜 | Webサイト100選
コメント