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

WEBデザイナー・マーケター_6ヶ月間の振り返り

入社して早半年。

デザイナーとして働いた経験はあるものの、「WEB」デザイナーとして働くのは今回が初。

マーケターに至っては、就業経験はおろか、スクールなどに通い専門的に学んだ経験もなし。

プロの世界でやっていくには、あまりにも貧弱な武器しか持ち合わせてない状態。

それは、もう…色々ありました… ということで振り返り。

 

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

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

メインの仕事は「保守(※)」。

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

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

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

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

 

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

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

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

 

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

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

 

例えば下記の様な・・・

 

保守性と可読性に難(なん)がある。

手渡し

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

自分が書いたコード
先輩
…同じスタイルが連続してるし、クラス名から用途が推測しにくい。
先輩
なので、CSSの「継承」を使って、スタイルを修正すべき。例えばこんな風に・・・

 

カチャカチャカチャ・・・

 

ッターンッ!!

 

先輩が書いたコード

ぼく
…綺麗だッ!!!

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

 

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

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

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

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

 

 

マーケターとしての仕事

サイトを分析

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

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

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

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

 

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

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

 

逆張りの手法。

下手な鉄砲も数うちゃあたる作戦

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

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

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

 

ABテスト

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

ABテストの解説

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

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

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

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

どうするのか…?

↓こうするんです。

ABテスト(JSで振り分け)

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

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

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

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

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

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


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

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

今回行ったABテストの内容

 

よって・・・


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

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

参考サイト

 

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

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

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

 

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

AとBどちらが優れているのか

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

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

ぼく
えっ!!!?

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

 

意味が分からない

なにそれ…?

 

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

 

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

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

参考サイト

↓カイ二乗検定について


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

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

これらの検定を行うと、ABテストの結果が信頼に値するか否か「パーセンテージ」で表示されます。

信頼性が高い場合は、テストの結果が単なる誤差ではなく、しっかりと「差」がでているということですので、この時点でテストを終了させても問題ありません。

逆に信頼性が低い場合は、テストを継続する必要があります。

ABテストはここまでやって、終了となります。

以前のぼくでしたら、検定をやらず、結果の数字だけで「優劣」を判断してたでしょう。

自分ひとりで学んでたら確実に行きつかなった情報。こういった機会に携われるチャンスを頂けるのは有難いですね。

大きな収穫でした。

 

強調スニペット

強調スニペットとは、質問文で検索した時に、回答が検索結果の上部に目立つ形で表示される仕組みのことです。

強調スニペット

これだけ目立つ形で掲載される上、リンク付きのページタイトルも合わせて表示されるので、クリック率は当然高まります。

しかも、広告費は一切かかりません。

 

これを実施するきっかけは社長指示によるもの。曰く・・・

社長
「○○○○とは」というキーワードで競合他社に強調スニペットを奪われているから奪取する様に!!!

 と、ぼくが所属する課に直接依頼がありました。

 

「強調スニペット」に関して、知ってはいたものの、どうやって表示させるかは分からない為、リサーチ。

要点をまとめると・・・


  • 対象のキーワードで検索した時に、自社サイトが検索結果の10位以内に表示されている必要がある。
  • 検索結果に表示されたウェブページ内に強調スニペットとして取り上げられる形式の記述があること。
  • 記述内容は、150文字程度のまとまった文章。
  • 文章の冒頭は「○○○○とは」と、検索キーワードと同じ出だしにする必要がある。

これらの点を踏まえ、対象のサイトを修正。

ぶっちゃけ・・・

ぼく
こんなんでほんまに表示させれるん??

と半信半疑でしたが、数日経って確認してみると・・・

強調スニペットを確認

ぼく
載ってるー!!!

予想に反して何なく奪取できました。(今は、競合他社に再び巻き返されました。なので、コンテンツを強化し、デッドヒートを繰り広げる予定です。)

 

もし自社のサイト(もしくは取引先の会社)が何らかのサービスを展開していて、そのサービスに関連性のあるキーワードで検索結果10位以内に入っているのであれば、強調スニペットを狙わない理由はありません。

要点をTwitterの文字数程度にまとめるだけで、サイト上部にどーんと目立つ形で表示してくれるので、これほどコスパの良い対策は無いですね。

 

まとめ

この半年で大きかった出来事は「ABテスト」の実施。

PDCAサイクル

ぶっちゃけ”コレ”さえできれば、WEBサイトの「PDCA」サイクルを無限に回し続ける事が可能です。

 

今回「ABテスト」を実施して思ったのは、「ちょっと表記を変えるだけで、コンバージョン(以下CV)にこれほど影響があるのか…」ということ。

 

例えば、下記の例でいくと、違いはボタンの色だけです。

AとBの違いはボタンの色だけ

たったこれだけの差でも、クリック率には大きな影響を与えます。

「サイトA」のボタンがクリック率10%に対し、「サイトB」は5%だとしたら・・・

お申し込みフォームに訪れる人は「倍」違います。(そこからCVに繋がるかどうかはまた別の話)

1日の売上額でみたら微々たる差かもしれませんが、それが1ヶ月、1年と続いていくと、その差は凄まじいことになってるでしょう。

 

ぼくが今もっとも興味あることがまさにコレ。

ぼく
どういったデザイン(文言・画像・要素の配置)が最も刺さるか(CVに繋がるか)を突き詰めていきたい。

こんな感じで。次の振り返りは半年後。

下半期の主な仕事が「WEB改善」に決まった為、今よりもっと「何が刺さるのか」の知見が得れそうです。楽しみで仕方ない!

実地で学べる上、お給料もいただける。しかもこの技術の汎用性は高いときてる。

WEB屋は最高ですね。(最近忙しくて自分の時間が確保しずらくなってきてるけど…)