【WEBデザイナー・マーケター】入社して半年を振り返る。知って、学んで、得た知識について。

WEBデザイナーとしての仕事

メインの仕事は「保守（※）」。

MEMO

※既存サイトの文字修正・画像の差し替えなど。要はサイトの更新・修正業務です。

以前「【WEBデザイナー1年目】求められるスキルは？入社前に押さえておくべきポイント」という記事を書きましたが、大まかな作業内容は、この時からさほど変化はしていません。

サイト改修に伴う”ビジュアルイメージ”を作ることもありますが、どちらかというと既存のソースコードをいじる割合の方が多いです。

デザイン < コーディングって感じですね。

そして、ぼくがこちらの分野（コーディング）に関して持ち合わせているスキルは、「職業訓練校」と「Progate」で得た知識のみ。

対して、先輩方はというと、ゴリッゴリッの制作会社に何十年も勤めていた方達ばかり。

ぼく

「終電で帰る」がデフォ。休日出勤も当たり前。何なら徹夜作業も。そういった環境（戦場）で鍛えられた猛者達がぼくの先輩です。

そんな先輩方にペラッペラな知識しか持ち合わせていない、ぼくが書いたコードをチェックしてもらう訳です。

「99%」は指摘が入るよね (╥_╥);

例えば下記の様な・・・

保守性と可読性に難（なん）がある。

ぼく

先輩、コードのチェックをお願いします！

先輩

…同じスタイルが連続してるし、クラス名から用途が推測しにくい。

先輩

なので、CSSの「継承」を使って、スタイルを修正すべき。例えばこんな風に・・・

ぼく

…綺麗だッ！！！

先輩

保守負担の増大・適当なコードで書いても良い…という連鎖を防ぐ為、無駄なコードは書かないこと。

・・・と、この様にぼくが書くコードは無駄がとても多いです。

対して先輩方のコードは必要最低限。また、クラス名のつけ方にも統一感があるし、どういった用途で使われているかがはっきり分かります。

ここら辺は、指摘いただいた内容を反芻（はんすう）することはもちろん、現サイトにて「どういった要素に対して”継承”を行っているか確認」、「命名規則を真似る」ことで、なるべく同じ轍（てつ）を踏まない様にしています。

ぼく

チェックの度に「何故こうするのか」「こう改善すべき」など、理由付きで模範解答を伝えてくれる先輩には頭が上がりません。”ただただ”感謝です。

新人デザイナーのための Webデザインを基礎から学べる本

¥2,200
(2024/11/21 17:41:09時点 Amazon調べ-詳細)

マーケターとしての仕事

マーケターといっても純粋なマーケターではなく、やってることはどちらかというと”WEBデザイナー寄り”です。

本来は、アナリティクスなどの解析ツールをバリバリ駆使し、サイト内のどういったところに問題があって、どう改善すれば良いかを分析。

その後、仮説を立て、施策に落とし込む…というのがマーケターの仕事だと思うのですが（超ざっくり）・・・

いかんせんアナリティクスの使い方に関しては、素人も同然なんだよね。

よって、サイトの分析ではなく、これまで培ってきたデザイナーとしての経験を活かして、

このような「デザイン・文言」であれば、より効果的ではないか…と案出しを行い、採用されたものを順次試していくという…

逆張りの手法。

言い換えると「下手な鉄砲も数打ちゃ当たる作戦。」

これが、ぼくの”マーケター”としての主な仕事です。（今の所は）

よって、この半年で最もリソースを割いた仕事は「ABテスト」となります。

ABテスト

ABテストの内容は下記の通り。

最初は単純に2つのページ（URL）を用意して、アナリティクス上で半々に振り分けるだけ…と思っていましたが、そうは問屋が卸さない。

なぜなら「A」と「B」を2つのページ（URL）に分けてしまうと、正確な計測ができなくなるから。

ぼく

ブックマークに登録されると片方のURLで登録されてしまう為、「A」と「B」の配分比率が変わってきます。

よって、同じページ（URL）で「A」と「B」を振り分ける必要があります。

どうするのか…？

↓こうするんです。

上述の通り、「JavaScript」で振り分けを行います。

そして、サイト上の見た目に関しては、HTML上で「サイトA」と「サイトB」、2パターンのコードを記述し、こちらもJavaScriptで切り分けを行います。

<!-- <head>内に記述 -->
<script>
    (function(window, document, undefined){
        var pattern;
        if(window.Cookies){
            pattern = Cookies.get('test_name');
        }
        window.AB_TEST = pattern === '0';

      $(function(){
          if(window.AB_TEST){
            //Aパターン表示時に行う処理
              $('#site_a').show();
          }else{
          　//Bパターン表示時に行う処理
              $('#site_b').show();
          }
          });
    })(window, document);
</script>

<!-- <body>内に記述 -->
<div id="site_a" class="hide">
  <span>お申し込みはこちら</span>
</div>
<div id="site_b" class="hide">
  <span>お申し込みはこちら</span>
</div>

/* css側の設定 */  
.hide {
  display: none;
}

(function(window, document, undefined){

var pattern;

if(window.Cookies){

pattern = Cookies.get('test_name');

}

window.AB_TEST = pattern === '0';

$(function(){

if(window.AB_TEST){

//Aパターン表示時に行う処理

$('#site_a').show();

}else{

　//Bパターン表示時に行う処理

$('#site_b').show();

}

});

})(window, document);

</script>

<span>お申し込みはこちら</span>

</div>

<span>お申し込みはこちら</span>

</div>

/* css側の設定 */

.hide {

display: none;

}

簡単に説明すると、「A」と「B」に同じクラス名を付与し、いずれも「display:none;」で非表示に設定します。

そして、JavaScriptで値が「0」の場合は「サイトA」が。そうでない場合は「サイトB」が表示される様、設定します。

ぼく

<head>内に関しては、全体ではなく、一部を抜粋して記述しています。（サイトの見た目を「A」と「B」に切り分けるコードのみ記述）

と、このように、アナリティクス上の設定だけではなく、「HTML・CSS・Javascript」をゴリゴリに書き込む必要があったので、思ってた以上に大変でした。

その他、大変だったことは…

今回ABテストを行った目的は、サービス名につける「副題」は何が適切かを調べる為。

よって・・・

現サービス名での「継続率・契約率・1件あたりの純利益額・売上額」などを算出。（過去5年分のデータを参照）
テストを行う「プラン名」が適切か否か各課・上役に相談後、役職者にプレゼン。
修正内容が申し込みフォームにも及んでいる為、プログラマー側と連携を取り、修正作業を進める。
サイトに訪れた50%のユーザーには、これまでと違うサービス名が表示される。よって、ユーザーに直接対応する課への事前通知。

サイトへの反映作業以外にもやることが多く、とても大変でしたが、サイトの「効果測定」と「改善」には必須な「ABテスト」を一から十まで全体を通して経験できたのは、非常に大きかったです。

参考サイト

Google Developers

ウェブテスト | ウェブ向けアナリティクス（analytics.js） | Google Dev…

ABテスト終了後| Z検定とカイ二乗検定で有意性をチェックする

ABテストを行い、ある程度日にちが経てば、「A」と「B」どちらのサイトが効果的か数字に表れてきます。

ただ、気をつけなくちゃいけないのが、この時点で「優劣」の判断をしないこと。

例えば、売上額にフォーカスを当てた場合、「サイトA」と「サイトB」、どちらが優れているかというと・・・

ぼく

当然「サイトA」っしょ。

先輩

誤差が無いかチェックして。

ぼく

えっ!!!?

先輩

いや、だから本当に「サイトA」の方が優れているのか、単なる誤差なのか「有意性検定」をしないと分からへんやん。

なにそれ…？

先輩

…「Z検定」と「カイ二乗検定」でググって。たぶんツールとかやり方が出てくるから。

これに関しては、完全に理解をしていないのですが（つーか統計学の領域なんで理解できん。）・・・

要はABテストの結果が「偶然」か「必然」かを判断する作業です。

参考サイト

↓カイ二乗検定について

kengos.jp

12 users

そのABテスト正しいですか?

↓A/Bテスト信頼度判定ツール

株式会社真摯 (Cinci)

81 users

A/Bテスト信頼度判定ツール

「A/Bテスト信頼度判定ツール」は、A/Bテスト（スプリットテスト）で得られたデータについて「結果に有意な差が出ているか」「差がないのか、誤差なのか」を判定するためのツールです。