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

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

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

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

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

多良間村（役場）　様

https://www.vill.tarama.okinawa.jp/

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

１
・全体的にシンプルでわかりやすい

２
・URLに県名が入っているので、この島がざっくりどこに位置しているかがわかる
・カレント部分やh2タイトルの下に～が付いていて、遊び心がある、優しい印象に（海の波を表しているのかな？）
・役場の概要が「村長の部屋」としてまとめられているのがかわいい笑、親しみやすく感じる
・FV下やライフステージエリアが特にまとまっていてアイコンもあって分かりやすい

３
・ヘッダーの高さは70px（SP同様）
・各エリアの余白は80px（SP同様）
・FV下の各項目、イベント情報内の余白は上下20px（SP同様）

４
・全て：Source sans Pro
・CSSにて「letter-spacing」で文字間隔の調整ができるんだ～！と学び
・h2：24px
・各カテゴリ内の見出し：16px、700
・他：13～14px

５
・ベース：#ffffff
・メイン：#0a182
・アクセント：#1e3d84
・FV下の「防災・安全」部分のみカテゴリーが赤くなっているのが緊急性があって良い
・背景色はすべて画像

６
・イベント情報内にいるキャラクターはSP版になると消える
・外部サイトに遷移するボタンにはアイコンついてる

７
・FVで画像の上に画像をカルーセルという仕様を初めて見た
・アクセシビリティの観点より、FVカルーセルに停止ボタンが付いている
・FVカルーセルの画像をhoverすると拡大されるのがリンク先が分かりやすくて良い

前回同様、役所のサイトなので、タブキー操作などアクセシビリティ考慮されているな～と思いました！
（背景選択や文字の大きさが選択できなかったのでシングルAなのかな、？）

ではまた次回！