モバイルファーストサイト100選 その28 狂ATE the FUTURE
東大工学部の若き研究者たちが衝動と未来を語る動画メディア
東大工学部の研究者たちの動画が集められています。
https://park.itc.u-tokyo.ac.jp/createthefuture/
いや~かなり攻めたデザインですね。
さすがというべきでしょうか。
![狂ATE the FUTURE](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/6d30f0be-004c-4ecb-adf2-c5403831c1f6-1024x532.png)
構成
メインエリアはやや右寄りに配置されています。
背景は画像のみで、メインはこの上にフロートしています。
タブレット時に右の部分が非表示になります。
![spトップ](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/be128df7-12da-4272-8b26-e1b71aad8105-179x1024.png)
メイントップはさほど大きくはありませんね。
シンプルなほうだと思います。
動画の紹介部分がスライダーになっていますが、
これ、PC 時には、マウスのホイールで動かせるんですね。
これ、どうやってんだろ?
初めて見ましたので、宿題にします。
![下層ページ1](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/move1-184x1024.png)
![下層ページ2](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/move2-184x1024.png)
一階層降りた動画一覧のページです。
トップよりこちらのほうが長いですね。
しかしこのページ、一番上にある検索窓で
クラスごとのフィルターをかけられるんですね。
これを使えば、動画の表示数を2~3個へと減らせるので、
とても親切です。
見たい動画だけを表示できるようになるので、
コンテンツが増えてもたどり着きやすいですね。
![個別ページ](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/5c731ff2-c185-45bd-becd-fb521cb3deaa-199x1024.png)
一覧ページの下にさらに一階層さがって、
個別のページがあります。
このページの真ん中らへんに
「一覧へ戻る」
のボタンがあるのですが、
個人的にこれがとても良いなと思いました。
スマホのサイトで階層が三つぐらい下がると
もとの場所に戻るのが苦労するんですよね。
迷子になりやすいです。
なのでこのボタンは良いなと思いました。
配色
このサイトの配色はこれ
![配色](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/スクリーンショット-2024-01-31-173230.png)
やはり攻めていますね。
これだけ色数が多いと
うまく使うのは難しいはずです。
すごいなあと思いました。
フォント
本文のフォントは Noto Sans JP
きわめて普通ですね。
文字に関しては奇をてらわない使い方をしているようです。
フォントのサイズも種類が少なく、
まとまった感じがします。
まとめ
最初見たときはなんかごちゃごちゃしていて、
ちょっと見にくそうだなと感じたのですが、
実際はとてもシンプルな操作性で、
迷うことなく見ることができました。
細かな配慮もあって、
勉強になりました。
いろいろ参考にしたいサイトです。
![パソコン](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/priscilla-du-preez-OEdkPaxYMXU-unsplash-1024x683.jpg)