このWebサイトの作り方が知りたいです。

当方Webデザイナーです。
下記のサイトの作り方を知りたいと思っています。
http://www.bevisionare.com/
この作り方を知る術はあるのでしょうか。
（ex. デスクトップにデータを保存してサイトを再現する方法がある、このサイトに相談すれば教えてもらえる、ちょうどいい講座がある、etc）

No.3 回答者： ORUKA1951 回答日時： 2016/05/26 17:56

Webデザイナーなら、firefoxお使いでしょうから、

　Live HTTP Headers( https://addons.mozilla.org/ja/firefox/addon/live … )で必要なファイルをwget( https://ja.wikipedia.org/wiki/GNU_Wget )で取得するか・・

単純に
ファイル
　→ ページを保存
　　→ [完全]

ないし、scrapbook( https://addons.mozilla.org/ja/firefox/addon/scra … )を使って保存する。

内容は、firebug( https://addons.mozilla.org/ja/firefox/addon/fire … )や、 Web Developer( https://addons.mozilla.org/ja/firefox/addon/web- … )

でよいでしょう。

ただHTML5 + CSS3 + jquery(javascript)を使用したつくりなのですが、
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　でチェックされたらわかるように、デザインはインパクトがあり素人受けはするでしょうが、ひどいものです。
　section要素はあるのに、見出し要素がないとか、本来使うべきでないdiv要素てんこ盛りとか・・。

　Webデザイナーされていたら、firefoxは使われているはずですし、上記のツールは定番中の定番ですし・・。
Web 開発( https://addons.mozilla.org/ja/firefox/extensions … )

No.2 回答者： fujillin 回答日時： 2016/05/26 10:25

こんにちは。

とりあえずソースを見てみるのが手っ取り早いかなと。
通常のHTML、CSS、javascriptで作成されているようです。

そこからだいたいわかること。
1）HTML5で作成されている。
2）modernizrというライブラリを利用している。
　ブラウザの各種対応状況を調査するライブラリらしいので、その開発環境下で作成しているものと想像できる。
3）javascriptでjQueryを利用している
　各種UIやアニメーションのうちの一部はCSSアニメーションを利用しているようですが（気球やサーファーの動きなど）、大きな部分はスクリプトで行っているのではないでしょうか？（スクリプトがミニマイズしてあるので、内容は見ずに想像です）
javascriptをOFFにして使い分けを見てみようとしましたが、初期画面のアニメーション以外は表示できなくなってしまうので、使い分けの内容は不明です。（初期画面の一番最初のアニメーションがCSSであることはわかりますが・・・（笑））

＞作り方を知りたいと思っています。
いろいろな機能を複合化して作成されていますが、個別のものに分解して考えれば特殊なものは少ないと思います。
（サイドのスライドメニューとか上下移動のスクロールパネルとか）
また、同じ（個別の）機能であっても、実現する方法はいろいろあると考えられますので、方法が一つだけとは限りません。
分解して考えることで、検索すれば参考例や似た効果をもたらすライブラリはたくさん見つかることと思います。
見た目には違って見えても、機能的には同じというものもありますので、見た目の類似性だけで探さない方がよろしいかと思います。
もちろん、探すだけではなく、自作するという選択肢もありですね。

少し特徴的なのは最初の画面でのアニメーションかと思いますが、先に画像を部分々々のパーツに分解しておいて、これらを制御しているようです。
個々の細かなアニメーションは、先にも書きました様にCSSアニメーションを利用していると思われます。


※ WEBページを作成したこともないアマチュアが、ちょこちょこっと見ただけですので、いろいろ勘違いも混ざっていると思いますが、ご容赦願います。

No.1 回答者： いいいちろう 回答日時： 2016/05/25 18:23

FireFoxでScrapBookというアドオンがあります。

これを使ってみてはいかがでしょう。