くらしのマーケット開発ブログ

くらしのマーケットを開発する、みんなのマーケットによる技術ブログ

Google Optimiseレポート!どんなデザインの変更ができるのか

はじめに

みんなのマーケットでUI/UXデザイナーをしているミソサクです。

Googleが提供するABテストツール「Google Optimise」を先日初めて使ったので、デザイン的にどんな設定が出来るのかまとめます。「Google Optimiseとは」とか「テストの設定方法」ではなく、見た目をどう変更できるのかに焦点を絞ってます。

テスト設定諸々を飛ばして、いきなりデザインの設定をする「ビジュアルエディタ」に来ます。こんな感じです。

f:id:curama-tech:20180719163539p:plain

「ビジュアルエディタ」で選択できる端末はこちら

  • 標準
  • Nexus7
  • iPad
  • Galaxy S5
  • Nexus5X
  • iPhone5
  • iPhone6
  • iPhone6 Plus
  • レスポンシブ(ベータ版)

※表示を切り替えてもいつまでも表示されない時があるので、再読み込みをするとすぐ切り替わります。

では、早速デザイン的に出来ることをご紹介します。

文字を変える

1. 変更したい要素を選択して「要素を編集」

f:id:curama-tech:20180719163548p:plain

2. 「テキストを編集」か「HTMLを編集」

f:id:curama-tech:20180719163559p:plain

3. 「テキストを編集」の場合、直接テキストを編集し、「完了」

f:id:curama-tech:20180719163852p:plain

3. 「HTMLを編集」の場合、html形式でテキストを編集し、「適用」

f:id:curama-tech:20180719163913p:plain

※ 編集画面を開いて変更する度に保存が必要です、それとは別にページ単位でも保存が必要です。

※ ビジュアルエディタでは変更前との「差分を取る」のではなく、「保存した回数分の変更」が保存されます。

要素を追加する

1. 要素を追加したい箇所の前の(もしくは後の)要素を選択して「要素を編集」

f:id:curama-tech:20180719163548p:plain

2. 「HTMLを挿入」

f:id:curama-tech:20180719163938p:plain

3. HTMLを編集

選択したタグがデフォルトで表示されます

f:id:curama-tech:20180719163952p:plain

4. オプションを選択して「適用」

選択できるオプション

  • 置換・・・そのまんまの意味です
  • 挿入・・・選択した要素内先頭に挿入されます
  • 要素内末尾に追記・・・そのまんまの意味です
  • 次より前・・・とんちみたいだけど単純に選択した要素の前に追加されます
  • 後に挿入・・・そのまんまの意味です

f:id:curama-tech:20180719164005p:plain

要素を削除する

1. 削除したい要素を選択して「要素を編集」

f:id:curama-tech:20180719163548p:plain

2. 「HTMLを編集」

f:id:curama-tech:20180719164028p:plain

3. コードごと削除して「適用」

デフォルトで選択されている「置き換え」以外のオプションを選択すると空のHTML挿入が変更として保存され、要素の削除にはならないのでご注意ください。

f:id:curama-tech:20180719164046p:plain

スタイルを変更する(ページ内の同じ要素全てを変更したい場合)

1. 「< >」アイコンをクリック

f:id:curama-tech:20180719164101p:plain

2 cssを記述して保存

f:id:curama-tech:20180719164119p:plain

スタイルを変更する(ページ内の特定の要素を変更したい場合)

1. 要素を選択してパレットからスタイルを指定して保存

f:id:curama-tech:20180719164133p:plain

パレット内で指定できるスタイル

f:id:curama-tech:20180719164146p:plain

要素の順番を変える

1. 要素をドラッグ&ドロップして保存

なんて簡単。

f:id:curama-tech:20180719164159p:plain

JavaScriptを実行

今回のテストではJavaScriptの変更はなかったので、次回テストする機会があればまたご紹介させていただきます。

さいごに

いかがでしたでしょうか?html、cssの知識がなくてもだいたいのことは出来そうですね!

我々みんなのマーケットテックチームでは「くらしのマーケット」を一緒に作る仲間を募集しています!どんな環境で開発しているかはこちらの記事にまとまっています。興味がある方はぜひ気軽に連絡ください (コーポレートサイト https://www.minma.jp/