インターネットの過去と現在、そして未来…… 次世代のインターネットを考察する興味深いコンテンツ
欧州全体で活動する組織のウェブサイト
今回ご紹介するのは、ヨーロッパで設立された Next Generation Internet (NGI) initiative という組織が提供しているウェブサイトです。
その名前からもわかるとおり、次世代のインターネットについて様々な活動を行うことを目的とした組織のようで、ヨーロッパ全体を活動範囲として、寄付などによって成立している組織のようです。
日本にはちょっと馴染みのない組織体系ではありますが、今回紹介するウェブサイトでは、その運営組織との関連性も強く感じられる、インターネットの歴史を学ぶことができる内容のコンテンツが公開されています。
リンク:
Visions for the Future Internet · Nesta
パーティクルや画像を使った様々な表現
今回のサイトは、全体的に大きめのフォントが用いられており、デザインとしてもかなり文章の読みやすさに気を配っている印象を受けます。
文章の量自体も多いですし、基本的には文章を介してコンテンツを楽しんでもらうことを前提にしているように感じますね。
ですが一方で、挿絵のように使われている WebGL のデモ部分も、パーティクルを作ったシンプルな表現がなんともよいアクセントとなっています。
この上の画像にあるような、青い背景の WebGL のビジュアルが、まるで窓が空いているかのように時折コンテンツの隙間から見えるようになっています。
コンテンツのそれぞれに、Power などのなにかしらのキーワードが付随するようになっており、キーワードごとに背景に描き出されるパーティクルの形状が変化します。
よーく観察してみるとわかるのですが、なにかしらの形を伴っているパーティクルとは別に、画面全体に漂うように細かくパーティクルが浮かんでいて、シンプルながらコンテンツとの一体感が見事で、雰囲気はなかなか良いですね。
また、これはちょっとマニアックな視点というか……
WebGL 実装したことがある人にしか伝わらないと思いますが、シーン全体に漂っているパーティクルと、形を伴って描かれるパーティクルは別々の描画命令で複数回に分けて描画されていますね。
形を伴うほうのパーティクルには、若干ですが奥行きに応じてアルファを調整するようなシェーディングが行われているようです。周囲を飛び交うパーティクルはあえてアルファブレンディングを使わずに、その存在感が損なわれないようにしているのでしょうね。
結構、見た目こそシンプルなんですが、実装には工夫が見られますね。
また、以下の画像を見てもらうとわかるかと思うのですが、画像がロードされてくる最中のトランジションも、もしかしたらシェーダによる特殊な表現を使っているのかもしれません。一種のモザイクのような効果が掛かっていて、なんとも面白いです。
統一感のあるデザインと、非常に読みやすくレイアウトされた文章、そしてアクセントとして十分に存在感を放つ WebGL のデモ部分、という感じですごくバランスがよいサイトだと思いました。
詳しくコードまでは追いかけてないですが、画像が読み込まれる際の演出があまり見ない感じのエフェクトで非常に面白いです。
静止画ではよくわからないかなと思いますので、実際にサイトに行って確かめてみてもらえたらと思います。
ぜひチェックしてみてください。