2022.01.06 Web制作
Webディレクター必見! ホームページ・Webサイトの動きのアイディア帳!
こんにちは。WebプロデューサーのIです。
こういった動きはどうでしょう? とクライアントに提案したいことはWebディレクターならよくあることかと思います。
そんなときに役に立つサイトをご紹介します。
『動くWebデザインアイディア帳』というサイトです。
これの素晴らしいところが、
なんと「機能」ごとに探すことができる点で、
しかも1つではなく、複数のパターンを紹介しているところがホント凄いです!
例えば、スクロール時のエリアの動きについて、検討している際の参考です。
こんなに候補があります↓
・スクロールすると1画面移動
・スクロールすると画面やエリアが時間差で重なる
・スクロールすると画面分割した左右がそれぞれ動く
・スクロールすると画面分割した右側が動く
・スクロールすると紙芝居風に展開
・スクロールすると下のエリアがヘッダーにかぶさる
・スクロールするとヘッダー背景画像が拡大
このときは、ちょうど1つ目の「スクロールすると1画面移動」の動きについて探していたところでした。
次に、
例えば、グローバルナビゲーションの動きについて、検討している際の参考です。
グローバルナビゲーション
こんなに候補があります↓
・ドロップダウンメニュー(上)
・ドロップダウンメニュー(左)
・ドロップダウンメニュー(写真付 上ナビ)
・ドロップダウンメニュー(写真付 左ナビ)
・スクロールすると上部に固定
・スクロール途中から上部固定
・スクロールするとハンバーガーメニューに変化ス
・スクロール途中からヘッダーの高さが小さくなる
・スクロール途中でヘッダーが消え、上にスクロールすると復活
・スクロールすると位置が固定して追従
・クリックしたらナビが上から下に出現
・クリックしたらナビが下から上に出現
・クリックしたらナビが左から右に出現
・クリックしたらナビが右から左に出現
・クリックしたら背景が全面に広がる
・クリックしたら円形背景が拡大(上から)
・クリックしたら円形背景が拡大(下から)
・クリックしたら円形背景が拡大(右から)
・クリックしたら円形背景が拡大(左から)
・クリックしたら円形背景が拡大(右上から)
・クリックしたら円形背景が拡大(右下から)
・クリックしたら円形背景が拡大(左上から)
・クリックしたら円形背景が拡大(左下から)
・クリックしたら円形背景が拡大(中央から)
・クリックしたらナビ背景コンテンツがぼかされる
他にも様々な動きについてのアイディアがまとめられているので、
Webサイトの動きについて、うまく言葉では説明しにくい際や、動きのアイディアを探している際などに、是非活用してみてください! それでは!
WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします
フライング・ハイ・ワークスの紹介
フライング・ハイ・ワークスは、東京のホームページ制作・Web制作会社・システム開発会社です。東京都及びその近郊(首都圏)を中心として、SEO対策を意識したPC及びスマホのサイトをワンソース(レスポンシブ対応)で制作します。
実績
デザイナーチームは、グラフィックデザインやイラストの制作も得意としており、著作権を意識しない素材の提供が可能です。システム・コーディングチームでは、Laravelなどを使用したスクラッチからのオリジナルシステム開発を始め、WordPressのカスタマイズを得意としております。
また、SEOやランディングページ(LP)、広告向けバナーなどを他社様でやっていた作業の引継ぎでも問題ありません。制作実績は多数ございますので、お客様に合わせたご提案が可能です。
500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください!
東京のホームページ制作・Web制作のお問い合わせ、お見積り依頼、相談、質問は
こちらのお問い合わせフォームよりお願いいたします