今回ご紹介するのは有名なサイトばかりなので、普段からページ制作に携わっていると知ってる人も多いかもしれませんが、製作環境を一新・見直す上でこんなページやサービスがあるんだ！？と驚きました。
初めて知ったと同時に、今回の構築においてとても役に立ったので、これからホームページを作る方への情報共有として簡単にまとめておきます。
TinyPNG
透明の要素が含まれるPNG画像を圧縮するのに利用しました。PNGを圧縮してくれるツールは色々あり、他のWebサービスや以前から使っていたWindowsのアプリとも比較しましたが、圧縮率と圧縮後の見た目の良さを比較した結果、TinyPNGが一番好みの画像を書き出してくれました。
サイト上でアニメーションをする上で、透明の要素を持ったPNGの存在は不可欠です。
Webでの利用や、Photoshopのプラグイン、WordPressのプラグインなど色々用意されていて、WordPressのプラグインだと有料のプランに加入してもアップロード数が500を超えた月のみ有料（かつ従量制）なので、超えなければ費用も掛からず財布にも優しいです。
普通のホームページ運用だと1ヶ月500枚も画像をアップロードすることはあまりないのでオススメです。個人的にJPGの画質は個人的に好みではなかったので、PNGの圧縮のみ利用しています。
Ultimate CSS Gradient Generator
見た瞬間思ったのは、あれ？Photoshopのグラデーションツール？でした（笑）
HTML5+CSS3が普及してグラデーションによる表現が増えました。
とはいえ、普通に数値入力で作るのは慣れも必要で気が滅入りますし、エディターでのサポート機能にも限界があります。
グラデーションですが、自分で作ろうと思ってもなかなかきれいなグラデーションを考えるのは難しくて悩むことも。
そんな時は「photoshop gradients」でGoogle先生に聞いて見ると色んなグラデーションを発見出来るので、参考にして作ってみてください。
Animesta
keyframesを使ったアニメーションをWeb上で作成出来るサービス。アニメーションのタイプを選択し、再生時間、遅延時間、再生回数などを指定することで簡単にアニメーションパターンを作成が出来ます。
一般的なアニメーションよりちょっとおしゃれな感じのアニメーションが揃っています。
色々触ったら右上にあるGenerateCodeでCSSとKeyFlamesが作成されるので、そのまま貼り付けるだけでホームページに使用できます。KeyFlamesを見るだけでも参考になりますよ。
コードを利用する際はBSDライセンスなので、著作権表記を削除しないように注意しましょう。
Animate.css
このJCSTAにも導入しました。標準で110種類以上のアニメーションパターンが登録されていて、アニメーション名をフックに要素に対して指定されたアニメーションを実行してくれます。
こんな感じです（笑）単純なアニメーションを実行させるにはオススメのCSSアニメーションライブラリです。
Animation.cssはwow.jsやscrolla.jsなど、アニメーションを実行できるJavaScriptとの連携も多いので、サイトへの導入がしやすいです。
こんなにたくさんのアニメーションパターンを1から作るとなると途方もないですが、このような形で提供いただけるのはありがたいですね。クリエイターの方々には本当に頭が下がります。
イージング関数チートシート
最近、「○○ チートシート」というキーワードで検索する癖がついてきたのですが、こちらもそのチートシートです。
アニメーションの動きに関わるイージング関数ですが、正直「easeInElastic」と言われても字面からどんな動きなのかを想像するのは困難です・・・・
そんなイージング関数の動きをグラフと実際のモーションを一覧表示から確認でき、アニメーションを作成する上で参考になるのは間違いありません！
直線的な動きでは無機質で不自然な動きに見えるため、緩急を付けた動きにすることでで違和感を無くすことが出来ます。
cubic-bezier
イージング関数に続いて3次ベジェ曲線でイージングを設定できるcubic-bezierです。これもまた自身で数値入力して動きを予測することは大変困難です。そのcubic-bezierを視覚的に作成することが出来るのがこちらのサイト。
Photoshopのトーンカーブのようなビジュアルで調整すればリアルタイムに反映され、Preview & compareのとなりのGOをクリックすることで実際のアニメーションを確認することができ、納得のいく動きになればCOPYを押すだけでOK！
イージングとはまた違う、緩急のついた動きをアニメーションに付与することが出来るので、オブジェクトに息を吹き込みたい方におすすめです！前述のAnimation.cssにも使えて表現の幅が広がります♪ 直線で画一的な動きは不自然さを感じますが、緩急のある動きはより自然に見えます。アニメーションさせる上でとても参考にさせていただきました。
今までアニメーションに着目していなかったこともあり、改めて見返してみると、アニメーションに関わる項目がほとんどでした。今回、ランディングページを生成するツールとして、WordPressをカスタマイズしましたが、HTMLやCSSがわからないスタッフでも、ドラッグ＆ドロップやプルダウン、クリックなどでページが作成出来るようカスタマイズしました。
何よりあつまれどうぶつの森ではありませんが、ホームページがわからない一般の事務員の方でもこのサイトと同レベルのページがかんたんに作れるようになりました。他で見かけるデザインもほとんどがHTML・CSSを触らなくても作成可能です。
普通にコーディングをしていたら、1週間は掛かるような作業量も今では1～2日で作成出来ます。
構築に3ヶ月を要しましたが、その後の時間短縮を考えると十分に取り返せますし、何よりホームページの構築を検討している協会員に提供することも出来るので、一定の完成を見ることが出来て良かったと思います。