B2C Commerce ストアフロントの設計
学習の目的
この単元を完了すると、次のことができるようになります。
- ストアフロント設計に Commerce Cloud Storefront Reference Architecture の注釈付きワイヤーフレームを使用する。
- B2C Commerce 特有の設計フェーズのタスクを理解する。
ストアフロントの設計
次に停車するのは、設計駅という風光明媚な場所です。ここで、ファンクショナルアーキテクトの Mindy とテクニカルソリューションデザイナーの Alex と UX デザイナーが下車します。田園風景にたたずむ隠れ家的な設計施設に直行し、素晴らしい e コマースの制作に取り組みます。
設計フェーズでは Alex がまず、プロジェクト SOW をレビューし、プロジェクトの範囲に対する全員の理解が一致していることを確認します。Alex が SOW のレビューを飛ばすことはありません。Alex にとって SOW をチェックすることは、プロジェクト特急の悪夢である脱線、つまりプロジェクトの範囲がなし崩し的に変容することを回避するためのおまじないのようなものです。
ワイヤーフレームの作成
ディスカバリーフェーズで、Mindy が HLD のサンプルを使用してサイトのカスタム機能を特定しました。設計フェーズでは、Alex が Commerce Cloud Storefront Reference Architecture (SFRA) というよく似たツールを使います。参照アーキテクチャは、フル機能の買い物カゴ、注文手続き、設計ワイヤーフレームを備えた e コマースの Web サイトです。
SFRA ワイヤーフレームは Web ページの設計図で、B2C Commerce に標準搭載されている機能を記録します。従来のワイヤーフレームとはやや異なり、ページ要素、レイアウト、機能を説明する注釈を付けるという工夫が凝らされています。
Mindy がプロジェクト HLD ドキュメントに指定した NTO の機能リストを、UX チームが SFRA ワイヤーフレームと比較します。この目的は、HLD にあって SFRA ワイヤーフレームにはない機能を見つけることです。HLD ドキュメントに記載され、SFRA ワイヤーフレームにない機能はカスタマイズです。UX チームはすべてのカスタマイズにワイヤーフレームを作成する必要があります。
同チームがカスタムワイヤーフレームを次々制作していく傍らで、Mindy と Alex は実装上問題のある設計や SFRA の標準機能に問題を引き起こす設計を除外していきます。また、障害のあるサイトユーザーに対応する設計にも取り組むようチームに指示します。プラスαを施した設計と完全なワイヤーフレームによって、どのユーザーにとっても優れたサイトになります。
ワイヤーフレームのレビュー
Mindy らが列車に戻り、ワイヤーフレームを NTO に披露する準備が整ったことを満足げにあなたに伝えます。顧客とのレビューミーティングの前に、プロジェクト SOW の範囲で、あなたと NTO が合意したワイヤーフレームの修正回数を確認します。ミーティングでは、顧客の期待を見極め、合意した回数を超えて修正を行う場合は変更注文になることを申し伝えます。費用が発生しないものを含め、すべての変更を記録して、プロジェクトの完全な記録を保持しておくとよいでしょう。
Mindy も設計レビューミーティングに同席し、カスタマイズに伴う副次的影響や妥協点を NTO にわかりやすく説明します。たとえば、NTO のある機能要求に応じるためには、Business Manager のツールを多少調整する必要があります。ツールの変更に対する NTO の承認を取り付け、ツールの更新を変更注文に記録して、設計レビューを続けます。
「ヘー」とか「ホー」とかいった感嘆の声を何度か上げた後で、NTO はワイヤーフレームと変更注文に対するサインオフを快諾します。これでチームはビジュアルデザインに進むことができます。
ビジュアルデザインの作成とレビュー
SOW、プロジェクト計画、ワイヤーフレームと精力的に取り組んできた後で、ビジュアルデザインはちょうどよい気分転換になります。デザイナーの最初のタスクは、ワイヤーフレームに目を通し、それぞれにページタイプを割り当てることです。たとえば、商品の詳細を表示するすべてのページに、商品ページタイプを割り当てます。デザイナーが、各ページタイプに 1 つずつデザイン構図を作成していきます。デザイン構図は NTO のブランドデザインを適用して制作します (単に構図ともいいます)。構図には Go-Live のデザインが反映されます。
Mindy がデザイナーの作業全般をとりまとめ、すべてのデザイン要素がドキュメントに記録されている要件に適合していること、Salesforce プラットフォームの機能を最大限に活用していること、そして拡張性が高いことを確認して指示します。
画像と動画
デザイナーは「百聞は一見にしかず」と、注目度を高める画像を積極的にサイトに追加します。画像をはじめとするクリエイティブアセットを提供し管理するのは NTO 側の責任です。あなたの職務は、この準備を行う NTO をサポートすることです。あなたと Alex はクリエイティブアセットの打ち合わせのために NTO に出向きます。
ミーティングで Alex と NTO のチームが、B2C Commerce の画像と動画の標準サポートで、NTO の技術的要件が満たされるかどうかを判断します。画像サポートについては、B2C Commerce が Dynamic Imaging Service (動的イメージングサービス: DIS) というサービスを提供します。DIS は画像をすばやく変換する強力な機能で、顧客のサイトに示される画像の拡大縮小、サイズ変更、トリミング、オーバーレイ、フォーマットの変更を動的に実行します。顧客の大半は、Salesforce B2C Commerce プラットフォームサービス契約に DIS が付属しています。NTO のプロジェクトマネージャーも自社の契約に DIS が付属していることを確認します。そしてチームは、NTO の商品カタログの画像には DIS で何ら問題ないと判断します。このサービスが適していないプロジェクトでは、Alex、そして顧客がサードパーティのソリューションを見つけて組み込みます。ストアフロントのビジュアルデザインには商品の動画も追加されますが、B2C Commerce は動画ホスティングを提供していません。NTO がサードパーティの動画ホスティングソリューションを見つけるのを Alex が手伝います。
デバイスに対応するデザイン
あなたが列車に戻ると、チームがデバイスへの対応力が高いデザインについて話しているのが聞こえてきました。すべてのデザイン構図で、デスクトップ、タブレット、モバイルのブレークポイントをどうするかです。メニューの動作、クリック発信のサポート、その他の機能について、モバイル固有の要件を書き出しています。皆の真摯な取り組みのお陰で、ストアフロントデザインがすべてのデバイスに対応するものになります。
ワイヤーフレームとビジュアルデザインの準備が整ったところで、設計フェーズが終了します。次の駅に着くまで少し休憩しましょう。
設計の成果物
- ビジュアルデザイン
- カスタマイズのワイヤーフレーム