ページの分岐

ページ分岐を使用すると、複数のデザイナーでより速く構築および出荷できます。
リマインダー: この機能はWebflowエンタープライズの顧客とビジネスパートナーのみが利用できるため、 エンタープライズチームにお問い合わせください ウェブサイトでページ分割を採用したい場合。

ページを分割すると、複数の作成者が同時に異なるページで共同作業できるため、大規模なチームでの更新の迅速な開発と展開が容易になります。ページを分割すると、サイト上のいずれかのページの「スナップショット」が作成され、元のページに影響を与えずに新しいデザインの変更を試すことができます。変更に満足したら、ページ ブランチをプライマリ サイトに統合して、元のページを置き換えることができます。

このチュートリアルでは以下の内容を取り上げます。

  1. ページ分割の機能
  2. ページを分割するプロセス
  3. ページブランチを編集するテクニック
  4. ページブランチをマージする手順
  5. ページブランチを削除する手順
  6. ページブランチをステージングする方法

ページ分割の機能

ページ分岐を使用すると、他のデザイナーが別のページ ブランチまたはプライマリ サイトで作業している間に、特定のページのデザインを改良することができます。デザインの修正が完了したら、ページ ブランチをブレンドして元のページ デザインを上書きできます。

リマインダー: 分岐中に元のページのコンテンツに加えられた変更は、マージ後に失われます。コンポーネント、カテゴリ、またはインタラクションへの変更はそのまま残ります。変更が失われないように、Webflow は、既存のブランチがあるプライマリ サイトのページを変更しようとすると、警告メッセージを発行します。

メイン サイトの変更は、更新されたカテゴリ、ステータス、HTML タグ、コンポーネント、パラメーター、またはインタラクションをプライマリ サイトからブランチに明示的に統合することを選択しない限り、ページ ブランチには影響しません。ページ ブランチで行われた調整は、ブランチがプライマリ サイトに再統合されるまで、メイン サイトには影響しません。

リマインダー: 分割されたページは固定ページ制限にカウントされません。
リマインダー: ページ分割はローカリゼーションと互換性があります。 ロケールビュー ドロップダウンを使用して、サイトを適応させるロケールに移動します。

役割と権限

デザイナー アクセス権 (例: サイト管理者、デザイン可能、デザイン可能 (制限付き)) を持つすべてのユーザーは、ブランチを作成およびブレンドできます。サイト レベルのロールと権限に関する詳細については、こちらをご覧ください。

デザインマネジメント

ページを分岐するのにデザイン コントロールは必要ありません。つまり、デザイナーはプライマリ サイトのデザイン コントロールと共同作業し、他のデザイナーはページ ブランチで作業することができます。ただし、ページ ブランチをマージするにはデザイン コントロールを所有または要求する必要があります。または、デザイン コントロールを持つ同僚に、代わりにブランチをマージするよう要求することもできます。

出版

完全なサイト公開は、ページの分岐によって妨げられることはありません。デザイン制御を持つすべてのユーザーは、ブランチを公開せずにプライマリ サイトを公開できます。ブランチは、開発用のセキュリティ保護されたワークスペースとして機能します。ページ ブランチを公開するには、最初にメイン サイトにマージする必要があります。

譲渡と複製

サイトを別のユーザーまたはワークスペースに転送する場合、ページ ブランチは転送されません。また、サイトの複製時にページ ブランチが複製されることはありません。

ページを分割するプロセス

分岐の対象となるサイト ページの種類は次のとおりです。

  • 安定したページ(ユーティリティ ページ、ユーザー ページ、e コマース ページを含む)
  • 下書きページ
  • 動的ページ(eコマースページとコレクションページを含む)
  • 新しいページ

新しいページのページ ブランチを作成するには:

  1. アクセス ページパネル
  2. 「新しいページを作成」アイコンをクリックします
  3. 選択する ブランチとして新しいページを作成する

既存のページからページ ブランチを作成するには:

  1. アクセス ページパネル
  2. 分岐したいページにマウスを移動します
  3. 「ページブランチを作成」アイコンをクリックします

ページ ブランチがデザイナーで開き、デザインを開始できるようになります。デザイナーを更新すると、同僚は新しいページ ブランチを確認できます。

ページブランチを変更する方法

ページ ブランチの変更は、いくつかの違いはあるものの、ページの変更と似ています。ページ ブランチで作業できるのは、一度に 1 人のデザイナーだけです。同僚がページ ブランチで作業したい場合は、まず別のページに移動する必要があります。

さらに、一度に許可されるブランチはページごとに 1 つだけです。ページに新しいブランチを確立するには、まず既存のブランチをマージまたは削除する必要があります。

ページブランチで許可されるタスク

要素

  • 静的要素を組み込み、再配置し、削除する
  • 現在のクラス、新しいクラス、組み合わせクラスを使用して要素をスタイル設定します

クラス

  • 既存のクラスを活用して調整する
  • ブランチの更新またはマージ中に発生するクラスの競合を管理する
  • 新しいクラスと組み合わせクラスを作成する
  • メインサイトで行われたクラスの修正を反映するためにページブランチのクラスを更新します

コンポーネント

  • 既存の主要コンポーネントを編集する
  • 既存のコンポーネントを活用し、コンポーネントの属性をオーバーライドし、コンポーネントのリンクを解除します。
  • メインサイトで行われたコンポーネントの変更に合わせて、ページブランチ上のコンポーネントを更新します。

コンテンツ管理システム

  • ブランチCMSコレクションページ
  • CMS コンテンツと動的要素 (コレクション リストなど) の接続と分離を確立する

インタラクション

  • あらかじめ構築されたアニメーションを使用して新しいインタラクションを生成する
  • カスタムアニメーションを開発する
  • 既存のカスタムアニメーションを活用する

ページ構成

SEO設定、Open Graph設定、サイト検索設定、カスタムコードを調整する

ページブランチで禁止されているタスク

変数

  • 変数を変更する

クラス

  • カラーパレットを作成または変更する

コンポーネント

  • 新しいコンポーネントまたはコンポーネント属性を作成する

コンテンツ管理システム

  • CMSコレクションまたはコレクションアイテムを作成または変更する

インタラクション

  • 既存のインタラクションやカスタムアニメーションを変更する

ページ構成

  • ページタイトル、ページ URL、ファイル構造、アクセス制御設定、ホームページのステータスを変更する

クラス、ステータス、HTML タグ、コンポーネント、変数、ページ分岐とのインタラクションの統合

クラス、ステータス、HTML タグ、コンポーネント、変数、またはインタラクションがメイン サイトとページ ブランチの両方で使用され、メイン サイトで変更されている (ただし、ページ ブランチでは変更されていない) 場合、これらの変更の影響はブランチをマージした後のページに現れますが、ブランチにはすぐには反映されません。

ただし、メイン サイトのクラス、ステータス、HTML タグ、コンポーネント、変数、インタラクションの更新を確認し、必要に応じてブランチに取り込むことができます。メイン サイトの最新のクラス、コンポーネント、変数、インタラクションを使用して設計できるように、これらの更新をページ ブランチに定期的にインポートすることをお勧めします。

ページ分岐中にメイン サイトとブランチの両方でクラス、ステータス、HTML タグ、またはプライマリ コンポーネントが変更された場合は、ブランチを更新する前にそれらの競合を解決する必要があります。ブランチを更新する前に競合に対処するプロセスを学習します。

不可欠: ページとブランチ間でコンテンツをコピーして貼り付けることができます。ただし、メイン サイトのクラスが変更されたブランチに要素を貼り付けると、ブランチのクラス バージョンが優先されます。メイン サイトのクラスは影響を受けません。

注記: メイン サイトで作成されたクラスと同じ名称のクラスをページ ブランチ上に作成すると、クラス名が増分されます。ブランチをマージすると、たとえば、ページに「Button」クラス ブランチを作成し、別のユーザーがメイン サイトで「Button」クラスを作成すると、マージが完了すると「Button」クラスは「Button 2」に変更されます。

ページブランチ内のクラス、状態、HTML タグ、コンポーネント、変数、インタラクションに変更を加える方法

メイン サイトのクラス、コンポーネント、変数、およびインタラクションの更新を検査するには:

  1. 分岐したページがリストされているデザイナーの上部に進みます
  2. ドロップダウン矢印をクリックします
  3. プレス アップデートを確認

メインサイトのクラス、コンポーネント、変数、またはインタラクションに更新が適用されている場合は、メインサイトから更新を取得するように求めるモーダルウィンドウが表示されます。メインサイトからの更新をブランチにマージするには、 更新のプルをクリックしてブランチの更新を確認します わかった モーダルウィンドウに表示されます。

必要に応じて、更新の取得を遅らせることもできます。 後で更新 モーダルウィンドウに表示されます。

重要な注意: ページが分岐されている間に、メイン サイトとブランチの両方でクラス、状態、HTML タグ、またはメイン コンポーネントが変更された場合は、ブランチの更新を続行する前にこれらの競合に対処する必要があります。ブランチを更新する前に、競合解決を参照してください。

検査中にメインサイトのクラス、コンポーネント、変数、またはインタラクションの更新が見つからない場合、ブランチに統合する更新がないことを通知するモーダルウィンドウが表示されます。これは、メインサイトの最新の設計で作業していることを意味します。モーダルウィンドウを閉じるには、 わかった.

ブランチを更新する前に競合に対処する

ページが分岐されている間に、メイン サイトとページ ブランチの両方でクラス、状態 (例: ホバー、押下)、HTML タグ (例: すべての H1 見出し、本文 (すべてのページ))、またはメイン コンポーネントが変更された場合は、ブランチを更新する前にこれらの競合を解決する必要があります。

競合に対処するには:

  1. 分岐したページがリストされているデザイナーの上部に移動します
  2. ドロップダウン矢印をクリックします
  3. プレス アップデートを確認
  4. 各競合の横にあるドロップダウンから、優先クラスまたは HTML タグ バージョン (メイン サイトまたはブランチ) を選択します。
  5. クリック 競合を解決して更新する
「ブランチを更新する前に競合を解決してください」モーダル ウィンドウには 4 つの競合が表示されます。

ページ分岐におけるCMS管理

ページ ブランチとメイン サイトは同じ CMS を共有しているため、ページ ブランチ中に CMS に加えられた変更は、特定のページ ブランチに反映されます。たとえば、ページ ブランチの作成時にコレクション リストに最初に 4 つのアイテムが含まれていて、後でメイン サイトのコレクションに別のアイテムが追加された場合、CMS はページ ブランチのコレクション リストに 5 つのアイテムを示します。

支店の権限

デザイナーがブランチを離れると、デザイン権限を持つ他の Workspace メンバーは、編集、マージ、または削除のためにブランチの制御を引き継ぐことができます。たとえば、デザイナー A がブランチを離れると、デザイナー A が同時にブランチでアクティブに作業していない限り、デザイナー B が引き継ぐことができます。

読み取り専用リンクを使用したコラボレーション

デザインが完了したら、ページ ブランチをマージする前に、読み取り専用リンクをチーム メンバーに配布できます。読み取り専用リンクの共有について詳しくは、こちらをご覧ください。

サイトアクティビティの追跡

サイトアクティビティログを介して特定のページブランチのブランチアクティビティを監視するオプションがあります。さらに、「リスト” 記号の隣に ブランチが統合されました アクティビティを使用すると、ブランチからメイン サイトに統合された変更を表示できます。サイト アクティビティ ログの詳細をご覧ください。

ページブランチのマージ

ページ ブランチでデザインを完成したら、それをメイン サイトに統合できます。チーム メンバーは、デザイナーを更新すると、結合されたページ ブランチを確認できます。ページ ブランチをマージすると、メイン サイトの元のページのコンテンツが置き換えられることに注意してください。したがって、マージする前にデザインに満足していることを確認してください。

重要: 分岐中に元のメイン サイト ページに加えられたコンテンツの変更は、ページ ブランチをマージした後に上書きされます。ただし、コンポーネント、クラス、またはインタラクションの変更は保持されます。ページ ブランチが存在する場合は、元のメイン サイト ページを変更しないことをお勧めします。

ページの分岐中にメイン サイトとブランチの両方でクラス、状態、HTML タグ、またはメイン コンポーネントが変更された場合は、ブランチのマージを続行する前に競合を解決する必要があります。ブランチをマージする前に競合を解決する方法を学習します。

ページ ブランチからの変更を元のページに結合するには、次の 2 つの方法があります。

  • ページブランチからの変更をマージする
  • ページパネルから変更をマージする

ブランチをマージする前に、そのブランチに加えられたすべての変更をマージ サマリーで確認できます。これらの変更の詳細な概要を確認するには、マージ サマリーの行をクリックして、サイト アクティビティ ログ内の変更を詳しく調べることができます。

ページ ブランチからの変更をマージするには:

  1. デザインコントロールが不足している場合は、 完全なデザインコントロール
  2. 分岐したページがリストされているデザイナーの上部に移動します
  3. ドロップダウン矢印をクリックします
  4. プレス サイトと統合
  5. マージサマリーで変更内容を確認する
  6. クリック ブランチをマージ
ページ ブランチ ドロップダウンで [サイトと結合] オプションが強調表示されます。

ページ パネルから変更をマージするには:

  1. に移動 ページパネル
  2. ページブランチにマウスを移動します
  3. ページブランチ名の右側にある「このブランチをサイトにマージする」アイコンをクリックします。
  4. マージサマリーで変更内容を確認する
  5. クリック ブランチをマージ 後続のモーダルウィンドウで
プロのヒント: ページ ブランチをマージしたが、元のページのデザインにアクセスしたり、サイトに完全に復元したりしたい場合は、いくつかのオプションがあります。バックアップの [プレビュー] ボタンを押して、デザインをコピーして現在のサイトに貼り付けると、サイト バックアップで元のページのデザインをプレビューできます。別のオプションとして、[復元] を選択して、サイト バックアップから元のページ (およびサイト全体) を完全に復元することもできます。ページ ブランチも、サイト バックアップから復元できます。バックアップからサイトを復元すると、特定のサイト設定とデータに影響することに注意してください。サイト バックアップをプレビューまたは復元するプロセスと、サイト バックアップを復元することの影響を理解してください。

ブランチをマージする前に競合を解決する

分岐中にメイン サイトとページ ブランチで変更されたクラス、条件 (例: ホバー、押下)、HTML タグ (例: すべての H1 見出し、本文 (すべてのページ))、または主要コンポーネントが発生した場合は、ブランチをマージする前にそれらの競合に対処する必要があります。

競合に対処するには:

  1. デザイナーの上部にあるページ名に移動します
  2. ドロップダウン矢印をクリックします
  3. 選ぶ サイトと統合
  4. マージサマリーの変更を確認する
  5. 各競合の横にあるドロップダウン メニューから、使用したいクラスまたは HTML タグのバージョン (メイン サイトまたはブランチなど) を選択します。
  6. クリック 競合を解決してマージする

ページブランチの削除

元のページ デザインを保持するか、新しいページ ブランチを開始することを選択した場合は、ページ ブランチを削除するオプションがあります。ページ ブランチを削除するには、次の手順を実行します。

  1. アクセス ページパネル 削除したいページブランチを見つけます
  2. デザイナーのトップセクションにあるページ名に移動します
  3. ドロップダウン矢印をクリックします
  4. 選ぶ ブランチを削除
  5. 選択して確認 ブランチを削除 後続のモーダルウィンドウで

ページ ブランチを誤って削除したが、ブランチのデザインを表示したり、ブランチをサイトに完全に復元したりしたい場合は、いくつかの方法があります。バックアップの [プレビュー] ボタンをクリックして、サイト バックアップでページ ブランチのデザインをプレビューするか、[復元] をクリックして、サイト バックアップからページ ブランチを完全に復元することができます。サイト バックアップを復元すると、メイン サイトとページ ブランチの両方が、指定されたタイムスタンプの状態に戻ります。

重要: バックアップからサイトを復元すると、特定のサイト設定とデータに影響が出ることにご注意ください。サイト バックアップをプレビューまたは復元する方法と、サイト バックアップを復元した場合の影響について説明します。

ページブランチのステージング

メイン サイトにマージする前に、ページ ブランチを専用のステージング サブドメイン (プライマリ Webflow ステージング サブドメインまたはカスタム ステージング ドメインとは別のドメイン) に公開できます。これにより、あなたと共同作業者はライブ サイトでブランチをテストおよびレビューして、カスタム コード、パフォーマンス、統合、さまざまなデバイスでの応答性を評価できます。ブランチ ステージング サブドメイン リンクは、Webflow アカウントを持っているかどうかに関係なく、個人と共有することもできます (たとえば、関係者によるレビューや品質保証の専門家によるテスト用)。プライベート ステージング アクセスでは、ステージングされたブランチを表示するために認証が必要です。

ステージングされたページ ブランチの URL には、サイト全体のスナップショットが含まれており、ブランチの変更がメイン サイトの残りの部分にどのような影響を与えるかを簡単に確認できます。ページ ブランチとメイン サイトの間でクラス競合が発生した場合は、ブランチの変更が優先されます。

特定のステージング URL のみに単一のブランチを公開することも可能です。この場合、作成されたページ ブランチごとに個別のステージング URL が自動生成されます (たとえば、ページ ブランチが 10 個あると、ステージング URL も 10 個になります)。ステージングされたブランチをマージまたは削除すると、URL は非公開となり、削除されます。

注記: ページブランチをステージングするには、最初のサイト公開が必要です。さらに、作成されたコレクションアイテムのみが そして ステージング中に公開されたものは、ページ ブランチ URL に含まれます。

ページ ブランチをステージングするには:

  1. ページブランチにアクセスする
  2. クリック ステージ分岐 デザイナーの右上隅
  3. を進めます ブランチを公開

その後、ステージング URL にアクセスして、メイン サイトのブランチを検査します。ブランチ ステージングはテストとレビューのみを目的としているため、公開のためにブランチをステージング ブランチから本番環境に移動することは不可能です。ブランチの設計/変更に満足したら、ブランチをメイン サイトにマージし、その後、変更内容を本番環境に公開します。

注記: ワークスペース内のすべてのメンバー (コメント投稿者またはコメント可能ロールを持つメンバーを除く) は、ページ ブランチをステージングできます。
ユアン・マック