#1日1サイトレビュー【057】179リレーションズさん

179リレーションズ│179 RELATIONS

【概要】
北海道179市町村の地域課題に対して活動をしていく運営団体のwebサイト

【ターゲット】
北海道在住の方
自然に興味がある、地域の抱える課題に興味がある

【目的】
活動内容や運営団体の認知度アップ→活動参加者を増やす

【印象】
ナチュラル、かわいい、ポップ

【ファーストビュー】

・メイン画像は時間経過で次の画像に移り変わる。ドラッグで画像を切り替えられる。また、画像右下の■を押すことで任意の画像に変更できる。

・ハンバーガーメニューの形が独特。サイト内に同じような「線＋丸」のモチーフがたびたび使われている。

・NPO法人のロゴに緑、青、グレーが使われているので、キャッチコピー背景色やサイト内の色合いなどそこからきてるのだと思う。
地域、自然の印象のある色合い。

・背景　斜めであることで、落ち着きすぎず活発な印象を与えることができる。

【コンテンツ】

・セクションタイトルは緑色の色がついた背景色で統一されている。人のイラストもついていてかわいらしい、親しみを感じる。

・「ACTION」記事を2列、2行で4記事配置。それぞれ記事の幅は50%指定、親要素にdisplay: flex;、flex-wrap: wrap;、justify-content: space-between;を指定。
記事にマウスホバーすると記事全体の透明度UP、枠線の追加、「線＋丸」のモチーフの長さが変わるので選択されている箇所がかなり分かりやすい。

・新着一覧ボタンとMOREボタン。それぞれ色や幅は同じだけど配置場所が違う。配置場所に関するclassを別に作っておくことで最小限のCSS記述で場所を変えることができる。

・これまでのセクションは背景色が白だったが、About（🐻イラストとテキスト部分）からJOIN部分にかけて背景色がついている。
サイトの目的と思われる活動参加につながる部分なので、他のセクションと見た目を変えていると思われる。

・JOINのボタンはタグや付箋、フラッグのよう。背景色は白、黒交互にしていて目立つし形も楽しげ。

・SNSボタンの上のテキストは手書き風で、親しみをもちやすく押してみようかな？と気になる。

・「CONTACT」はマスキングテープで紙を貼っているように見えてかわいい。

【カラー】
自然を感じさせる色合い。

ベースカラー：白、グレー
メインカラー：緑、青
文字：黒

【フォント】

■キャッチコピー
fot-tsukuardgothic-std, sans-serif;

筑紫A丸ゴシックは女性、大人っぽさを感じていたんですが、このサイトを見てナチュラル系も合うなあと思いました。
角が丸い辺りが親しみを持ちやすくで良い。

■テキスト
"Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, Verdana, Arial, Helvetica, sans-serif;

■英字
urw-din, sans-serif;

DINは直線的で、横幅を狭めた感じ。ユニクロのロゴはDINベースらしい。

【レスポンシブ】

・横長だったメイン画像は、縦長に変わっていた。クリックしたら画像を変えられる■は左側に。横にスワイプしたら画像を変えられた。