料金プランを有効化して学習を始めましょう。

Webflowテンプレート

Webflowテンプレートを使用してサイトデザインプロセスを加速させましょう。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

引用元

時間が限られているか、少しのデザインインスピレーションが必要な場合、Webflowテンプレートを使用するのはウェブサイトデザインプロセスを加速させる素晴らしい方法です。

テンプレートを最大限に活用するためには、Webflow 101 Crash Courseを使用して、Webflowの基本を習得することが重要です。このコースでは、Webflow UIの概要、ウェブの基本的なビルディングブロック、および配置とレイアウトの基本を提供しています。これらの知識は、テンプレートを使用するために必要です。

注意： 一部のテンプレートは、購入またはワークスペースにテンプレートをインポートした後、有料のサイトプランが必要な場合があります。テンプレートのページ制限について詳しく学ぶ。

このレッスンでは、以下の内容について詳しく説明します：

Webflowテンプレートの動作原理を理解する

Webflowは、デザイナーやビジネス、個人がウェブサイトデザインの一環として迅速に取り組むのに役立つ、無料およびプレミアムのレスポンシブウェブサイトテンプレートを多数提供しています。

無料またはプレミアムの有料テンプレートを選択すると、そのテンプレートはすべてのテンプレートページが含まれた状態でダッシュボードに追加されます。そこから、テンプレートをカスタマイズすることができます。カスタマイズの度合いは、あなたの好みに合わせて決めることができます。

プロのヒント: 将来、テンプレートの元の編集前のデザインにアクセスする必要がある場合、サイトのバックアップを通じてそれを行うことができます。ただし、選択したバックアップでサイト全体がリセットされることに注意してください。

テンプレートの使用を開始する

以前にWordpressを使用したことがある場合、デザインのスタイリングに役立つテーマの使用についてはおなじみかもしれません。Wordpressのテーマは、既存のWordpressデザインに既存のコンテンツとデータを適用できます。

WebflowのテンプレートはWordpressのテーマとは異なる動作をします。Webflowテンプレートのデザインとレイアウトは、ワークスペース内の既存のサイトのデザインとレイアウトを自動的に置き換えることはありません。テンプレートはそのまま提供され、カスタマイズが必要な場合があります。

このカスタマイズをスピードアップするために、CMSコレクションデータを移行したり、コピーして貼り付け したりして、他のサイトから要素を新しいテンプレートベースのサイトに移動できます。

コレクションアイテムのインポート制限

テンプレートベースのサイトにCSVファイルをインポートするには、サイトプランを追加またはアップグレードする必要があるかもしれません。サイトプランには、サイトプランの種類に応じてコレクションアイテムの制限があります。サイトプランについて詳しく学ぶ。

ページ制限

テンプレートベースのサイトが2ページ以上の場合、テンプレートベースのサイトに有料のサイトプランを追加するか、有料のワークスペースプランを購入する必要があります。テンプレートベースのサイトが2ページしかない場合、それを無償のサイトプラン/無償のワークスペースプランのままにしておくこともできます。有料のテンプレートに含まれているすべてのページには引き続きアクセスして編集できます（削除していない限り）。ただし、ワークスペースプランをアップグレードするか、サイトにサイトプランを追加するか、テンプレートベースのサイトに新しいページを追加する前に、ページを削除して合計ページ数を2ページ未満にする必要があります。

テンプレートサポート

Webflow初心者の場合、複雑なインタラクション、カスタムメニュー、ポップアップモーダルを使用するテンプレートは最初は編集が難しいかもしれません。ただし、テンプレートのサポートが必要な場合、テンプレート作成者に連絡してサポートを受けることができます（多くのテンプレート作成者は、テンプレート内にサポートドキュメンテーションを含めています）。

テンプレート作成者からサポートを受けるには：

  1. Webflowのテンプレートマーケットプレイスでテンプレートのページを訪問します。
  2. テンプレートの概要を見つけるまでスクロールします（テンプレート作成者はこの領域に特定のサポート手順を含めるかもしれません）。
  3. サポートタブをクリックします（テンプレート作成者が概要エリアに特定のサポート手順を含めていない場合）。
  4. テンプレート作成者に連絡するためにContactボタンをクリックします。

テンプレートの使用とライセンスに注意する

すべての有料テンプレートには、単一の使用ライセンスが付属しており、購入したテンプレートを1つのサイトで使用できることを意味します。Webflowテンプレートと単一の使用ライセンスについて詳しく学ぶ。

購入したテンプレートを別のクライアントやサイトに使用したい場合、別のライセンスを購入する必要があります（テンプレートを再購入することで実現できます）。

これは、テンプレートを複製することで行えます：

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

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

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

テンプレートを購入する前に、デザイナーでテンプレートをプレビューできます。テンプレートがデザインニーズに合っていることを確認するために、これを強くお勧めします。

  1. Webflowのテンプレートマーケットプレイスに移動します。
  2. テストしたいテンプレートを見つけます。
  3. Preview in Designerをクリックして、テンプレートを新しいウィンドウでデザイナーで開きます。
  4. プレビューモードをオフにするには、目のアイコンをクリックします。
  5. 次に、テンプレートのPages panelとNavigatorにクリックして、テンプレートに含まれるコンポーネントとデザイン構造のアイデアを得ることができます。

テンプレートを購入するには、Webflowのテンプレートマーケットプレイスのテンプレートページに戻り、Buyをクリックします。

無料テンプレートを選択する

Webflowには、1ページから複雑な複数ページのビジネスウェブサイトまで、さまざまな無料テンプレートがあります。無料テンプレートを検索してみてください。

無料テンプレートを選択するには：

  1. Webflowのテンプレートマーケットプレイの無料テンプレートページに移動します。
  2. 使用したい無料テンプレートをクリックします。
  3. Use for Freeをクリックして、ダッシュボードを開きます。
  4. サイトにnameを付けるか、提供されたデフォルトの名前を使用します。
  5. Create siteをクリックして、デザイナーでサイトを開きます。

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

プレミアムテンプレートを購入する

また、1つの個人、ビジネス、またはサイトに使用するためにプレミアム有料テンプレートを購入することもできます。

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

  1. Webflowのテンプレートマーケットプレイスに移動します。
  2. サイトに使用したいプレミアムテンプレートをクリックします。
  3. テンプレートのランディングページでBuyをクリックします（すでにアカウントを持っていない場合は、無料のWebflowアカウントを作成するように促されるか、ログアウトしている場合は既存のアカウントにログインできます）。
  4. チェックアウトモーダルに支払い情報を入力します（以前に追加した支払い情報を更新するには、「Edit credit card」をクリックします）。
  5. 購入を完了するためにPay nowをクリックします。
  6. 支払い確認を確認した後、続行をクリックします。
  7. 新しいサイトに名前を付けます。
  8. テンプレートをWebflowデザイナーで開くためにサイトを作成をクリックします。

注意： テンプレートの購入請求書は、Workspace settings > Templates タブ > Purchased templates で見つけることができます。特定のテンプレートの請求書をダウンロードするには、Download invoiceをクリックします。

テンプレートのプロモーションコードを適用

テンプレートのプロモーションコードがある場合、テンプレートの購入時にそのプロモーションコードを適用できます。選択を確認する際に、プロモーションコードを適用する方法は以下の通りです：

  1. Webflowのテンプレートマーケットプレイスに移動します。
  2. サイトに使用したいプレミアムテンプレートをクリックします。
  3. テンプレートのランディングページでBuyをクリックします（すでにアカウントを持っていない場合は、無料のWebflowアカウントを作成するように促されるか、ログアウトしている場合は既存のアカウントにログインできます）。
  4. チェックアウトモーダルでAdd promo codeをクリックします。
  5. 入力フィールドにプロモーションコードを入力し、Applyをクリックします。
  6. 購入を完了するためにPay nowをクリックします。
  7. 支払い確認を確認した後、Continueをクリックします。
  8. 新しいサイトに名前を付けます。
  9. テンプレートをWebflowデザイナーで開くためにCreate siteをクリックします。

テンプレートベースのサイトを転送

テンプレートベースのサイトを別のユーザーやワークスペースに転送することができます。サイトの転送について詳しく学ぶ。

ワークスペース内でサイトをテンプレートとして有効または無効にする

サイトをテンプレートとして有効にし、将来の使用のためにワークスペース内のあなたや他の人がそれを使用できるようにすることができます。これは、新しい似たようなサイトを作成したり、同じ開始レイアウトを使用してそれを基に構築したりしたい場合に役立ちます。共有ワークスペーステンプレートを有効にすることができ、それはゼロから作成したサイトだけでなく、ワークスペースに追加した他のテンプレートサイト（Webflowテンプレートマーケットプレイスから提供されるものなど）にも適用できます。

注意: テンプレートを購入したテンプレートから共有ワークスペーステンプレートを作成する場合は、テンプレートの使用とライセンスに注意してください。

サイトをテンプレートとして有効にするには：

  1. Site settings > General タブ > 共Shared Workspace templateに移動します。
  2. Make templateをクリックします。
  3. テンプレートにNameを付けます。
  4. Confirmをクリックします。

サイトをテンプレートとして無効にするには：

  1. Site settings > Genera タブ > Shared Workspace templateに移動します。
  2. Disable templateをクリックします。
  3. Removeをクリックします。

共有ワークスペーステンプレートとその説明のリストをWorkspace settings > Templates タブ > Shared Workspace templates.で表示できます。

注意: サイトがテンプレートとして有効になった場合、テンプレートとして無効にする前に削除することはできません。

共有ワークスペーステンプレートについて詳しく学ぶ。

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

テンプレートベースのサイトをエクスポートしたい場合、まずエクスポート機能を有効にするために、有料のワークスペースプランを購入する必要があります。コードのエクスポートについて詳しく読む。

独自のテンプレートを販売

テンプレート作成が好きな場合、Webflowのテンプレートマーケットプレイスでテンプレートデザインを販売できます。テンプレートを提出する前に、テンプレート提出ガイドラインを確認してください。

関連記事: Medium Rareがテンプレートを販売しビジネスを成長させた方法