「動くWebデザインアイディア帳」とは？
「jQueryとCSSアニメーションをはじめたばかりの方へ
Webデザインのスクール講師が「動かしたいパーツ」ごとの
逆引きリストをつくりました」
…とサイトに書かれているとおり、
こちらのサイトでは、webデザインに使えるアイディアがたくさん詰め込まれています。
アイディア帳には、「機能に関わる動き」「印象に関わる動き」として２種類のカテゴリーがあります。
- 「機能に関わる動き」・・・グローバルナビゲーション、ハンバーガーメニュー、ボタン、スライドショーなど
- 「印象に関わる動き」・・・背景の動き、画像リンクの動き、テキストの動きなど
例えば「ボタンにアニメーションをつけたいな〜」と思った時に、参考サイトを見ていてもしっくりくるものがないことってありますよね。
そんな時はボタンのアイディア帳をのぞいてみると、たくさんの種類が紹介されています。
もちろん、コードも書かれていますし、実装した時の動きもわかります！
自分が動きをつけたい要素を選んで、そこから動きを探すことができるのでとても便利ですね。
デザイナー側のメリット
実装したい動きをコーダーさんに伝えるときに、動きを見せながらコードも用意できるので打ち合わせがしやすくなります！
また、アイディアが浮かばない・見つからない時も、動きをつけたい要素別に探すことができるので、時短にもなります。
実際に動きを確認することもできるので、デザインに取り入れたときのイメージがしやすいです！
コーダー側のメリット
デザイナー側への提案として実際の動きを見せることができますし、
依頼された動きをどうやって実装すればいいのか分からないときにコードをコピーすることができるので大変便利です。
デモサイトも見れちゃう！
こちらのサイトで紹介しているアニメーションを取り入れたデモサイトもいくつか見ることができます！
まとめ
今回は「動くWebデザインアイディア帳」というサイトについて調べてみました！
どんな動きが実装できるか、実際の動き、コードなど、このサイト１つで完結してしまうのは大変便利ですよね。
参考サイトで探そうとすると時間がかかってしまうので、こういうまとめサイトはぜひ手元においておきたいですね。
コメント