説明
外部カスタマーサポートサイトのテーマをスタイルガイドの要件に合わせてカスタマイズするには、エクスペリエンスビルダーのテーマパネルを設定することをお勧めします。テーマパネルでは、デザイナーがロゴ、色、フォント、その他のブランド要素を設定することで、サイトの外観をカスタマイズできます。また、デザイナーはカスタムテーマを作成し、それを異なるページやオーディエンスに割り当てることもできます。テーマパネルは、コードを記述したりスタイルを上書きしたりすることなく、サイト全体に一貫したブランドを適用するための最適な方法です。参考資料：テーマパネル | Salesforceヘルプ：UXデザイナー認定試験対策
Experience Builder を使ったデザイン | Trailhead

レスポンシブデザインとは、ウェブページを様々な画面サイズや解像度に適応させ、あらゆるデバイスで優れたユーザビリティとユーザーエクスペリエンスを実現することを目的としたウェブデザイン手法です。レスポンシブデザインのベストプラクティスには、以下のようなものがあります。
* ブレークポイントのサイズを指定する：ブレークポイントとは、ビューポートの幅に基づいてウェブページのレイアウトが変化するポイントです。例えば、デスクトップでは2列レイアウト、タブレットでは1列レイアウト、スマートフォンでは縦長レイアウトのウェブページが考えられます。ブレークポイントのサイズを指定することで、デバイスの機能やユーザーの好みに合わせて、柔軟かつ流動的なレイアウトを作成できます。
ブレークポイントは CSS のメディア クエリを使用して指定できます。これにより、幅、高さ、方向、解像度などのメディア機能に応じて異なるスタイルを適用できます。次に例を示します。
@media (max-width: 600px) { /* 600px以下の画面用のスタイル */ }
@media (min-width: 601px) and (max-width: 900px) { /* 601pxから900pxの画面のスタイル
900ピクセル */ }
@media (min-width: 901px) { /* 901px以上の画面用のスタイル */ }
* ページ重量を最小限に抑える: ページ重量とは、Web ページがブラウザーに読み込むために転送するデータの量です。
これには、HTML、CSS、JavaScript、画像、フォントなど、ウェブページを構成するその他のリソースのサイズが含まれます。ページのサイズを最小限に抑えることで、特に帯域幅、バッテリー、処理能力が制限される可能性のあるモバイルデバイスにおいて、ウェブページのパフォーマンス、速度、ユーザー満足度を向上させることができます。ページのサイズを最小限に抑える方法には、以下のようなものがあります。
* 画像の最適化：画像はページサイズを大きく左右することが多いため、Web向けに最適化することが重要です。つまり、各画像に適切なフォーマット、サイズ、解像度、圧縮レベルを選択するだけでなく、srcset属性やsizes属性などのレスポンシブ画像技術を活用して、各デバイスや画面サイズに最適な画像を表示する必要があります。
* キャッシュを実装する：キャッシュとは、ウェブページまたはそのリソースのコピーをブラウザまたはサーバーに保存し、再度ダウンロードすることなく再利用できるようにする技術です。これにより、転送する必要があるデータの量が削減され、ウェブページの読み込み時間が短縮されます。キャッシュは、Cache-ControlやExpiresなどのHTTPヘッダーを使用するか、バックグラウンドで実行されネットワークリクエストをインターセプトするスクリプトであるサービスワーカーを使用して実装できます。
* ファイルの縮小と連結：縮小とは、HTML、CSS、JavaScriptなどのコードファイルから、空白、コメント、書式設定などの不要な文字を削除してファイルサイズを縮小するプロセスです。連結とは、複数のコードファイルを1つにまとめ、ブラウザが実行する必要があるHTTPリクエストの数を減らすプロセスです。縮小と連結はどちらも、ページの軽量化とウェブページのパフォーマンス向上に役立ちます。
* コンテンツ配信ネットワーク（CDN）を使用する：CDNとは、複数の場所や地域に分散されたサーバーのネットワークで、ウェブページまたはそのリソースのコピーを保存し、ユーザーに配信します。CDNは、ユーザーに最も近いサーバーからコンテンツを提供することで、ページのデータ量を軽減し、ウェブページの速度を向上させるのに役立ちます。これにより、レイテンシと帯域幅の消費が削減されます。
デバイスごとに別々のURLを使用する方法とポップアップウィンドウを利用する方法の2つは、ユーザーにとって使い勝手やアクセシビリティに問題が生じる可能性があるため、レスポンシブデザインのベストプラクティスとは見なされません。デバイスごとに別々のURLを使用するということは、デスクトップ用にはexample.com、モバイル用にはm.example.com、タブレット用にはt.example.comといったように、デバイスごとに異なるバージョンのWebページを作成することを意味します。このアプローチは、一貫性がなく断片化されたユーザーエクスペリエンス、重複コンテンツ、SEOの問題につながる可能性があります。ポップアップウィンドウを利用するということは、現在のWebページの上に新しいブラウザウィンドウを作成し、通常は広告、通知、フォームを表示することを意味します。このアプローチはユーザーにとって煩わしく、邪魔になるだけでなく、小さな画面では閉じたり操作したりするのが困難になる可能性があります。
参考資料：レスポンシブデザイン：ベストプラクティスと考慮事項 | Toptal、レスポンシブデザイン - ウェブ開発を学ぶ | MDN、2023年版レスポンシブウェブデザイン初心者ガイド - Kinsta、レスポンシブデザインのベストプラクティス。Nick Babich著 - UX Planet

説明
Cloud Kicks の UX デザイナーが、ウェブサイトのサイズとコンテンツを画面サイズ、プラットフォーム、および向きに合わせて調整するために使用する必要があるデザインは、レスポンシブです。レスポンシブ ウェブ デザインは、HTML と CSS を使用してウェブサイトのサイズを自動的に変更、非表示、縮小、または拡大し、あらゆるデバイス (デスクトップ、タブレット、スマートフォン) で適切に表示されるようにするウェブ デザイン手法です。1. レスポンシブ ウェブ デザインはプログラムや JavaScript ではなく、メディア クエリ、柔軟なグリッド、可変画像、ブレークポイントを使用して、コンテンツの表示に使用されるあらゆるデバイスに対応できるレイアウトを作成する一連のベスト プラクティスです。2. レスポンシブ ウェブ デザインは、Salesforce ユーザー エクスペリエンス デザイナー認定の学習目標の 1 つです。3. 参考資料: [レスポンシブ ウェブ デザイン入門]、[レスポンシブ デザイン - ウェブ開発の学習]、[Salesforce 認定ユーザー エクスペリエンス デザイナー試験ガイド] https://www.w3schools.com/html/html_responsive.asp
https://www.w3schools.com/Css/css_rwd_intro.asp

説明
これら3つの方法は、すぐに使えるスタイルとコンポーネントのみに注力するという厳しい要件を持つ顧客に、ブランド化されたエクスペリエンスを提供します。これらはすべて、ドラッグ＆ドロップインターフェースを備えたビルダーツールの機能です。ビルダーツールは、コーディングなしでウェブサイトを作成およびカスタマイズできます。これらの方法を使用することで、UXデザイナーは顧客のサイトに一貫性のある魅力的なビジュアルアイデンティティを構築し、ブランドの価値と個性をアピールすることができます。
フッターを選択し、表示するソーシャルメディアリンクを設定します。フッターはウェブページの下部にあるセクションで、通常、連絡先情報、利用規約、プライバシーポリシー、ソーシャルメディアリンクなどの情報が表示されます。ビルダーライブラリからフッターコンポーネントを選択することで、UXデザイナーは顧客がサイトに表示したいソーシャルメディアリンクを簡単に追加・設定できます。これにより、顧客はオーディエンスとのつながりを築き、ブランド認知度を高め、ソーシャルメディアプラットフォームへのトラフィックを促進することができます。
テーマを選択し、コピーや画像などのコンテンツをカスタマイズ：テーマとは、色、フォント、レイアウトなどのデザイン要素を事前に定義したセットで、ウェブサイトに適用することで、一貫性のあるプロフェッショナルな外観を実現できます。ビルダーライブラリからテーマを選択することで、UXデザイナーは顧客のブランドアイデンティティと好みに合ったサイトを迅速に作成できます。また、UXデザイナーは、コピーや画像などのサイトコンテンツをカスタマイズすることで、顧客のターゲットオーディエンスにとってより関連性が高く魅力的なサイトにすることができます。
テーマエディターを使用して、フォント、大文字/小文字、色、サイトロゴを調整します。テーマエディターはビルダーツールの機能で、フォント、大文字/小文字、色、サイトロゴなど、さまざまなデザイン要素を調整することで、サイトの外観を微調整できます。テーマエディターを使用することで、UXデザイナーは顧客のブランドの個性とスタイルを反映したサイトを作成し、サイトの読みやすさと使いやすさを向上させることができます。また、UXデザイナーは、ブランド名やシンボルをグラフィカルに表現した顧客のサイトロゴをアップロードすることで、ブランドの認知度と信頼性を高めることができます。
参考文献:
ビルダーの概要
ビルダーでサイトを作成する
テーマエディターでサイトをカスタマイズする