ブランドテンプレートのベストプラクティスガイド

テンプレートは、編集しやすく、予測可能で、チームの実際のニーズに合わせてカスタマイズできる場合に最適です。

事前に計画し、意図的に要素を設定することで、レイアウトを崩したり、ブランドスタイルに影響を与えたりすることなく、誰でも更新できるテンプレートを作成できます。

このガイドでは、組織全体で機能するテンプレートを作成するためにデザイナーが使用する不可欠な手順を説明します。

強力なテンプレートは、適切な構成要素から始まります。 テンプレートを使用するすべての人が簡単に更新できる要素と構造を選択します。

レイアウトを変更せずに、チームメイトが色を変更したり、置き換えたりできる素材を選択します。

アイコンやイラストにはSVGを使用します。 これらはきれいにスケーリングされ、ブランドキットの色を使用して再着色することができます。

SVGをアップロード

1. [アップロード]に移動し、[ファイルをアップロード]を選択します。
2. 最高の品質を得るにはSVGファイルを選択してください。

フレームは、画像のサイズと位置を正しく保ちます。 これにより、トリミングやディメンションを調整せずに、チームメイトが画像を差し替えることができます。

1つの画像が固定されたスペースを埋める必要がある場合は、フレームを使用します。

ブランドキットの色を使用すると、テンプレートの一貫性が保たれ、後で手動で更新する必要が少なくなります。

これにより、すべての更新でテンプレートをブランドに合わせることができます。

誰かが長いテキスト、短いラベル、または新しいコンテンツを追加しても、テンプレートは有効です。 テキストを正しく構造化することで、間隔を安定させ、レイアウトのシフトを防ぎます。

リフローは、行が追加または削除されたときにテキストがどのように移動するかを制御します。 適切な設定は、テキストが他の素材と重なるのを防ぎます。

• テキストボックスを長い行に十分な幅に保ちます。
• 必要に応じて拡張できるように、テキストボックスの間にスペースを空けてください。
• グループ化する前に、CmdまたはCtrl + Shift + Jを使用してテキストボックスの幅を一致させます。

グループ化は、関連要素がレイアウト変更中に単一のユニットとして動作することを保証します。

次のようなアイテムをグループ化します。

• 見出しと小見出し
• アイコンとそれぞれのテキストラベル
• 1つのブロックを形成する装飾的な要素

グループ化を避ける:

• 単独で移動する必要がある要素
• レイアウトの無関係なセクション

アンカーは、テキストが編集されたときにテキストが展開される場所を制御します。 グループ化されたテキスト間でアンカーを一致させると、レイアウトの一貫性が維持されます。

優れたアンカーとはどのようなものでしょうか。

• ヘッドラインが下方に展開
• 中央揃えのタイトルは中央揃えのまま
• 本文のテキストが1つの方向に大きくなります

レイアウトが構築されたら、テンプレートのビジュアルアイデンティティを定義する素材をロックします。

置いた場所と同じ位置にあるはずのアイテムをロックします。

• ロゴ
• 背景の図形や画像
• 装飾的な線やアイコン
• 間隔や構造を定義するレイアウトブロック

位置ロックは、要素を編集可能にしますが、誤って移動されることを防ぎます。 次の場合に役立ちます。

• 画像フレーム
• ボタン
• BIOSや統計などの再利用可能なコンテンツブロック

ロック機能を使用すると、複数のチームメイトが使用していても、テンプレートはそのまま維持されます。

オーバーレイや透明度などのエフェクトはデザインを高めることができますが、過度に複雑なエフェクトは画像の置き換えを困難にする可能性があります。

オーバーレイまたはテクスチャを使用している場合：

• 画像ではなくオーバーレイに透明度を適用する
• 画像をオーバーレイの上に置いておき、簡単に差し替えられるようにします
• 手動での再配置が必要なブレンドは避けてください

シンプルなエフェクトで、テンプレートの柔軟性とメンテナンスが容易になります。

• テキストボックスの間にスペースがあることを確認してください
• 図形内のテキストの周囲にスペースを残す
• すべてのグループ化されたテキストが同じアンカー設定を使用していることを確認する

• 画像を半透明の形の上に重ねる
• 図形ではなく画像に透明度を適用する

これにより、ドラッグアンドドロップで簡単に交換できます。