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
名前の通り1ページのシンプルなポートフォリオサイトです。
簡単なアニメーションもついているので、しっかりと技術をアピールできます。
また自分の作品なども掲載しやすく、見やすいのが特徴です。
変更に必要な目安時間:1時間
画像と文章を変更すれば、簡単に自分のサイトに変えることができます。
メールの変更に少し迷うかもしれませんが、作業自体はとても簡単。
当ブログでも解説しています。困った方はそちらをご覧ください。
>>たった5分でコンタクトフォームを作る方法【Webflow大学】
メリット・デメリット
メリットはデザインがシンプルなので自分で変更しやすい、
サイト自体が見やすいので面接での提出に向いているという点です。
デメリットはデザインでの大きな差別化はできないこと。
得にポートフォリオサイトで差別化する必要が無い方はこのサイトが1番おすすめです。
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の使い方や小技などを共有しています。他にもノマドライフや、事業計画、経験と過程について発信しています。
これは僕からあなたへの手紙です。飾らない言葉で発信しています。登録が励みになります。メルマガ登録100人を最初の目標にしています。現在47/100人
100人集まったら旅企画を告知します。海外旅行に一緒に行って新しい価値観を広げましょう。