こんにちは！デザイナーのFです。
少し前になりますが、Twitterで見つけたWebサイトがおもしろかったのでご紹介。
動くWebデザインアイディア帳
こちらは元々書籍で、期間限定でWebサイトとしても公開しているらしいです。
※書籍へのリンクは上記Webサイトより確認できます。
動きのサンプルとして
・「機能」に関わる動き
・「印象」に関わる動き
に分かれて掲載されていることで、
なんのための『動き』なのかがわかるようになっています。
このWebサイトに掲載されているサンプルサイトでも、その『動き』が機能的・効果的に使われていたり、印象のために作用していることが確認できます。
コード側の事は一旦置いておき、こんなライブラリはぜひ社内でも作ってみたいですね。
動きを考える
Webサイトは多種多様あるので、必ずしも目的やコンセプトに当てはまるような動きがサンプルとしてあるとは限りません。
その場合は、動きを改めて考える必要が出てきます。
私は今までに『JavaScript』や、今はなき『Flash』を使って、WebサイトやWebコンテンツに様々な動きをつけてきましたが、
動きを考える際に、機能面等もそうなのですが、実際そこに動かすものが実体としてあったらどう動くのかも考えたりします。
まずは、その動かすものはどのような素材なのか、どんな感触なのか、重たいのか、軽いのかなどを考えます。
そこを決めていくと、早く動かしたほうがいいのか、大げさに表現したほうが適しているのかなど、次のステップへ徐々に進めていけると思います。
いきなり動きから考えるのではなく、対象物を知る・決めるということですね。
動きのヒント
対象物を知っても、機能や印象を考えた上でどんな動きをするのか想像がつかない場合があります。
表現方法については、実生活でいろいろなものに触れたり、体験することも大事ですが、現在公開されているWebサイトやWebコンテンツに触れることが一番早いと思っています。
映像系のカメラワークとかも参考になる場合がありますので、媒体に関わらずいいものに触れていきましょう。
やはり想像のみではハードルがとても高いので、いいものを真似て、研究して、動きを知っていくことが結果的に自分の引き出しを増やす要因になると思います。
まとめ
今回はWebサイトの紹介から『動き』の部分に着目して書きましたが、Webサイトで使うオブジェクトも、合ってそうなものを何気なく使うのではなくて、掘り下げていき、そのもの自体と向き合うことが大事だと思います。
この作業は時間がかかることなのですが、日頃から少しづつ考えていけるようになればいいですね。
ということで今回は以上。
＼\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! /／
