スゴイミライミッケ!|東京理科大学

サイトイメージ

かわいい

かっこいい

親やすさ

アカデミック

単色

カラフル

スゴイミライミッケ!|東京理科大学
スゴイミライミッケ!|東京理科大学

ちょうどいいポイント

むずかしい内容を可愛くキャッチーに

東京理科大学の未来へ向けた研究や取り組みを紹介するサイト。「宇宙」「データサイエンス」と言った名前は知っているけれど、理解するにはむずかしいテーマを単純かつ可愛らしいキャラクターを使うことによって親しみやすく、愛着がわくようなデザインにしています。

またキャラクターを多用しても画面がうるさくならないように余白はたっぷりととっているため、とても読みやすいサイトになっていると感じました。

まるで生きているようなキャラクターから目が離せない!

なんといってもキャラクターが瞬きをしたり、体の輪郭が動くアニメーションに注目です。サイト全体を通してよくある構成ですが、たっぷりの余白とアニメーションが差し込まれることでユーザーの興味を引き、各ブロックを読み流さないように工夫されています。アニメーションは、PNGアニメーション(APNG)を使用しており、あまり複雑な実装をせずとも動きのあるサイトを実現しています。

リズムのある構成で飽きさせない

各テーマの詳細ページを見ると、詳細な研究内容のブロックが高さをずらしながら交互に並んでおり、画面にリズムが生まれています。そのテーマに興味のないユーザでも、飽きずに最後まで見てもらえる様に工夫がされていると感じました。

また、スマホで見た場合はこの各ブロックがそのまま縦に並ぶ様になっており、スマホの実装や見せ方もよく考えられた構成になっていると思いました。

ナカノ

どこにいるのかをわかりやすく

よしかわ

シンプルなグリッドデザイン

かすみ

モノクロから色づいていくかっこよさ

ねむ

派手すぎず、小洒落たアニメーション

るの

ぜったい美味しいと感じさせる高級感