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

くりたまさと
Masato Kurita
栗田 将人 の過去を覗き見る↗︎
【テンプレート】Webflowのスゴ技テンプレート6選!無料で使用可能○

Webflowのテンプレートってどんなものがあるの?他のノーコードとは一味違うって本当?

今回はそんな疑問を持つ方のために「え?こんなのも作れるの?」と、ついつい目を疑いたくなるようなテンプレート・ショーケースをご紹介します。Wedflow無料でコピーできるサイトがかなり豊富。CC0でWebflowの作品を投稿するようなページがあり、コピー可能のものは商用利用が許可されています。

アメリカでは豊富なテンプレートを理由にWebflowを使い始める方も多くいるようです。ログインだけしてテンプレートやショーケースを試しに覗いてみてはいかがですか?

それでは早速、見ていきましょう。

飲食店やポートフォリオサイトなど汎用性の高いテンプレートはこちらをチェック↓
【Webflow】今日から使える無料のテンプレート10選

目 次

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

iPhoneの販売ページを真似して作られたHP

制作者:moritzpetersen

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

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

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

By normandurkee

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

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

起動画面もそっくりそのまま!

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

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

PS4の起動画面を真似して作られたウェブサイト

制作者:Protocore

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

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

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

Protocore さん別の作品

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

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

by hvinh1

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

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

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

製作者:mubarakmarafa

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

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

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

各オブジェクトが各々動いているテンプレート

製作者:jbergamaschi

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

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

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

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

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

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

無料メルマガで追加情報を告知します。

Webflow専門家として事業を行っている栗田自身が実際に使用して便利だと感じたWebflowの使い方や小技などを共有しています。他にもノマドライフや、事業計画、経験と過程について発信しています。

これは僕からあなたへの手紙です。飾らない言葉で発信しています。登録が励みになります。メルマガ登録100人を最初の目標にしています。100人集まったら旅企画を告知します。海外旅行に一緒に行って新しい価値観を広げましょう。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。

併せて読むとおすすめの記事▼

アメリカで2100億円の価値と言われる「Webflow」とは?

日本語の解説がないという理由で、日本ではあまり知られていないWebflow。アメリカでは今後さらなる成長が見込まれており、その価値は2100億円以上とも言われています。このブログではそんなWebflowの使い方を日本語で解説しています。

Read more...

【Webflow導入事例】Webflowを導入している企業4選

Webflowを使った4つの企業をご紹介。アメリカを始め、世界で利用者が急増しているWebflow。DEELや楽天などの大手企業もWebflowを利用しています。このブログではWebflowについて日本語で解説を行っています。

Read more...

【Webflow】今日から使える無料のテンプレート10選

Webflowで初心者でもスグに使えるテンプレートを知りたいですか?本記事ではWebflowの今日から使えるテンプレートをジャンル別にまとめました。Webflowでテンプレートを使用して自社サイトを自作してみましょう。

Read more...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup