デザインを"見る"勉強（12）

こんにちは！デザイン分析第12回目です。
そろそろ梅雨入りしそうで気圧に体調を揺さぶられている今日この頃です。。

1 最初の印象→どこからその印象を受けたのか
2 いいなと思ったポイント→レイアウト、余白、配色、文字組み(フォントサイズ、行間、文字間)、あしらい
3 レイアウト・余白を分析する→機能面(配置や視線誘導)
4 フォントの分析→サイズ、行間、文字間
5 色味の分析→フォント、全体
6 あしらい→印象を左右したり、視線誘導を行う、ブランドの刷り込み
7 アニメーション→動きの向き、スピード

本日も上記に沿って分析していきたいと思います。

今回はこちらのサイトです。

湧別町（役場）　様

行政情報｜湧別町

今勤めている会社が企業や政府系のサイト構築・運用を行っており、
所属部署で仮想案件として役所系のサイトリニューアルをすることになったので、今回は見やすくて地域の良さも伝わるようなサイトを選びました！

１
・トップページは町民向けサイト
→移住やふるさと納税へのリンクもあって町民以外の人にもわかりやすい
・MVで流れている画像がすべて子ども
→移住・子育てのしやすさを推している町？
・町の広報冊子ってネットで見られる時代なんだ…！

２
・全体的にアイコンが多くて見やすい
・全体としては群青色とアクセントカラーのオレンジをもとに構成されているが、ナビゲーションは各項目ごとに色を分けている
→何でだろうと思っていたが、新着情報のそれぞれのニュースに付与されたカテゴリーが、ナビゲーションの項目ごとの色と連動している！！なるほど！
・新着情報が1カテゴリーだけではなく、イベントや募集というタブに分かれていて見やすい
・広告バナー部分に、ちゃんと広告と書いてある笑
→1つ1つのaltテキストにも、先頭に【広告】って入っている！
・湧別町が日本のどこにあるのか地図があり、海のイラストもあって分かりやすい
・人口や世帯数の数字部分のジャンプ率が◎（40px/18px）で、アイコンがアクセントカラーになっていて見やすい
・アクセシビリティ面だが、背景色がパッと変わらずにじんわり変わっていくところが目に優しくていいなあと思った

３
・エリアごとに背景が自然に異なっていて見やすい
・エリアとエリアの余白は基本160px
・ページ後半のあまり重要ではない部分の余白は70～80px
・行政情報と広報はそれぞれ情報量がコンパクトなエリアだが、縦ではなく横に並べることで、見やすいだけでなくスクロール量も減らしている

４
・タイトル・本文・ボタンすべて：BIZ UDゴシック
→ゴシックだけど堅すぎない、丸みのある筑後ゴシックに近い
→役所サイトだけど柔らかいイメージ
・人口・世帯数の数字のみ：Roboto（40px）
・タイトル：36px
・本文：18px
・ボタン・アイコンテキスト：16px

5
・ベース：白 #fff
・メイン：少しくすんだ青 #3f72af
→パキッとしていない分柔らかいイメージになる、町のシンボルアイコンカラー？
・アクセントカラー：オレンジ #ff8943
→パキッとした原色に近い色で、まちの元気さや希望を表しているのかも？
・使用されているグレー：
　①ナビゲーション区分線：#e6e6e6（1px solid ）
　②エリア背景色：#f2f2f2・#f8f8f7
→同じ背景色でも#f8f8f7#f2f2f2の方が少しグレーが濃いのは、白いカラムのボタン？を配置したときのコントラスト比を重視したため
　③アクセシビリティの選択されていない部分の背景色：#e6e6e6
→#e6e6e6が3つの中で一番濃いグレーなのは、アクセシビリティが最も大事な部分で、ボタンとして機能させるためより白とコントラスト比を重視しているため
・画像ボタン部分、背景画像を暗くすることでテキストの視認性をよくしている

6
・よくある質問のバナーが分かりやすい
→多分町のマスコットキャラクター？が、疑問そうな顔で？、もう片方のキャラクターが分かったそうな顔で！と書いてある
・まちの話題のタイトルにあるメガホンで話題感を強調
・ふるさと納税のリンクボタンの背景が特産物になっていてわかりやすい

7
・MVが1枚1枚ズームされて、カルーセルで流れる
→どんな効果を得たくてそれを採用しているのかわからないので、わかる方いらっしゃったら教えてください、、笑

やはり役所のサイトなので、文字サイズや背景色の選択ができるなどアクセシビリティAA以上の構成だな～という感じです！
タブキーでも順番通りでした！（ナビゲーション飛ばしてたけどそれはいいのか、、？笑）

6月分は少し余裕を持てました笑
ではまた次回！