大量のキーキャップがインタラクティブに世界を構築・体現する The Interactive Dictionary of Free Speech がすごい
質感がとにかく素晴らしい
今回ご紹介するのは、Adrián Gubrica さんが制作されたウェブエクスペリエンス、The Interactive Dictionary of Free Speech です。
このプロジェクト、どうやら学校の卒業課題のような形でじっくりと制作されたもののようです。
扱っているテーマは言論の自由。
すごく大きなテーマを扱っているだけあって、サイト内の文章などの量も膨大ですし、演出面でもとにかく手が込んでいて凄まじいコンテンツになっています。
リンク：
The Interactive Dictionary of Free Speech
目と耳で体験しながら考える言論の自由
今回のサイトではキーボードのキーキャップが演出上の大きな役割を担っています。
キーキャップが大量に並んだ状態で表示され、それらの１つ１つが意思を持っているかのように自律しつつ動くことで、まるで巨大な意思や思想がそこに存在するかのように見るものに訴えかけてきます。
黒いフォグを上手に使っていて、迫力がありますね。
ページを開くとまず最初にローディングがあり、それが終わるとユーザーに対してクリックしたままホールドするような操作が求められます。
この一連のイントロ演出からしてかなり雰囲気があり、一気にその世界観に意識が引き込まれるのを感じる人が多いと思います。
実際のコンテンツはいくつかのページというかセクションに分かれており、それぞれのセクションにはそれぞれ固有の下層ページがあります。
それぞれのページ間の移動には、キーボード風のインターフェースを用いることができるのはもちろん、DOM などを介して同様の操作ができるようにも設計されています。
これは完全に想像ですけれども、デザインを学問としてしっかり履修してきた学生の卒業制作ということもあって、アクセシビリティや UI/UX に関してはかなり完成度の高いレベルに至っている感じがします。
加えて、優れたグラフィックスとインタラクティブなフィードバックがおりなす体験としての説得力で、終始圧倒されっぱなしな気持ちになりますね。
音を使った表現も見事で、視覚だけでなく聴覚なども含めウェブの１つの体験として見事な完成度に仕上がっていると感じました。
途中でも書いたように、このサイトはグラフィックスがかっこいいというだけのウェブサイトではなく、扱っているテーマに始まり、インタラクティブ性やアクセシビリティ的な視点からも高いレベルに達していて、本当にすごいです。
言論の自由について研究しまとめた資料として、純粋に読み物としても楽しめるようになっていますし、なぜインターフェースにキーボード的な外観を採用したのかなど、背景まで踏まえて考えてみるとより学びの多いウェブサイトなのではと思います。
すごくよくできていて、注目すべきポイントが多いです。
ぜひチェックしてみてください。
