- Webflowのショーケースとは
- Webflowのショーケースとは、ユーザーが自分で作成したWebサイトを公開しているページです。クローン可能（コピー可能）なプロジェクトはオープンソースで、CC0ライセンスの下で利用できます。
※本記事で紹介しているテンプレート・ショーケースの情報は2022年1月時点のものです。現在は掲載終了・内容変更されている場合があります。
こんな疑問に答えます｡
✓本記事の内容
- Webflowで今日から使える無料のテンプレートを種類別にご紹介｡ 【ポートフォリオ､飲食店､素材テンプレート】
- テンプレート､ショーケースの著作権について
この記事を書く私は､WebflowでWebサイト制作を行い
月に30万円ほど収益を上げています｡
またこのブログもWebflowで作成･管理されており､
Webflowのテンプレートを使用し作成しています｡
このような経験を活かし､今回はWebflowのテンプレートについて解説しています｡
Webflowで今日から使える無料のテンプレートをジャンル別に紹介します｡
前提としてWebflowには｢テンプレート｣と｢ショーケース｣の2つの機能があります｡
｢ショーケース｣とはユーザーが自分で作成したWebサイトを公開しているページです｡
今回は｢コピー可能なショーケース｣を種類別に紹介します｡
✓テンプレート､ショーケースの著作権について
- Webflowでクローン可能なプロジェクトはオープンソースです｡(CC0ライセンスの下で利用可能になります)。 詳細はWebflow公式サイトに記載されています｡ >>>Cloneable project
見てるだけで楽しくなるテンプレートはこの記事の後半「スゴ技ショーケース6選」にまとめています｡
ポートフォリオサイトのテンプレート
T.RICKS Bubbles
T.RICKS Bubbles
泡のように写真が上に登り続けるテンプレートです｡
写真を3秒ほどクリックしたままにすると､リンクを開くことができます｡
単純なポートフォリオサイトではなく､少し凝ったものが欲しいという方におすすめです｡
変更に必要な目安時間：3時間
初心者の方でも画像､文章が揃っている状態から3時間程度で自分用に変更可能です｡
少し技術がある方は目次を作成すると見やすいかもしれません｡
メリット･デメリット
メリットはポートフォリオサイトで技術力をアピールできる点や､スグに作成できるということ｡
デメリットはオリジナル要素を加えるにはサイトの作り方を学ぶ必要があるということ｡
バブルを解体してアニメーションの付け方､配置の方法を勉強しなければいけません｡
Indi Harris – one-page personal site
Indi Harris – one-page personal site
名前の通り1ページのシンプルなポートフォリオサイトです｡
簡単なアニメーションもついているので､しっかりと技術をアピールできます｡
また自分の作品なども掲載しやすく､見やすいのが特徴です｡
変更に必要な目安時間：1時間
画像と文章を変更すれば､簡単に自分のサイトに変えることができます｡
メールの変更に少し迷うかもしれませんが､作業自体はとても簡単｡
当ブログでも解説しています｡困った方はそちらをご覧ください｡
>>Webflow大学 Web春解説版（日本語）
メリット･デメリット
メリットはデザインがシンプルなので自分で変更しやすい､
サイト自体が見やすいので面接での提出に向いているという点です｡
デメリットはデザインでの大きな差別化はできないこと｡
特にポートフォリオサイトで差別化する必要が無い方はこのサイトが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
こちらも同じくシングルページ｡適度にアニメーションがついています｡
さらにページ内にお問い合わせフォームやGoogle Mapがついているので
Webサイトに訪問した方をそのままお店の予約につなげる事ができます｡
少し凝ったデザインのWebサイトが欲しい方におすすめです｡
作業の目安時間：2時間
Google Mapやお問い合わせフォームなど変更する要素が少し多めです｡
予め､画像などを用意して作業しましょう｡
メリット･デメリット
メリットはスッキリとしたデザイン且つ適度なアニメーションがついているので､
そのまま使用するだけで他店との差別化ができるということ｡
デメリットは初心者の方は途中でグチャグチャになる可能性があるということです｡
変更に困ったり､途中でグチャグチャになってしまったという方は当ブログにお問い合わせ下さい｡
お安く作業の代行を行います｡
Osteria60 - Fine Dining Restaurant
Osteria60 - Fine Dining Restaurant
飲食系で1番凝ったデザインのテンプレートはこちら｡
ページが階層ごとに別れており､多くの情報を載せることができます｡
デザインもスッキリとわかりやすいので､しっかりとWebサイトでお店を紹介したい方におすすめです｡
作業の目安時間：2日間
なんせページ数がたくさんあるので､かなり時間がかかるでしょう｡
2日間というのはすべての文章､画像が決まった状態からの時間です｡
通常のWebサイト制作は1週間ほどかかるので2日間でもかなり早いです｡
これを自身ですべて変更できればなかなかの技術が身につくでしょう｡
メリット･デメリット
メリットはプロと同等のサイトが作れること｡
集客やブランディングにもかなり効果を発揮することでしょう｡
なんなら20〜40万円でWebサイト制作している会社よりもいいサイトを作れます｡
写真･文章を用意できるのであれば､私栗田が10万円程度で制作代行を引き受けています｡（2026年追記: 現在この価格での代行は行っていません。現行の制作メニューはAIサイト制作をご覧ください）
ご希望の方は当ブログよりご相談下さい｡文章込みで委託される場合は少し値段が変わります｡
お話だけでも聞きたい方はTwitterかブログよりお問い合わせ下さい｡
Webflowの素材が入ったテンプレート
オリジナル性の高いサイトを作りたいという方のために素材のテンプレートを紹介します｡
各テンプレートから素材をコピーして組み合わせるだけでオリジナルサイトを作成可能｡
いちからWebサイトを作りたいかたにおすすめです｡
Legowerk
Cards 2.0 - Framework/UI Kit
Prospero Ecommerce UI Kit
番外編：目を疑うスゴ技テンプレート・ショーケース6選
ここからは「え？こんなのも作れるの？」と、ついつい目を疑いたくなるショーケースを6つ紹介します。Webflowの表現力の上限を知るのに最適です（一部はコピー不可の観賞用です）。
スゴ技① iPhone12 Proの販売ページ
制作者：moritzpetersen
Appleの販売ページを参考に作られた無料テンプレート。このテンプレートがあればAppleのような最先端のWebサイトを制作することも容易です。「AppleみたいなWebサイトが欲しい！」と言われた際に参考にするとかなりの手間が省けることでしょう。
このテンプレートを作る手順を製作者のmoritzpetersenが動画で解説しているのでそれを見てイチから作り方を学ぶのもありですね。僕もいずれ日本語の解説を作ろうかな。
スゴ技② Windows 95 (not clone）
By normandurkee
IT革命の出発点とも呼べるWindows95、今を輝く著名人たちは口を揃えて95年の衝撃を話します。と言いましても僕はそんなに詳しくないんですけどね。
そんなWindows95を参考に作られたHP。もはや「参考」ではなく、「完全再現」ですね。人によっては懐かしさを感じることでしょう。ちなみにこれはコピーして使うことはできません。作品と呼ぶのがふさわしいですね。
隅々まで手が込んだサイトです。なんだかパソコンが重くなった気がします。笑
スゴ技③ プレイステーション４
制作者：Protocore
パソコンの改造疑惑まで出そうなプレイステーション4の画面を真似して作られたウェブサイト。何から何まで本物かと思わされてしまう作りにワクワクしてしまいます。
マウスでゲームをクリックするとゲーム動画が流れたり、アカウント作成のページもあります。これをどうやってHPとして起用するかは一旦置いておきましょう。Webflowでこんな高度な物が作れると知れるだけで様々な可能性を感じますね。ちなみにこのps4のサイトもコピー可能。自分でユーザーアイコンやゲーム画面などを変えることができますよ。
ゲーマーの方のポートフォリオサイトがゲーム画面そのものだったらそれだけで、一目置かれる存在になれそうですね！
ProtocoreさんはPS4だけでなく、他にもおもしろい作品を多く作成しています。ぜひ一度アカウントページに訪問して見てください。HPの参考になるかはわかりませんがユニークなウェブサイトばかり、今後ゲーム画面のウェブサイトを起用する病院があったらアンマッチ過ぎて話題になりそうですよね(笑)。見辛いとクレームが殺到しそうですが…
スゴ技④ アニメの歴史
by hvinh1
なんとこのウェブサイト、(スクリプト)アニメーションが全くついておりません。それなのにスクロールに応じてキャラクターの背景が変わったり絵が追加されたりと様々な仕掛けが用意されています。是非一度訪問してみてください。思わず下までスクロールしてしまうと思います。
こちらのHPは制作者さんが「自分の仕事のために作成した。今後もアップデートしていく」といっており、あなたが訪問するときにはもっとすごくなっているかも。
スゴ技⑤ ポケモンカードのHP
製作者：mubarakmarafa
マウスを当てるとピカチュウが動き、ポケモンカードになる？仕掛けのあるウェブサイト。ピカチュウの電撃はとても立体的に見えます…ってか３Dですね。カスタム次第では自分の好きなキャラや自社のマスコットを同じように配置することができるでしょう。ですがそのためには3Dキャラクターのデザインが必要です。
僕の友人に趣味で3Dデザインやメタバース建築家をしている方がいるので、「格安で3Dオブジェクトやメタバースを作りたい」と思ったら一度ご連絡ください。できるか聞いてみます。
スゴ技⑥ 夕焼け
製作者：jbergamaschi
まるでゲームのオープニング画面のようなこちらのwebデザイン。雲それぞれにアニメーションが付けられており、ゆっくりと動いております。また背景がとても立体的でかなり凝った作りです。こちらも自由に編集することが可能。パッと見では構造がよくわからないかもしれませんが､編集して触っていくうちに徐々に理解できそうです。
画像が多く使われているので、スペックの高くないPCやスマホでは少し表示が遅くなるかもしれません。パーティの受付ページやクラブのイベントなんかに使うとWebサイトから楽しめる粋なイベントになることでしょう。
まとめ：Webflowのテンプレートはかなり豊富
Webflowが少しいじれるだけでWebサイトは簡単に作れてしまいます｡
これからはSEO対策や予約数が増える｢効果の出るサイトデザイン｣を学ぶ必要があるということです｡
ノーコードにたどり着いたあなたはラッキーです｡
今からデザインだけ勉強すればフリーランスで稼げるのですからね｡
Webflowは無料でかなり多くの機能を使うことができます｡
まずは登録だけして触ってみるのがおすすめです｡
登録は｢こちら｣
よくある質問
Webflowのテンプレートやショーケースの著作権はどうなっていますか？
Webflowでクローン可能なプロジェクトはオープンソースで、CC0ライセンスの下で利用可能になります。詳細はWebflow公式サイトのCloneable projectのページに記載されています。
Webflowのテンプレートとショーケースの違いは何ですか？
ショーケースとは、ユーザーが自分で作成したWebサイトを公開しているページです。この記事で紹介しているのは、その中でもコピー可能なショーケースです。
テンプレートを自分のサイトに変更するにはどれくらい時間がかかりますか？
画像と文章が揃った状態からの目安で、シンプルな1ページ構成なら1時間程度、凝ったポートフォリオサイトは8時間、ページ数の多い飲食店サイトは2日間ほどかかります。
番外編のスゴ技ショーケースもコピーして使えますか？
6選のうちPS4の起動画面や夕焼けのショーケースはコピーして編集できますが、Windows95の再現サイトなど一部はコピー不可の観賞用です。
テンプレートのカスタマイズを代行してもらえますか？
本文中の「10万円程度で制作代行」は執筆当時（2022年）の内容で、現在この価格での代行は行っていません。現行の制作メニューはAIサイト制作のサービスページをご覧ください。
