https://www.fujiseisakusyo.jp/　

富士グループ

株式会社富士製作所及び富士MFG株式会社を管理運営するホールディングスカンパニー

要件定義

電動ウィンチを作る会社で、製品の情報（信頼性）が最初にあり、製品の紹介が次いで、会社概要が３項目目
まず私たちの作っている製品をみて、知ってくださいという意思がある構成
会社概要のあとのサービス案内に、スマホでもみやすい説明書きと導入のさいの注意事項があり

屋外で使用されるウィンチの説明書を手元で確認できるように工夫されているのだと思います。

TOPページのデザイン

より強く、より高性能に。そしてより安全にというコピーが、ウィンチに巻き上げられたコンテナのようにしたからすりあがってくるのですが

本当に、こういう天才すぎるCSSアニメーションは解析に時間がかかるのでやめてほしいです。

どうせアニメでしたからスライドさせてるんでしょ？

って思ったらグラデーションの始点と終点を同じ位置にすると、

境界がくっきりすることを利用して、白と透明色を交互に配置したうえで

1. background-image: linear-gradient(to bottom, #fff, #fff 5px, transparent 5px, transparent 8px);

transform rotateで斜めにして、ジグザクにならないように、縦幅でoverflow hiddenこれでウィンチのワイヤーを描画してあります。
特に キーフレームアニメーションを１０秒でループ、ポジションを-50% 200％までの間で真ん中までつりあげるアニメーションにしているのが凄いです。（自分用のメモです）

見てると気になって時間がただ過ぎていきます

ので二度とこういうことはしないで頂きたいです。

みずほ銀行カラー（自分の中で定番化してます）　紺や青でサイト全体を構成すると信頼感がぐっとます現象をこちらのサイトもりようされています。

導入事例の多様さ

防球ネット、体育館、造船、舞台装置に牧畜まで、幅広い分野で利用されていることが紹介されており

この会社の製品の信頼性と汎用性の高さがうかがえます。

プラグインの利用

AOSの下からポップするエフェクトが上手に使われています

ホバーエフェクトのホバーしたらフィルターがかかるのではなく、先に説明文を見せるためにあらかじめフィルターをかけて

ホバーで透明化する手法は面白いし効果的な使い方だと思いました。

だけど、、、、

TOPのスライダーの画面遷移がかなり重たいんですよね、これ画質にこだわるあまり
大きな画像の軽量化を怠ったせいではないでしょうか？
キーフレームアニメーションのワイヤーのinfinite描写はこういった応答性を重視したはずだと思うのですが残念です。

HOME