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

くりたまさと
Masato Kurita
栗田将人
【Webflow】今日から使える無料のテンプレート10選

Webflowのテンプレートってなにがあるのかな?
初心者だけど自分でサイトを作りたい。
テンプレートをそのまま使うのはダサいかな?

こんな疑問に答えます。

✓本記事の内容

  • Webflowで今日から使える無料のテンプレートを種類別にご紹介。
    【ポートフォリオ、飲食店、素材テンプレート】
  • テンプレート、ショーケースの著作権について

この記事を書く私は、WebflowでWebサイト制作を行い
月に30万円ほど収益を上げています。
またこのブログもWebflowで作成・管理されており、
Webflowのテンプレートを使用し作成しています。

このような経験を活かし、今回はWebflowのテンプレートについて解説しています。

目 次

Webflowで今日から使える無料のテンプレートをジャンル別に紹介します。

前提としてWebflowには「テンプレート」と「ショーケース」の2つの機能があります。
「ショーケース」とはユーザーが自分で作成したWebサイトを公開しているページです。
今回は「コピー可能なショーケース」を種類別に紹介します。

✓テンプレート、ショーケースの著作権について

  • Webflowでクローン可能なプロジェクトはオープンソースです。(CC0ライセンスの下で利用可能になります)。
    詳細はWebflow公式サイトに記載されています。
    >>>Cloneable project

別記事で見てるだけで楽しくなるテンプレートをまとめています。
>>>【まとめ】Webflowのスゴ技テンプレート6選

ポートフォリオサイトのテンプレート

T.RICKS Bubbles

ポートフォリオサイト【無料で使えるテンプレート/ショーケース】

T.RICKS Bubbles
泡のように写真が上に登り続けるテンプレートです。
写真を3秒ほどクリックしたままにすると、リンクを開くことができます。
単純なポートフォリオサイトではなく、少し凝ったものが欲しいという方におすすめです。

変更に必要な目安時間:3時間

初心者の方でも画像、文章が揃っている状態から3時間程度で自分用に変更可能です。
少し技術がある方は目次を作成すると見やすいかもしれません。

メリット・デメリット

メリットはポートフォリオサイトで技術力をアピールできる点や、スグに作成できるということ。
デメリットはオリジナル要素を加えるにはサイトの作り方を学ぶ必要があるということ。
バブルを解体してアニメーションの付け方、配置の方法を勉強しなければいけません。

Indi Harris – one-page personal site

Indi Harris – one-page personal site

Indi Harris – one-page personal site
名前の通り1ページのシンプルなポートフォリオサイトです。
簡単なアニメーションもついているので、しっかりと技術をアピールできます。
また自分の作品なども掲載しやすく、見やすいのが特徴です。

変更に必要な目安時間:1時間

画像と文章を変更すれば、簡単に自分のサイトに変えることができます。
メールの変更に少し迷うかもしれませんが、作業自体はとても簡単。
当ブログでも解説しています。困った方はそちらをご覧ください。
>>たった5分でコンタクトフォームを作る方法【Webflow大学】

メリット・デメリット

メリットはデザインがシンプルなので自分で変更しやすい、
サイト自体が見やすいので面接での提出に向いているという点です。

デメリットはデザインでの大きな差別化はできないこと。
得にポートフォリオサイトで差別化する必要が無い方はこのサイトが1番おすすめです。

Photographer's portfolio

Photographer's portfolio

Photographer's portfolio
今回紹介するポートフォリオサイトで1番凝ったデザインがこちら。
アニメーションもたくさん使用されており、いろいろと技術が必要なサイトです。
これを作成できるなら、ある程度レベルの高いサイトが作れるんだろうなと思わせられます。

作業の目安時間:8時間

ホームページ以外の情報や、お問い合わせフォームの変更をする必要があるので、少し時間がかかりそうです。

メリット・デメリット

メリットはこのレベルのサイトを作れるとポートフォリオサイト自体でアピールできること。
またWebflowで新しいサイト作成できるレベルまで成長できると思います。

デメリットは時間がかかるということ。
このサイトを改造してオリジナリティを出そうとしても完成しているサイトは手を加えるのが難しいです。

飲食店で使えるテンプレート

Geoli

Geoli
シングルページで簡単に自社のサイトに変更できるテンプレートです。
メニュー表を主にWebサイトで紹介したい方におすすめです。
居酒屋のホームページで使うと、そのまま使うことができます。
GalleryにInstagramのリンクを乗せることでSNSと上手く連携して使用できますね。

作業の目安時間:1時間

ヘッダーの色やフォント、写真を変えるだけでだいぶ自店舗のサイトをイメージできるようになります。
変更する色に迷ったら「初心者でもプロのようなデザインを作る方法」をご覧ください。

メリット・デメリット

メリットはとても簡単に変更可能ということ。
Webサイトを作ったことが無い方でもスグに自分のWebサイトを作成できます。

デメリットは最低限の情報しか載せられないことです。

Restaurant Mulberry Street

Restaurant Mulberry Street
こちらも同じくシングルページ。適度にアニメーションがついています。
さらにページ内にお問い合わせフォームやGoole Mapがついているので
Webサイトに訪問した方をそのままお店の予約につなげる事ができます。
少し凝ったデザインのWebサイトが欲しい方におすすめです。

作業の目安時間:2時間

Goole Mapやお問い合わせフォームなど変更する要素が少し多めです。
予め、画像などを用意して作業しましょう。

メリット・デメリット

メリットはスッキリとしたデザイン且つ適度なアニメーションがついているので、
そのまま使用するだけで他店との差別化ができるということ。

デメリットは初心者の方は途中でグチャグチャになる可能性があるということです。
変更に困ったり、途中でグチャグチャになってしまったという方は当ブログにお問い合わせ下さい。
お安く作業の代行を行います。

Osteria60 - Fine Dining Restaurant

Osteria60 - Fine Dining Restaurant
飲食系で1番凝ったデザインのテンプレートはこちら。
ページが階層ごとに別れており、多くの情報を載せることができます。
デザインもスッキリとわかりやすいので、しっかりとWebサイトでお店を紹介したい方におすすめです。

作業の目安時間:2日間

なんせページ数がたくさんあるので、かなり時間がかかるでしょう。
2日間というのはすべての文章、画像が決まった状態からの時間です。

通常のWebサイト制作は1週間ほどかかるので2日間でもかなり早いです。
これを自身ですべて変更できればなかなかの技術が身につくでしょう。

メリット・デメリット

メリットはプロと同等のサイトが作れること。
集客やブランディングにもかなり効果を発揮することでしょう。
なんなら20〜40万円でWebサイト制作している会社よりもいいサイトを作れます。

写真・文章を用意できるのであれば、私栗田が10万円程度で制作代行を引き受けています。
ご希望の方は当ブログよりご相談下さい。文章込みで委託される場合は少し値段が変わります。
お話だけでも聞きたい方はTwitterかブログよりお問い合わせ下さい。

Webflowの素材が入ったテンプレート

オリジナル性の高いサイトを作りたいという方のために素材のテンプレートを紹介します。
各テンプレートから素材をコピーして組み合わせるだけでオリジナルサイトを作成可能。
いちからWebサイトを作りたいかたにおすすめです。

Legowerk

Cards 2.0 - Framework/UI Kit

Prospero Ecommerce UI Kit

まとめ:Webflowのテンプレートはかなり豊富

Webflowが少しいじれるだけでWebサイトは簡単に作れてしまいます。
これからはSEO対策や予約数が増える「効果の出るサイトデザイン」を学ぶ必要があるということです。

ノーコードにたどり着いたあなたはラッキーです。
今からデザインだけ勉強すればフリーランスで稼げるのですからね。

Webflowは無料でかなり多くの機能を使うことができます。
まずは登録だけして触ってみるのがおすすめです。
>>登録は「こちら

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

WEBFLOW専門家として事業を行っている栗田自身が実際に使用し、便利だと感じたWebflowの使い方を共有します。またノマドライフや、事業計画、経験と過程について発信しています。これは僕からあなたへの手紙です。ここでしか贈らない言葉があります。愛すべきあなたへ届きますように。

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

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

Webflowを使って初心者でもプロのようなデザインを作る方法

初心者でもWebflowを使えるか知りたいですか?本記事ではWeb初心者の方でもスグにプロのようなWebサイトを作れる方法を解説しています。記事を読みながら手を動かしてWebサイト作ってみましょう。

Read more...

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

え?こんなのも作れるの?と、ついつい目を疑いたくなるようなWebflowの無料テンプレート・ショーケースをご紹介。Webflowを使用してPS4のゲーム画面やAPPLEのHPなどを模倣して作っているものもあります。

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