Webディレクター必見! Webサイトの動きのアイディア帳!

 

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

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

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

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

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


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

エリアの動き

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

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

 

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

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

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

 

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

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら

フライング・ハイ・ワークスの紹介

フライング・ハイ・ワークスは、東京都渋谷区にある2000年3月創業のシステム開発にも対応できるデザインも強いWeb制作・ホームページ制作会社です。東京都及びその近郊(首都圏)を中心として、SEO対策を意識したPC及びスマホのサイトをワンソース(レスポンシブ対応)で制作します。

実績

デザイナーチームは、グラフィックデザインやイラストの制作も得意としており、著作権を意識しない素材の提供が可能です。システム・コーディングチームでは、Laravelなどを使用したスクラッチからのオリジナルシステムの構築を始め、WordPressのカスタマイズを得意としております。

また、SEOやランディングページ(LP)、広告向けバナーなどを他社様でやっていた作業の引継ぎでも問題ありません。制作実績は多数ございますので、お客様に合わせたご提案が可能です。

500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください!

採用

FHWでWebディレクター、Webデザイナー、Webプログラマーやシステム開発者として働いてみたいと思っていただける方は、下記にて定期的に募集をしておりますので、ぜひ、ご応募ください。

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら