みなさんこんにちは！

Taketa NoCode Schoolのなかの人です(*^^)v

‍

前回に引き続き「完全再現」シリーズです！

今回はNoCodeツール『Webflow（ウェブフロー）』を駆使して再現された事例を紹介していきます。

その再現されたものというのは・・・

‍

なんと！あの世界的に有名な電子機器メーカー

iPhone「iPhone 12 Pro」

のWebサイトです！！

‍

しかし残念ながらiPhone 12 Proはすでに販売が終了しており、

再現の元となったランディングページが見つからなかったため

現行のiPhone 14 Proを参考に比較します。

‍

専門的なプログラミング知識を必要としないNoCodeツールでどこまでの再現度なのか。

‍

その一部を本家と比較しながら見ていきましょう！

‍

‍

【比較その１】

‍

‍

‍

！！！！！！

どっちが本家でどっちが再現サイトか一目では見分けがつきません！

メニューバーの配置も完璧に近いです。

‍

再現サイトのボタンはリンクが無いため他ページに飛ぶはできませんが、

この時点ですでに再現度の高さが見ていただいて分かるかと思います。

‍

‍

【比較その２】

‍

‍

静止画だと伝わりにくいですが、iPhoneのサイトは下にスクロールしたときのアニメーションが特徴的です。

それらのスマホ本体の艶の変化など、アニメーションが細かく再現されていことに驚きました！

‍

【Bubble再現画面】

‍

‍

まとめ

今回は、WebflowでiPhoneのサイトを完全再現したという事例をお届けしました。

‍

Webfloweではこうしたアニメーションも忠実に再現することも可能です！

（※再現はあくまで個人の制作練習のためのものです）

NoCodeツールの可能性がさらに広がりますね✨

‍

⇓ご紹介した再現サイトはコチラからご覧いただけます。

https://iphone-12-pro.webflow.io/

‍

⇓ iPhone 11 Proの再現サイトをあるのでそちらも併せてご覧ください。

https://iphone-11-pro.webflow.io/

‍

NoCodeでは、開発の目的に応じて様々なツールの特性を活かすことで、幅広いジャンルのアプリやサービスを開発することができます💡

‍

NoCodeでWebページやアプリを開発したいとお考えの方はTAKETA NoCode Schoolまでお気軽にお問い合わせください！

メールアドレス：info@tech-st.com