デモに左右されないテンプレート選定：6ステップのメモ

概要

あなたの上司はデモからEコマーステンプレートを選んだが、それがコンバージョンにつながらないことをあなたは知っている。好みについて議論する代わりに、候補を6つのステップで評価し、最終的に1ページの決定メモにまとめることができる。このプロセスは、まず職務記述書を書き、次にデモを自分のコンテンツで再構築し、実際の速度とモバイルでの挙動を測定し、カスタマイズコストを評価し、トレードオフを平易な言葉の表にまとめる。その結果、CSSを理解していない非技術者の上司でも承認できるドキュメントができる。見た目で争うのをやめ、証拠を比較し始めるのだ。この記事では、各ステップを具体的なマイクロ例と注意点とともに説明する。無料テーマがめったに無料でない理由や、デモの速度が架空である理由も含まれる。

上司は片方のタブでデモを開き、もう片方でSlackを開いている。それは、フルブリードのヒーロービデオ、プレスロゴのマーキー、緊迫感のあるセールまでのカウントダウンバーがあるホームページだ。上司は「これだ」とタイプする。あなたはコンバージョン重視のレイアウトを3日間比較してきたのに、「そのデザインはモバイルのコンバージョンを損なう」と言おうとしている。しかし、「実は」で始まる文は人の心を変えないと学んできた。心を変えるのは、自分の仕事を示すフレームワークだ。

これが、私がテンプレートの決定を好みの問題から決定メモに変えるために使ってきた6ステップの方法だ。数時間かかり、非技術者の上司が屈服した気分にならずに承認できる成果物を生み出す。

1. デモを開く前に、職務記述書を書く。

原則：テンプレートが何をするために雇われるのかを理解するまで、評価はできない。上司のデモには仕事がある。有名ブランドに見えることだ。あなたのウェブサイトには仕事がある。リピーターの顧客を「これが必要」から「購入した」までできるだけ早く導くことだ。

だから、単一のテーマを開く前に、ストアの中心的なシナリオについて短い段落を書く。革製品を扱うブティックなら、こうかもしれない。「スマートフォンで、自分の欲しいものが分かっている顧客が、スクロールせずに商品価格とカートに追加ボタンを見られること。その瞬間からチェックアウトまでの経路は1分未満であること、そして商品ページと支払い画面の間に何もポップアップしないこと。」これはテスト可能な記述だ。次に、収益の大部分を占める3つか4つのアクションをリストアップする。検索から商品へ、商品からチェックアウトへ、そして季節の買い物客のための「コレクション別に購入」もかもしれない。

注意点：職務記述書に視覚的な好みを入れてはいけない。色、フォント、画像のトリミングは変更可能だ。CSSでどれだけ上書きできるかには驚かされる。行動と制約に限定しよう。速度、モバイルでの可視性、ナビゲーションの深さ、チェックアウトのステップ。上司が「大きな画像が好きだ」と言ったら、「大きな画像を維持しつつ職務記述書を満たすことはできます。ただし、カートに追加ボタンが最初の画面に残る場合に限ります」と答えられる。あなたは上司の好みを拒否しているのではなく、ストアの実際のニーズに照らしてテストしているのだ。

2. デモを自分のコンテンツで再構築する。

ベンダーのデモは、プロの商品写真、正確な幅の見出し、テーマ作成者によって書かれたコピーで演出されている。あなたの商品は画像の比率が異なり、商品タイトルは文章になり、「約」ページはサステナビリティについての3つの段落になる。デモではそのすべてが隠れてしまう。

そこで、テンプレートをステージング環境に取り込み、実際のコンテンツに差し替える。サンプルのフィクスチャではなく、実際の商品を、実際の名前と実際の説明の段落とともに。次に、重要な3つの瞬間をテストする。375ピクセル幅の画面での商品ページ、長いカテゴリ名での検索結果、実際の決済ゲートウェイを使ったチェックアウトだ。例えば、手作りの陶器マグカップを販売するストアでは、デモの商品画像は白い背景で撮影されているが、自分の写真は賑やかな工房の背景がある。テーマの暗いオーバーレイでマグカップが見えなくなってしまう。これは自分のコンテンツでしか気づけない類のことだ。

これは、テンプレートデモの監査の中核だ。マーケティングをチェックするのであって、テーマをチェックするのではない。見出しが3行に折り返され、「カートに追加」ボタンを押し下げるなら、デモがどんなによく見えても、それは危険信号だ。

3. デモが表示しないものを測定する。

デモはテーマ開発者の最適化されたサーバーで実行される。あなたのサイトは、自分のホスト、プラグイン、アナリティクススクリプト、放棄カートアプリで実行される。だからデモの読み込み速度は基本的に架空なのだ。

実際の在庫でステージングサイトを構築し、2つのテストを実行する。まず高速なデスクトップ接続、次にキャッシュをクリアした実機の4Gで。ページが使えるようになるまでの時間を見る。単に読み込まれたように見える時ではなく。多くのテーマは見出しを即座にレンダリングするが、スライダースクリプトが読み込まれる間にレイアウトを2秒間ブロックする。これはスマートフォンでは本当に問題だ。また、スマートフォンでチェックアウトを一通り試す。洗練されたテーマの中には、デスクトップでは問題なく見えても、モバイルのチェックアウトを5画面のスライドショーにしてしまうものがある。住所の前にプロモーションコードを尋ね、支払いボタンの後に配送料の見積もりを表示する。ここで役立つのがmobile-firstチェックリストだ。親指の届く範囲、タップターゲット、「続行」ボタンがスクロールせずに見えるかどうかを確認することを強制する。

テーマ自身のスピードレポートを信じたくなるかもしれない。信じてはいけない。テーマのデモページはCDNとキャッシュで配信され、テーマのスピードバッジは通常、理想的な状態で撮影されたスクリーンショットだ。あなたの環境は異なる。それでいい。テストはあなたの環境についてのものだ。

4. カスタマイズコストを評価し、「無料」について正直になる。

ここで反論すべき前提がある。無料テーマはより安い、というものだ。それらはめったに無料ではない。なぜなら開発者の時間で支払うからだ。無料テーマはオプションパネルが限られているかもしれず、ブランドの微調整（ヘッダーの調整、ヒーローの交換、バッジの追加）には毎回CSSオーバーライドか子テーマが必要で、それぞれ開発者の請求時間1時間を意味する。良いオプションパネルを備えた有料テーマは、カスタムコードの依頼を一度回避するだけで元が取れる。

しかし、その逆も真実だ。ページビルダーがバンドルされた有料テーマは、リーンな無料テーマよりも遅く、メンテナンスが難しいことがある。実際のコストはライセンス価格ではなく、「デモがするもの」と「あなたのブランドが必要とするもの」の差だ。実際に行うであろう変更を数えよう。ロゴ、ヘッダーレイアウト、タイポグラフィ、商品グリッド、フッター、トラストバッジ。テーマのオプションパネルが8つのうち5つをカバーしていれば、あなたは先行している。2つだけなら、テーマではなくプロジェクトを買っていることになる。これは、間違ったテンプレートを選ぶ隠れたコストの一部だ。価格タグは始まりに過ぎない。

5. 上司が見えるところでトレードオフを提示する。

表は100回のやり取りに値する。それによって会話が「これが好き」から「この選択のコストはこれだ」に変わるからだ。2つの最終候補を比較するときは、これをプリントアウトする（またはSlackに貼り付ける）。

デモが示すもの	あなたが検証する必要があるもの
ヒーロービデオが即座に再生される	モバイルデータで自動再生されるか、それとも誰もタップしない再生ボタン付きの静止画像になるか？
商品画像がプレミアムに見える	あなたの商品画像は、商品がフレームから外れずにトリミングに収まるか？
ナビゲーションがスムーズ	実機で、メニューは片手の親指で届くか、それとも両手の蘭のストレッチが必要か？
ページの読み込みが速い	ベンダーではなく、自分のホストでスピードテストを実行する。
チェックアウトが美しい	実際のテスト注文を完了する。タップ数とスクロール量を記録する。

上司は、いくつかのデモが販売ではなく感情をコンバージョンすることに気づくだろう。表はそれらの感情をチェックボックスに変える。

6. 議論を終わらせる1ページの決定メモを書く。

最終ステップは監査を決定に変える。1ページに、平易な言葉で。推奨事項から始め、次に3つの証拠を示す。モバイルテスト、スピードテスト、カスタマイズ見積もり。次に、受け入れるトレードオフを述べる。例えば「アニメーションするカートアイコンは失いますが、スマートフォンでのチェックアウトが短くなります」。最後に次のステップを書く。ローンチ後に調整する点と、それをどう測定するか。

メモは販売ドキュメントだ。あなたは上司に、自分のマネージャーに弁護できる決定を売り込んでいる。すべてのポイントをビジネス用語で表現する。「iPhone SEではカートに追加ボタンがスクロールしないと見えない」ではなく、「最も一般的なスマートフォンのサイズでは、顧客は商品を追加するためにスクロールする必要があり、離脱の可能性が高まります」と書く。「テーマはJavaScriptを多用している」ではなく、「4Gでのページ読み込みに時間がかかり、遅いページはコンバージョンの低下と関連しています」と書く。「次のステップ」セクションを省略しないこと。それは上司に、あなたが恒久的なものにサインオフしているのではなく、ローンチ後の調整を含むプロセスを開始していることを安心させる。

テンプレートの機能セットをコンバージョン目標にマッチさせる方法をより深く知りたいなら、このコンバージョンするテンプレートを選ぶガイドが機能ごとの詳細を解説している。

フレームワークこそが要点であり、結論ではない。

デモは常にやってくる。新しいトレンド、より派手なアニメーション、上司のいとこのサイト。毎回議論する代わりに、候補を同じ6つのステップに通す。デモはその瞬間に勝つかもしれないが、メモは会議に勝つ。そして次に決定が必要なとき、あなたにはストーリーがどんなに良く聞こえても関係ないプロセスがある。