読了: 約 2 分

最近様々なサイトで、デザインとテクノロジーの掛け算が素晴らしい『Letters.inc』が制作したサイトが取り上げられている。心地よいアニメーションと綺麗・シンプルでありながらも印象に残るデザインが特徴的だ。平凡な二次元的なデザインやインタラクションではなく、見るものを惹き付ける心地よいアニメーションの裏側はどのように創られているのか一部アニメーションのソースを見ながら学んでみる。

こういう発想があったのかという手紙のアニメーション

スクリーンショット 2015-10-07 0.09.21

今回アニメーションの参考にしたサイトはこちら。
http://amp-music.net/about/howtobuy/

AMP MUSICというチームにミュージシャンが所属している?その所属しているミュージシャンが様々な形で楽曲を制作したり、提供しているようだ。AMP MUSICのアルバムは、世界約400の音楽販売サイトで購買可能となっているとのこと。海外の音楽を聴く事が出来る、かつ記事や音楽を紹介してるサイト+ポートフォリオサイトになっており、美しくシックなデザインで機能性の高いブランディングサイトとなっているようだ。シンプルながらユーザーを飽きさせないような所々細かいアニメーションが心地良い。

平凡なフローにしないアニメーション

スクリーンショット 2015-10-06 23.51.52

通常ユーザーにとってプロダクトやサービスの説明のフローは大切だが、意外と読み飛ばされる、流されてしまいがち。そこをアニメーションさせる事で興味を引かせて、アクションを起こさせるような体験にしているのが非常に興味深い。単純な見た目だけでなく、インタラクションを用いる事でビジネスにとっても成果のあるサイト制作という意味でも意義のあるアニメーションなのではないだろうか。

今回は、購入までのフローの所に使われているピクトグラムのように見えるアイコンがアニメーションしているものを実装してみた。とはいえ、Lettersさんの命名をそのまま使用しているのでアニメーションの紹介という域である。

ソースコード自体はJS DO ITに上げているのでそちらを参考にしていただければ幸い。
※手紙部分を抜粋して、アニメーションを再現しているので上記のリンクから全体のデザインやアニメーションを見て頂けるとわかりやすいかと思います。

ソースコードの説明

手紙の中身は、画像なのかと思えば、spanタグを複数しようしてborder-bottomで線を上手く表現して、その親にCSSでLETTERSという名前のアニメーションを。上下にそのdivの位置をinfiniteさせるようにすれば出来上がり。実装自体は簡単であるが、見せ方の発想が面白い。何より上記した様に、見過ごしてしまいがち、つまらないフローの一部に利用していることが面白いと筆者は考える。

まとめ

実装的には難しくない(実装工数が少ない)アニメーションでも、成果の上がるようなサイトにするために細かい気配りを出来ていて、なおかつ心地よいという肝を抑えている制作への意識、発想力、技術力は受託の制作を行なっている全ての人が学ぶべきところが多いですね。引き続き、LETTERS.INCさんのアニメーションについて紐解いていきたいと思います。