こんにちは、谷口です。
以前イメージ別でデザインを紹介させていただいたのですが
その記事が多くの方に見てもらえていたので、今回は様々な動きについてご紹介します。
①マウスオンで変化が起きるサイト
星の森デンタルグループ様 求人サイト
このような募集要項箇所。
マウスオンすると、
写真だと少し分かりにくいですが、
歯科技工士の箇所のように「星」のイメージにあわせてキラキラしています。
このようなアクセントをつけるのも、押してもらいやすくする工夫の1つです。
かつらやま歯科医院様 求人サイト
各職種の働く魅力部分。
マウスオンすると、
1番左のように、テキストが出てくるように組んでいただいています。
これは読んでいただきたい方に読んでいただけるように、
あえて全面に文章は出さずに、マウスオンで文章を表示しています。
②MENUに動きがあるサイト
くるみ歯科こども歯科様
MENUボタンを押す前は隠れているリスは、Clickすると
このように「ひょこっ」とリスが顔出します。
ロゴマークに動物がついていたりする医院様でかわいいサイトをご希望の方は
このような仕様もとてもかわいいと思います。
おしむら歯科・こども矯正歯科クリニック様 求人サイト
左のMENUがゆっくりと上下にふわふわと動くように組んでいただいています。
このように少し動くだけでも、とてもかわいらしく見えますよね。
③パララックスの箇所があるサイト
パララックスは、視差効果とも言われていて、
要素ごとにスクロールした時の動き方をずらすことで奥行きのあるページにしています。
わだち歯科クリニック様 小児矯正サイト
この部分がパララックスの仕様になっています。
あつた白鳥クリニック 形成外科・美容皮膚科 様
この部分がパララックスの仕様になっています。
どちらのサイトも同じパララックスの仕様ですが
サイトの雰囲気によって全くイメージが違い、とてもオシャレですよね。
④loading画面があるサイト
ごとうデンタルクリニック様
こちらより閲覧できます＞＞ ※スマホでご確認ください。
このように
左上→右上→左下→右下（ホームページ）
というようにホームページが表示されるまでのloading画面をこのようにすることも可能です。
患者さんからすると、この少しの工夫でとても印象に残るサイトになると思います。
このように今回はメインで4つご紹介させていただきましたが、
他にも
目立たせたいバナーだけを目立つように動きをつけたり
写真をスライドで流したり
1コンテンツごと左右からスクロールで出てくるという動きをつけたり
様々な動きをつけることが可能です。
ホームページ制作予定で気になる動きがあった方は
デザイン前に担当ディレクターにご相談ください。
以上、谷口でした。
