ユーザーインターフェースキットを確立する

共通コンポーネントを含むユーザー インターフェイス (UI) キットを作成し、フッター、行動喚起、ボタンなどの要素をプロジェクト間でコピー/貼り付けできるようにします。

同じ配置、コンポーネント、セクションを常に複製している場合は、UI キットを作成してワークフローを合理化します。ユーザー インターフェイス キットは、フッターや行動喚起 (CTA) などの標準的なページ要素を含むコンテンツのリポジトリであり、新しいプロジェクトで使用できます。これには、スタイル ガイド テンプレートやブログ テンプレートが含まれます。 

この指導セッションで取り上げる主なポイントは次のとおりです。

  1. ユーザーインターフェースキットをセットアップする
  2. フッターを複製して貼り付ける
  3. CTAを複製して貼り付ける
  4. ボタンを複製して貼り付ける
  5. モデルユーザーインターフェースキットを複製する

プロジェクト間でコンテンツを複製して貼り付ける方法についてさらに詳しく調べます。

ユーザーインターフェースキットを確立する

パーソナライズされたユーザー インターフェイス キットを作成するには:

  1. プロジェクトを開始する(またはプロジェクト内の新しいページを作成する) 
  2. リサイクルを計画している共通の要素またはモジュールを設計する
  3. 再利用したい要素を複製して別のプロジェクトに貼り付けます。 

ユーザー インターフェイス キットを別のプロジェクトに貼り付けると、新しいプロジェクトで使用できるクラスが構成されます。 

フッターを複製して貼り付ける

ユーザー インターフェイス キットにフッターを追加するには:

  1. 以前に作成したフッターを複製する
  2. ユーザーインターフェースキットとして機能する新しいプロジェクト(またはページ)にアクセスします
  3. 新しいプロジェクトにフッターを貼り付けます

フッターが対象プロジェクトに溶け込んだら、プロジェクトの美観に合わせて必要に応じてスタイルを設定できます。

CTAを複製して貼り付ける

CTA をユーザー インターフェイス キットに統合するには:

  1. 以前に作成した CTA を特定します (例: CTA として機能するフォーム)
  2. フォームを複製する
  3. 対象プロジェクトにアクセスする
  4. フォームを貼り付ける

注記: デザイナーのすべてのフォーム構成は新しいプロジェクトにコピーされますが、プロジェクト設定を調整する必要があります。

  1. プロジェクトにアクセスする 設定 あなたの ダッシュボード 
  2. をタップします フォーム タブ
  3. 完了 フォーム通知 フォーム送信の詳細を整理するセクション

ボタンを複製して貼り付ける

ユーザー インターフェイス キットにボタンを導入するには:

  1. 既存のボタンを複製する
  2. 対象プロジェクトを開く
  3. ボタンを貼り付ける

これで完了です。頻繁に使用する要素を複製してユーザー インターフェイス キットに貼り付けると、今後の時間を節約できます。デザイン プロセスを迅速化できます。

模範的なユーザーインターフェースキットをお返しします

迅速なデザインについてですが、私たちは コンパクトなサンプルユーザーインターフェースキット このチュートリアルでは、ニーズに合わせて複製して再利用できるユーザー インターフェイス キット プロジェクトを紹介します。ユーザー インターフェイス キット プロジェクトを自分のアカウントに複製し、要素を複製して新しいプロジェクトに貼り付けることで、洗練されたスタイル ガイドを使用して次の Web サイトを開始できます。

ユアン・マック