13．茨城大学×SDGs｜#1日1サイトレビュー
【概要】
茨城大学におけるSDGsの取り組みを紹介するWebサイト（ランディングページ）
【ファーストインプレッション】
にぎやか、楽しい
【メインビジュアル】
・ポップな配色のイラスト
・茨城大学のロゴの周りには、パッチワークのような模様のリングが時計回りに回転している。リングの右側に重なるよう、SDGsロゴが配置されている。
・リングは少し左に寄っている（リング中心は画面幅3分の1くらい?）
・メインビジュアルの下から6分の1の所に並ぶ、高層ビル（水色のシルエットイラスト）
・メニューリンク無し。
【フォント】
Roboto
【配色】
#009edb #ef7685 #bf8b2e #a21942 #4c9f38
など、SDGsロゴやテーマカラーに使用された色を使っている。
【構成】
①ファーストビュー（大学ロゴ、SDGsロゴ、）
②メニューリンク、トップへ戻るボタン（少しスクロールすると出てくる）
③テーマ別の取り組みページへのリンク（吹き出し風画像リンク×５）
④トピックス＆ニュース（最新情報の概要リンク3つ掲載）
⑤フッター（サイト内リンク、コピーライト表記）
【レスポンシブ】
SPでは
・コンテンツ：縦積み
・ファーストビュー画像：横並びの２つのロゴ（大学とSDGs）が全幅で中央に配置されている。イラストの各パーツの配置が、PCサイトと少し異なる。
【あくまでも私見】
▶カラフルなのにまとまっている
：５色以上のカラフルでにぎやかな配色だが、ゴチャついていない。
【考察①】SDGsのロゴの方に配色を合わているため、まとまりが感じられる。
【考察②】一見カラフルに見えるサイトだが、実は背景色は３色に絞られている。白、グレー、水色。
・一番賑やかな配色のファーストビューは、まとまりを持たせるため背景色（画像の大半の面積）を白にしている。
・カード風表示の「トピック＆ニュース」の背景色は、薄いグレー。各ニュースが目立つようになっている。
【考察③】水色（＝SDGsロゴに含まれる色）が随所に使われており、統一感を生み出している。青系の静かで落ち着いた知的なイメージ、海や山等の自然を連想させる色。
▶フラットなデザインが現代的でおしゃれ
・境界線を引かないデザイン、フラットでシンプルなデザインが今風。SDGsのロゴやサイト等のデザイン自体がフラットなので、それに合わせたデザインなのかもしれない。それでいて全体的に丸みを帯びたデザインが使われているため、優しい印象も受ける。
▶フラットなデザインの中にも、動きがある。
・ファーストビューの様な繰り返しのアニメーションは見ていて楽しい。
・マウスホバー時のアニメーション効果により、そのトピックについ注目する（リンク画像が「ふわっと浮き上がる」「少し明るくなる」など）。
・サイトを読んでもらうには、単調にならない、見ていて飽きない工夫も大事。
【ひとつだけ自分のデザインに取り入れるとしたら】
▶フラットでシンプルなデザインでも、注目してほしい部分にはアニメーションなど動きを入れて工夫する。
この記事が気に入ったらサポートをしてみませんか？