イノベーターのためのWebflow

Webflow テンプレートの最初の手順は、最初は少し大変に思えるかもしれませんが、テンプレートの取得とカスタマイズから、独創的なコンテンツを世界に公開するまで、基本的な手順を説明したので、すぐに始めることができます。

このモジュールでは、次のことを理解します。

1. テンプレートの入手方法
2. Webflow デザイナーでサイトを変更する方法
3. ブログの管理方法
4. サイトに要素を追加または削除する方法
5. サイトを公開する方法
6. カスタムドメインをサイトにリンクする方法
7. Google Analyticsの設定方法
8. テンプレートに関するサポートを受ける方法

テンプレートの入手方法

デザインを開始する前に、テンプレートを入手し、Webflow ダッシュボードでそのテンプレートからサイトを作成する必要があります。イノベーター テンプレートを入手して、個人、企業、またはサイトに使用することができます。

重要： テンプレートを入手したら、プロモーションコード（お持ちの場合）を選択して挿入できます。 プロモーションコードを追加 チェックアウトモーダルで、テキストボックスにプロモーションコードを入力し、 適用する.

イノベーター テンプレートを選択して取得するには:

1. 訪問 Webflow のテンプレートマーケットプレイス あなたのサイトに利用したいトップレベルのテンプレートを探す（例： リンク X テンプレート, リンクアプリテンプレート, Socialite のソーシャル テンプレート)
2. プレス 購入 テンプレートのメインページ（まだ登録していない場合は、無料の Webflow アカウントに登録するよう求められます。ログアウトしている場合は、既存のアカウントにログインできます）
3. チェックアウトモーダルに支払いの詳細を入力してください（または「クレジットカードの変更” をクリックして、以前に支払詳細を追加したことがある場合は更新してください）
4. クリックしてください 今払う 購入を完了するためのボタン
5. タップ 続く お支払いの確認後
6. 新しいサイトに名前を付けて サイトを作成 Webflowデザイナーで新しく入手したテンプレートを公開する

重要： テンプレートの取得請求書は以下から入手できます。 ワークスペース設定 > テンプレート タブ > 購入したテンプレート。 クリック 請求書をダウンロード 購入した特定のテンプレートの請求書を取得します。

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

Webflow デザイナーでサイトをカスタマイズする方法

テンプレートを入手したら、自分のスタイルに合わせてカスタマイズを開始できます。 

テンプレートは、 Webflow デザイナーまたは、Webflow ダッシュボードからサイトを開始することもできます。どちらのオプションでも同じ場所 (デザイナー) に移動し、そこでパーソナライズされたデザイン エンチャントがすべて実行されます。  

テンプレートのカスタマイズを始める前に、 デザイナー、 Webflowキャンバス 自体： 

• ページパネル
• ナレーターパネル
• リソースパネル
• スタイルパネル
• キャンバス

これらのパネルは、あなたのページへのアクセスを許可します（ページパネル）、ページ内の要素の階層的な配置（ナレーターパネル）、サイトに統合したアセットの概要（リソースパネル）、ページ上の要素のスタイルを微調整する機能（スタイルパネル）。 キャンバス サイト内の要素を操作できる場です。 

公開する前に、画面左上の「目」アイコンをタップしてブラウザでデザインをプレビューすることもできます。 デザイナー. 

ウェブサイトがさまざまなデバイスで応答性があることを保証するために、ウェブサイトのデザインのさまざまなブレークポイント ビューを定期的に確認することをお勧めします。ブレークポイントの詳細をご覧ください。

このモジュールに組み込んだ詳細に加えて、テンプレートの作成者は、テンプレートのページの 1 つとして「ここから始める」ガイドを提供している場合があります。そのようなガイドがサイト内に存在する場合は、それを利用して、購入したテンプレートに固有のヒントやテクニックを把握できます。 

Webflowの入門サイトプランを使用している場合は、テンプレート内のすべてのページを変更できますが、有料のプランにアップグレードしない限り、追加のページを追加したり、ページを複製したりすることはできません。 ワークスペースプラン または有料 敷地計画.

重要： サイトの変更に着手する前に、サイトをバックアップし、サイトに大幅な変更を加える前に手動バックアップ (Webflow の自動バックアップ以外) を作成することをお勧めします。

どのように活用できるかを見ていきましょう デザイナー に：

• テキストの変更
• 色を調整する
• 背景をカスタマイズする
• 代替画像
• リンクを更新する
• サイト訪問者データを収集する
• SEO構成の変更

重要： シンボルでもある要素を見つけた場合は、それをダブルクリックして、シンボル内の要素を変更します。シンボルは、サイト全体のさまざまなインスタンスで使用できる再利用可能なコンポーネントです (たとえば、同じお問い合わせフォームを複数の異なるページに配置できます)。シンボルのインスタンスを 1 つ変更するたびに、他のすべての場所が更新されます。シンボルの詳細については、こちらをご覧ください。

テキストの変更

テンプレート内のテキストを変更するには、テキスト要素をダブルクリックするか、選択して 入場/返却次に、プレースホルダー テキストを選択し、独自のコンテンツに置き換えます。

テキストのフォント、太さ、色なども変更できます。タイポグラフィスタイルの属性は、 タイポグラフィ categoryの スタイルパネル. 

役に立つヒント: サイト全体のテキストのスタイルをすぐに変更したい場合は、本文 (すべてのページ) タグを選択し、テキストのフォントの種類、フォント サイズ、行の高さを変更します。タイポグラフィの詳細については、こちらをご覧ください。

関連読書:

• タイポグラフィの色のコントラスト

色を調整する

テンプレートの配色に色変数が含まれている場合は、色変数を簡単に変更してサイト全体で更新できます (たとえば、赤の色変数を紫に変換すると、すべての赤色の要素が紫色に変更されます)。

背景をカスタマイズする 

特定の要素では、背景色、画像、またはグラデーションを利用して視覚的な興味を喚起します。 

要素の背景を設定することで、見た目と読みやすさをコントロールできます。 スタイルパネル > 背景、ほとんどの要素（ビデオや画像などのメディア要素を除く）に背景画像、グラデーション、または色を含めることができます。背景スタイルを微調整する方法を学びます。

追加リソース:

• Webflowのカラーセレクター
• フォントカラーバリエーション

代替画像

デザイン内のプレースホルダー画像を、自分でアップロードした代替画像と入れ替えるオプションがあります。アセット パネルから画像をアップロードしたり、以前にアップロードした画像にアクセスしたりできます。画像を置き換える方法をご覧ください。

参考文献：

• 画像に代替テキストを組み込む
• 画像のさまざまなファイル形式
• 画像品質の最適化

ハイパーリンクを修正する

選択したデザイン内のハイパーリンクを更新することも重要です。ハイパーリンクを素早く変更するには、ハイパーリンクを含む要素を選択し、 設定パネル > リンク設定 必要な調整を行います。ハイパーリンクの設定とその構成の調整について学習します。

参考文献：

• アンカーテキスト
• リンクセクション

貴重なヒント: YouTube や Vimeo などの外部プラットフォームからビデオを埋め込むオプションもあります。Webflow のビデオ コンポーネントの利用方法について学習します。

訪問者の詳細情報を収集する

サイト訪問者から情報を収集したり (ニュースレターのサインアップなど)、訪問者が問い合わせフォームからメッセージを送信できるようにしたりするには、この情報を正確に収集して転送するようにフォームを構成することができます。

このデータは直接収集できます サイト設定、または MailChimp や Zapier などのサードパーティのサービスを利用してフォームの送信を管理します。フォームの送信と通知を処理する方法を確認します。

SEO構成を調整する

サイトが共有または検索されたときに表示されるタイトル、画像、説明をカスタマイズするには、ページの設定内で SEO 設定と Open Graph 設定を変更します。SEO の基礎ガイドで SEO についてさらに詳しく学びましょう。

アクセスするために SEO構成 そして オープングラフ設定:

1. アクセス ページパネル
2. 更新するには、目的のページの横にある歯車アイコンをクリックします。
3. 情報を編集する SEO構成 または オープングラフ構成

ブログ運営

テンプレートに組み込みのブログが含まれている場合は、Webflow の組み込みコンテンツ管理システム (CMS) を使用して、独自のコンテンツを紹介する新しい投稿を効率的に作成できます。 

CMS は動的コンテンツのリポジトリです。Web サイトはさまざまなページでこの動的コンテンツを参照し、CMS でこのコンテンツを変更すると、関連するすべてのページが自動的に更新されます。

Webflow のビジュアル CMS を使用すると、コードを変更することなく、構造化されたコンテンツを形成し、そのコンテンツを中心にクリエイティブにデザインし、すべてを管理することができます。Webflow CMS と個々のコレクション アイテムの処理について詳しくご覧ください。

動的CMS要素は、紫色のアウトラインで区別するか、要素を選択して スタイルパネル。 もし ダイナミックスタイル設定 セグメントが表示されている場合、要素は動的 CMS 要素です。

次のプロセスを確認しましょう:

• 個々の投稿をパーソナライズする
• ブログエントリとカテゴリの組み込みと削除
• ブログ投稿の下書きを保存する
• ブログ投稿のスケジュール設定

個々の投稿をパーソナライズする

Webflow CMS内でブログ投稿をカスタマイズできます。テンプレートサイトのCMSは通常2つ（またはそれ以上）のCMSで構成されています。 コレクション サンプル コンテンツ (例: 「ブログ投稿」コレクションと「カテゴリ」コレクション) を使用します。サンプル コンテンツを独自のデータに置き換えることができます。

あ コレクション 類似したアイテムのコレクションです。たとえば、「ブログ投稿」というコレクションがあるとします。「ブログ投稿」 コレクション 個人を包含する コレクションアイテム — 個々のブログ投稿。

それぞれ コレクションアイテム (例: 各ブログ投稿) には、コンテンツ用のフィールドが含まれています。たとえば、ブログ投稿のタイトル、ブログ投稿の内容、ブログ投稿のメイン画像、ブログ投稿の category などを挿入できます。

特定の入力でサンプル コンテンツを更新するには: 

1. クリック コンテンツ管理システム デザイナーツールバーの CMSパネル
2. 希望する コレクション （例：「ブログ投稿」）
3. 選ぶ コレクションアイテム (例: サンプルブログ投稿の 1 つ)
4. フィールドにあなたの情報を入力してください

その後、次のことが可能になります。

• 保存 あなたの変更
• ドロップダウンメニューを使用して 公開 個々のブログ投稿をすぐに公開する（グローバル公開の必要がない）
• ドロップダウンメニューを使用して 下書きとして保存 まだ投稿を公開する準備ができていない場合。 

他の場合も上記の手順を繰り返します コレクションアイテム 更新したい投稿をダブルクリックします。変更内容はキャンバスに自動的に反映されます (投稿を下書きとして保存し、サイト上で公開されないようにしない限り)。コレクション アイテムの更新について詳しくは、こちらをご覧ください。

重要： ブログ投稿のタイトルを変更する場合は、必ず URL スラッグを更新してください。 

ブログエントリとカテゴリの組み込みと削除

追加するには コレクションアイテム (例: ブログ投稿またはブログ category)、新しいアイテムを手動で作成したり、CSV ファイルからアイテムをインポートしたり、Zapier または Webhook を使用して CMS API 経由でリンクしたりできます。追加のコレクション アイテムを作成する方法については、こちらをご覧ください。

複数のコレクション アイテムを一度に消去するか、個々のコレクション アイテムを削除するかを選択できます。 

1つを削除するには コレクションアイテム:

1. アクセス コンテンツ管理システム デザイナーツールバーの CMSパネル
2. 希望する コレクション （例：「ブログ投稿」）
3. 選ぶ コレクションアイテム （例：ブログ投稿）
4. 一番下までスクロールして選択 消去
5. クリックして確認 消去 また

ブログ投稿の下書きを保存する

ブログ投稿をサイトに直接公開する代わりに、最初は下書きとして安全に保持することができます。

下書きの項目は複数回修正することができ、公開の準備ができるまで下書きとして保存し続けることができます。完成したら、記事は 出版準備 または 出版された サイトで下書きアイテムを管理する方法をご覧ください。

ブログ投稿をスケジュールする

スケジュール公開を使用すると、事前にコンテンツのリリースを計画し、指定された時間に自動的に公開することができます。この機能は、 ホスト型 CMS、ビジネス、eコマースサイトプラン.

ブログエントリをスケジュールする方法を学びます。

サイトに要素を追加または削除する方法

カスタマイズするテンプレートを選択しましたが、ホームページに新しい画像を追加したり、リンク リストに新しいハイパーリンクを追加したりしたい場合があります。あるいは、Twitter リンクや製品ストアは不要で、レイアウトからこれらの要素を削除したい場合もあります。サイトに要素を追加したり削除したりして、コンテンツを完璧にカスタマイズする柔軟性があります。

貴重なヒント: ブログ投稿は Webflow CMS によって制御されるため、ブログ投稿を管理するには、少し異なるアプローチが必要です。ブログの操作については、ブログ固有の手順を参照してください。 

以下に手順をご案内します。

• サイトに要素を組み込む
• サイトから要素を削除する

注記： ウェブサイトに大きな変更を加える前に、バックアップを作成することをお勧めします。

ウェブサイトにコンポーネントを追加する

ウェブサイトに要素やパーツを統合するオプションがあります。たとえば、新しいリンクを挿入したい場合は、既存のリンクをコピーしてサイトに直接貼り付けることで複製できます。

1. 選ぶ 複製したい要素（例：リンク）
2. 要素をコピーするには 指示 + Ｃ (Macの場合) または コントロール + Ｃ (Windowsの場合)
3. コピーした要素を貼り付けるには 指示 + 五 (Macの場合) または コントロール + 五 (Windowsの場合)

貼り付け操作を元に戻すには、 指示 + ず (Macの場合) または コントロール + ず (Windows の場合)。

ウェブサイトからコンポーネントを削除する

ウェブサイトから要素を削除することもできます。たとえば、特定のソーシャル メディア プラットフォームを使用しておらず、そのリンクを削除したい場合は、次の手順に従って要素を削除します。

1. 削除する要素を選択します（削除後に要素が残らないように、関連するすべてのコンポーネントが選択されていることを確認してください）。
2. を押す 消去 キーボードのキー

削除操作を元に戻すには、 指示 + ず (Macの場合) または コントロール + ず (Windows の場合)。

ウェブサイトを公開する手順

デザインをカスタマイズしながら、Web サイトを Webflow のネイティブ ドメインに無料で公開できます (例: 「www.myamazingplants.ウェブフロー「」をクリックすると、Web 上でサイトがどのように表示されるかをプレビューできます。Web サイトを公開する方法を学びます。

個人ドメインをウェブサイトにリンクするためのガイド

Webflow のデフォルト ドメインに Web サイトをいつでも無料で公開できます (例: myamazingplants.ウェブフロー) の場合は、カスタム ドメインを Web サイトに接続して、代わりにそこに公開することもできます (例: myamazingplants.com).

以下の方法を説明します。

• 新しいウェブサイトのサイトプランを入手する
• カスタムドメインをウェブサイトにリンクする

ウェブサイトのサイトプランを取得する

ウェブサイトでカスタム ドメインを使用したり、より包括的なブログを作成したりする場合は、ウェブサイト用のサイト プランを購入できます。サイト プランの管理方法については、こちらをご覧ください。

テンプレートが Webflow CMS を使用している場合 (例: ブログ用)、CMS が Web サイトから削除されるまで、ベーシック サイト プランを購入することはできません。このアクションはテンプレート デザインの一部に影響する可能性があるため、CMS を削除する前に Web サイトをバックアップしてください。

サイト プランの購入にプロモーション コードを適用する方法をご確認ください。

カスタムドメインをウェブサイトにリンクする

ウェブサイトのサイト プランを取得したら、所有する任意のカスタム ドメイン (例: myamazingplants.com) にウェブサイトを公開できます。カスタム ドメインを接続する方法について学習します。

Google Analyticsを追加するプロセス

素晴らしいウェブサイトを開発しました。次は、ユーザー数、ページビュー、ユーザー セッション期間、直帰率などの重要な指標を監視するために Google Analytics を設定します。Google Analytics は、ウェブサイトのトラフィック ソースに関する分析情報も提供し、都市などの特定の場所までドリルダウンすることができます。ウェブサイト用に Google Analytics を設定する方法を学びます。

テンプレートのサポートを受ける

Webflow を初めて使用する場合、多数のインタラクション、カスタマイズされたメニュー、ポップアップ モーダルを含むテンプレートのカスタマイズが難しいと感じる場合は、テンプレート デザイナーに支援を求めることができます。また、多くのテンプレート デザイナーは、テンプレート内に documentation のサポートを組み込んでいます。

ユニークで魅力的な Web サイトを作成した成果を祝い、クリエイティブなコンテンツを世界と共有しましょう。