夏休みの工作がてら久々にWebサイト作ったので、忘備録として今回使ったプラグインや参考リンクを載せておく。肝心のサイトに関しては、公開するかどうか不明なので時期が来れば。
CSS
この前ブログにも書いた。この本に掲載されていたFLOCSSを参考にして今回CSSを書いてみた。今までどれだけ適当に書いてたんだってくらい、いい感じになったと思う。命名規則等もうちょっと自分に馴染みそうなので修正していきたい。
FLOCSS
https://github.com/hiloki/flocss
Coda2
久々で使い方忘れてたので思い出すのも兼ねて使ってみた。最初にサイト入力が必要なので、MAMP等ローカルサーバを立ち上げないと使えないと勝手に思ってたけど、ローカルルートだけ入れればローカルフォルダで雑にも使える。たまにそういうことしたいときあるから今後使う機会増えそう。
パララックス
もはや、さり気なく入れるのは一般的な感じしてるので使ってみた。
スクロールアニメーション
これもよく見るので使ってみた。普通にサイト見てる分にはこういうの必要なのかなと思ったけど使ってみるとちょっと楽しい。色々プラグイン試したけどWow.jsが一番スムーズに動いて、delayとか設定しやすかったので採用した。あとグローバルナビゲーションもスクロール量で変化するようにしてみた。
サムネイルのマウスオーバー
マウスオーバー系の演出はスライドイン等、色々あるけど個人的にはサムネイルをふわっと拡大させるのが好き。
Create a Thumbnail with Fading Caption Using jQuery
所感
今回、今までやってみたいと思いながら手をつけれてなかったことに着手してみた。アニメーション関係、どこまで必要か難しい部分あるけど、できないからやらないと、できるけどやらないでは雲泥の差があると思う。他のサイト見て学ぶのも大事だけど、自分で作って調整して見えてくる部分多いと思うので、できるだけ自分で作れるようになりたいと思う。あと、とりあえず作れるのと、職人的に作れるのではまたレベルが全然変わってくるので、そのあたり忘れないようにしたい。
余談
上記のアニメーションは普通に導入するだけだと、基本的に世界観を強化しない演出だと思ってる。なのでそういうのを超えた、コンテンツの世界観を強化してお客さんの没入感を高める演出を見るとすごいなと思う。そんなことをついさっき見たクレアラシルのサイトを見てふと思った。原作全然知らないので怪しいのだが。
