【テンプレート】Webflowのスゴ技テンプレート6選！無料で使用可能○

Webflowのスゴ技テンプレート①
‍iPhone12 Proの販売ページ

制作者：moritzpetersen

Appleの販売ページを参考に作られた無料テンプレート。このテンプレートがあればAppleのような最先端のWebサイトを制作することも容易です。「AppleみたいなWebサイトが欲しい！」と言われた際に参考にするとかなりの手間が省けることでしょう。

このテンプレートを作る手順を製作者のmoritzpetersenが動画で解説しているのでそれを見てイチから作り方を学ぶのもありですね。僕もいずれ日本語の解説を作ろうかな。

Webflowのスゴ技テンプレート②
Windows 95 (not clone）‍

By normandurkee

IT革命の出発点とも呼べるWindows95、今を輝く著名人たちは口を揃えて95年の衝撃を話します。と言いましても僕はそんなに詳しくないんですけどね。

そんなWindows95を参考に作られたHP。もはや「参考」ではなく、「完全再現」ですね。人によっては懐かしさを感じることでしょう。ちなみにこれはコピーして使うことはできません。作品と呼ぶのがふさわしいですね。

隅々まで手が込んだサイトです。なんだかパソコンが重くなった気がします。笑

Webflowのスゴ技テンプレート③
‍プレイステーション４

制作者：Protocore

パソコンの改造疑惑まで出そうなプレイステーション4の画面を真似して作られたウェブサイト。何から何まで本物かと思わされてしまう作りにワクワクしてしまいます。

マウスでゲームをクリックするとゲーム動画が流れたり、アカウント作成のページもあります。これをどうやってHPとして起用するかは一旦置いておきましょう。Webflowでこんな高度な物が作れると知れるだけで様々な可能性を感じますね。ちなみにこのps4のサイトもコピー可能。自分でユーザーアイコンやゲーム画面などを変えることができますよ。

ゲーマーの方のポートフォリオサイトがゲーム画面そのものだったらそれだけで、一目置かれる存在になれそうですね！

ProtcoreさんはPS4だけでなく、他にもおもしろい作品を多く作成しています。ぜひ一度アカウントページに訪問して見てください。HPの参考になるかはわかりませんがユニークなウェブサイトばかり、今後ゲーム画面のウェブサイトを起用する病院があったらアンマッチ過ぎて話題になりそうですよね(笑)。見に辛いとクレームが殺到しそうですが…

Webflowのスゴ技テンプレート④
‍アニメの歴史

by　hvinh1

なんとこのウェブサイト、(スクリプト)アニメーションが全くついておりません。それなのにスクロールに応じてキャラクターの背景が変わったり絵が追加されたりと様々な仕掛けが用意されています。是非一度訪問してみてください。思わず下までスクロールしてしまうと思います。

こちらのHPは制作者さんが「自分の仕事のために作成した。今後もアップデートしていく」といっており、あなたが訪問するときにはもっとすごくなっているかも。

Webflowのスゴ技テンプレート⑤
‍ポケモンカードのHP

‍製作者：mubarakmarafa

マウスを当てるとピカチュウが動き、ポケモンカードになる？仕掛けのあるウェブサイト。ピカチュウの電撃はとても立体的に見えます…ってか３Dですね。カスタム次第では自分の好きなキャラや自社のマスコットを同じように配置することができるでしょう。ですがそのためには3Dキャラクターのデザインが必要です。

僕の友人に趣味で3Dデザインやメタバース建築家をしている方がいるので、「格安で3Dオブジェクトやメタバースを作りたい」と思ったら一度ご連絡ください。できるか聞いてみます。

Webflowのスゴ技テンプレート⑥
‍夕焼け

‍製作者：jbergamaschi‍

まるでゲームのオープン画面のようなこちらのwebデザイン。雲それぞれにアニメーションが付けられており、ゆっくりと動いております。また背景がとても立体的でかなり凝った作りです。こちらも自由に編集することが可能。パット見では構造がよくわからないかもしれませんが､編集して触っていくうちに徐々に理解できそうです。

画像が多く使われているので、スペックの高くないPCやスマホでは少し表示が遅くなるかもしれません。パーティの受付ページやクラブのイベントなんかに使うとWebサイトから楽しめる粋なイベントになることでしょう。

まとめ：Webflowのテンプレートは他のノーコードよりもクオリティーが高い

ユニークなサイトやサイト構築の参考になるものまで無料で用意されているWebflow。作り方まで教えてくれるWebデザイナーさんが多くいるのも強みです。

最初は「コンテナ？div？？」と何もわからない方でも解説動画を真似していくだけでどんどんできることが増えて行きますよ！完成したらコードの書き出しも可能なのでお客さんが「コードで納品して」と求めてくる際もしっかり対応することができます。

ノーコードと全く悟られずにコードが書けて、多くのテンプレートを揃えているWebflow。ぜひこれからの技術をいち早く取り入れてみてください。きっとコードをイチから学んでる人を一瞬で追い抜く技術が身につけられますよ。