ウェブフローのテンプレートを利用すれば、時間がないときやデザインのインスピレーションが必要なときに、Webサイトのデザインプロセスを迅速に開始することができます。

注意:テンプレートの機能をすべて利用するためには、テンプレートを購入するか、ワークスペースにインポートした後、有料のサイトプランが必要になる場合があります。

このレッスンでは、以下の内容でウェブフローテンプレートに関するすべてを学習します。

  1. ウェブフローのテンプレートの仕組みを理解する
  2. テンプレートの使用とライセンスについて理解する
  3. 購入前にテンプレートをテストする
  4. 無料テンプレートの選択
  5. プレミアムテンプレートの購入
  6. テンプレートのプロモコードを適用する
  7. テンプレートベースのサイトを転送する
  8. ワークスペースのテンプレートとしてサイトを有効化および無効化する
  9. テンプレートベースのサイトをエクスポートする
  10. テンプレートの販売

1.ウェブフローテンプレートの仕組みを理解する

ウェブフローでは、デザイナー、企業、個人向けに、レスポンシブWeb サイトの無料およびプレミアム(有料)テンプレートを多数提供しており、より迅速にデザインに取り掛かることができます。


無料または有料のテンプレートを選択すると、そのテンプレートはすべてのテンプレートページを含む全く新しいサイトとしてダッシュボードに追加されます。そこから、好きなだけテンプレートをカスタマイズすることができます。

2.テンプレートの使用方法とライセンスについて理解する

すべての有料テンプレートにはシングルユースライセンスが付属しており、購入したテンプレートは1つのサイトにのみ使用することができます。


購入したテンプレートを別のクライアントやサイトに使用したい場合は、別のライセンスを購入する必要があります(テンプレートを再購入する)。


これは、テンプレートを複製することで可能です。

  1. テンプレートベースのサイトのサイト設定に移動します。
  2. 複製 "アイコンをクリックします。
  3. テンプレートが同じクライアントまたはサイト用(ライセンスを再購入する必要はありません)、または新しいクライアントまたはサイト用(ライセンスを再購入する必要があります)のいずれかを選択します。

すべてのテンプレートは、あなたのサイトのニーズに合わせてカスタマイズできます(テキスト、画像、グラフィック、レイアウト、デザインなどを追加、変更、削除できます)。

3.購入前にテンプレートテストする

テンプレートの購入を決定する前に、Designerでテンプレートをプレビューすることができます。購入前にDesignerでテンプレートをプレビューすることで、テンプレートがお客様のデザインニーズに合っているかどうかを確認することができます。

プレビュー方法

  1. ウェブフローのテンプレートマーケットプレイスにアクセスします。
  2. テストしたいテンプレートを探します。
  3. Preview in Designer をクリックすると、新しいウィンドウでテンプレートが表示されます。
  4. プレビューモードは、「目」のアイコンをクリックしてオフにすることができます。
  5. その後、テンプレートのページパネルとナビゲータをクリックして、テンプレートに含まれるコンポーネントとデザイン構造を確認することができます。
  6. テンプレートを購入するには、Webflow のテンプレートマーケットプレイスでテンプレートのページに戻り、「購入」 をクリックします。
In Webflow’s Template marketplace, click the “Preview in Designer” button to preview the template in the Designer before committing to a purchase.

4.無料テンプレートの選択

ウェブフローでは、1ページのサイトから複数ページの複雑なビジネスサイトまで、すぐに利用できる無料テンプレートを多数ご用意しています。

無料テンプレートを検索する

無料テンプレートを選ぶには、

  1. ウェブフローのテンプレートマーケットプレイスの「無料テンプレート」ページにアクセスします。
  2. 使用したい無料テンプレートをクリックします。
  3. 「無料で使用する」をクリックすると、ダッシュボードが表示されます。
  4. サイト名を付けるか、デフォルトで用意されている名前を使用します。
  5. [Create site]をクリックすると、デザイナーにサイトが表示されます。

後で、ダッシュボードからテンプレートベースのサイトにアクセスすることができます。

Webflow’s Template marketplace has many free website templates to get you started. Click the “Use for Free” button on a Free template to create a new project from the Free template in your Dashboard.

5.プレミアムテンプレートの購入

1人、1企業、1サイトのみ使用できるプレミアムな有料テンプレートを購入することもできます。

プレミアムテンプレートを選択・購入するには

  1. ウェブフローのテンプレートマーケットプレイスにアクセスします。
  2. あなたのサイトで使用したいプレミアムテンプレートをクリックします。
  3. テンプレートのランディングページで[購入]をクリックします(Webflow の無料アカウントをお持ちでない場合は、サインアップするよう促されます)。
  4. チェックアウトモードに支払い情報を入力します(または、「クレジットカードの編集」をクリックして、支払い情報を更新します)。
  5. [今すぐ支払う]をクリックして、購入を完了する
  6. お支払いの確認後、[続ける]をクリックします。
  7. 新しいサイトの名前を決めます。
The Checkout modal shows one template in the Order summary.
The “Payment successful” modal says that payment was processed and that a confirmation email will be sent. It also says that you can find template purchase details and invoices in your Workspace settings.
The “Name your site” modal window.

6.テンプレートのプロモコードを適用する

テンプレートのプロモコードをお持ちの場合、選択を確定する際にプロモコードを適用してテンプレートを購入することができます。

  1. ウェブフローのテンプレートマーケットプレイスへ移動します。
  2. あなたのサイトに使用したいプレミアムテンプレートをクリックします。
  3. テンプレートのランディングページで[購入]をクリックします(ウェブフローの無料アカウントをお持ちでない場合は、サインアップするよう促されるか、ログアウトしている場合は既存のアカウントにログインします)。
  4. チェックアウトモードでプロモコードの追加をクリックします。
  5. 入力フィールドにプロモコードを入力し、「適用」をクリックします。
  6. [今すぐ支払う]をクリックし、購入を完了する
  7. お支払いの確認後、[続行]をクリックします。
  8. あなたの新しいサイトに名前を付けます。
  9. Create site をクリックすると、ウェブフローのデザイナー機能で新規購入したテンプレートが開きます。
The “Add promo code” link is highlighted in the Checkout modal.
The “Promo code” field is highlighted in the Checkout modal window.

7.テンプレートベースのサイトを転送する

テンプレートベースのサイトを他のユーザーやワークスペースに転送することができます。サイトの転送の詳細については、こちらを参照してください。

8.ワークスペースのテンプレートとしてサイトを有効化および無効化する

サイトをテンプレートとして有効にすると、今後、自分やワークスペース内の他のユーザーがそのサイトを使用できるようになります。これは、新しい類似のサイトを作成する場合や、同じ開始レイアウトを使用してそれを基に構築する場合に便利です。ワークスペース テンプレートの共有は、ゼロから作成したサイトと、ワークスペースに追加した他のテンプレート サイト (Webflow テンプレート マーケットプレイスのものなど) の両方で有効にすることができます。

9.テンプレートベースのサイトのエクスポート

テンプレートベースのサイトをエクスポートする場合は、まず、エクスポート機能を有効にするために、有料のワークスペース プランを購入する必要があります。

10.テンプレートの販売

テンプレートの作成が好きな方は、Webflowのテンプレートマーケットプレイスに自分のテンプレートデザインの販売を申請することができます。