メモを揉め

お勉強の覚書。

話題の五輪エンブレムをCSSで動かしてみた

今日もよく燃えてますね。

しかしそういった話は一切合切横に置かせてもらいまして、私はCSSで動かしたくなったので動かしてみることにします。

単純な図形とルール

このエンブレムは非常に単純な図形とルールで出来ています。

大抵のタイポグラフィは一貫するルールのような物を持ちつつ、それをあえてハズしてみたり、ちょっとズラしてみたりして、ある種の複雑さを持たせることで見る人の感覚を楽しませています。

一方、今回の五輪エンブレムはほぼハズしが無いです。
一部の文字を除いて3x3のマス目に、(相似形を除けば)たった3種類のパーツの組み合わせだけで文字を表現しています。
さらにその3種類のパーツも円と正方形のネガポジだけで表現しているので、出てくる図形は2種類だけ。
ある意味で受け取り手に干渉するスキマを残す、見る人に想像させる余地をあえて作る様なデザインと言えます。(だいぶ良く言った)

こういうミニマルなデザインもけっこう好きです。

プログラマブル

こういったデザインの特徴として自動生成するのが非常に容易だということが言えます。

今回の場合だと正方形と円だけなのでCSSでの表現にも向いてます。

アニメーションに関しても始点と終点の配置だけ指定すれば、あとはCSS3のtransitionに丸投げ出来ます。

ジェネレータ

ひと通り動かし終わったので、ついでにジェネレータも作りました。

しかしこのエンブレム、5年後も使われているのでしょうか。
それが心配。