Webディレクター必見！ ホームページ・Webサイトの動きのアイディア帳！

こんにちは。WebプロデューサーのＩです。

こういった動きはどうでしょう？ とクライアントに提案したいことはWebディレクターならよくあることかと思います。

そんなときに役に立つサイトをご紹介します。

『動くWebデザインアイディア帳』というサイトです。

これの素晴らしいところが、
なんと「機能」ごとに探すことができる点で、
しかも1つではなく、複数のパターンを紹介しているところがホント凄いです！

例えば、スクロール時のエリアの動きについて、検討している際の参考です。

エリアの動き

こんなに候補があります↓
・スクロールすると1画面移動
・スクロールすると画面やエリアが時間差で重なる
・スクロールすると画面分割した左右がそれぞれ動く
・スクロールすると画面分割した右側が動く
・スクロールすると紙芝居風に展開
・スクロールすると下のエリアがヘッダーにかぶさる
・スクロールするとヘッダー背景画像が拡大

このときは、ちょうど１つ目の「スクロールすると1画面移動」の動きについて探していたところでした。

次に、
例えば、グローバルナビゲーションの動きについて、検討している際の参考です。

グローバルナビゲーション

こんなに候補があります↓
・ドロップダウンメニュー（上）
・ドロップダウンメニュー（左）
・ドロップダウンメニュー（写真付 上ナビ）
・ドロップダウンメニュー（写真付 左ナビ）
・スクロールすると上部に固定
・スクロール途中から上部固定
・スクロールするとハンバーガーメニューに変化ス
・スクロール途中からヘッダーの高さが小さくなる
・スクロール途中でヘッダーが消え、上にスクロールすると復活
・スクロールすると位置が固定して追従
・クリックしたらナビが上から下に出現
・クリックしたらナビが下から上に出現
・クリックしたらナビが左から右に出現
・クリックしたらナビが右から左に出現
・クリックしたら背景が全面に広がる
・クリックしたら円形背景が拡大（上から）
・クリックしたら円形背景が拡大（下から）
・クリックしたら円形背景が拡大（右から）
・クリックしたら円形背景が拡大（左から）
・クリックしたら円形背景が拡大（右上から）
・クリックしたら円形背景が拡大（右下から）
・クリックしたら円形背景が拡大（左上から）
・クリックしたら円形背景が拡大（左下から）
・クリックしたら円形背景が拡大（中央から）
・クリックしたらナビ背景コンテンツがぼかされる

他にも様々な動きについてのアイディアがまとめられているので、
Webサイトの動きについて、うまく言葉では説明しにくい際や、動きのアイディアを探している際などに、是非活用してみてください！　それでは！