モジュールとテーマのフィールドのベストプラクティス
フィールドの作成とグループ化が、ユーザーエクスペリエンス（UX）の問題を招く恐れがあります。特にスタイルフィールドの場合、モジュール間でスタイルオプションが類似していることが頻繁にあります。
この問題を理解するには、制作担当者の立場になって考えてみる必要があります。テーマを購入することや、テーマを作成してもらうことを考えてみましょう。テーマには20個のモジュールが含まれているとします。1つのモジュールでコンポーネントの背景を設定すると、フィールドがある状態に整理されます。その後、別のモジュールのコンポーネントの背景を更新する必要が生じたとします。フィールドが別の状態に整理およびラベル付けされます。このテーマ内のモジュールごとにフィールドの整理方法が異なるケースを想像してみてください。
これにより、次のような問題が発生します。
- フィールドの整理方法に一貫性がないため、効率よく作業できず、全体的に作業しにくくなる可能性があります。
- フィールド名の付け方に一貫性がありません。このため、フィールドを１つずつ設定してそのフィールドが何を制御しているのかを確認しなければなりません。
いずれの問題でも効率が低下し、制作担当者にとって操作が快適ではなくなります。
これはルールブックではありませんが、制作担当者に直感的な操作性を提供するためのガイドとしてこのページをご活用ください。
HubSpotには、独自のモジュールと既定のテーマがあります。ベストプラクティスを策定する必要性は、社内でも指摘されていました。そして社内で、スタイルフィールドをモジュールに統合して作業を進めるためのガイドを作成しました。スタイル設定オプションに関する整理基準の参考として、その一部を公開します。
このガイドでは、主にデザインについて言及し、当社の他のドキュメントでは使われていない用語を用いています。これらの用語を以下に示します。
- コンポーネント：モジュールを構成する最小要素です。画像モジュール内およびテキストモジュール内の画像は、コンポーネントです。同じモジュール内のテキストは、別のコンポーネントです。コンポーネントはデザインに関連する用語であり、HubSpotに固有の技術概念ではありません。コンポーネントは、コンテンツやスタイルを指す場合もあります。
- スタイルまたは装飾関連のコンポーネント：これは、サイト訪問者に対して具体的な内容を伝達しないモジュールの要素を指します。例えば、価格表カードに付ける影の効果などです。これは削除しても、コンテンツの意味は変わりません。
- 切り替え：これは切り替えスイッチとして表示されるブール値フィールドの機能を指します（電灯のスイッチのようなものです）。
- テキスト付き画像モジュール - これは、画像が左右に並んで表示される一般的なデザインを指します。
スタイルフィールドは［スタイル］タブに表示されます。［コンテンツ］タブに表示するモジュールフィールドとは意図的に切り離されています。このように切り離しておくことで、制作担当者にとって分かりやすく、一貫性が確保され、コンテンツの作成がスムーズになります。
- スタイルフィールドは、ウェブサイト訪問者によるコンテンツの理解に必要な内容やコンテキストを伝える目的では使用しないでください。例えば、テキスト付き画像モジュールを使用し、テキストの内容を理解するための画像が必要な場合（または必要となる可能性がある場合）には、スタイルフィールドは使用しないでください。
- 装飾関連の要素およびスタイル要素には、スタイルフィールドを使用します。この例としては、テキストの背景画像があります。境界線や色付きの背景などもこの例に該当します。これらは意味を伝えることがなく、またテキストの内容理解に必須ではありません。
コンテンツフィールドは、何らかの意味を伝えるコンテンツに使用し、スタイルフィールドは外観の制御に使用します。
画像フィールドと背景画像フィールドを検討する場合は、アクセシビリティーの観点から検討します。制作担当者が代替テキストの追加を必要とする場合は、画像フィールドを使用します。
フィールドの整理方法によって、制作担当者が迅速に作業を開始し、変更を加え、作業を完了できるかどうかが左右されます。
- スタイルフィールドのグループ化では、スタイル要素ではなく、スタイルフィールドにより制御されるコンポーネントを基準にまとめます。
- 最上位の重要なフィールドはグループに含めません。
- ネストしていないグループよりも、コンポーネントグループを作成することを心掛けます。後でモジュールに機能を追加する必要が生じた場合に、ページ上のモジュールの全てのインスタンスを手動で更新しなければ、モジュールをグループに移動できなくなるためです。
- サイトの保守を担当する制作担当者の多くが使用する第一（プライマリー）言語に基づくコンポーネントの表示順序で、フィールドグループを並べます。例：英語を読む順序は左から右、上から下です。サイトの保守担当者が右から左に読む言語を使用している場合は、右から左の順にします。不明な場合は、サイトのコンテンツの第一言語に基づいて決定します。
- スタイルフィールドは、スタイルフィールドが制御するコンポーネントのグループに含める必要があります。
例：カードモジュール。
スタイルパネルでは、カードでスタイル設定可能なコンポーネントに基づいてモジュールフィールドが3つのグループに分けられています。
- アイコン
- ボタン
- カード
アイコンの色フィールドは「アイコン」グループに含めます。ボタンの背景色の色フィールドとテキスト色の色フィールドは、「ボタン」グループに配置します。
カードを表示すると、アイコンが最初に表示され、その後にテキストとボタンが表示されます。アイコングループとそのスタイル設定オプションは、ボタングループとそのスタイル設定オプションよりも前に表示されます。
必須フィールドは、モジュールを表示するためには設定が不可欠なフィールドです。
- 値を設定しないとモジュールが機能しなくなる場合にのみ、フィールド値の指定を必須にします。
- 必須フィールドが必要な場合には、可能な限り既定値を指定します。
例：画像カルーセル
同時または「ページ」あたりのスライド表示数を設定できる画像カルーセルモジュールを作成するとします。最小値として1が必要になるので、値が指定されていない場合には画像カルーセルをどう表示するかが不明です。このような状況で、値を必須にし、既定値として1または2を設定することが適切です。
リッチ テキスト フィールド内ではタイポグラフィースタイルを制御できるので、コンテンツのタイポブラフィーを制御するために特定のスタイルフィールドを追加する必要がありません。例外として、同一モジュール内で複数のコンテンツに適用するタイポグラフィースタイルの指定が必要になる場合があります。このような状況では、フォントフィールドと色フィールドを提供することで、制作担当者の作業を効率化できることがあります。また、リッチ テキスト フィールドのタイポグラフィーコントロールからスタイルフィールドを変更できるようにすることも適切です。スタイルフィールドによってリッチ テキスト フィールドを制御する場合、制作担当者向けにヘルプテキストを設定しておくと効果的です。
リッチ テキスト フィールドでは、タイポグラフィーとパーソナライゼーションを細かく制御できるとともに、スタイルを適用する文字の範囲を選択できます。可能な場合はテキストフィールドとフォントフィールドを組み合わせるよりも、リッチ テキスト フィールドを使用することをお勧めします。
フィールドは本来、提供するさまざまな制御での利用を対象としています。フィールドタイプとフィールド表示設定によっては、具体的な用途に適している場合があります。
ブール値フィールドには2つの表示スタイルがあります。切り替えとチェックボックスです。
切り替えは、デザインやレイアウトの大きな変化をフィールドで制御する場合に最適です。電灯スイッチのようにオン／オフを切り替える状況をイメージしてみてください。例えば、モジュール内のカードのレイアウトを縦長から横長に変える場合などです。
チェックボックスは、ブール値フィールドの影響範囲がそれほど大きくない状況に最適です。例えば特集ブログ記事モジュール内で、ブログ記事の公開日の非表示と非表示を切り替える場合などです。
貴重なご意見をありがとうございました。